Jest测试报错：createNativeStackNavigator不是函数求助

问题核心 #

测试基于Context/Provider封装的useActiveInspectionProvider时，因@react-navigation/native-stack的createNativeStackNavigator未被正确模拟，导致报错TypeError: (0 , _nativeStack.createNativeStackNavigator) is not a function，且不愿修改业务代码。

可行解决方案（无需修改业务代码） #

方案1：手动创建模块模拟文件

在项目根目录新建__mocks__/@react-navigation/native-stack.js文件，填入以下内容：

export const createNativeStackNavigator = () => ({
  Screen: jest.fn(),
  Navigator: jest.fn(),
});

export default { createNativeStackNavigator };

Jest会自动优先使用该模拟文件，替代真实库的导出逻辑，避免调用未被模拟的真实方法。

方案2：在测试文件内直接模拟ES模块导出

在useActiveInspectionProvider.test.tsx顶部添加模拟代码：

jest.mock('@react-navigation/native-stack', () => ({
  __esModule: true,
  createNativeStackNavigator: jest.fn(() => ({
    Screen: jest.fn(),
    Navigator: jest.fn(),
  })),
}));

注意必须添加__esModule: true，匹配react-navigation的ES模块导出结构，确保jest能正确识别模拟内容。

方案3：使用官方测试工具（更贴近真实场景）

借助@react-navigation/testing库提供测试导航上下文，无需手动模拟所有组件：

1. 安装依赖：

npm install --save-dev @react-navigation/testing

2. 在测试中包裹Provider组件：

import { render } from '@testing-library/react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createMockNavigator } from '@react-navigation/testing';

// 创建模拟导航器
const MockNavigator = createMockNavigator();

// 测试渲染逻辑
render(
  <NavigationContainer>
    <MockNavigator>
      <YourActiveInspectionProvider>
        {/* 注入测试组件或hook调用逻辑 */}
      </YourActiveInspectionProvider>
    </MockNavigator>
  </NavigationContainer>
);

该方式能模拟更真实的导航环境，同时避免手动模拟的繁琐。

验证操作 #

完成任意方案配置后，运行测试命令：

npx jest useActiveInspectionProvider.test.tsx

确认报错消失，测试可正常执行API模拟与状态验证。

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