问题标签 [react-hooks-testing-library]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
936 浏览

reactjs - 为什么我在测试这个钩子时会看到关于使用 act 的警告?

使用“@testing-library/react-hooks”中的 renderHook 时,我无法理解如何在没有以下警告的情况下为钩子编写测试。

“警告:测试中对 TestHook 的更新未包含在 act(...) 中。”

基本上,钩子使用设置初始值,useState然后在useEffect钩子中我异步执行一些操作,最终更新状态值。

钩子总是简单地返回状态值。所以我写了一个测试来断言它首先返回初始值并最终返回新的状态值。

我创建了一个复制此的沙箱: https ://codesandbox.io/s/dazzling-faraday-ht4cd?file=/src/useGetData.test.ts

我已经研究了这个警告的含义和行为是什么......但对于这个特定的场景,我不确定缺少什么。

0 投票
1 回答
1030 浏览

reactjs - 如何触发事件 React 测试库

我有一些代码,用于检测浏览器是否在线/离线:

我有这个基本测试:

但是,我想运行测试以查看它是否在offline触发事件时返回正确的值,而不仅仅是在渲染返回值的模拟之后。解决这个问题的最佳方法是什么?到目前为止,我得到的是:

0 投票
1 回答
461 浏览

reactjs - 如何 spyOn 对自定义钩子返回值做出反应?

这是我的自定义钩子: useCustomModal.ts

这是我的测试: useCustomModal.ts

测试失败:预期呼叫数:1 已接呼叫数:0

如何正确监视自定义反应钩子?

0 投票
2 回答
5790 浏览

reactjs - 如何在 useEffect 中测试带有异步状态更新的钩子?

我有一个简单的钩子来获取值并将其设置为选项,如下所示:

我正在尝试使用以下代码对其进行测试:

问题是当我试图在测试结束时断言选项时,它的初始值仍然是[]. 但是,如果我在钩子中记录值,它会返回 mockOptions。如何在通过 useEffect 但以异步方式更新钩子后更新钩子。

我也尝试过使用waitForNextUpdate在代码中注释的地方。它超时并出现以下错误: Timeout - Async callback was not invoked within the 5000 ms timeout specified by jest.setTimeout.Timeout - Async callback was not invoked within the 5000 ms timeout specified by jest.setTimeout.Error:

0 投票
0 回答
350 浏览

typescript - @testing-library/react-hooks 'act' 函数显示'no floating promises' lint 错误

错误消息:[eslint @typescript-eslint/no-floating-promises] [E] Promise 必须适当处理或明确标记为忽略 void 运算符。(@typescript-eslint/no-floating-promises)

你好。我正在尝试测试我的自定义钩子,但我不知道如何使用 react-hooks-testing-library 中的 'act' 函数。它显示 lint 错误,所以我试图像第二次测试一样修复,但我认为这不合适,因为该钩子不是 Promise 函数。有没有办法用void操作员明确标记为忽略?

0 投票
1 回答
3823 浏览

javascript - 如何在自定义钩子中测试 useEffect?

所以我对反应测试很陌生。我有一个在组件内部调用的自定义钩子。我正在renderHook使用react-hook-testing-library.

我需要测试是否useEffect调用了自定义钩子内部的方法。我似乎无法弄清楚这一点。

在另一种情况下,我需要弄清楚是否trackPdpGtm没有调用。

注意:钩子不返回任何数据。这主要用于发送分析信息。

当前方法:

使用PdpGtm.js

我需要测试是否trackPdpGtm被调用。还需要检查它是否没有在另一个测试用例中调用。

gtm.test.js

也尝试使用trackGtmPdp.mock.calls.length.toBe(1).

usePdpGtm钩子在内部被调用并ProductDescriptionComponent接收一个对象作为它的参数。

注意: 自定义挂钩在测试期间未运行。我不确定,但在测试运行时不会打印里面的 console.log 语句。

非常感谢任何帮助。

0 投票
1 回答
1438 浏览

reactjs - 测试自定义钩子的返回值

我正在尝试为这个自定义钩子编写一个测试服。

非常简单的返回truefalse
正如我所看到的,我应该使用@testing-library/react-hooks ,这是我的尝试:

但我得到了undefined这没有意义,它应该是trueor false

PS:代码在项目中按预期工作。

0 投票
0 回答
570 浏览

react-native - 当使用 renderHook () Custom Hook 使用 jest 和 testing-library 在 react-native 中测试自定义钩子时,result.current 为 null

对于我的项目,我使用一个自定义挂钩来根据提供给自定义挂钩功能的参数将我的一些屏幕从一个屏幕导航到另一个屏幕。我如何对 React Native Custom 进行单元测试

使用 const {result} = renderHook(() => {useShoppingCartNavigator()});

问题是我将 result.current 设为 void 并且无法调用钩子的函数

但根据文档应该是这样的

结果.current.customHookFn();

0 投票
1 回答
681 浏览

reactjs - 使用 react-hooks-testing-library 测试回调返回值

在这个例子中,我们有一个简单的钩子调用useLog,它返回一个方法。如何测试它是否通过 react-hooks-testing-library 返回。我想弄清楚如何写期望。

钩子useLog:

测试:

我得到了什么:

0 投票
1 回答
729 浏览

reactjs - 使用 react-hooks-testing-library 测试自定义钩子

我正在尝试使用 react-hooks-testing-library 为这个自定义钩子编写测试。

这是我的测试

编写了测试“应该删除文章”,但它们不涵盖 useArticleDelete 钩子中 deleteArticle 函数中 try..catch 之间的代码行。

请帮助我找出我做错了