[英]Testing Angular application using Jest - Jest encountered an unexpected token
I am using Jest for testing my Angular application but am getting the following errors:我正在使用 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)
Am also using https://nx.dev/angular .我也在使用https://nx.dev/angular 。
This is my jest config:这是我的笑话配置:
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'],
};
My package.json looks like:我的 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 looks like: 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"]
}
This is the tsconfig.lib.json这是 tsconfig.lib.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "../../../dist/out-tsc",
"target": "es2015",
"declaration": true,
"inlineSources": true,
"types": [],
"lib": ["dom", "es2018"]
},
"angularCompilerOptions": {
"skipTemplateCodegen": true,
"strictMetadataEmit": true,
"enableResourceInlining": true
},
"exclude": ["src/test-setup.ts", "**/*.spec.ts"]
}
This is tsconfig.spec.json这是 tsconfig.spec.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "../../../dist/out-tsc",
"module": "commonjs",
"types": ["jest", "node"]
},
"files": ["src/test-setup.ts"],
"include": ["**/*.spec.ts", "**/*.d.ts"]
}
I have searched the web and debugged, but to no avail.我搜索了 web 并调试,但无济于事。 I did what was suggested in this post but to no avail.
我做了这篇文章中的建议,但无济于事。
In the error message it says that By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".在错误消息中它说默认情况下,如果 Jest 看到 Babel 配置,它将使用它来转换您的文件,而忽略“node_modules”。
I don't know if I have to install babeljs also.我不知道我是否也必须安装 babeljs。
Since some vendors publish their sources without transpiling, so you need to transpile these packages again with babel-jest
while ts-jest
will take care ts
files.由于一些供应商发布他们的源代码时没有转译,所以你需要用
babel-jest
再次转译这些包,而ts-jest
会处理ts
文件。 In addition, you should transform these packages again by specifying transformIgnorePatterns
.此外,您应该通过指定
transformIgnorePatterns
再次转换这些包。 Here is your changed Jest config:这是您更改的 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})`],
};
Just keep in mind, install babel
, babel-jest
& its preset and create the config for it:请记住,安装
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,
};
};
I ran into the same issue when switching from lodash
to lodash-es
.从
lodash
切换到lodash-es
时,我遇到了同样的问题。 I did what @tmhao2005 suggested and installed @babel/core
, @babel/preset-env
and babel-jest
then added a babel.config.js
in the root of my Nx Worspace and updated the base jest.config.ts
.我按照 @tmhao2005 的建议安装了
@babel/core
、 @babel/preset-env
和babel-jest
然后在我的 Nx Worspace 的根目录中添加了一个babel.config.js
并更新了基础jest.config.ts
。 so you can try the following.所以你可以尝试以下。
yarn add -D @babel/core @babel/preset-env babel-jest
npm I -D @babel/core @babel/preset-env babel-jest
In the root of your Nx Workspace add a babel.config.js
with the following taken from the Jest docs在你的 Nx Workspace 的根目录中添加一个
babel.config.js
,其内容取自Jest 文档
module.exports = {
presets: [
[
'@babel/preset-env',
{
targets: {
node: 'current'
}
}
]
]
};
Update the base jest.config.ts in the root of your Nx Workspace to something like this depending on your configuration needs.根据您的配置需要,将 Nx 工作区根目录中的基本 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)']
};
This approach worked for me using NX 10 for lodash-es
but your mileage may vary with the @ckeditor
packages.这种方法对我使用
lodash-es
的 NX 10 有效,但您的里程可能会因@ckeditor
软件包而异。 You will have to add all @ckeditor
packages you want to the transformIgnorePatterns
您必须将所需的所有
@ckeditor
包添加到transformIgnorePatterns
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.