如何使用Jest模拟React组件中的外部类方法？

我来帮你搞定这个测试问题！你需要模拟ResourceService的静态getData方法，让它返回预设的假数据，这样就能测试setActiveSlide调用后组件的状态变化了。下面是具体的实现步骤和代码示例：

方法一：Mock整个ResourceService模块 #

在测试文件顶部直接mock整个资源服务模块，让它的getData方法返回一个resolved的Promise：

import React from 'react';
import { mount } from 'enzyme';
import SliderComponent from '../../../app/components/slider';
import ResourceService from '../../../app/modules/resource-service';

// 模拟ResourceService模块，让getData返回预设的测试数据
jest.mock('../../../app/modules/resource-service', () => ({
  getData: jest.fn().mockResolvedValue({ title: '测试幻灯片数据', content: '这是模拟的返回内容' })
}));

test('SliderComponent更新状态当setActiveSlide被调用时', async () => {
  const wrapper = mount(<SliderComponent />);
  
  // 调用组件实例的setActiveSlide方法，用await等待异步操作完成
  await wrapper.instance().setActiveSlide(1);
  
  // 手动更新wrapper，因为setState是异步的，Enzyme不会自动刷新组件
  wrapper.update();
  
  // 验证组件状态是否正确更新
  expect(wrapper.state('data')).toEqual({ title: '测试幻灯片数据', content: '这是模拟的返回内容' });
  
  // 验证getData是否被传入正确的参数调用
  expect(ResourceService.getData).toHaveBeenCalledWith({ id: 1 });
});

方法二：用jest.spyOn监听并模拟静态方法 #

如果你只需要在单个测试用例中模拟getData，可以用jest.spyOn来创建一个间谍函数，测试结束后还能恢复原方法，避免影响其他测试：

import React from 'react';
import { mount } from 'enzyme';
import SliderComponent from '../../../app/components/slider';
import ResourceService from '../../../app/modules/resource-service';

test('SliderComponent更新状态当setActiveSlide被调用时', async () => {
  // 创建间谍函数，模拟getData返回测试数据
  const getDataSpy = jest.spyOn(ResourceService, 'getData')
    .mockResolvedValue({ title: '测试幻灯片数据', content: '这是模拟的返回内容' });
  
  const wrapper = mount(<SliderComponent />);
  
  await wrapper.instance().setActiveSlide(1);
  wrapper.update();
  
  // 验证状态更新
  expect(wrapper.state('data')).toEqual({ title: '测试幻灯片数据', content: '这是模拟的返回内容' });
  
  // 验证方法调用参数
  expect(getDataSpy).toHaveBeenCalledWith({ id: 1 });
  
  // 测试结束后恢复原方法
  getDataSpy.mockRestore();
});

关键注意点 #

• 异步处理：因为setActiveSlide里的getData是异步操作，所以测试必须用async/await等待Promise完成，否则状态还没更新就检查会导致测试失败。
• 手动更新wrapper：React的setState是异步的，Enzyme不会自动更新组件，所以调用setActiveSlide后需要手动调用wrapper.update()来刷新组件状态。
• 模拟错误场景：如果需要测试错误处理逻辑，可以把mockResolvedValue换成mockRejectedValue(new Error('请求失败'))，然后验证组件的错误处理行为。

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