你如何使用 jest 和 react-testing-library 测试元素的不存在？

Question

我有一个组件库，我正在为使用 Jest 和 react-testing-library 编写单元测试。基于某些道具或事件，我想验证某些元素没有被渲染。

getByText , getByTestId , etc throw and error in react-testing-library if the element isn’t found causing the test to fail before the expect function火灾。

你如何使用 react-testing-library 测试不存在的东西？

原文由 SomethingOn 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

来自 DOM Testing-library Docs - Appearance and Disappearance

断言元素不存在

标准的 getBy 方法在找不到元素时会抛出错误，因此如果您想断言 DOM 中 不 存在元素，可以使用 queryBy 取而代之的是 API：

 const submitButton = screen.queryByText('submit')
expect(submitButton).toBeNull() // it doesn't exist

queryAll API 版本返回匹配节点的数组。数组的长度对于在 DOM 中添加或删除元素后的断言很有用。

 const submitButtons = screen.queryAllByText('submit')
expect(submitButtons).toHaveLength(2) // expect 2 elements

not.toBeInTheDocument

jest-dom 实用程序库提供了 .toBeInTheDocument() 匹配器，可用于断言元素是否在文档正文中。这比断言查询结果是 null 更有意义。

 import '@testing-library/jest-dom/extend-expect'
// use `queryBy` to avoid throwing an error with `getBy`
const submitButton = screen.queryByText('submit')
expect(submitButton).not.toBeInTheDocument()

原文由 kentcdodds 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用 queryBy / queryAllBy 。

如您所说， getBy* 和 getAllBy* 如果没有找到则抛出错误。

However, the equivalent methods queryBy* and queryAllBy* instead return null or [] :

查询方式

queryBy* 查询返回查询的第一个匹配节点，如果没有元素匹配则返回 null 。这对于断言不存在的元素很有用。如果找到多个匹配项，则会抛出此异常（改用 queryAllBy）。

queryAllBy queryAllBy* 查询返回查询的所有匹配节点的数组，如果没有元素匹配则返回空数组（ [] ）。

https://testing-library.com/docs/dom-testing-library/api-queries#queryby

因此，对于您提到的特定两个，您将改为使用 queryByText 和 queryByTestId ，但这些适用于所有查询，而不仅仅是这两个。

原文由 Sam 发布，翻译遵循 CC BY-SA 4.0 许可协议