小编ssc*_*ler的帖子

如何在要测试的React组件中模拟自定义钩子?

如果您有一个React组件调用一个获取数据的自定义钩子,那么在测试React组件时模拟内部自定义钩子结果的最佳方法是什么?我看到2种主要方法:

1)Jest.mock自定义钩子。这似乎是最推荐的方法,但是似乎它要求测试对内部实现细节以及可能需要模拟的内容比组件的props接口建议的内容有更多的了解(假设使用prop-type或打字稿)

2)使用依赖项注入方法。将钩子声明为道具,但是将其默认设置为真实的钩子,这样就不必在渲染组件的任何地方都设置钩子,而是允许使用模拟覆盖进行测试。这是一个人为的codeandbox示例,其中包含一个模拟自定义钩子的测试:

https://codesandbox.io/s/dependency-inject-custom-hook-for-testing-mjqlf?fontsize=14&module=%2Fsrc%2FApp.js

2需要更多的输入,但似乎更易于测试。但是,测试已经必须具有组件的内部实现细节的知识,才能测试呈现输出的任何条件逻辑,所以也许这并不重要,而1是最佳方法。是要走的路吗?您看到什么权衡?我是否完全错过了另一种方法?

unit-testing reactjs react-hooks

8
推荐指数
2
解决办法
1383
查看次数

标签 统计

react-hooks ×1

reactjs ×1

unit-testing ×1