问题标签 [react-testing-library]

我正在尝试测试一个使用自定义钩子的组件。该钩子使用带有useContext钩子的上下文。我的问题是上下文在两个连续测试之间仍然存在。我试过嘲笑上下文，但这没有帮助。

您可以在此代码框中看到代码： https ://codesandbox.io/s/l0192w68z虽然我无法在那里运行测试...

我还将它上传到实际运行测试的 github：https ://github.com/uriklar/react-testing-library-with-use-context

我会很感激任何指示！如何在每次测试运行时获得新的上下文。

谢谢！

我发现很难使用反应测试库并理解我需要使用的查询来选择我需要测试的组件。当 DOM 使用 material ui 和 formik 等框架变得越来越冗长时，查询过于简单。

我创建了一个代码沙箱来说明这个问题。你可以在那里检查失败的测试。

https://codesandbox.io/embed/px277lj1x

我得到的问题是，查询 getLabelTextBy() 不返回组件。看起来 aria 标签 by 或 for 属性未由材质 ui 呈现。不知道如何修复此错误。

代码也在下面供参考

我在使用反应钩子的测试组件时遇到问题。我需要测试单击按钮后是否正在更新 ant 设计范围选择器内的日期范围。对于测试，我使用 Jest 和 react-testing-library。

此时它看起来像这样：（其中一些嵌套组件只是样式化组件:)）

父.jsx：

侧边栏.jsx：

日期选择.jsx：

日期选择.test.js：

正如预期的那样，由于我没有将 setDateRange 函数作为道具传递给测试内的 DateSelect 组件，因此范围值不会改变。我试图在测试中添加一个钩子，如下所示：

但我得到了： 钩子只能在函数组件的主体内调用。 所以我猜我不能在那里使用它。有什么解决办法吗？如何setDateRange在测试中指定像钩子一样的函数？

我发现了这个：https ://github.com/mpeyper/react-hooks-testing-library 但看起来这是用于自定义钩子？

也许这个测试用例有一个不使用 react-hooks 的解决方案？任何想法都受到高度赞赏。:)

我们正在尝试为所有现有的 React 组件编写单元/集成测试。我们目前正在将 React 与 Mobx 4 一起使用，测试主要使用 react-testing-library/jest 编写。我们确实在某些区域使用了 Enzyme 以利用浅层渲染。我们的问题是，当我们访问一些“页面”或容器组件时，我们会遇到错误，例如“MobX 注入器：存储 'teamStore' 不可用！确保它是由某个 Provider 提供的”

我们进行了一些挖掘，但在搜索类似问题以供参考时找不到任何东西。我们确实知道这是由直接将存储注入其中并被调用到我们的容器/页面中的子组件引起的。

我的问题是：在测试框架中是否有任何方法可以将在我们的容器组件中创建的模拟存储传递给子组件？显然，如果我们将 store 作为 prop 从父级传递给子级，则可以解决问题，但我们试图避免以任何方式修改组件本身。

如果上述情况不可行，我们是否还有其他选择，无需重构组件以根据需要向下传递存储，而不是直接注入子组件？

我正在使用 jest 并react-testing-library为我的应用程序提供单元测试覆盖率。

我使用了 Kent C. Dodds 在他的一个视频中展示的这个方便的辅助函数：

我在测试连接的组件时使用。

我遇到了一个问题，为了渲染一个组件，我需要获取一些数据来准确地解决测试，或者至少将模拟数据注入到存储中。我没有这样做

这是我的测试：

我正在测试的组件：

我需要进行长度计算，ticketPayload但主要商店优先。由于尚未获取该信息，因此ticketPayload's 为 0。我希望能够至少模拟要传递的数据，但使用道具没有任何运气，因为商店优先。

希望任何人都可以提供帮助或分享一些指导。提前致谢！

我是 React 的相对菜鸟。想在这个沙箱中练习一些 tdd基本反应沙箱。似乎测试代码正在影响应用程序组件状态如果您在浏览器和测试之间切换，您会看到测试项目被添加到列表中 - 即使我在测试中运行渲染和清理。

不知道我做错了什么？

I am new to the Jest testing framework and so I wan't too mock a function that returns a Promise to test my click event button. I am receiving an error that says my method has not been called but I have it defined below as a jest.fn() and expect it to be called once. Any help in solving this or some clarity on why my code is wrong.

我从头开始引导我的第一个 TypeScript + React 项目。我在 TypeScript 和组件渲染方面取得了成功。但是，当我尝试添加测试时，它会因一些类型错误而失败。

我尝试过使用不同的配置，甚至添加一个setupTests.ts文件。

这是我的配置：package.json

.babelrc

jest.config.js

webpack.config.js：

非常基本的组件开始：

就在我什至尝试将我的组件作为参数传递给渲染方法时，我得到了一个错误

当我运行我的测试时，我从控制台得到这个：

更新： 目前我的文件被称为App.test.ts

如果我将其更改为App.test.tsx 并将其添加import * as React from 'react'到测试中，错误就会消失，但测试失败并出现以下错误：

当我尝试测试替换或推送时，我要么得到代表历史的空对象，要么当我使用模拟时，它永远不会被调用。目前我得到这个：无法监视替换属性，因为它不是函数；未定义给定，或者当我使用模拟时它不会被调用。

我正在尝试使用我的所有故事添加快照storybook v5.0.5并对react-testing-library v6.0.3 我的所有故事进行结构测试。

我正在尝试遵循文档：

https://github.com/infinitered/addon-storyshots/blob/master/README.md#serializer

但不是酶，而是使用react-testing-library.

含酶：

与react-testing-library（我正在尝试做的事情）：

我不确定，该render方法是Storyshot api 需要的渲染器。并且还需要一个序列化程序，但我在react-testing-library.

使用这些配置，正在创建快照。然而，这些快照根本不正确......

看起来节点没有属性，而是显示了很多无用的属性......

创建快照示例：

有人可以帮我吗？如果我不提供renderer配置，快照是空的......但是，看起来这个渲染器中缺少一些东西......

太感谢了！