reactjs - 如何在要测试的 React 组件内模拟自定义钩子(Hook)?

标签 reactjs unit-testing react-hooks

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

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

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

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

2 需要更多的输入,但似乎更容易用于测试。然而,测试已经必须了解码件的内部实现细节才能测试渲染输出的任何条件逻辑,因此也许这并不重要,1 是最好的方法。 1 是要走的路吗?您看到了什么权衡?我是否完全错过了另一种方法?

最佳答案

使用 jest 模拟您的自定义钩子(Hook)。

import * as useCustomHook from '../hooks/useCustomHooks'

const spy = jest.spyOn(useCustomHook, 'default')
spy.mockReturnValue({
name: 'test'
})

关于reactjs - 如何在要测试的 React 组件内模拟自定义钩子(Hook)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56497565/

相关文章:

javascript - 在没有 npm 的情况下运行 React.js(仅使用本地 React.js 文件或 CDN)

c# - 是否可以从 Protractor 测试中调用 C# 代码?

reactjs - React hook 表单文件上传,文件长度为 0,提交后除选择选项外所有字段都被重置

javascript - 无法读取未定义的属性 'string' | React.PropTypes | React.PropTypes | LayoutPropTypes.js

css - 简单的 Material UI 对话框示例有不需要的滚动条

javascript - react 路由器需要两次点击来更新路由

对具有时间戳的函数进行 Python 单元测试

java - 无法捕获 junit 中的算术异常

javascript - 'exhaustive-deps' 的警告不断要求提供完整的 'props' 对象,而不是允许单个 'props' 方法作为依赖项

reactjs - 自定义 Hook 无法与 useEffect 一起正常工作