React测试componentDidMount条件API调用报错，求正确测试方法

错误原因 #

你遇到的TypeError: Cannot read property 'componentDidMount' of undefined，核心问题出在spy的挂载对象上：你给组件实例（mount()返回的TFCRender）的prototype加了spy，但组件实例本身没有prototype属性——prototype是组件类的专属属性，不是实例的。

正确的测试步骤 #

• 确保你已经导入了目标组件类（比如import Component from './YourComponent'）
• 在挂载组件之前，针对组件类的prototype创建componentDidMount方法的spy
• 挂载组件后，再进行调用次数的断言

修正后的完整测试代码 #

import Component from './YourComponent'; // 导入组件类
import fetchAPICall from './your-api-module'; // 导入要测试的API函数

// 先mock API函数，确保能准确追踪调用情况
jest.mock('./your-api-module', () => ({
  __esModule: true,
  default: jest.fn()
}));

it('should not fetch data when fetch prop is true', () => {
  // 关键：给组件类的prototype创建spy，而不是实例
  const didMountSpy = jest.spyOn(Component.prototype, 'componentDidMount');
  
  // 挂载带fetch属性的组件
  mount(<Component fetch />);
  
  // 断言componentDidMount执行过一次
  expect(didMountSpy).toHaveBeenCalledTimes(1);
  // 断言API调用没有触发
  expect(fetchAPICall).toHaveBeenCalledTimes(0);
  
  // 清理spy，避免影响其他测试用例
  didMountSpy.mockRestore();
});

额外提示 #

• 一定要先mockfetchAPICall函数，不然无法准确判断它是否被调用
• 如果你的组件是命名导出，导入和mock时要对应调整
• 用mockRestore()清理spy是好习惯，能保证每个测试用例的独立性

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