如何Mock自定义Hook？需Mock useEffect中调用的getConversionList

核心思路 #

因为useConversion是从第三方库导出的自定义Hook，直接Mock这个Hook的返回值即可，无需单独spyOngetConversionList（spyOn更适合对象的方法，而非导出的Hook）。

步骤1：Mock整个useConversion Hook #

在测试文件顶部，用jest.mock模拟@custom/library模块，保留其他Hook的原始实现，只替换useConversion：

import { render, waitFor } from '@testing-library/react';
import { useConversion } from '@custom/library';
import TargetComponent from './你的组件路径';

// 模拟第三方库，保留其他Hook的原始逻辑
jest.mock('@custom/library', () => ({
  ...jest.requireActual('@custom/library'),
  useConversion: jest.fn(() => [
    jest.fn(), // 初始mock的getConversionList函数
    [] // 初始mock的conversionList数据
  ])
}));

步骤2：验证组件挂载时调用getConversionList #

在测试用例中，替换useConversion的返回值为自定义mock函数，渲染组件后断言调用：

test('组件挂载时自动调用getConversionList', () => {
  // 创建一个可追踪的mock函数
  const mockGetList = jest.fn();
  // 让useConversion返回这个mock函数和模拟的列表数据
  useConversion.mockReturnValue([mockGetList, []]);

  // 渲染目标组件
  render(<TargetComponent />);

  // 断言函数被调用一次
  expect(mockGetList).toHaveBeenCalledTimes(1);
});

步骤3：模拟异步/更新场景（可选） #

如果getConversionList是异步方法，或者需要模拟列表更新的逻辑，可以这样处理：

test('异步获取列表后渲染内容', async () => {
  const mockGetList = jest.fn().mockResolvedValue();
  const mockListData = [{ id: 1, label: '示例转换项' }];

  useConversion.mockReturnValue([mockGetList, mockListData]);

  const { getByText } = render(<TargetComponent />);

  // 等待异步逻辑完成，断言内容渲染
  await waitFor(() => {
    expect(getByText('示例转换项')).toBeInTheDocument();
  });
  expect(mockGetList).toHaveBeenCalled();
});

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