Menguji aplikasi Angular menggunakan Jest - Jest menemukan token yang tidak terduga
Saya menggunakan Jest untuk menguji aplikasi Angular saya tetapi saya mendapatkan kesalahan berikut:
● 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)
Saya juga menggunakan https://nx.dev/angular.
Ini adalah konfigurasi lelucon saya:
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 saya terlihat seperti:
{
"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 terlihat seperti:
{
"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"]
}
Ini adalah tsconfig.lib.json tersebut
{
"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"]
}
Ini adalah 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"]
}
Saya telah mencari di web dan men-debug, tetapi tidak berhasil. Saya melakukan apa yang disarankan dalam posting ini tetapi tidak berhasil.
Dalam pesan kesalahan dikatakan bahwa Secara default, jika Jest melihat konfigurasi Babel, ia akan menggunakannya untuk mengubah file Anda, mengabaikan "node_modules".
Saya tidak tahu apakah saya harus menginstal babeljs juga.
Jawaban
Karena beberapa vendor mempublikasikan sumber mereka tanpa transpiling, jadi Anda perlu mentranspilasi paket ini lagi dengan babel-jest
sementara ts-jest
akan mengurus ts
file. Selain itu, Anda harus mengubah paket ini lagi dengan menentukan transformIgnorePatterns
. Berikut adalah konfigurasi Jest Anda yang diubah:
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})`],
};
Ingatlah, instal babel
, babel-jest
& presetnya dan buat konfigurasinya:
// 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,
};
};
Saya mengalami masalah yang sama saat beralih dari lodash
ke lodash-es
. Aku melakukan apa @ tmhao2005 disarankan dan diinstal @babel/core
, @babel/preset-env
dan babel-jest
kemudian menambahkan babel.config.js
di root saya Nx Worspace dan diperbarui dasar jest.config.ts
. jadi Anda bisa mencoba yang berikut ini.
Instal dependensi
yarn add -D @babel/core @babel/preset-env babel-jest
npm I -D @babel/core @babel/preset-env babel-jest
Tambahkan babel.config.js
Di root Nx Workspace Anda, tambahkan a babel.config.js
dengan yang berikut ini diambil dari dokumen Jest
module.exports = {
presets: [
[
'@babel/preset-env',
{
targets: {
node: 'current'
}
}
]
]
};
Perbarui jest.config.ts
Perbarui basis jest.config.ts di root Ruang Kerja Nx Anda menjadi seperti ini tergantung pada kebutuhan konfigurasi Anda.
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)']
};
Pendekatan ini berhasil untuk saya yang menggunakan NX 10, lodash-es
tetapi jarak tempuh Anda mungkin berbeda dengan @ckeditor
paket. Anda harus menambahkan semua @ckeditor
paket yang Anda inginkan ketransformIgnorePatterns
Beberapa kemungkinan tautan bermanfaat
Masalah NX 1091
NX masalah 812