如何用Jest监听react-redux的useDispatch调用？

问题根源：模块导入顺序错误 #

你当前的写法大概率是组件在mock之前就被导入了，导致组件使用的是真实的useDispatch，而非你定义的mock函数。jest.doMock不会自动将代码提升到文件顶部，导入顺序出错的话，mock完全不会生效。

正确实现方式 #

方法1：使用jest.mock（推荐） #

jest.mock会被Jest自动提升到所有导入语句之前，确保组件拿到的是mock后的useDispatch：

// 先定义mock函数
const mockDispatchFn = jest.fn();

// 用jest.mock替代doMock，自动提升到代码顶部
jest.mock('react-redux', () => ({
  ...jest.requireActual('react-redux'), // 保留react-redux其他真实导出内容
  useDispatch: () => mockDispatchFn,
}));

// 现在再导入组件，确保组件使用的是mock的useDispatch
import YourComponent from './YourComponent';

// 测试用例
test('dispatch被正确调用', () => {
  render(<YourComponent />);
  // 触发组件内调用dispatch的操作（比如点击按钮）
  // ...
  expect(mockDispatchFn).toHaveBeenCalledWith(/* 填入你要断言的action */);
});

方法2：若必须用jest.doMock，手动控制导入时机 #

如果因特殊需求必须使用jest.doMock，需确保组件在mock之后才被导入，比如将组件导入放在测试用例内部：

test('dispatch被正确调用', () => {
  const mockDispatchFn = jest.fn();
  
  jest.doMock('react-redux', () => ({
    ...jest.requireActual('react-redux'),
    useDispatch: () => mockDispatchFn,
  }));

  // 动态导入组件，保证mock已生效
  const YourComponent = require('./YourComponent').default;

  render(<YourComponent />);
  // 触发dispatch操作
  // ...
  expect(mockDispatchFn).toHaveBeenCalledWith(/* 你的action */);
});

额外排查点 #

• 确认组件内是通过useDispatch()获取dispatch，而非直接使用store.dispatch
• 若使用Redux Toolkit，需保证断言的action结构与组件内dispatch的完全一致
• 测试中需正确触发组件内调用dispatch的操作（比如点击按钮、触发生命周期等）

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