"SyntaxError:不能使用模块外的导入语句“错误时，测试使用Jest和@ testing / and本机的本机项目？

Question

每当我运行npm test时都会出错

 FAIL  ./App.test.js

测试套件无法运行

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:
 • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html

Details:

/Users/bestes/Desktop/react-native-training/node_modules/react-native-status-bar-height/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { Dimensions, Platform, StatusBar } from 'react-native';
                                                                                         ^^^^^^

SyntaxError: Cannot use import statement outside a module

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
  at Object.<anonymous> (node_modules/react-native-elements/src/config/index.js:1:1)

我的测试：

import 'react-native';
import React from 'react';
import { render } from '@/../testing/test-utils'
import App from './App'


test('should render app component', () => {
  const result = render(<App />)

  expect(result).toMatchSnapshot()
})

我的测试-utils.js文件：

import React from 'react'

import { render } from '@testing-library/react-native'
import { store } from '@/bootstrap/redux'
import { Provider } from 'react-redux'

const AllTheProviders = ({ children }) => {
  return (
    <Provider store={store}>
      {children}
    </Provider>
  )
}

const customRender = (ui, options) =>
  render(ui, { wrapper: AllTheProviders, ...options })

// re-export everything
export * from '@testing-library/react-native'

// override render method
export { customRender as render }

我的package.json文件：

{
  "name": "ReactNativeTraining",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/geolocation": "2.0.2",
    "@react-native-community/masked-view": "0.1.10",
    "@react-native-picker/picker": "1.9.10",
    "@reduxjs/toolkit": "1.5.0",
    "axios": "0.21.1",
    "dayjs": "1.10.4",
    "lodash": "4.17.20",
    "react": "16.13.1",
    "react-native": "0.63.2",
    "react-native-config": "1.4.2",
    "react-native-elements": "3.0.0-alpha.1",
    "react-native-geocoding": "0.5.0",
    "react-native-gesture-handler": "1.9.0",
    "react-native-permissions": "3.0.0",
    "react-native-picker-select": "8.0.4",
    "react-native-reanimated": "1.13.2",
    "react-native-safe-area-context": "3.1.9",
    "react-native-screens": "2.17.0",
    "react-native-size-matters": "0.4.0",
    "react-native-vector-icons": "8.0.0",
    "react-navigation": "4.0.2",
    "react-navigation-stack": "1.5.4",
    "react-navigation-tabs": "2.4.1",
    "react-redux": "7.2.2"
  },
  "devDependencies": {
    "@babel/core": "7.12.10",
    "@babel/runtime": "7.12.5",
    "@react-native-community/eslint-config": "2.0.0",
    "@testing-library/jest-native": "4.0.1",
    "@testing-library/react-native": "7.2.0",
    "babel-jest": "^26.6.3",
    "babel-plugin-module-resolver": "4.0.0",
    "eslint": "7.18.0",
    "jest": "26.6.3",
    "metro-react-native-babel-preset": "0.64.0",
    "react-test-renderer": "16.13.1"
  },
  "type": "module",
  "jest": {
    "verbose": true,
    "preset": "react-native",
    "setupFilesAfterEnv": ["@testing-library/jest-native/extend-expect"],
    "transformIgnorePatterns": [
      "node_modules/(?!(react-native",
      "@react-native-community/geolocation",
      "@react-native-community/masked-view",
      "|@react-native-picker/picker",
      "|@reduxjs/toolkit",
      "|axios",
      "|dayjs",
      "|lodash",
      "|react",
      "|react-native",
      "|react-native-config",
      "|react-native-elements",
      "|react-native-geocoding",
      "|react-native-gesture-handler",
      "|react-native-permissions",
      "|react-native-picker-select",
      "|react-native-reanimated",
      "|react-native-safe-area-context",
      "|react-native-screens",
      "|react-native-size-matters",
      "|react-native-vector-icons",
      "|react-navigation",
      "|react-navigation-stack",
      "|react-navigation-tabs",
      "|react-redux",
      ")/)"
    ]
  }
}

我的babel.config.js文件：

module.exports = function (api) {
  api.cache(true)
  const presets = [
    'module:metro-react-native-babel-preset'
  ]
  const plugins = [
    [
      'module-resolver', {
        'root': ['./src/'],
        'extensions': ['.js', '.ios.js', '.android.js'],
        'alias': {
          '@': './src/'
        }
      }
    ]
  ]
  return {
    presets,
    plugins
  }
}

我尝试过的是:将"type"：“package.json”添加到根级别的package.json文件中，该文件修复了导出过程中出现的类似错误，将转换忽略模式添加到package.json文件中的Jest键中。我将所有的依赖项添加到transformIgnorePatterns中，因为它一直对每个错误都抛出错误，直到我添加了所有，现在它抛出了react本机模块导入。

Answer 1

解决了我在下面安装的工作

npm install --save-dev @babel/core
npm install --save-dev @babel/preset-env

之后，在根目录中创建"babel.config.js“文件，内容应该如下所示

module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react'],
  env: {
    test: {
      plugins: ["@babel/plugin-transform-runtime"]
    }
  }
};