如何在Jest/Enzyme测试中Mock componentDidMount避免Axios网络请求？

嘿，我太懂你这种头疼的情况了——组件被React DnD的DragDropContext包裹，测试时componentDidMount里的axios请求老是报错，又没法通过props传mock函数。下面给你几个实用的解决方案，挑适合你的来用：

方案1：直接Mock组件实例的load_data方法 #

因为你用箭头函数定义了load_data，它会绑定到组件实例上。我们可以在拿到实例后直接替换这个方法：

it('should run tests without hitting the server', () => {
  // 先shallow渲染被高阶组件包裹的Board
  const boardWrapper = shallow(<Board />);
  // 穿透高阶组件，拿到真实的Board实例
  const boardInstance = boardWrapper.dive().instance();
  
  // 把load_data替换成jest mock函数，彻底阻断真实请求
  boardInstance.load_data = jest.fn();
  
  // 手动触发componentDidMount（shallow渲染默认不会自动执行这个生命周期）
  boardInstance.componentDidMount();
  
  // 验证mock函数被调用了，同时不会发起真实请求
  expect(boardInstance.load_data).toHaveBeenCalled();
  
  // 这里继续你的其他测试逻辑就好啦
});

方案2：全局Mock axios模块 #

如果不想碰组件实例的方法，直接在测试文件开头mock整个axios模块，所有axios请求都会被拦截：

// 测试文件最顶部，先mock axios
jest.mock('axios');

it('should load mock data instead of making real calls', () => {
  // 给axios.get设置模拟的返回值
  axios.get.mockResolvedValue({ data: { /* 这里放你需要的模拟数据 */ } });
  
  const boardWrapper = shallow(<Board />);
  const boardInstance = boardWrapper.dive().instance();
  
  boardInstance.componentDidMount();
  
  // 可选：验证axios的调用是否符合预期
  expect(axios.get).toHaveBeenCalledWith('你的实际请求URL');
});

方案3：Mock组件原型上的load_data方法 #

既然load_data是类的方法，我们可以在渲染组件前修改Board类的原型，这样所有实例的load_data都会被替换：

it('should mock load_data via component prototype', () => {
  // 先保存原始方法，测试完可以恢复，避免影响其他测试用例
  const originalLoadData = Board.prototype.load_data;
  
  // 把原型上的load_data换成mock函数
  Board.prototype.load_data = jest.fn();
  
  const boardWrapper = shallow(<Board />);
  const boardInstance = boardWrapper.dive().instance();
  
  boardInstance.componentDidMount();
  
  expect(boardInstance.load_data).toHaveBeenCalled();
  
  // 恢复原始方法（可选，但推荐，保持测试隔离）
  Board.prototype.load_data = originalLoadData;
});

额外小技巧：Mock React DnD本身 #

有时候shallow().dive()会遇到React DnD上下文的问题，你可以直接mock React DnD的高阶组件，让它直接返回原组件，这样就不用dive了：

// 在测试文件开头mock React DnD
jest.mock('react-dnd', () => ({
  DragDropContext: jest.fn(() => (Component) => Component),
  HTML5Backend: jest.fn(),
}));

// 现在直接shallow渲染就能拿到Board实例，不用dive了
it('should simplify testing by mocking React DnD', () => {
  const boardInstance = shallow(<Board />).instance();
  boardInstance.load_data = jest.fn();
  boardInstance.componentDidMount();
  
  expect(boardInstance.load_data).toHaveBeenCalled();
});

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