ts-jest 不识别 es6 导入答案

【问题标题】：ts-jest does not recognize es6 importsts-jest 不识别 es6 导入
【发布时间】：2019-02-09 22:21:04
【问题描述】：

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

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

 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'，表示引用的字符串是意外的。

这些是我的设置：

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

{
  "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。我们关注了their instructions to add TypeScript support to it，它就像一个魅力，除了这个开玩笑的部分，他们没有报道。

【问题讨论】：

标签： typescript babeljs jestjs es6-modules

【解决方案1】：

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

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

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

【讨论】：

不能在 tsx 中使用“import React from 'react'”，只适用于 astersisk as。
这是解释配置的文档的链接：link。 @Ernesto 提供的是 Github 存储库。

【解决方案2】：

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

【讨论】：

我确实看到了，但没有运气。我刚刚又试了一次，我仍然得到同样的错误。为了清楚起见，我在项目的根目录中添加了一个tsconfig.jest.json，并在 jest 配置中添加了一个部分，其中 global/ts-jest/tsConfigFile 的设置设置为这个新的 tsconfig 文件。这个新的配置文件又扩展了基本的 tsconfig，只将模块的新设置指定为 commonjs。
此外，如果我将默认 tsconfig 更改为“commonjs”，我仍然会收到相同的错误。我担心这个设置意味着我的实际 jest 源文件必须使用 commonjs 表示法而不是 es6 的导入？如果是这样，我将不得不更改我的整个测试源以从 import 切换到 require :(
无论如何，谢谢。至少你让我朝着正确的方向前进。它一定与此有关，所以我会仔细检查一切，以防我仍然做错了什么。
啊。如果您有使用import 的JavaScript 源文件，您可能需要手动将它们更改为require 或在您的笑话配置中注册某种可以在内部为您进行转换的转换器.也许这只是开玩笑的自定义 Babel 配置？我从来没有开玩笑；我只是从对 JavaScript 构建过程的一般理解开始工作。

【解决方案3】：

对我来说，关键是意识到测试也应该转换为打字稿！！！

我无法找到一个可用于保留 js 测试的配置，但将测试转换为 ts 可以修复此错误，例如

mv tests/stuff.test.js tests/stuff.test.ts

ts-jest 通常的好处是能够进行 ts 测试，所以无论如何它都是一件好事

【讨论】：

还请注意，如果您想将测试重命名为 ts 但不对其进行类型检查，您可以在文件顶部添加 //@ts-nocheck
另请注意：不要将所有内容重命名为 .ts，而是使用 allowJs:true 并将 stackoverflow.com/questions/58370492/… 添加到 jest.config.js 也可能是一个选项 "transform": { "^.+\\.(ts|js)x?$": "ts-jest" },

【解决方案4】：

如果你使用的是 create-react-app ，试试这个：

即使 create-react-app 是预先配置的，我们仍然需要添加自定义配置，因为我们的应用最初不是使用 cra 构建的。我安装了一些新的开发依赖项：

"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 test 都可以正常工作了。

【讨论】：

如果你使用的是 create-react-app ，试试这个：