问题标签 [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 投票
0 回答
517 浏览

reactjs - React 测试库 - 使用 React.context 测试钩子

我对带有自定义钩子的 react-testing-library 有疑问

当我在自定义钩子中使用上下文时,我的测试似乎通过了,但是当我在钩子清理函数中更新上下文值而不通过时。那么有人可以解释为什么这是或不是测试自定义钩子的好方法吗?

提供者和钩子代码:

测试代码:

0 投票
1 回答
590 浏览

react-native - 在 React Native 中模拟 Linking.openURL 它从未被调用过

我正在为我的应用程序编写一些测试,并且正在尝试模拟Linking模块。我正在使用jest. 模拟Linking.canOpenURL它工作正常(toHaveBeenCalled正在返回true),但openURL永远不会调用模拟。

问题是openURL没有被调用。

这是测试:

这是被测试的钩子:

0 投票
0 回答
91 浏览

reactjs - 从 React Hook 测试中获取状态

我在尝试使用 react-hooks-testing-library 访问 state 和 setState 时遇到问题。

我已经使用 Provider 跟踪了来自各种来源的示例,但它不起作用

支付.tsx

支付.test.tsx

预期 console.log(payHook.current)

我得到的结果 console.log(payHook.current)

0 投票
2 回答
826 浏览

reactjs - 调用 renderHook() 后 waitFor 超时

我正在尝试测试一个简单的自定义钩子:

首先,我尝试用 jest 来模拟 API 调用,然后我用 nock 进行了尝试,正如它在 react-query 文档 ( https://react-query.tanstack.com/guides/testing ) 中所说的那样。

我的测试如下所示:

我得到的错误是:错误:1000 毫秒后在 waitFor 中超时。

我的 package.json 如下:

react-test-renderer、react 和 react-dom 的版本是匹配的。

任何输入都非常受欢迎!

0 投票
1 回答
598 浏览

reactjs - 如何使用 react-testing-library 和 jest 来模拟自定义反应钩子更新?

看看下面的自定义钩子。前提是它在query更改时更新其状态。

目标是模拟useRouter,然后更新它以专门测试“当查询更新 n 次时,辅助函数被调用 n 次”

useRouter我们可以模拟模块

但这只是将其模拟为普通模块。我想将它模拟为一个钩子,然后在下面的测试中更新它

0 投票
1 回答
675 浏览

testing - 如何使用请求在 JEST 中测试异步调用而不使用模拟和等待反应钩子测试库

就非 API 功能而言,我不擅长编写测试我已经在 rendererHook 的帮助下使用 JEST 进行了测试,就像下面的示例正确 TEST一样:

但是,如果 JEST 中的 API 调用仍然让我感到困惑,我们该怎么办。我仍然无法理解如何在 JEST 中测试 API 调用,如下面的有问题的函数

上述功能可能的开玩笑测试是什么?考虑是否获取展位等情况,因为在这两种情况下,我都将展位价值设为 []。 到目前为止,我的尝试是:

上面的测试用例通过了,但这是一个模拟 API(我正在创建数据并将其与我自己的书面数据进行比较,但这不是我想要的)但我想确保我的真实 API 在该测试中正常工作,就像我一样我正在fetchBooths () 函数中获取展位列表,所以当我的一切都依赖于真实 API 时,我如何使用模拟 API 对其进行测试但我在这一点上被严重卡住了。此外,我无法理解searchBooths 函数的测试用例是什么,因为它显示为未定义并且展位列表显示为 [] 尽管它不应该是 [] 我仍然无法找出解决方案。请帮我写这些测试用例

0 投票
1 回答
1168 浏览

reactjs - 使用 react-hooks-testing-library 测试 useEffect 的异步自定义钩子

我写了一个简单的 React 钩子,想用react-hooks-testing-library.

这个钩子调用一个异步函数一次providerdomain变量,然后一旦它被解决,就会将数据置于状态并返回它。

我在任何地方都找不到如何测试异步钩子,但发现了这个:How to test custom async/await hook with react-hooks-testing-library。这个问题没有答案,但至少我发现我需要调用waitForNextUpdatew/ 进行测试useEffect

我的测试的问题是它只运行一次钩子(在挂载时),而不是在设置提供者和域时。所以它总是挂在默认值上。如何让它重新触发钩子以实际调用getENS和设置数据?

这是钩子的样子:

这就是我的测试的样子:

当我运行测试时,我收到此错误:

我还创建了一个包含 Jest 配置文件的要点:https ://gist.github.com/talentlessguy/aad20875b1e4406024e454485a73b1f9

这里也是get-ens我导入的库的来源:https ://github.com/talentlessguy/get-ens

0 投票
1 回答
881 浏览

reactjs - React Intl 找不到所需的“intl”对象。需要存在于组件祖先中

我使用了最新版本的 React-intl(^5.20.2)。试图在 React 钩子组件中实现酶单元测试。但抛出此错误“[React Intl] 找不到所需intl的对象。需要存在于组件祖先中。” 在运行测试时在功能组件内使用 UseIntl()

0 投票
1 回答
76 浏览

react-hooks - 我们如何通过多次触发来测试一个带有 useEffect 且内部没有返回值的 customHook?

大家好,我是 jest 的新手,现在正在为我们的 customHooks 进行一些测试。

我的 customHook 里面有 useEffect 并且不返回值:

我想做的是在组件挂载后不会调用回调函数,而是在依赖项更新后调用。

我当前的 test.ts 正在使用 jest 和 @testing-library/react-hooks 并且是这样的:

更新dependencyList 后,不会再次触发效果。@testing-library/react-hooks 确实提供了一个名为 waitForNextUpdate 的方法,但使用它时出现超时错误。由于我的钩子不返回值,result.current 也是未定义的。

那么,如何测试我的钩子是否按预期工作?谢谢你。

0 投票
1 回答
283 浏览

reactjs - 如何使用反应钩子测试库测试内部功能?

我有一个自定义钩子,我正在尝试编写使用反应钩子测试库包的测试,我想知道如何测试自定义钩子中未返回但在其他函数中使用的内部函数。

测试

如何编写测试以查看 doSomething 是否已被调用/使用?