如何使用Jest为每个测试用例动态Mock自定义Hook数据

要实现每个测试用例独立配置Mock返回值，核心是把原有的静态Mock改成可动态修改的Jest mock函数，具体重构步骤如下：

1. 重构全局Mock配置 #

将原固定返回值的useScreenHook改为Jest mock函数，并设置默认返回值（可选，用于无特殊配置的测试用例）：

// 定义默认Mock返回值（可根据需求调整）
const defaultHookReturn = {
  startCapture: jest.fn(),
  viewableData: () => ({
    height: 1500,
    width: 1600,
    image: '00w0KGgoAAAANSUhEUgAAAGQiVBORAAABkBAMAAACCzIhnAAAAG1BMVEWJiob'
  })
};

// 重构mock：让useScreenHook成为可修改的jest mock函数
jest.mock('@myModules/screen-hook', () => ({
  ...jest.requireActual('@myModules/screen-hook'),
  useScreenHook: jest.fn().mockReturnValue(defaultHookReturn)
}));

// 类型断言（TypeScript用），方便后续在测试用例中调用mock方法
const useScreenHookMock = jest.mocked(require('@myModules/screen-hook').useScreenHook);

如果是JavaScript环境，去掉jest.mocked类型断言即可。

2. 在单个测试用例中自定义返回值 #

在每个测试用例的开头，调用useScreenHookMock.mockReturnValue()或mockImplementation()，设置当前测试需要的startCapture和viewableData：

示例1：使用默认Mock值测试 #

test('组件正常渲染（默认Mock值）', async () => {
  // 无需修改mock，直接使用默认配置
  const result = render(<Screen />);
  expect(result).toBeDefined();
});

示例2：自定义viewableData返回值 #

test('渲染自定义尺寸的屏幕内容', async () => {
  // 覆盖当前测试的Hook返回值
  useScreenHookMock.mockReturnValue({
    startCapture: jest.fn().mockResolvedValue('捕获成功'),
    viewableData: () => ({
      height: 800,
      width: 600,
      image: '自定义图片base64字符串'
    })
  });

  const result = render(<Screen />);
  // 针对自定义数据添加断言
  expect(result.getByTestId('screen-container')).toHaveStyle({ height: '800px' });
});

示例3：模拟startCapture抛出错误 #

test('处理捕获失败的异常场景', async () => {
  useScreenHookMock.mockReturnValue({
    startCapture: jest.fn().mockRejectedValue(new Error('捕获失败')),
    viewableData: () => ({ height: 1000, width: 1000, image: '' })
  });

  const result = render(<Screen />);
  // 触发捕获操作并断言错误提示
  await userEvent.click(result.getByTestId('capture-btn'));
  expect(result.getByText('捕获失败')).toBeInTheDocument();
});

3. 避免测试用例污染（可选） #

如果需要确保每个测试用例的Mock状态独立，可以在beforeEach中重置Mock：

beforeEach(() => {
  // 重置mock的调用记录和返回值
  useScreenHookMock.mockClear();
  // 恢复默认返回值（可选）
  useScreenHookMock.mockReturnValue(defaultHookReturn);
});

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