Babel.js ts-jest无法识别es6导入

nbnkbykc 于 2022-12-08 发布在 Babel

关注(0)|答案(4)|浏览(269)

我在react代码库中添加了typescript支持，虽然应用程序运行正常，但jest测试到处都失败了，显然没有识别出es6语法的一些东西。
下面是我在尝试处理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配置

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

.Babel

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

如果它是相关的，这是一个React代码库正在使用的rails应用程序，我们正在使用rails/webpacker的目的。我们遵循their instructions to add TypeScript support to it，它的工作就像一个魅力，除了这个笑话的一部分，他们没有涵盖。

babeljs

来源：https://stackoverflow.com/questions/52173815/ts-jest-does-not-recognize-es6-imports

4条答案

按热度按时间

uemypmqf1#

我终于发现了问题所在，原来ts-jest的自述文件里一直都有这个问题。
README文件中有一节标题为在Javascript文件中使用ES 2015+特性。在这些情况下，您需要指示jest使用babel-jest作为.js文件的转换。

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

赞(0）回复(0）举报 2022-12-08

2vuwiymt2#

正如您找到的文档所述，ts-jest需要CommonJS模块，因此由于您的主tsconfig.json设置"module": "es6"，您需要为ts-jest创建一个单独的tsconfig.json文件，它扩展您的主tsconfig.json并设置"module": "commonjs"。

赞(0）回复(0）举报 2022-12-08

jgwigjjp3#

对我来说，关键是意识到**测试也应该转换为 typescript **，或者，将allowJs添加到tsconfig.json中
我无法找到一个配置，工作与保持js测试，但转换测试到ts修复这个错误，例如。
mv tests/stuff.test.js tests/stuff.test.ts
总的来说，ts-jest的好处是能够进行ts测试，所以无论如何都是一件好事

赞(0）回复(0）举报 2022-12-08

xzv2uavs4#

如果您正在使用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测试都能正常工作。

赞(0）回复(0）举报 2022-12-08

我来回答

Babel.js ts-jest无法识别es6导入

4条答案

如果您正在使用create-react-app，请尝试以下操作：

相关问题

热门标签

最新问答