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

Question

如果您有一个 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 是要走的路吗？您看到了什么权衡？我是否完全错过了另一种方法？

Answer 1

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

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

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