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

另一种方法

<button>Add more content to the row</button>
<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Column</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ccc;">
    <h2>Column</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column</h2>
    <p>Some text..</p>
  </div>
</div>

请注意，现在建议使用import {render, screen} from '@testing-library/react'; ... render(<MyComponent />); expect(screen.getByTestId('my-test-id')).toHaveTextContent('some text');代替渲染结果。

Answer 2

最好将within用于此类事情：

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

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

2 个答案: