typescript ts-jest 无法识别 es6 导入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52173815/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ts-jest does not recognize es6 imports
提问by Ernesto
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.
我正在向 React 代码库添加 typescript 支持，虽然应用程序运行正常，但玩笑测试到处都是失败的，显然无法识别 es6 语法。
We're using ts-jestfor this. Below is the error message I'm getting, right off the bat when trying to process jest's tests setup file.
我们为此使用了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)
It fails to recognize a simple import './polyfills', saying that the quoted string is unexpected.
它无法识别一个简单的import './polyfills'，表示引用的字符串是意外的。
These are my settings:
这些是我的设置：
jest config in package.json
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
}
.babelrc
.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
}
]
]
}
In case it is relevant, this is a React codebase being used inside a rails app, and we're using rails/webpackerto 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.
如果相关，这是一个在 rails 应用程序中使用的 React 代码库，我们为此使用了rails/webpacker。我们按照他们的指示为它添加了 TypeScript 支持，它的作用就像一个魅力，除了这个他们没有涵盖的笑话部分。
回答by Ernesto
I eventually found out what the problem was. It turns out it was there in ts-jest's README all the time.
我最终发现了问题所在。事实证明，它一直存在于 ts-jest 的自述文件中。
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-jestas a transform for .js files.
README 中有一节名为Using ES2015+ features in Javascript files。在这些情况下，您需要指示 jestbabel-jest用作 .js 文件的转换。
"jest": {
"transform": {
"^.+\.jsx?$": "babel-jest", // Adding this line solved the issue
"^.+\.tsx?$": "ts-jest"
},
// ...
},
回答by Matt McCutchen
As the documentation you foundsays, ts-jest requires CommonJS modules, so since your main tsconfig.jsonsets "module": "es6", you'll need to create a separate tsconfig.jsonfile for ts-jest that extends your main tsconfig.jsonand sets "module": "commonjs".
正如您找到的文档所说， ts-jest 需要 CommonJS 模块，因此由于您的 main tsconfig.jsonsets "module": "es6"，您需要tsconfig.json为 ts-jest创建一个单独的文件来扩展您的 maintsconfig.json和 sets "module": "commonjs"。
回答by Natesh bhat
If you are using create-react-app, try this :
如果您正在使用create-react-app，请尝试以下操作：
Even though create-react-app comes pre-configured, we still had to add in custom configuration since our app wasn't initially built with cra. I installed some new dev dependencies:
尽管 create-react-app 是预先配置的，我们仍然需要添加自定义配置，因为我们的应用程序最初不是用 cra 构建的。我安装了一些新的开发依赖项：
"babel-cli": "^6.26.0",
"babel-jest": "^22.4.1",
"babel-preset-react-app": "^3.1.1",
And also updated the .babelrc(create this file if it doesn't exist ) :
并且还更新了.babelrc（如果它不存在就创建这个文件）：
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
And now both jest and npm test both work as they should.
现在 jest 和 npm test 都可以正常工作。
