Testing for text broken up by multiple elements in React Testing Library

user_5392997 0
Viewed 5775

I'm having trouble finding the correct way to test a div with text that is broken up by multiple elements - the error says 'Unable to find an element with the text: This could be because the text is broken up by multiple elements' but doesn't explain how to do so.

To explain what I'm trying to test, the element returned in the jest render() fn is as followed:

          <div>
            <div
              class="inventory-wrapper"
            >
              <span>
                5
              </span>
               item
              s
               left
            </div>
          </div>
        </body>

I'm trying to test that the text inside is '5 items left', but as you can see - the text is broken up by a span tag and multiple lines.

From what I understand, I should be targeting this with getByRole() only? Does that mean I need to add a role='...' to the .inventory-wrapper div too? And how would I then test for the text '5 items left'

Any help on the correct wait to target something like this would be very appreciated

react-testing-library jestjs reactjs
1 Answers

Getting by role might be preferred but isn't the only way to query the DOM https://testing-library.com/docs/queries/about/#priority.

I worked around this by adding a test id to the component, querying that and using its text content. Just make sure the test id is passed to the root element in the component.

render(<Component data-testid="component" />)
expect(screen.getByTestId('component').textContent).toBe('Text to test')
user_155841720
Related