Checking text appears inside an element using react testing library

Question

I'm writing some tests for a React app using Testing Library. I want to check that some text appears, but I need to check it appears in a particular place because I know it already appears somewhere else.

The Testing Library documentation for queries says that the getByText query takes a container parameter, which I guessed lets you search within that container. I tried doing this, with the container and text parameters in the order specified in the docs:

const container = getByTestId('my-test-id');
expect(getByText(container, 'some text')).toBeTruthy();

and I get an error: matcher.test is not a function.

If I put the params the other way round:

const container = getByTestId('my-test-id');
expect(getByText('some text', container)).toBeTruthy();

I get a different error: Found multiple elements with the text: some text

Which means it's not searching inside the specified container.

I think I'm not understanding how getByText works. What am I doing wrong?

You can grab the text with expect(container.textContent).toMatch('some text') — taystack
– taystack, Commented May 3, 2023 at 14:45

Gio Polvara · Accepted Answer · 2022-03-25 21:08:48Z

99

Better to use within for this sort of things:

render(<MyComponent />)
const { getByText } = within(screen.getByTestId('my-test-id'))
expect(getByText('some text')).toBeInTheDocument()

edited Mar 25, 2022 at 21:08

answered Nov 25, 2019 at 8:43

Gio Polvara

27.4k10 gold badges70 silver badges65 bronze badges

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

8 Comments

jacobcan118 Over a year ago

Following up the is s solution as getByText throw out error if text cannt find. Then what is the point to use expect....toBeInTheDocument?

ddblair Over a year ago

@carmine-tambascia, do you have a link to that quote in the docs? I can't seem to find it.

Carmine Tambascia Over a year ago

@ddblair develop.sentry.dev/frontend/using-rtl/….

ddblair Over a year ago

@carmine-tambascia Thank you. Seems it's just a tip for the sake of the developer, though, and nothing more.

ddblair Over a year ago

@carmine-tambascia Also, those are not the React Testing Library docs. The docs can be found here.

|

Seth McClaine · Accepted Answer · 2021-08-23 17:01:59Z

90

Another way to do this

import {render, screen} from '@testing-library/react';

...

  render(<MyComponent />);
  expect(screen.getByTestId('my-test-id')).toHaveTextContent('some text');

Note it is now recommended to use screen instead of the results of render.

(StackOverflow post the points to a KC Dobbs Article explaining why: react-testing-library - Screen vs Render queries)

edited Aug 23, 2021 at 17:01

answered Oct 13, 2020 at 14:39

Seth McClaine

10.1k7 gold badges44 silver badges67 bronze badges

5 Comments

ggorlen Over a year ago

You may need to add import "@testing-library/jest-dom/extend-expect"; to access the toHaveTextContent matcher as described here.

lmat - Reinstate Monica Over a year ago

"...recommended to use screen..." But y tho? Rather than pontificating, a link by Those Who Recommend would be appreciated.

Seth McClaine Over a year ago

Heres another SO post on screen vs render that points to a KC Dobbs explination: stackoverflow.com/questions/61482418/…

Carmine Tambascia Over a year ago

Unfortunately on toHaveTextContent I got ' Property 'toHaveTextContent' does not exist on type 'HTMLElement''

kevr Over a year ago

Seems like a much better solution than the accepted answer, which forces a particular coding style.

Dan Sousa · Accepted Answer · 2022-09-19 17:37:19Z

11

This way you can be more precise, focusing in specific item:

expect(queryByTestId("helperText")?.textContent).toContain("Help me!");

answered Sep 19, 2022 at 17:37

Dan Sousa

1191 silver badge3 bronze badges

Collectives™ on Stack Overflow

Checking text appears inside an element using react testing library

3 Answers 3

8 Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related