在 React 测试库中测试被多个元素分解的文本答案

【问题标题】：Testing for text broken up by multiple elements in React Testing Library在 React 测试库中测试被多个元素分解的文本
【发布时间】：2021-09-18 12:34:55
【问题描述】：

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

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

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

我正在尝试测试里面的文本是“剩下 5 项”，但正如您所见 - 文本被 span 标签和多行分解。

据我了解，我应该只使用 getByRole() 来定位它吗？这是否意味着我也需要在 .inventory-wrapper div 中添加一个 role='...' ？然后我将如何测试文本'5 items left'

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

【问题讨论】：

这是否有助于回答您的问题：How to access text broken by multiple elements in Testing Library?

标签： reactjs jestjs react-testing-library

【解决方案1】：

按角色获取可能是首选，但不是查询 DOM https://testing-library.com/docs/queries/about/#priority 的唯一方法。

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

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

【讨论】：