How to access text broken by multiple elements in Testing Library

Question

here is my code example

<div class="dropdown" data-testid="dropdown">
  <div class="option" data-testid="option">
   <b>[AF]</b> Afghanistan
  </div>
  <div class="option" data-testid="option">
   <b>[AL]</b> Albania
  </div>
  <div class="option" data-testid="option">
   <b>[DZ]</b> Algeria
  </div>
 </div>

What I need to do is to access the first element by its text to trigger the userEvent.selectOptions

const dropdown = getByTestId('dropdown');
userEvent.selectOptions(dropdown, screen.getByText('[AF] Afghanistan'))

What I get is :

TestingLibraryElementError: Unable to find an element with the text: [AF] Afghanistan. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

It's obviously because the text I'm trying to query is broken by elements.

Please note, that this is not a select/option dropdown and it doesn't have any accessible roles so I can only query it by screen.getByText

Does this answer your question? How to query by text string which contains html tags using React Testing Library? — Rafael Tavares
– Rafael Tavares, Commented Jul 5, 2022 at 15:42

juliomalves · Accepted Answer · 2021-12-03 18:19:40Z

26

getBy* queries accept a TextMatch as an argument, which means the argument can be either a string, a regex, or a function. In this case, we can use a function (rather than a string) and target the specific element we want to select.

Here's a helper function that applies this logic and makes it reusable.

const getByTextContent = (text) => {
    // Passing function to `getByText`
    return screen.getByText((content, element) => {
        const hasText = element => element.textContent === text
        const elementHasText = hasText(element)
        const childrenDontHaveText = Array.from(element?.children || []).every(child => !hasText(child))
        return elementHasText && childrenDontHaveText
  })
}

To quickly explain what's going on: The query will traverse all elements in the DOM, but we want to avoid returning more elements than needed. We make sure that none of the children has the same text as its parent. This ensures that the element we return is the one that actually contains the target text.

The getByTextContent helper function can then be used in your tests as follows.

const dropdown = getByTestId('dropdown');
userEvent.selectOptions(dropdown, getByTextContent('[AF] Afghanistan'))

edited Dec 3, 2021 at 18:19

answered Jul 18, 2021 at 13:50

juliomalves

51.1k23 gold badges180 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lianel Over a year ago

I'm using this and getting the following error TestingLibraryElementError: Unable to find an element with the text: (content, node) => { /* istanbul ignore next */ cov_21pldi4...

Smart Coder Over a year ago

I removed the await method within expect method and it fixed it.

Collectives™ on Stack Overflow

How to access text broken by multiple elements in Testing Library

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related