在 React 测试库中测试由多个元素分解的文本

Question

我无法找到正确的方法来测试包含由多个元素分解的文本的 div - 错误显示“无法找到包含文本的元素：这可能是因为文本被多个元素分解”，但是没有解释如何做到这一点。

为了解释我要测试的内容，jest render() fn 中返回的元素如下：

          <div>
            <div
              class="inventory-wrapper"
            >
              <span>
                5
              </span>
               item
              s
               left
            </div>
          </div>
        </body>

我正在尝试测试里面的文本是否为“还剩 5 项”，但正如您所看到的 - 文本被跨度标记和多行分隔。

据我了解，我应该仅使用 getByRole() 来定位此目标？这是否意味着我也需要向 .inventory-wrapper div 添加一个 role='...' ？然后我将如何测试文本“还剩 5 件”

任何有关正确等待目标此类目标的帮助将不胜感激

Answer 1

it('your test case', () => {
  expect.assertions(1);
  render(<Component/>)
  expect(screen.getByText((_, element) => element.textContent === 'some text')).toBeInTheDocument();
});

其中element.textContent返回元素的文本内容。然后您就可以按照您想要的方式使用它。您可以尝试检查它是否等于===某物match等。这是处理多行文本的少数方法之一。

PSscreen比getByTestId.

Answer 2

按角色获取可能是首选，但并不是查询 DOM 的唯一方法。

我通过向组件添加测试 ID、查询该 ID 并使用其文本内容来解决这个问题。只需确保测试 ID 传递到组件中的根元素即可。

render(<Component data-testid="component" />)
expect(screen.getByTestId('component').textContent).toBe('Text to test')