现有React Native项目配置Jest快照测试出现组件类型无效报错如何解决

问题核心原因 #

报错是因为以下几处配置遗漏/错误：

1. @react-native-firebase/messaging mock不全，缺少代码中用到的requestPermission、onMessage方法
2. zustand的useAuth store未做mock，测试环境下无法获取正确的isLogin状态
3. React Navigation相关组件未mock，NavigationContainer及自定义导航器在Jest环境下无法正常渲染
4. 依赖版本不匹配：项目使用react@17.0.1，但安装的react-test-renderer是16.x版本，渲染逻辑不兼容
5. 导入的i18n文件未做mock，测试环境初始化i18n会报错

修复步骤 #

1. 补全@react-native-firebase/messaging mock

修改jest.setup.js中对应的mock规则：

jest.mock('@react-native-firebase/messaging', () => {
  const module = () => {
    return {
      getToken: jest.fn(() => '1234'),
      requestPermission: jest.fn(() => Promise.resolve(1)), // 对应授权成功状态
      onMessage: jest.fn(() => jest.fn()), // 返回空的unsubscribe方法
    };
  };
  module.AuthorizationStatus = {
    NOT_DETERMINED: -1,
    DENIED: 0,
    AUTHORIZED: 1,
    PROVISIONAL: 2,
  };

  return module;
});

2. 添加zustand auth store mock

在jest.setup.js末尾添加：

// 按照你实际的authStore导出规则调整
jest.mock('./src/stores/authStore', () => ({
  useAuth: jest.fn(() => ({
    isLogin: false, // 可自定义值测试登录/未登录状态
  })),
}));

3. Mock React Navigation相关组件

在jest.setup.js末尾添加：

//  mock导航容器，直接返回子组件跳过导航原生逻辑
jest.mock('@react-navigation/native', () => {
  const actual = jest.requireActual('@react-navigation/native');
  return {
    ...actual,
    NavigationContainer: ({ children }) => children,
  };
});
// mock自定义导航器，避免内部依赖报错
jest.mock('./src/navigation/AuthNavigator', () => 'AuthNavigator');
jest.mock('./src/navigation/RootNavigator', () => 'RootNavigator');

4. Mock i18n初始化

在jest.setup.js末尾添加：

jest.mock('./src/i18n', () => jest.fn());

5. 修复版本不匹配问题

执行命令安装对应版本的react-test-renderer：

npm install react-test-renderer@17.0.1 --save-dev

如果使用yarn：

yarn add react-test-renderer@17.0.1 -D

6. 优化测试用例

你当前的测试用例没有生成快照，修改__test__/App-test.tsx如下：

import 'react-native';
import React from 'react';
import App from '../App';
import renderer from 'react-test-renderer';

describe('App', () => {
  it('renders app stack correctly', () => {
    const tree = renderer.create(<App />).toJSON();
    expect(tree).toMatchSnapshot();
  });
});

所有异步逻辑已被mock为同步返回，不需要额外添加waitFor。

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