CODEWITHSUNDEEP
javascriptreactjsreact-testing-library
Hives
Hives

Reputation: 1185

Checking text appears inside an element using react testing library

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?

Upvotes: 92

Views: 192982

Answers (3)

Dan Sousa
Dan Sousa

Reputation: 121

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

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

Upvotes: 12

Gio Polvara
Gio Polvara

Reputation: 26988

Better to use within for this sort of things:

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

Upvotes: 98

Seth McClaine
Seth McClaine

Reputation: 10030

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)

Upvotes: 90

Related Questions