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?

Answer 1

Better to use within for this sort of things:

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

Answer 2

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)