Jest渲染React Native组件报'No element indexed by 7'错误

问题现象 #

为React Native项目配置Jest测试环境时，所有涉及组件渲染的测试用例运行时都会抛出No element indexed by 7错误，无论执行测试时是否添加--coverage参数，问题都稳定复现。
完整错误栈如下：

FAIL  __tests__/App-test.tsx
      ● Test suite failed to run
    
        No element indexed by 7
    
          at ArraySet_at [as at] (node_modules/source-map-support/node_modules/source-map/lib/array-set.js:109:9)
          at BasicSourceMapConsumer.SourceMapConsumer_originalPositionFor [as originalPositionFor] (node_modules/source-map-support/node_modules/source-map/lib/source-map-consumer.js:673:30)
          at mapSourcePosition (node_modules/source-map-support/source-map-support.js:244:42)
          at wrapCallSite (node_modules/source-map-support/source-map-support.js:397:20)
          at Function.prepareStackTrace (node_modules/source-map-support/source-map-support.js:446:39)
          at Function.write (node_modules/@jest/console/build/BufferedConsole.js:101:7)
          at console._log (node_modules/@jest/console/build/BufferedConsole.js:117:21)
          at console.error (node_modules/@jest/console/build/BufferedConsole.js:161:10)

已尝试的无效操作 #

• 按照同类问题的通用解决思路安装babel相关依赖，执行命令npm install --save-dev babel-jest @babel/core @babel/preset-env
• 将Jest配置中的coverageProvider字段设置为"v8"，切回默认的"babel"后问题依旧
• 将@babel/preset-env加入babel预设列表，仅触发了transformIgnorePatterns列表中其他独立包相关的新错误
• 将source-map-support加入transformIgnorePatterns忽略列表，没有解决问题

现有配置参考 #

测试用例文件App-test.tsx #

/**
 * @format
 */

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

// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';

it('renders correctly', () => {
  renderer.create(<App />);
});

package.json中Jest配置片段 #

// ...
"jest": {
    "preset": "react-native",
    "coverageProvider": "babel",
    "transformIgnorePatterns": [
      "node_modules/(?!(react-native|@react-native|react-native-video|react-native-reanimated|@miblanchard/react-native-slider|react-native-gesture-handler)/)"
    ],
    "transform": {
      "^.+\.[t|j]sx?$": "babel-jest"
    },
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }

babel.config.js配置 #

module.exports = {
  presets: [
    'module:metro-react-native-babel-preset',
    ['@babel/preset-typescript', {allowDeclareFields: true}],
  ],
  plugins: [
    "react-native-reanimated/plugin",
  ],
};

问题根因与修复步骤 #

核心诱因是自定义Jest转译规则错误+转译预设顺序异常，导致生成的sourcemap格式不合法，source-map解析时索引越界。按以下步骤操作即可修复：

1. 清除本地依赖缓存：删除项目根目录下的node_modules文件夹，以及对应包管理器的锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml）
2. 修复react-native-reanimated的Mock配置：
   • 新建jest-setup.js文件，写入内容import 'react-native-reanimated/mock';
   • 在Jest配置中新增字段"setupFilesAfterEnv": ["./jest-setup.js"]
3. 删除Jest配置中自定义的transform字段：当前配置里的正则^.+\.[t|j]sx?$存在语法错误，字符组内的|会被识别为普通字符，无法正确匹配ts/tsx/js/jsx文件；react-native预设已经内置了正确的babel-jest转换规则，手动覆盖反而会打乱默认转译逻辑，导致sourcemap生成异常
4. 调整babel.config.js中的预设顺序，将TypeScript预设放在metro预设之前，避免转译顺序错误生成无效sourcemap：

   module.exports = {
     presets: [
       ['@babel/preset-typescript', {allowDeclareFields: true}],
       'module:metro-react-native-babel-preset',
     ],
     plugins: [
       "react-native-reanimated/plugin",
     ],
   };
   

5. 重新执行依赖安装命令，安装完成后运行测试即可正常执行。

注意：非必要不要覆盖react-native Jest预设的默认配置，大部分RN测试环境异常都是自定义配置和默认规则冲突导致的。

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