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

原文 标签 typescript react-native jestjs babeljs babel-jest

我已经 fork 了以下 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"
  ],
  }
你能试试这个文件并尝试创建新的测试吗?

关于typescript - 如何配置 Jest 以转换包含无效语法的模块?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66959585/

相关文章:

javascript - 有没有一种方法可以使用浏览器的控制台从用户那里获取数据

meteor - process.nextTick 不是一个函数(React native、ddp、meteor)

reactjs - 如果列表没有超出页面,则在底部呈现 FlatList 页脚

testing - 为什么 Jest --runInBand 会加速测试?

node.js - 因为 Mongoose.model 开 Jest 没有关闭

angular - Typescript @Component "Decorator"是否与装饰器模式有关?

arrays - 如何定义键值对的 Typescript Map。其中键是一个数字,值是一个对象数组

javascript - 单元测试 React 点击外部组件

angular - 无法将类型“可观察<{}>分配给类型“可观察”

android - 如何为React Native锁定设备方向