Jest spyOn报错'_isMockFunction' of undefined，React组件测试求助

嘿，这个错误我之前踩过坑，本质就是你要断言的那个函数要么不是Jest的mock函数，要么根本没被正确关联到测试的组件上。结合你说的componentDidMount调用函数的场景，我来拆解下问题和修复方法：

错误核心原因 #

你大概率是没把mock函数正确挂载到组件的原型或实例上，或者mock的时机太晚了。比如你的组件类里定义了实例方法fetchData，在componentDidMount里调用this.fetchData()，那测试时得先mock这个方法的原型版本，而不是随便定义个变量或者渲染组件后再去mock。

具体修复步骤 #

假设你的组件代码大概是这样：

class TestComponent extends React.Component {
  componentDidMount() {
    this.fetchData();
  }

  fetchData() {
    // 实际的请求逻辑
  }

  render() {
    return <div>Hello</div>;
  }
}

那测试代码要这么写才对：

import React from 'react';
import { shallow } from 'enzyme';
import TestComponent from './TestComponent';

describe('TestComponent', () => {
  it('calls fetchData when component mounts', () => {
    // 关键：渲染组件前，mock组件原型上的fetchData方法
    const mockFetch = jest.spyOn(TestComponent.prototype, 'fetchData').mockImplementation(() => {});
    
    // 渲染组件
    const wrapper = shallow(<TestComponent />);
    
    // 断言mock函数被调用
    expect(mockFetch).toHaveBeenCalled();
    
    // 测试后清除mock，避免影响其他用例
    mockFetch.mockRestore();
  });
});

为什么之前会报错？ #

如果你之前是渲染组件后才去mock实例上的方法，或者定义了独立mock函数但没替换组件里的目标函数，那组件在componentDidMount里调用的还是原函数，你尝试断言的“函数”根本不是Jest的mock函数，自然会出现_isMockFunction undefined的错误。

关键注意点 #

• 一定要在渲染组件之前完成mock操作，不然组件挂载时已经调用了原函数，mock就无效了。
• 对于类组件的实例方法，mock它的prototype版本是最可靠的方式，这样所有组件实例都会使用这个mock函数。

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