ts-jest无法识别es6导入

时间:2018-09-04 20:50:23

标签: typescript babeljs jestjs es6-modules

我正在为React代码库添加打字稿支持,并且在应用正常运行时,玩笑的测试到处都失败了,显然无法识别es6语法。

为此,我们使用ts-jest。下面是我收到的错误消息,当尝试处理Jest的测试设置文件时,立即获得解决。

customerTable

它无法识别一个简单的 FAIL src/data/reducers/reducers.test.js ● Test suite failed to run /Users/ernesto/code/app/react/setupTests.js:1 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import './polyfills'; ^^^^^^^^^^^^^ SyntaxError: Unexpected string at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17) ,表示带引号的字符串是意外的。

这些是我的设置:

package.json中的

jest配置

import './polyfills'

tsconfig.json

"jest": {
  "setupTestFrameworkScriptFile": "<rootDir>/app/react/setupTests.js",
  "transform": {
    "^.+\\.tsx?$": "ts-jest"
  },
  "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js",
    "jsx",
    "json",
    "node"
  ]
},

.babelrc

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "module": "es6",
    "moduleResolution": "node",
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "target": "es5",
    "jsx": "react",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "skipDefaultLibCheck": true,
    "strictPropertyInitialization": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "noErrorTruncation": true
  },
  "exclude": ["app/assets","node_modules", "vendor", "public"],
  "compileOnSave": false
}

在相关的情况下,这是一个在Rails应用程序中使用的React代码库,为此,我们正在使用rails/webpacker。我们遵循了their instructions to add TypeScript support to it,它的工作原理就像一种魅力,除了这个有趣的部分,它们没有涵盖。

3 个答案:

答案 0 :(得分:5)

我最终发现了问题所在。事实证明,它始终存在于ts-jest的自述文件中。

自述文件中有一个标题为Using ES2015+ features in Javascript files的部分。在这种情况下,您需要指示玩笑使用babel-jest作为.js文件的转换。

"jest": {
  "transform": {
    "^.+\\.jsx?$": "babel-jest", // Adding this line solved the issue
    "^.+\\.tsx?$": "ts-jest"
  },
  // ...
},

答案 1 :(得分:0)

正如the documentation you found所说,ts-jest需要CommonJS模块,因此由于您的主要cliente.id设置了tsconfig.json,因此您需要为ts创建一个单独的"module": "es6"文件-jest扩展主tsconfig.json并设置tsconfig.json

答案 2 :(得分:-1)

  

如果您使用的是 create-react-app ,请尝试以下操作:

即使create-react-app已预先配置,我们仍然必须添加自定义配置,因为我们的应用程序最初不是由cra构建的。我安装了一些新的dev依赖项:

"babel-cli": "^6.26.0",
"babel-jest": "^22.4.1",
"babel-preset-react-app": "^3.1.1",

并更新了.babelrc(如果不存在,请创建此文件):

{
"presets": [
    "@babel/preset-env",
    "@babel/preset-react"
      ]
}

现在jest和npm都可以正常工作了。