React Native测试遇两大问题：组件渲染失败与expect未定义

两个核心问题 #

• 组件渲染错误：控制台提示React.createElement: type is invalid，Example组件无法正常渲染
• 测试套件运行失败：抛出ReferenceError: expect is not defined错误

问题1：组件渲染错误（React.createElement: type is invalid） #

原因分析 #

你的jest.config.js中通过moduleNameMapper将react-native映射到了自定义mock文件<rootDir>/__mocks__/react-native.js，如果该mock文件未正确导出Button、Text、View等React Native核心组件，会导致渲染时组件类型无效，触发错误。

修复方案 #

1. 临时排查：注释自定义mock映射
   暂时注释moduleNameMapper中的react-native映射规则，测试组件是否能正常渲染：

   // jest.config.js
   moduleNameMapper: {
     // 注释掉这一行
     // '^react-native$': '<rootDir>/__mocks__/react-native.js',
     'react-native-vector-icons/(.*)$': '<rootDir>/__mocks__/react-native-vector-icons.js',
     "^@sentry/react-native$": "<rootDir>/__mocks__/@sentry/react-native.js"
   },
   

2. 修复自定义mock文件
   如果必须保留自定义mock，修改__mocks__/react-native.js，确保正确导出所有需要的核心组件：

   // __mocks__/react-native.js
   import * as ReactNative from 'react-native';
   
   module.exports = {
     ...ReactNative,
     // 显式导出需要的组件（或直接展开全部）
     Button: ReactNative.Button,
     Text: ReactNative.Text,
     View: ReactNative.View,
     // 其他需要自定义mock的模块
   };
   

问题2：ReferenceError: expect is not defined #

原因分析 #

尽管你在jest.setup.js中导入了@testing-library/react-native/extend-expect，但可能存在以下问题：

• setupFilesAfterEnv路径配置错误，导致Jest未执行该初始化文件
• Jest版本与@testing-library/react-native版本不兼容
• 缺少Jest核心依赖，或全局环境未正确配置

修复方案 #

1. 修正setup文件路径
   在jest.config.js中确保setupFilesAfterEnv路径正确，可使用绝对路径格式：

   // jest.config.js
   setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
   

2. 确保Jest核心依赖已安装
   检查项目是否安装了jest作为开发依赖，未安装则执行：

   npm install --save-dev jest
   # 或使用yarn
   yarn add --dev jest
   

3. 手动导入expect（临时方案）
   如果全局配置仍不生效，可在测试文件顶部手动导入：

   import { expect } from 'jest';
   // 或导入全部全局API
   import '@jest/globals';
   

4. 兼容版本检查
   确保@testing-library/react-native版本适配React 18（建议v12+），执行升级：

   npm install --save-dev @testing-library/react-native@latest
   

额外配置检查点 #

• 清理无效正则符号：你的jest.config.js中transformIgnorePatterns存在重复的||符号（如react-native-linear-gradient||react-native-image-slider-box），会导致正则表达式失效，建议清理后重新配置：

  // jest.config.js
  transformIgnorePatterns: [
    'node_modules/(?!(react-native|@react-native|i18n-js|@react-navigation|react-native-keychain|@react-native-firebase|react-native-polyfills|react-native-config|react-native-encrypted-storage|react-native-version-check|react-native-device-info|react-native-flipper|redux-flipper|react-native-modal|react-native-toast-message|react-native-gesture-handler|react-native-animatable|react-native-biometrics|react-native-phone-number-input|react-native-confirmation-code-field|react-native-webview|react-native-document-picker|react-native-image-picker|react-native-permissions|react-native-recaptcha-that-works|react-native-file-viewer|react-native-image-zoom-viewer|rn-fetch-blob|react-native-parsed-text|react-native-restart|react-native-wheel-picker-android|react-native-skeleton-placeholder|@react-native-masked-view/masked-view|react-native-linear-gradient|react-native-image-slider-box|react-native-vector-icons|@sentry/react-native|react-native-radio-buttons-group|@notifee/react-native|react-native-push-notification|react-native-image-progress|react-native-progress|react-native-swipe-list-view|react-native-date-picker|@ptomasroos/react-native-multi-slider|react-native-select-dropdown|react-native-base64|react-native-gifted-charts|react-native-android-open-settings|react-native-signature-canvas|react-native-maps|react-native-open-maps|react-native-gifted-chat|react-native-rsa-native|react-native-dropdown-picker|lottie-react-native|react-native-app-intro-slider|react-native-code-push|react-native-splash-screen|@react-native-community/netinfo|jail-monkey|@testing-library/react-native)/)',
  ],
  

• 检查babel-jest依赖：确保babel-jest已安装，否则Jest无法转译代码：

  npm install --save-dev babel-jest
  

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