如何模拟要测试的React组件内部的自定义钩子？

Question

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

1）Jest.mock自定义钩子。这似乎是最值得推荐的方法，但它似乎需要测试对内部实现细节以及它可能需要模拟的内容有更多的了解，而不是组件的道具接口可能建议的内容（假设使用道具类型或TypeScript）

2） 使用依赖注入方法。将钩子声明为道具，但将其默认为真实钩子，这样您就不必在渲染组件的任何地方都设置钩子，而是允许使用模拟覆盖以进行测试。下面是一个虚构的codesandbox示例，其中有一个模拟自定义挂钩的测试：

https://codesandbox.io/s/dependency-inject-custom-hook-for-testing-mjqlf?fontsize=14

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

Answer 1

你为什么不嘲笑一下进行api调用的底层方法呢？

例如，如果您正在使用fetch（）检索数据，您可以模拟它。通过这种方式，您可以为该调用定义自定义响应，这将使测试挂钩本身变得简单。

Answer 2

这个问题已经有几个月了，但是如果你还没有找到一个好的解决方案，我写了一个可能会有所帮助的包。我经历了类似的思考过程，包括“如果我把钩子注入组件呢？”事情变得很奇怪。

我基本上想要一个连接器，以避免仅仅为了测试它们而为表现性组件提供额外的包装。

我提出了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);

现在，您不必模拟挂钩，只需使用道具测试演示者：

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();
  });
});

如果你愿意，你甚至可以对钩子进行单元测试。

Answer 3

使用笑话模仿您的自定义钩子。

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

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