React Navigation测试报导航器未注册错误如何解决

问题复现代码 #

当前编写的TTopBar组件快照测试代码如下：

it('renders correctly', async () => {
    const tree = renderer
        .create(
          <TTopBar
          tabBarScrollEnabled={true}
          containerHeight={350}
          initialRouteName={'Home'}
        screens={[
          {
            name: 'Home',
            component: HomeScreen,
          },
          {
            name: 'Settings',
            component: SettingsScreen,
          },
          {
            name: 'Profile',
            component: ProfileScreen,
          },
          {
            name: 'Tour',
            component: TourScreen,
          },
          {
            name: 'Fashion',
            component: FashionScreen,
          },
        ]}
      />,
    )
    .toJSON();
    await act(async () => {
    expect(tree).toMatchSnapshot();
  });
});

报错信息 #

运行测试时抛出异常：

Couldn't register the navigator. Have you wrapped your app with 'NavigationContainer'?
该异常也可能由项目中安装了多份@react-navigation相关依赖包导致。
直接全量mock导航逻辑易引发其他连锁错误。

排查步骤 #

按优先级从高到低依次排查：

• 依赖重复安装检查
  执行对应包管理工具命令，检查是否存在多版本@react-navigation/native：

  # npm 环境
  npm ls @react-navigation/native
  # yarn 环境
  yarn list --pattern @react-navigation/native
  # pnpm 环境
  pnpm ls @react-navigation/native
  

  若输出结果中存在多个版本号，按如下流程修复：
  1. 删除项目下的node_modules目录与对应lock文件（package-lock.json/yarn.lock/pnpm-lock.yaml）
  2. 重新执行安装命令拉取依赖
  3. 若仍存在多版本冲突，在package.json中添加overrides（npm）/resolutions（yarn/pnpm）字段，强制统一全项目@react-navigation/native版本
• 测试环境导航上下文缺失检查
  所有基于React Navigation封装的导航组件（含自定义TTopBar），运行时必须依赖NavigationContainer提供的上下文。测试环境直接渲染组件未包裹该容器，是触发该报错的最常见原因。全量mock整个导航包会破坏内部上下文依赖，极易引发新的错误，不推荐使用。

解决方案 #

方案1：测试渲染时包裹NavigationContainer（优先推荐） #

修改测试用例，渲染TTopBar时外层包裹NavigationContainer提供完整导航上下文，无需额外mock导航逻辑：

import { NavigationContainer } from '@react-navigation/native';

it('renders correctly', async () => {
    const tree = renderer
        .create(
          <NavigationContainer>
            <TTopBar
              tabBarScrollEnabled={true}
              containerHeight={350}
              initialRouteName={'Home'}
              screens={[
                { name: 'Home', component: HomeScreen },
                { name: 'Settings', component: SettingsScreen },
                { name: 'Profile', component: ProfileScreen },
                { name: 'Tour', component: TourScreen },
                { name: 'Fashion', component: FashionScreen },
              ]}
            />
          </NavigationContainer>
    )
    .toJSON();
    await act(async () => {
      expect(tree).toMatchSnapshot();
    });
});

若测试场景不需要真实导航跳转逻辑，可给NavigationContainer传入虚拟linking配置，屏蔽外部路由相关报错。

方案2：精准mock导航依赖（适用于不需要渲染完整导航逻辑的轻量测试场景） #

若不想引入完整NavigationContainer，仅mock组件实际用到的导航API即可，禁止全量mock整个@react-navigation包：

// 测试文件顶部添加mock
jest.mock('@react-navigation/native', () => {
  const actualNav = jest.requireActual('@react-navigation/native');
  return {
    ...actualNav,
    useNavigation: () => ({
      navigate: jest.fn(),
      dispatch: jest.fn(),
      // 按需补充组件实际调用的导航方法即可
    }),
    useRoute: () => ({
      params: {},
    }),
  };
});

该方案需要手动对齐组件调用的所有导航API，漏写任意方法都会触发新的报错，无特殊需求优先使用方案1。

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