为何jest.spyOn无法找到React组件中的onChangeFunc函数？

你的测试代码报错的核心原因很明确：onChangeFunc是Header组件内部定义的局部函数，它只存在于Header函数每次执行的作用域里，并不是Header这个函数对象的静态属性或方法。所以jest.spyOn(Header, 'onChangeFunc')找不到这个目标，TypeScript的类型系统也会提示你Header上不存在这个属性（因此类型是never）。

下面给你两种可行的解决方案，根据你的代码结构选择即可：

方案一：把onChangeFunc提取到组件外部（推荐） #

将逻辑函数从组件内部抽离出来，既方便测试，也利于代码复用：

// Header.tsx
import React, { useState } from 'react';
import { Tabs, Tab } from '@mui/material'; // 假设你用的是MUI的Tabs

// 把onChange逻辑抽离成可导出的函数
export const handleTabChange = (setCurrentItem: React.Dispatch<React.SetStateAction<number>>) => {
  return (event: React.SyntheticEvent, itemNum: number): void => {
    setCurrentItem(itemNum);
  };
};

export function Header(): JSX.Element {
  const initialItemIndex = useInitialItemIndex();
  const [currentItem, setCurrentItem] = useState(initialItemIndex);
  const onChangeFunc = handleTabChange(setCurrentItem);
  
  return (
    <div>
      <Tabs value={currentItem} onChange={onChangeFunc}>
        <Tab label="A" />
        <Tab label="B" />
      </Tabs>
    </div>
  );
}

对应的测试代码：

// Header.test.tsx
import { shallow } from 'enzyme';
import Header, { handleTabChange } from './Header';

describe('Header Component', () => {
  it('triggers onChangeFunc when Tabs are switched', () => {
    // 监听抽离出来的handleTabChange
    const spy = jest.spyOn(require('./Header'), 'handleTabChange');
    
    const wrapper = shallow(<Header />);
    // 模拟Tabs的change事件，传递事件对象和itemNum参数
    wrapper.find('Tabs').simulate('change', {} as React.SyntheticEvent, 1);
    
    // 验证函数被调用
    expect(spy).toHaveBeenCalled();
  });
});

方案二：通过模拟useState间接验证（无需修改组件结构） #

如果不想改动组件代码，可以通过mock React的useState，跟踪setCurrentItem的调用情况——因为onChangeFunc的核心作用就是调用setCurrentItem，所以验证setCurrentItem被调用，就间接证明了onChangeFunc执行了：

// Header.test.tsx
import React, { useState } from 'react';
import { shallow } from 'enzyme';
import Header from './Header';

// Mock React的useState
jest.mock('react', () => ({
  ...jest.requireActual('react'),
  useState: jest.fn(),
}));

describe('Header Component', () => {
  it('updates currentItem when Tabs change', () => {
    const mockSetCurrentItem = jest.fn();
    // 让useState返回我们的mock函数
    (useState as jest.Mock).mockReturnValue([0, mockSetCurrentItem]);
    
    const wrapper = shallow(<Header />);
    // 触发Tabs的change事件，传递必要参数
    wrapper.find('Tabs').simulate('change', {} as React.SyntheticEvent, 1);
    
    // 验证setCurrentItem被正确调用，间接证明onChangeFunc执行了
    expect(mockSetCurrentItem).toHaveBeenCalledWith(1);
  });
});

额外注意点 #

• 模拟change事件时，记得传递必要的参数（事件对象和itemNum），否则你的onChangeFunc可能因为参数缺失而执行异常；
• 如果使用的是MUI等UI库的Tabs组件，它的onChange回调参数是(event: React.SyntheticEvent, value: T) => void，建议把组件里的事件类型从原生Event改成React.SyntheticEvent，避免潜在的类型错误。

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