问题描述
我正在使用Jest测试我的Angular应用程序，但出现以下错误：
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse,e.g. it's not plain JavaScript.
By default,if Jest sees a Babel config,it will use that to transform your files,ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed,you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/home/cxo/Projects/git/sparta/clients/vaph/node_modules/@ckeditor/ckeditor5-watchdog/src/editorwatchdog.js:12
import { throttle,cloneDeepWith,isElement } from 'lodash-es';
^
SyntaxError: Unexpected token {
at Runtime.createScriptFromCode (../../../node_modules/jest-runtime/build/index.js:1258:14)
at ../../../node_modules/@ckeditor/ckeditor5-angular/bundles/ckeditor-ckeditor5-angular.umd.js:2:85
at Object.<anonymous> (../../../node_modules/@ckeditor/ckeditor5-angular/bundles/ckeditor-ckeditor5-angular.umd.js:5:2)
这是我开玩笑的配置：
module.exports = {
testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'],transform: {
'^.+\\.(ts|js|html)$': 'ts-jest',},resolver: '@nrwl/jest/plugins/resolver',moduleFileExtensions: ['ts','js','html'],coverageReporters: ['html'],};
我的package.json看起来像：
{
"name": "App-Name","version": "0.0.0","license": "MIT","scripts": {
"ng": "ng","nx": "nx","start": "ng serve",// SEVERAL ENTRIES ARE OMITTED FOR CLARITY
},"private": true,"dependencies": {
"@angular/animations": "^9.1.12","@angular/cdk": "~9.2.4","@angular/common": "^9.1.12","@angular/compiler": "^9.1.12","@angular/core": "^9.1.12","@angular/forms": "^9.1.12","@angular/localize": "~9.1.12","@angular/material": "~9.2.4","@angular/material-moment-adapter": "^9.2.4","@angular/platform-browser": "^9.1.12","@angular/platform-browser-dynamic": "^9.1.12","@angular/router": "^9.1.12","@angular/service-worker": "~9.1.12","@auth0/angular-jwt": "^4.1.2","@babel/polyfill": "^7.10.4","@ckeditor/ckeditor5-angular": "^1.2.3","@ckeditor/ckeditor5-build-balloon": "^19.0.0","@ckeditor/ckeditor5-build-balloon-block": "^19.0.0","@ckeditor/ckeditor5-build-classic": "^19.0.0","@ckeditor/ckeditor5-build-decoupled-document": "^19.0.0","@ckeditor/ckeditor5-build-inline": "^19.0.0","@nrwl/angular": "9.5.1","angular-build-info": "^1.0.7","angular-notifier": "^6.0.1","core-js": "^2.5.4","file-saver": "^2.0.2","ng2-file-upload": "^1.4.0",// SEVERAL ENTRIES ARE OMITTED FOR CLARITY
"secure-ls": "^1.2.6","zone.js": "^0.10.2"
},"devDependencies": {
"@angular-devkit/build-angular": "^0.901.11","@angular/cli": "^9.1.11","@angular/compiler-cli": "^9.1.12","@angular/language-service": "^9.1.12","@compodoc/compodoc": "^1.1.11","@ngneat/spectator": "^5.12.0","@nrwl/cypress": "9.5.1","@nrwl/jest": "9.5.1","@nrwl/workspace": "9.5.1","@types/crypto-js": "^3.1.47","@types/jest": "25.1.4","@types/node": "~12.12.50","dotenv": "6.2.0","eslint": "6.8.0","jest": "25.2.3","jest-preset-angular": "8.1.2","ng-mocks": "^10.1.1","ng-openapi-gen": "^0.12.1","ts-jest": "25.2.1","ts-node": "~7.0.0","tslint": "~6.0.0","typescript": "~3.8.3"
}
}
tsconfig.json如下：
{
"compileOnSave": false,"compilerOptions": {
"rootDir": ".","sourceMap": true,"declaration": false,"moduleResolution": "node","emitDecoratorMetadata": true,"experimentalDecorators": true,"importHelpers": true,"target": "es2015","module": "esnext","typeRoots": ["node_modules/@types"],"lib": ["es2017","dom"],"skipLibCheck": true,"skipDefaultLibCheck": true,"baseUrl": ".","paths": {
// SEVERAL LINES OMITTED FOR CLARITY
}
},"exclude": ["node_modules","tmp"]
"compilerOptions": {
"types": ["node","jest"]
},"include": ["**/*.ts"]
}
这是tsconfig.lib.json
{
"extends": "./tsconfig.json","compilerOptions": {
"outDir": "../../../dist/out-tsc","declaration": true,"inlineSources": true,"types": [],"lib": ["dom","es2018"]
},"angularCompilerOptions": {
"skipTemplateCodegen": true,"strictMetadataEmit": true,"enableResourceInlining": true
},"exclude": ["src/test-setup.ts","**/*.spec.ts"]
}
这是tsconfig.spec.json
{
"extends": "./tsconfig.json","module": "commonjs","types": ["jest","node"]
},"files": ["src/test-setup.ts"],"include": ["**/*.spec.ts","**/*.d.ts"]
}
我已经在网上搜索并调试了，但无济于事。我做了此post中建议的操作，但无济于事。
在错误消息中说，默认情况下，如果Jest看到Babel配置，它将使用该配置来转换文件，而忽略“ node_modules”。
我不知道是否也必须安装babeljs。
解决方法
由于一些供应商发布其源代码时未进行转译，因此您需要再次使用babel-jest来转译这些软件包，而ts-jest将处理ts文件。另外，您应该通过指定transformIgnorePatterns重新转换这些包。这是您更改的Jest配置：
const esModules = ['@ckeditor','lodash-es'].join('|'); // you can put more if there is others
module.exports = {
transform: {
'^.+\\.(ts|html)$': 'ts-jest','^.+\\.js$': 'babel-jest',},// ...
transformIgnorePatterns: [`/node_modules/(?!${esModules})`],};
请记住，请安装babel，babel-jest及其预设，并为其创建配置：
// Install
npm i -D @babel/core @babel/preset-env babel-jest
// babel.config.js
module.exports = function(api) {
api.cache(true);
const presets = ['@babel/preset-env'];
const plugins = [];
return {
presets,plugins,};
};
从lodash切换到lodash-es时遇到了同样的问题。我按照@ tmhao2005的建议进行了操作，并安装了@babel/core，@babel/preset-env和babel-jest，然后在我的Nx Worspace的根目录中添加了一个babel.config.js，并更新了基础jest.config.ts。因此您可以尝试以下方法。
安装依赖项
yarn add -D @babel/core @babel/preset-env babel-jest
npm I -D @babel/core @babel/preset-env babel-jest
添加babel.config.js
在Nx工作区的根目录中，添加一个babel.config.js，其中的内容取自Jest docs
module.exports = {
presets: [
[
'@babel/preset-env',{
targets: {
node: 'current'
}
}
]
]
};
更新jest.config.ts
根据您的配置需要，将Nx Workspace根目录中的基本jest.config.ts更新为类似的内容。
module.exports = {
testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'],transform: {
'^.+\\.(ts|html)$': 'ts-jest','^.+\\.js$': 'babel-jest'
},resolver: '@nrwl/jest/plugins/resolver',moduleFileExtensions: ['ts','js','html'],coverageReporters: ['html','json'],transformIgnorePatterns: ['/node_modules/(?!lodash-es)']
};
这种方法对我来说适用于lodash-es的NX 10，但是您的里程可能因@ckeditor软件包而异。您将必须将所有@ckeditor个软件包添加到transformIgnorePatterns
依赖报错 idea导入项目后依赖报错，解决方案：https://blog....
错误1：gradle项目控制台输出为乱码 # 解决方案：https://bl...