如何配置 Jest 以转换包含无效语法的模块？

如何解决如何配置 Jest 以转换包含无效语法的模块？

我已经创建了以下 react native base 项目并将其从 JavaScript 转换为 TypeScript。该应用程序运行正常，但 Jest 测试失败并显示以下错误。我希望测试能够成功运行，而 Jest 会在必要时运行任何转换：

 C:\Users\brian-varley\Documents\Projects\react-native-base\node_modules\redux-flipper\node_modules\react-native-flipper\index.js:11
import {NativeModules,NativeEventEmitter} 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/redux-flipper/lib/index.js:3:32)

错误的原因似乎来自于 import 包中的这个 react-native-flipper 语句：

import {NativeModules,NativeEventEmitter} from 'react-native';

我在这里尝试了 StackOverflow 的一个解决方案，该解决方案建议使用 babel-jest 作为 jest.config.js 文件中的转换器，但无济于事 - https://stackoverflow.com/a/64223627/1829251。我也浏览了这个帖子，但没有找到解决方案 - https://github.com/facebook/jest/issues/9292

问题：

如何配置 Jest 以转换包含无效语法的模块？

环境

"react-native": "0.63.2","jest": "^26.6.3","metro-react-native-babel-preset": "0.59.0","babel-jest": "^25.1.0","ts-jest": "^26.5.3",

配置代码示例：

jest.config.js：

module.exports =  {
    preset: "react-native",transform: {
      "^.+\\.tsx?$": "ts-jest","^.+\\.(js|jsx)$": "babel-jest","node_modules/variables/.+\\.(j|t)sx?$": "babel-jest"
    },testRegex: "(/src/.*\\.(test|spec))\\.(jsx?|tsx?|ts|js)$",transformIgnorePatterns: [
      "node_modules/(?!(jest-)?react-native|react-(native|universal|navigation)-(.*)|@react-native-community/(.*)|@react-navigation/(.*)|bs-platform|@rootstrap/redux-tools)"
    ],setupFiles: [
      "./tests/__mocks__/index.js","<rootDir>/node_modules/react-native-gesture-handler/jestSetup.js"
    ],modulefileExtensions: [
      "ts","tsx","js","jsx","json","node"
    ]
  }

babel.config.js：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],plugins: [
    [
      'module-resolver',{
        alias: {
          actions: './src/actions',httpClient: './src/httpClient',services: './src/services',components: './src/components',constants: './src/constants',screens: './src/screens',hooks: './src/hooks',locale: './src/locale',reducers: './src/reducers',selectors: './src/selectors',store: './src/store',utils: './src/utils',navigators: './src/navigators',validations: './src/validations',},],};

tsconfig.json：

{
    "compilerOptions": {
      "target": "es6","module": "commonjs","moduleResolution": "node","jsx": "react","outDir": "./dist","experimentalDecorators": true,"emitDecoratorMetadata": true,"allowSyntheticDefaultImports": true,"strict": true,"skipLibCheck": true,"declaration": true,"noUnusedLocals": true,"suppressImplicitAnyIndexErrors": true,"baseUrl": "./","exclude": [
      "node_modules",]
  }

解决方法

module.exports =  {
preset: "react-native",transform: {
    "^.+\\.ts?$": "ts-jest","^.+\\.tsx?$": "ts-jest","^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
  },testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)?$",transformIgnorePatterns: [
    "node_modules/(?!(jest-)?react-native|react-(native|universal|navigation)-(.*)|@react-native-community/(.*)|@react-navigation/(.*)|bs-platform|@rootstrap/redux-tools)"
  ],setupFiles: [
    "./tests/__mocks__/index.js","<rootDir>/node_modules/react-native-gesture-handler/jestSetup.js"
  ],moduleFileExtensions: [
    "ts","tsx","js","jsx","json","node"
  ],moduleNameMapper: {
    "^.+\\.(css|less|scss)$": "identity-obj-proxy"
  },moduleDirectories: [
    "node_modules","src"
  ],}

你能试试这个文件并尝试创建新的测试吗。