如何在指定Jest测试用例中mock React Redux的useDispatch方法

失效原因 #

你当前的写法仅通过jest.spyOn对useDispatch做了监听，默认会保留原函数的执行逻辑，没有替换为mock实现，所以调用的还是原始方法。如果被测试组件的导入时机早于mock执行时机，也会导致组件已经引用了原始的useDispatch，mock不生效。

正确实现写法 #

基础写法（单测试用例） #

import * as reactRedux from 'react-redux';

test('测试触发dispatch的逻辑', () => {
  // 1. 定义mock的dispatch函数，用于后续断言调用情况
  const mockDispatch = jest.fn();
  // 2. 替换useDispatch的实现，返回我们的mock dispatch
  jest.spyOn(reactRedux, 'useDispatch').mockImplementation(() => mockDispatch);

  // 3. 这里再导入/渲染被测试组件，确保组件拿到的是mock后的useDispatch
  const { YourComponent } = require('./你的组件路径');
  const { getByRole } = render(<YourComponent />);

  // 4. 执行触发dispatch的交互逻辑
  fireEvent.click(getByRole('button', { name: '提交' }));

  // 5. 断言dispatch调用符合预期
  expect(mockDispatch).toHaveBeenCalledWith({
    type: '你的action类型',
    payload: '预期的参数'
  });

  // 6. 测试结束恢复原useDispatch实现，避免影响其他用例
  jest.restoreAllMocks();
});

多测试用例复用写法 #

如果多个测试用例都需要mock useDispatch，可以放在生命周期钩子中统一处理：

import * as reactRedux from 'react-redux';

let mockDispatch;
// 每个用例执行前初始化mock
beforeEach(() => {
  mockDispatch = jest.fn();
  jest.spyOn(reactRedux, 'useDispatch').mockImplementation(() => mockDispatch);
});

// 每个用例执行后清理mock
afterEach(() => {
  jest.clearAllMocks();
  jest.restoreAllMocks();
});

test('第一个用例', () => {
  render(<YourComponent />);
  // 测试逻辑
  expect(mockDispatch).toHaveBeenCalledTimes(1);
});

test('第二个用例', () => {
  render(<OtherComponent />);
  // 测试逻辑
  expect(mockDispatch).toHaveBeenCalledTimes(2);
});

注意事项 #

• 如果你在测试文件顶部直接静态导入了被测试组件，需要调整为mock执行后再动态导入组件，或者把mock逻辑放在测试文件最顶部，早于组件导入的位置
• 确认你的Jest全局配置没有开启restoreMocks: true，如果开启了会在每个用例执行前自动恢复所有mock，导致你的自定义实现被重置
• 不需要移除测试代码里的Redux Provider包裹，mock后的useDispatch优先级高于Provider内置的dispatch实例

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