Jest kullanarak Angular uygulamayı test etme - Jest beklenmedik bir simgeyle karşılaştı
Angular uygulamamı test etmek için Jest kullanıyorum ancak aşağıdaki hataları alıyorum:
● 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)
Ben de kullanıyorum https://nx.dev/angular.
Bu benim jest yapılandırmam:
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 şuna benziyor:
{
"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 şuna benzer:
{
"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"]
}
Bu 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"]
}
Bu tsconfig.spec.json'dur
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "../../../dist/out-tsc",
"module": "commonjs",
"types": ["jest", "node"]
},
"files": ["src/test-setup.ts"],
"include": ["**/*.spec.ts", "**/*.d.ts"]
}
İnternette arama yaptım ve hata ayıkladım, ancak işe yaramadı. Bu yazıda önerilenleri yaptım ama boşuna.
Hata mesajında, Jest varsayılan olarak bir Babel yapılandırması görürse, "node_modules" i yok sayarak dosyalarınızı dönüştürmek için bunu kullanacağını söyler.
Babelj'leri de yüklemem gerekip gerekmediğini bilmiyorum.
Yanıtlar
Eğer tekrar bu paketleri transpile gerekir böylece bu yana bazı satıcılar, transpiling olmadan kaynaklarını yayınlamak babel-jestsüre ts-jestbakım alacak tsdosyaları. Ayrıca belirterek bu paketleri yeniden dönüştürmelisiniz transformIgnorePatterns. İşte değiştirdiğiniz Jest yapılandırmanız:
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})`],
};
Sadece akılda tutmak yüklemek babel, babel-jest& onun ön ayar ve bunun için yapılandırma oluşturun:
// 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,
};
};
Geçildiğinde aynı sorunu koştum lodashiçin lodash-es. Ben tmhao2005 @ önerdi ve kurulu ne yaptı @babel/core, @babel/preset-envve babel-jestsonra bir katma babel.config.jsbenim Nx Worspace kök ve taban güncellendi jest.config.ts. böylece aşağıdakileri deneyebilirsiniz.
Bağımlılıkları yükleyin
yarn add -D @babel/core @babel/preset-env babel-jest
npm I -D @babel/core @babel/preset-env babel-jest
Babel.config.js ekleyin
Nx Çalışma Alanınızın köküne babel.config.js, Jest belgelerinden alınan aşağıdakilerle birlikte bir ekleyin
module.exports = {
presets: [
[
'@babel/preset-env',
{
targets: {
node: 'current'
}
}
]
]
};
Jest.config.ts'i güncelleyin
Yapılandırma ihtiyaçlarınıza bağlı olarak, Nx Çalışma Alanınızın kök dizinindeki temel jest.config.ts dosyasını buna benzer bir şekilde güncelleyin.
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)']
};
Bu yaklaşım benim için NX 10 kullanarak işe yaradı, lodash-esancak kilometreniz @ckeditorpaketlere göre değişebilir . İstediğiniz tüm @ckeditorpaketleri eklemeniz gerekecek.transformIgnorePatterns
Olası bazı yararlı bağlantılar
NX sorunu 1091
NX sorunu 812