Jest.js 测试React测试库中被多个元素分解的文本

mbjcgjjk 于 2023-04-10 发布在 Jest

关注(0)|答案(2)|浏览(179)

我很难找到正确的方法来测试一个div，它的文本被多个元素分解-错误说'无法找到一个元素的文本：这可能是因为文本被多个元素分解，但没有解释如何这样做。
为了解释我试图测试的内容，jest render（）fn中返回的元素如下所示：

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

我试图测试里面的文本是'5 items left'，但正如你所看到的-文本被一个span标签和多行分开。
据我所知，我应该只使用getByRole（）来定位它？这是否意味着我需要向.inventory-wrapper div添加role ='...'？然后我如何测试文本'5 items left'
任何帮助正确的等待目标这样的东西将非常感谢

jestjs

来源：https://stackoverflow.com/questions/68294919/testing-for-text-broken-up-by-multiple-elements-in-react-testing-library

2条答案

按热度按时间

xqkwcwgp1#

按角色获取可能是首选方法，但这不是查询DOM的唯一方法。
我通过在组件中添加一个测试id，查询它并使用它的文本内容来解决这个问题。只要确保测试id传递给组件中的根元素。

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

赞(0）回复(0）举报 2023-04-10

rjee0c152#

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

其中element.textContent返回元素的文本内容。然后你可以按照你想要的方式处理它。你可以试着检查它是否等于===或match等。这是处理多行文本的几种方法之一。
P.S. screen比getByTestId更优选。

赞(0）回复(0）举报 2023-04-10

我来回答

Jest.js 测试React测试库中被多个元素分解的文本

2条答案

相关问题

热门标签

最新问答