React项目中用Jest Mock Redux Toolkit的Store与Slice做单元测试

核心思路 #

直接通过jest.mock完全替换掉Store和MySlice模块的真实代码，不让它们的初始化逻辑、reducers/extraReducers执行，只返回测试需要的模拟导出内容，彻底规避配置相关的报错。

具体实现步骤 #

1. 完全Mock Store模块

根据你的Store导出内容，针对性模拟useSelector、useDispatch或store实例等superFunc用到的部分：

// 替换为你的Store实际路径
jest.mock('../src/store', () => ({
  // 模拟useSelector，返回测试需要的状态值
  useSelector: jest.fn().mockReturnValue({ userInfo: { id: 123 } }),
  // 模拟useDispatch，返回一个空的jest函数
  useDispatch: jest.fn().mockReturnValue(jest.fn()),
  // 如果superFunc直接用到了store实例，也一并mock
  store: {
    getState: jest.fn().mockReturnValue({ mySlice: { data: 'mock-data' } }),
    dispatch: jest.fn()
  }
}));

2. 完全Mock MySlice模块

只模拟superFunc调用到的actions或其他导出项，不需要关心内部的reducers/extraReducers：

// 替换为你的MySlice实际路径
jest.mock('../src/features/mySlice', () => ({
  // 模拟slice导出的actions，比如superFunc用到的updateData
  mySliceActions: {
    updateData: jest.fn().mockReturnValue({ type: 'mock/updateData' })
  },
  // 如果有导出的reducer，可直接mock为空函数
  myReducer: jest.fn()
}));

3. 编写superFunc的测试用例

在测试中直接调用superFunc，断言mock函数的调用情况或superFunc的返回值：

import superFunc from '../src/superFunc';
import { useSelector, useDispatch } from '../src/store';
import { mySliceActions } from '../src/features/mySlice';

describe('superFunc', () => {
  beforeEach(() => {
    // 清空所有mock的调用记录，避免测试用例互相干扰
    jest.clearAllMocks();
  });

  it('should handle mock state correctly', () => {
    // 针对当前测试场景，修改useSelector的返回值
    (useSelector as jest.Mock).mockReturnValue({ mySlice: { count: 10 } });
    
    const result = superFunc();
    
    // 断言superFunc的返回结果
    expect(result).toBe('expected-result');
    // 断言dispatch是否调用了预期的action
    expect(useDispatch()).toHaveBeenCalledWith(mySliceActions.updateData(11));
  });
});

关键注意事项 #

• 确保mock的模块路径和superFunc中导入的路径完全一致，Jest会根据路径匹配替换模块
• 只需要mock superFunc实际用到的导出项，不需要模拟模块的全部内容
• 每次测试前用jest.clearAllMocks()清空mock调用记录，避免测试污染

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