Jest测试React Swiper组件时useContext获取的trackClickWithParam提示不是函数的问题求助

这个错误的核心原因很明确：你的Swiper组件依赖TrackingContext提供的trackClickWithParam函数，但在测试代码里，你直接渲染了SwiperComponent，没有用TrackingProvider包裹它。正常运行时你的应用是被TrackingProvider包裹的，所以组件能拿到合法的上下文值；但测试环境下没有这个包裹，组件从useContext拿到的是默认值（如果没给TrackingContext设置defaultValue的话就是undefined），自然会报错说这个“函数不是函数”。

下面给你几个可行的解决思路：

1. 在测试中用Mock的上下文Provider包裹组件 #

这是最规范的做法，模拟组件真实运行时的上下文环境：

// 导入你的TrackingProvider
import { TrackingProvider } from './path-to-your-context-file';

// 修改测试里的render逻辑
describe('SwiperComponent', () => {
  beforeEach(() => {
    render(
      <TrackingProvider value={{
        // 给所有上下文属性提供mock函数/值
        initWebtrekkWithConfig: jest.fn(),
        trackClickWithParam: jest.fn(), // 关键：mock这个点击追踪函数
        showCookieConsentLayer: false,
        setShowCookieConsentLayer: jest.fn(),
      }}>
        <SwiperComponent {...props} />
      </TrackingProvider>
    );
  });

  // 你的测试用例...
});

这样组件就能拿到合法的trackClickWithParam（一个jest mock函数），点击按钮时不会报错，你甚至还能额外断言这个函数是否被正确调用了。

2. Mock React的useContext钩子 #

如果不想完整包裹Provider，也可以直接mockuseContext，让它返回组件需要的上下文值：

import { useContext } from 'react';
import { TrackingContext } from './path-to-your-context-file';

// Mock useContext钩子，保留React其他原生功能
jest.mock('react', () => ({
  ...jest.requireActual('react'),
  useContext: jest.fn(),
}));

describe('SwiperComponent', () => {
  beforeEach(() => {
    // 让useContext返回我们需要的上下文对象
    (useContext as jest.Mock).mockReturnValue({
      trackClickWithParam: jest.fn(),
      initWebtrekkWithConfig: jest.fn(),
      showCookieConsentLayer: false,
      setShowCookieConsentLayer: jest.fn(),
    });
    render(<SwiperComponent {...props} />);
  });

  // 你的测试用例...
});

3. 让组件代码更健壮（可选链调用） #

如果你希望组件本身在上下文缺失时也能不报错（比如某些边缘场景），可以修改组件里的点击回调，用可选链操作符?.调用函数：

// 组件里的onClick回调修改为
onClick={(event) => { 
  (event.target as HTMLButtonElement).blur(); 
  trackClickWithParam?.(trackingParamNext); // 用可选链，函数不存在时不会执行也不报错
}}

这个方法是修改业务代码，适合你想提升组件鲁棒性的场景，但还是建议优先在测试中提供正确的上下文环境，这样测试更贴近真实运行情况。

内容的提问来源于stack exchange，提问作者f.g.