使用“No element indexed by”渲染 React 组件时，Jest 失败答案

【问题标题】：Jest fails when rendering React component with 'No element indexed by'使用“No element indexed by”渲染 React 组件时，Jest 失败
【发布时间】：2022-06-16 03:57:04
【问题描述】：

我试图让 Jest 为我的 React Native 项目工作，但遇到了各种问题，其中最令人困惑的是：

当我运行任何呈现组件的测试时，它会吐出错误No element indexed by 7。

这是完整的堆栈跟踪：

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)

我尝试渲染的任何组件都会出现同样的错误。

关于声称解决类似问题的this issue，我尝试安装 babel (npm install --save-dev babel-jest @babel/core @babel/preset-env) 并将 jest 配置中的“coverageProvider”设置为"v8"。不管有没有 v8 预设，我仍然会遇到同样的错误。绝对有可能我配置了其他错误。以下是一些可能有用的代码sn-ps：

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": {
    "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",
  ],
};

作为附加说明，我尝试将 @babel/preset-env 添加到 babel 预设列表中，但这只会导致与添加到 transformIgnorePatterns 列表中的单独包相关的不同错误。将source-map-support 添加到上述列表也无法解决任何问题。

编辑指出无论是否应用 --coverage 参数，这些测试都会失败

【问题讨论】：

标签： javascript reactjs react-native jestjs babel-jest

【解决方案1】：

最后，我通过卸载node_modules，重新运行npm install --save-dev babel-jest @babel/core @babel/preset-env并添加解决了我的错误

"setupFiles": [
      "./node_modules/react-native-gesture-handler/jestSetup.js",
      // ...
]

致我的package.json

【讨论】：