ts-jest 无法识别 es6 导入 [英] ts-jest does not recognize es6 imports

问题描述

我正在向 React 代码库添加 typescript 支持，虽然应用程序运行正常，但 Jest 测试到处都失败了，显然无法识别 es6 语法.

I'm adding typescript support to a react codebase, and while the app is working ok, jest tests are failing all over the place, apparently not recognizing something about es6 syntax.

我们为此使用了 ts-jest.以下是我在尝试处理 jest 的测试设置文件时立即收到的错误消息.

We're using ts-jest for this. Below is the error message I'm getting, right off the bat when trying to process jest's tests setup file.

 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)

它无法识别一个简单的import './polyfills'，说引用的字符串是意外的.

It fails to recognize a simple import './polyfills', saying that the quoted string is unexpected.

这些是我的设置:

package.json 中的 jest 配置

jest config in package.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"
  ]
},

tsconfig.json

tsconfig.json

{
  "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
}

.babelrc

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": "> 1%",
          "uglify": true
        },
        "useBuiltIns": true
      }
    ],
    "react",
    "es2015"
  ],
  "plugins": [
    "syntax-dynamic-import",
    "transform-object-rest-spread",
    [
      "transform-class-properties",
      {
        "spec": true
      }
    ]
  ]
}

如果相关，这是在 rails 应用程序中使用的 React 代码库，我们使用的是 rails/webpacker 到此为止.我们按照他们的说明为它添加了 TypeScript 支持，并且除了这个笑话部分，他们没有涵盖.

In case it is relevant, this is a React codebase being used inside a rails app, and we're using rails/webpacker to that end. We followed their instructions to add TypeScript support to it, and it worked like a charm, except for this jest part, which they do not cover.

推荐答案

我最终发现了问题所在.事实证明，它一直在 ts-jest 的 README 中.

I eventually found out what the problem was. It turns out it was there in ts-jest's README all the time.

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

There's a section in the README titled Using ES2015+ features in Javascript files. In these cases, you need to instruct jest to use babel-jest as a transform for .js files.

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

这篇关于ts-jest 无法识别 es6 导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！