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

Garvae · Accepted Answer · 2023-03-29 14:27:07Z

14

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.

edited Mar 29, 2023 at 14:27

answered Mar 29, 2023 at 4:36

Garvae

7271 gold badge7 silver badges15 bronze badges

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

Comments

CPlus · Accepted Answer · 2023-03-29 04:45:30Z

5

Getting by role might be preferred but isn't the only way to query the DOM.

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')

edited Mar 29, 2023 at 4:45

CPlus

5,11048 gold badges33 silver badges77 bronze badges

answered Dec 23, 2021 at 12:35

charliedodds

771 silver badge4 bronze badges

Comments

Hitesh Sahu · Accepted Answer · 2024-10-31 12:18:53Z

0

Complete example

Suppose you have a HeaderComponent

 export const TestIdHeaderComponent = 'headerId";


  <HeaderComponent
      data-testid={TestIdHeaderComponent}
    >
      { "My Awesome Header"}
   </HeaderComponent>

You can test it like this

 const hederComponent = screen.queryByTestId(TestIdHeaderComponent);
    expect(hederComponent).toBeInTheDocument();
    expect(hederComponent?.textContent).toBe("My Awesome Header");

    // or 
    expect(screen.getByTestId(TestIdHeaderComponent).textContent).toBe(
      "My Awesome Header",
    );

answered Oct 31, 2024 at 12:18

Hitesh Sahu

45.6k18 gold badges217 silver badges160 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related