问题标签 [react-testing-library]

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

getByText, getByTestId, 等如果在函数触发react-testing-library之前未找到元素导致测试失败，则会抛出错误。expect

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

我正在尝试测试一个反应组件并使用expect(elm).not.toBeVisible()但没有成功。

更新 3

我已将代码缩减为这种更简单的形式：

测试结果：

debug()日志：

更新 2：

好吧，这变得很奇怪，因为我在codesanbox上通过了测试，但在我的本地机器上仍然没有运气。

我原来的问题：

我使用 React、semantic-ui-react 和 react-testing-library。

这是代码：

我得到的是这里的结果：

我试图在浏览器上查看组件渲染结果，并且outOfStockNotice测试代码中的节点实际上是隐藏的，因为它的父级是一个带有 class 的 divdimmer具有 style display: none。

根据jest-dom文档（由以下人员使用testing-react-library：

可见

如果满足以下所有条件，则元素可见：

• 它没有将其 css 属性 display 设置为 none
• 它没有将其 css 属性可见性设置为隐藏或折叠
• 它没有将其 css 属性 opacity 设置为 0
• 它的父元素也是可见的（依此类推，直到 DOM 树的顶部）

请帮忙。我真的不知道这里会出什么问题。

更新：

我包括debug()这里的结果：

我正在使用 React 和 Redux。我有一个加载的组件，ChildComponent根据 Redux 的状态也会加载MainComponent

我正在尝试编写一个测试来检查是否ChildComponent已加载：

我收到此错误：

错误：未捕获 [不变违规：在“连接（ChooseIndex）”的上下文或道具中找不到“商店”。要么将根组件包装在 a 中，要么将“store”作为道具显式传递给“Connect(ChooseIndex)”。]

我应该通过将对象文字传递给来模拟 ReduxChooseIndex吗？或者我应该为每个测试创建一个 Redux 存储（就像我的真实应用程序那样）？

我正在尝试编写一个测试来检查我的应用程序是否正确呈现。在初始页面上，我添加了一个 data-testid 为“start”。所以我的顶级测试检查初始组件是否已被渲染。

如果我console.log(start)可以看到节点的所有属性。但是，如果我尝试debug()然后它错误地说它不是一个函数。

我上面的测试似乎确实有效。如果我将 getByTestId 从更改start为其他任何内容，则它会出错。但是我没有使用该expect功能，所以我违反了最佳实践吗？

我正在尝试使用 React 测试库，即不使用浅渲染，但我不确定在这种情况下如何（或是否可能）这样做。

我有一个Parent有 2 个孩子的组件。initialMount由 Redux 提供：

当应用程序加载initialMount时true返回ChildOne。这会读取 url 并根据值调度一些 Redux 操作。这些操作之一设置initialMount为 false，这会导致ChildOne卸载ChildTwo并由返回Parent。

我需要测试是否根据值返回了正确的孩子initialMount

如果我在没有 Redux 的情况下使用 Enyzme 的浅渲染Parent并模拟该appInitMount值，那么这很容易测试：

但是我正在使用 React 测试库，因为我想避免浅渲染。因此，我需要将我的 Redux 存储传递给测试：

调试显示ChildTwo返回。我认为这实际上是正确的行为，因为ChildOne首先返回，它调度动作，然后卸载并ChildTwo返回。但是我该如何测试呢？

你能拦截 Redux 动作以停止appInitMount被改变吗？

我正在使用react-testing-libarary来测试我的反应应用程序。出于某种原因，我需要能够通过idand not找到元素data-testid。在文档中没有办法实现这一点。

有没有办法做到这一点？

我将渲染输出为：

我正在寻找符合以下条件的东西：

我正在制作一个简单的战舰游戏。

首先，我为 Board 创建了测试。现在我正在编写 BoardContainer，它保存状态并计算转数和命中数，并渲染这样的 Board。

在 Board 测试中，我检查了它的大小（10x10），但是在测试容器时，它会再次“渲染” Board，因此第一次测试失败，因为现在它找到了 20x20 的板。哎呀！

我不确定处理这个问题的正确方法是什么，我不想在同一个文件中编写所有测试，因为这不是我在现实世界项目中会做的。

这是代码框网址： https ://codesandbox.io/s/o75lq4z9n6

顺便说一句，我正在学习 TDD，所以我是新手，对于如何通过生产 create-react-app 项目处理此问题的任何建议，我都会非常有帮助（它可能会发生同样的情况吗？）。提前致谢！

我正在使用 TypeScript 构建一个 React 应用程序。我使用 react-testing-library 进行组件测试。

我正在为我的登录页面构建视差组件。

组件通过 props 传递图像，并通过 JSS 将其设置为背景图像：

这是我写的单元测试：

但它没有说：

如何使用 Jest 和 react-testing-library 测试图像是否正确设置为背景图像？

我正在使用 TypeScript 编写一个 React 应用程序。我将 material-ui 用于我的组件，将 react-testing-library 用于我的单元测试。

我正在为 material-ui 的 Grid 组件编写一个包装器，这样我总是有一个项目。

我想编写一个单元测试来检查item={true}. 我尝试toHaveAttribute像这样使用辅助库 jest-dom：

但是这个测试失败了：

如何测试元素是否具有特定属性？

我正在使用 TypeScript 编写一个 React 应用程序。我将 material-ui 用于我的组件，将 react-testing-library 用于我的单元测试。

我正在为 material-ui 的 Grid 组件编写一个包装器，这样我总是有一个容器。

我想编写一个测试来检查它的孩子是否正确呈现。这是我写的：

问题是测试的第一部分，我检查孩子通过的长度。但是expect(getByTestId("child")).toBeDefined();失败了：

不能给渲染函数中的元素提供 data-testid 吗？我如何测试孩子们是否正确渲染？

编辑 这是调试的输出：