在Jest中Mock @react-navigation/stack的GestureHandlerRefContext遇测试报错

问题分析 #

报错TypeError: (0 , _native.createNavigatorFactory) is not a function是因为Jest测试环境中，@react-navigation/stack内部的依赖（比如createNavigatorFactory或关联的手势处理模块）未被正确Mock，导致导入GestureHandlerRefContext时触发了未Mock的内部逻辑。

正确Mock方案 #

直接Mock @react-navigation/stack 导出的GestureHandlerRefContext，绕过其内部复杂的依赖链，具体有两种实现方式：

1. 全局Mock（在jest.setup.js中配置） #

在你的Jest全局配置文件（通常是jest.setup.js）中添加以下代码：

import React from 'react';

jest.mock('@react-navigation/stack', () => {
  const originalModule = jest.requireActual('@react-navigation/stack');
  // 创建模拟的GestureHandlerRefContext
  const GestureHandlerRefContext = React.createContext(null);
  
  return {
    ...originalModule,
    GestureHandlerRefContext,
  };
});

这种方式会全局生效，所有用到GestureHandlerRefContext的测试都会使用这个模拟的Context。

2. 单测文件内局部Mock #

如果只需要在特定测试文件中Mock，可以在测试文件顶部添加：

import React from 'react';
import { render } from '@testing-library/react-native';
import { CheckoutModal } from './CheckoutModal';

jest.mock('@react-navigation/stack', () => {
  const originalModule = jest.requireActual('@react-navigation/stack');
  const GestureHandlerRefContext = React.createContext(null);
  
  return {
    ...originalModule,
    GestureHandlerRefContext,
  };
});

describe('CheckoutModal', () => {
  it('renders correctly', () => {
    render(<CheckoutModal />);
    // 你的断言逻辑
  });
});

3. 自定义Context值（可选） #

如果需要测试ref传入后的逻辑，可以在测试时覆盖Context的值：

import React from 'react';
import { render } from '@testing-library/react-native';
import { CheckoutModal } from './CheckoutModal';
import { GestureHandlerRefContext } from '@react-navigation/stack';

describe('CheckoutModal', () => {
  it('handles gesture ref correctly', () => {
    const mockRef = { current: {} }; // 模拟手势处理的ref
    
    render(
      <GestureHandlerRefContext.Provider value={mockRef}>
        <CheckoutModal />
      </GestureHandlerRefContext.Provider>
    );
    
    // 断言scroll组件是否正确接收了ref相关的props
  });
});

为什么之前的方案无效 #

你之前按照文档Mock react-native-gesture-handler的方式没有解决问题，是因为@react-navigation/stack内部直接导入了PanGestureHandler等模块，同时依赖createNavigatorFactory这类内部API，这些依赖在测试环境中未被正确初始化，直接Mock目标Context是最直接的解决方案，不需要处理复杂的内部依赖链。

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