如何使用Jest spyOn对需传参的useGetTableData Hook进行模拟？

背景 #

之前用 Jest 的 spyOn 模拟无参数自定义 Hook 一直正常，代码如下：

jest.spyOn(Hooks, "useGetTableData").mockImplementation({ refetch: jest.fn() });

但现在目标 Hook useGetTableData 需要接收字符串参数，组件中的调用方式为：

const type = `typeOfTable`
const { refetch } = useGetTableData(type);

解决方案 #

核心要点 #

mockImplementation 支持传入函数替代直接传对象，这个函数可以接收 Hook 被调用时传入的所有参数，你可以根据需求处理参数并返回模拟结果。

具体实现 #

1. 通用模拟（不区分参数）

如果不需要针对特定参数做处理，直接返回固定模拟对象：

jest.spyOn(Hooks, "useGetTableData").mockImplementation(() => ({
  refetch: jest.fn()
}));

2. 针对指定参数的模拟

如果需要仅对特定参数（比如 typeOfTable）返回模拟值，可以在函数内判断参数：

jest.spyOn(Hooks, "useGetTableData").mockImplementation((param) => {
  if (param === 'typeOfTable') {
    return { refetch: jest.fn() };
  }
  // 其他参数场景可按需处理，比如返回空对象或调用原Hook
  return {};
});

3. 验证参数传递正确性

若要确认组件调用 Hook 时传入了预期参数，可使用 Jest 的断言方法：

// 组件渲染完成后执行断言
expect(Hooks.useGetTableData).toHaveBeenCalledWith('typeOfTable');

内容的提问来源于stack exchange，提问作者Pikk