使用反应测试库检查文本出现在元素内部

Question

我正在使用 Testing Library 为 React 应用编写一些测试。我想检查是否出现了某些文本，但我需要检查它是否出现在特定位置，因为我知道它已经出现在其他地方。

Testing Library documentation for queries 表示 getByText 查询采用 container 参数，我猜它可以让您在该容器内进行搜索。我尝试这样做，按照文档中指定的顺序使用 container 和 text 参数：

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

我得到一个错误：matcher.test is not a function。

如果我把参数反过来：

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

我得到一个不同的错误：Found multiple elements with the text: some text

这意味着它没有在指定的容器内搜索。

我想我不明白 getByText 是如何工作的。我做错了什么？

Answer 1

这种情况最好使用 within：

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

Answer 2

另一种方法

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

...

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

请注意，现在建议使用 screen 而不是渲染结果。

(Whosebug post KC Dobbs 文章的要点解释了原因：)

使用反应测试库检查文本出现在元素内部

Checking text appears inside an element using react testing library

javascript

reactjs

react-testing-library