Probando la aplicación Angular usando Jest - Jest encontró un token inesperado
Estoy usando Jest para probar mi aplicación Angular pero recibo los siguientes errores:
● 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)
también estoy usandohttps://nx.dev/angular.
Esta es mi configuración de broma:
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'],
};
Mi paquete.json se parece a:
{
"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 se parece a:
{
"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"]
}
Este es el 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"]
}
Esto es 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"]
}
He buscado en la web y depurado, pero fue en vano. Hice lo que se sugiere en esta publicación, pero fue en vano.
En el mensaje de error dice que, de manera predeterminada, si Jest ve una configuración de Babel, la usará para transformar sus archivos, ignorando "node_modules".
No sé si tengo que instalar babeljs también.
Respuestas
Dado que algunos proveedores publican sus fuentes sin transpilar, debe volver a transpilar estos paquetes con los archivos babel-jestwhile ts-jestwill take care . tsAdemás, debe transformar estos paquetes nuevamente especificando transformIgnorePatterns. Aquí está su configuración de Jest modificada:
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})`],
};
babelSolo tenga en cuenta , instale babel-jesty su ajuste preestablecido y cree la configuración para él:
// 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,
};
};
Me encontré con el mismo problema al cambiar de lodasha lodash-es. Hice lo que @tmhao2005 sugirió e instalé @babel/core, @babel/preset-envy babel-jestluego agregué un babel.config.jsen la raíz de mi Nx Worspace y actualicé la base jest.config.ts. entonces puedes probar lo siguiente.
Instalar dependencias
yarn add -D @babel/core @babel/preset-env babel-jest
npm I -D @babel/core @babel/preset-env babel-jest
Añadir babel.config.js
En la raíz de su Nx Workspace agregue un babel.config.jscon lo siguiente tomado de los documentos de Jest
module.exports = {
presets: [
[
'@babel/preset-env',
{
targets: {
node: 'current'
}
}
]
]
};
Actualizar jest.config.ts
Actualice la base jest.config.ts en la raíz de su Nx Workspace a algo como esto dependiendo de sus necesidades de configuración.
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)']
};
Este enfoque funcionó para mí usando NX 10 lodash-es, pero su kilometraje puede variar con los @ckeditorpaquetes. Tendrás que añadir todos los @ckeditorpaquetes que quieras altransformIgnorePatterns
Algunos posibles enlaces útiles
Edición NX 1091
Edición NX 812