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

Question

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

Answer 1

it('your test case', () => {
  expect.assertions(1);
  render(<Component/>)
  expect(screen.getByText((_, element) => element.textContent === 'some text')).toBeInTheDocument();
});

where element.textContent returns the text content of the element. Then you can work with it the way you want. You can try to check if it's equal === something or match etc. This is one of few ways to work with multiline text.

P.S. screen is more preferable than getByTestId.