如果您有一个 React 组件调用一个获取数据的自定义钩子，那么在测试 React 组件时模拟该内部自定义钩子结果的最佳方法是什么？我看到两种主要方法：
1) Jest.mock 自定义钩子。这似乎是最推荐的方法，但它似乎需要测试对内部实现细节以及它可能需要模拟的内容有更多的了解，而不是组件的 props 接口可能建议的内容（假设使用 prop-types 或typescript）
2）使用依赖注入方法。将钩子声明为props，但默认为真正的钩子，这样你就不必在渲染组件的任何地方设置它，但允许用模拟覆盖测试。这是一个人为的代码和框示例，其中包含一个模拟自定义钩子的测试：
2 需要更多的输入，但似乎更容易用于测试。但是，测试已经必须了解组件的内部实现细节才能测试渲染输出的任何条件逻辑，所以这可能并不重要，而 1 是最好的方法。1是要走的路吗？你看到了什么权衡？我是否完全错过了另一种方法？
使用 jest 模拟您的自定义钩子。
import * as useCustomHook from '../hooks/useCustomHooks'
const spy = jest.spyOn(useCustomHook, 'default')
spy.mockReturnValue({
name: 'test'
})
这个问题已经有几个月了，但如果你还没有找到一个好的解决方案，我写了一个可能有帮助的包。我经历了类似的思考过程，包括“如果我将钩子注入到组件中会怎样？” 事情变得很奇怪。
我基本上想要一个连接器来避免展示组件的额外包装器只是为了测试它们。
我想出了react-hooks-compose，它可以让您将钩子和演示者分开，并单独或一起测试它们：https : //www.npmjs.com/package/react-hooks-compose
export const useFetch = () => {
const [user, setUser] = useState();
useEffect(() => {
fetchData('some-url') // <-- Fetches data on mount
.then(res => setUser(res.data));
}, []);
return {user};
}
// composeHooks passes the values from your hooks as props
export const UserPresenter = ({user}) => {
return <div>You fetched data for: {user.name}</div>;
}
export default composeHooks({ useFetch })(DataPresenter);
现在您不必模拟钩子，您只需使用props测试演示者：
it('presents user', () => {
const { queryByText } = render(<UserPresenter user={{name: 'Mary'}} />); // <-- Named export
expect(queryByText('Mary')).toBeTruthy();
});
或者，您可以选择更高级别的集成测试：
it('fetches data', () => {
fetchData.mockResolvedValue('Mary');
const { queryByText } = render(<UserWithData />); // <-- Default export
expect(queryByText('Mary')).toBeFalsy();
return wait(() => {
expect(queryByText('Mary')).toBeTruthy();
});
});
如果您愿意，您甚至可以对钩子进行单元测试。
为什么不模拟进行 api 调用的底层方法呢？
例如，如果您使用 检索数据fetch()，您可以模拟它。这样您就可以为该调用定义自定义响应，这将使测试钩子本身变得容易。
使用 mocking hook 本身，你永远不知道真正的 hook 是否与你的组件一起工作得很好。
将钩子作为props传递，让钩子相互通信真的很困难。例如，当您需要自定义钩子从同一组件调用 setter 时useState。您需要使用越来越多的参数来扩展自定义钩子。
fetch或XHR. 它仍然需要知道一些实现细节——你正在运行 HTTP 请求的事实——但是你的测试应该知道的事情较少。