I am using Angular 11 and I am facing an issue in running a spec file.
I get below error:
FAIL rms-management apps/rms-management/src/app/full-map-view/full-map-view/full-map-view.component.spec.ts
● 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:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it. • 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:
C:\Users\XYZ\Desktop\Workspace\RM\RMS-portal\node_modules\dnd-core\dist\esm\index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from './interfaces'; ^^^^^^
SyntaxError: Unexpected token 'export'
at Runtime.createScriptFromCode (../../node_modules/jest-runtime/build/index.js:1350:14)
at ../../node_modules/@angular-skyhook/core/bundles/angular-skyhook-core.umd.js:2:155
at Object.<anonymous> (../../node_modules/@angular-skyhook/core/bundles/angular-skyhook-core.umd.js:5:2)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 7.354 s
Ran all test suites matching /full-map-view.component.spec.ts/i.
My jest.preset.js:
const nxPreset = require('@nrwl/jest/preset');
module.exports = {
...nxPreset,
testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'],
transform: {
'^.+\\.(ts|js|html)$': 'ts-jest'
},
resolver: '@nrwl/jest/plugins/resolver',
moduleFileExtensions: ['ts', 'js', 'html'],
coverageReporters: ['text', 'lcov', 'cobertura'],
passWithNoTests: true
};
My jest.config.js:
module.exports = {
preset: '../../jest.preset.js',
coverageDirectory: '../../coverage/apps/rms-management',
snapshotSerializers: [
'jest-preset-angular/build/AngularSnapshotSerializer.js',
'jest-preset-angular/build/HTMLCommentSerializer.js'
],
transformIgnorePatterns: [
'/node_modules/(?!dnd-core/).+\\.js$',
'/node_modules/(?!lodash-es)'
],
setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
globals: {
'ts-jest': {
tsConfig: '<rootDir>/tsconfig.spec.json',
stringifyContentPathRegex: '\\.(html|svg)$',
astTransformers: [
'jest-preset-angular/build/InlineFilesTransformer',
'jest-preset-angular/build/StripStylesTransformer'
]
}
},
displayName: 'rms-management'
};
My tsconfig.base.json:
{
"compileOnSave": false,
"compilerOptions": {
"rootDir": ".",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"resolveJsonModule": true,
"importHelpers": true,
"target": "es2015",
"module": "esnext",
"types": [
"jest"
],
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"es2019",
"dom"
],
"skipLibCheck": true,
"skipDefaultLibCheck": true,
"baseUrl": ".",
"paths": {
"@rms-management/core": [
"libs/core/src/index.ts"
],
"@rms-management/notification": [
"libs/notification/src/index.ts"
],
"@rms-management/interfaces": [
"libs/interfaces/src/index.ts"
],
"@drms-management/ui": [
"libs/ui/src/index.ts"
],
"@rms-management/util-testing": [
"libs/util-testing/src/index.ts"
],
"@rms-management/e2e": [
"libs/e2e/src/index.ts"
],
"@rms-management/gcp-client": [
"libs/gcp-client/src/index.ts"
],
"@rms-management/gis": [
"libs/gis/src/index.ts"
],
"@rms-management/document-viewer": [
"libs/document-viewer/src/index.ts"
],
"@rms-management/secret-manager": [
"libs/secret-manager/src/index.ts"
],
"@rms-management/gcp/google-secret": [
"libs/gcp/google-secret/src/index.ts"
],
"@rms-management/viewers": [
"libs/viewers/src/index.ts"
],
"@rms-management/grid": [
"libs/grid/src/index.ts"
],
"@rms-management/kind-configuration": [
"libs/kind-configuration/src/index.ts"
],
"@rms-management/utils/kind": [
"libs/utils/kind/src/index.ts"
]
},
"esModuleInterop": true
},
"exclude": [
"node_modules",
"tmp"
]
}
My tsconfig.json:
{
"extends": "../../tsconfig.base.json",
"files": [],
"include": [],
"references": [
{
"path": "./tsconfig.app.json"
}
],
"exclude": [
"**/*.spec.ts",
"**/*.mock.ts",
]
}
My 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"
]
}
My package.json:
{
"name": "rms-management",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"nx": "nx",
"start": "concurrently \"ng serve api --configuration=production\" \"ng serve\"",
"start:ssl": "concurrently \"ng serve api --configuration=evd\" \"ng serve --ssl --ssl-key C:\\certificates\\localhost.key --ssl-cert C:\\certificates\\localhost.crt\" ",
"build": "node --max_old_space_size=16384 ./node_modules/@angular/cli/bin/ng build --prod --stats-json --extra-webpack-config webpack.compress.js && ng build api --configuration=production",
"start:evd": "concurrently \"ng serve api --configuration=evd\" \"ng serve\"",
"start:p4d": "concurrently \"ng serve api --configuration=p4d\" \"ng serve\"",
"test": "ng test --code-coverage --verbose",
"test:watch": "ng test --code-coverage --watch",
"test:watch-api": "ng test api --code-coverage --watch",
"test:watch-rms": "ng test rms-management --code-coverage --watch",
"test:watch-ui": "ng test ui --code-coverage --watch",
"lint": "esw . --clear --ext .ts && npm run lint:style",
"lint:watch": "esw -w . --clear --ext .ts",
"lint:report": "esw . --ext .ts -f node_modules/eslint-detailed-reporter/lib/detailed.js -o eslint/report.html",
"lint:style": "stylelint \"apps/**/*.scss\" --output-file stylelint-report.log",
"lint:style-fix": "stylelint \"apps/**/*.scss\" --fix --color --output-file stylelint-report.log",
"e2e": "ng e2e",
"analyze": "webpack-bundle-analyzer dist/apps/rms-management/stats.json",
"affected:apps": "nx affected:apps",
"affected:libs": "nx affected:libs",
"affected:build": "nx affected:build --base=remotes/origin/master --head=HEAD",
"affected:e2e": "nx affected:e2e",
"affected:lint": "node --max_old_space_size=12288 ./node_modules/@nrwl/cli/bin/nx affected:lint --base=remotes/origin/master --head=HEAD --parallel --maxParallel=12",
"affected:test": "node --max_old_space_size=12288 ./node_modules/@nrwl/cli/bin/nx affected:test --code-coverage --base=remotes/origin/master --head=HEAD --parallel --maxParallel=8",
"affected:dep-graph": "nx affected:dep-graph",
"affected": "nx affected",
"format": "nx format:write",
"format:write": "nx format:write",
"format:check": "nx format:check",
"update": "ng update @nrwl/workspace",
"update:check": "ng update",
"workspace-schematic": "nx workspace-schematic",
"dep-graph": "nx dep-graph",
"help": "nx help",
"refreshVSToken": "vsts-npm-auth -config .npmrc"
},
"private": true,
"dependencies": {
"@angular-skyhook/core": "1.3.3",
"@angular/animations": "11.2.7",
"@angular/cdk": "11.2.6",
"@angular/common": "11.2.7",
"@angular/compiler": "11.2.7",
"@angular/core": "11.2.7",
"@angular/flex-layout": "9.0.0-beta.29",
"@angular/forms": "11.2.7",
"@angular/google-maps": "11.2.2",
"@angular/material": "11.2.6",
"@angular/platform-browser": "11.2.0",
"@angular/platform-browser-dynamic": "11.2.0",
"@angular/router": "11.2.0",
"@rms-gui/components": "13.1.2193549",
"@google-cloud/logging": "9.0.0",
"@google-cloud/logging-bunyan": "3.0.1",
"@google-cloud/monitoring": "2.1.1",
"@google-cloud/secret-manager": "3.2.0",
"@nestjs/common": "7.6.5",
"@nestjs/core": "7.6.5",
"@nestjs/platform-express": "7.6.5",
"@nestjs/serve-static": "2.1.4",
"@ng-select/ng-select": "4.0.0",
"@ngneat/until-destroy": "8.0.3",
"@ngrx/data": "11.1.0",
"@ngrx/effects": "11.0.0",
"@ngrx/entity": "11.0.0",
"@ngrx/store": "11.0.0",
"@slb-cloud/logstore": "3.0.4",
"@slb-dls/angular-material": "14.1.0",
"@slb-dtw-packages/document-viewer-widget": "13.0.4",
"@slb-dtw-packages/widget-crs-management-ui": "5.0.3",
"@slb-dtw-packages/widget-dqm-score-summary": "5.2.3",
"@slb-dtw-packages/wke-document-view": "11.0.4",
"@slb-innersource/das-dropbox": "18.3.0",
"@slb-innersource/gis-canvas": "5.0.245",
"@slb-innersource/trace-viewer": "1.6.0",
"@slb-innersource/wke-well-view": "23.9.0",
"@slb-is/ng-geotoolkit": "1.4.0-341",
"@slb-wellbore/wing-core": "9.0.0-426",
"@slbint/geotoolkit.controls": "3.0.95-1",
"@slbint/geotoolkit.core": "3.0.95-1",
"@slbint/geotoolkit.data": "3.0.95-1",
"@slbint/geotoolkit.deviation": "3.0.95-1",
"@slbint/geotoolkit.gauges": "3.0.95-1",
"@slbint/geotoolkit.legacygauges": "3.0.95-1",
"@slbint/geotoolkit.pdf": "3.0.95-1",
"@slbint/geotoolkit.report": "3.0.95-1",
"@slbint/geotoolkit.schematics": "3.0.95-1",
"@slbint/geotoolkit.seislog": "3.0.95-1",
"@slbint/geotoolkit.seismic": "3.0.95-1",
"@slbint/geotoolkit.seismic.analysis": "3.0.95-1",
"@slbint/geotoolkit.seismic.cgmplus": "3.0.95-1",
"@slbint/geotoolkit.seismic.compression": "3.0.95-1",
"@slbint/geotoolkit.seismic.widgets": "3.0.95-1",
"@slbint/geotoolkit.svg": "3.0.95-1",
"@slbint/geotoolkit.welllog": "3.0.95-1",
"@slbint/geotoolkit.welllog.multiwell": "3.0.95-1",
"@slbint/geotoolkit.welllog.widgets": "3.0.95-1",
"@slbint/geotoolkit.widgets": "3.0.95-1",
"@slbint/three": "3.0.95-1",
"@splitsoftware/splitio": "10.15.1",
"@types/filesystem": "0.0.29",
"@types/uuid": "8.0.0",
"ag-grid-angular": "23.0.3",
"ag-grid-community": "23.0.2",
"ag-grid-enterprise": "23.0.2",
"ang-jsoneditor": "1.10.4",
"angular-auth-oidc-client": "11.2.0",
"angularx-flatpickr": "6.1.1",
"async": "3.2.0",
"axios": "0.21.1",
"bunyan": "1.8.14",
"chart.js": "2.9.4",
"compression": "1.7.4",
"core-js": "2.5.4",
"flatpickr": "4.6.3",
"form-data": "3.0.0",
"google-auth-library": "6.0.0",
"googleapis": "49.0.0",
"helmet": "3.21.2",
"highcharts": "8.1.2",
"jest-junit": "10.0.0",
"jsoneditor": "9.1.7",
"jszip": "3.6.0",
"jwt-decode": "2.2.0",
"lodash-es": "4.17.21",
"lucene": "2.1.1",
"ngx-clipboard": "13.0.0",
"ngx-infinite-scroll": "10.0.1",
"ngx-webstorage": "7.0.1",
"omni-slider": "1.2.1",
"react-dnd-html5-backend": "10.0.2",
"reflect-metadata": "0.1.13",
"resize-observer": "1.0.0",
"rxjs": "6.6.7",
"shpjs": "3.6.3",
"socket.io-client": "3.0.5",
"speakeasy": "2.0.0",
"taggle": "1.14.0",
"uuid": "8.3.1",
"zone.js": "0.10.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "0.1102.0",
"@angular-eslint/builder": "2.1.0",
"@angular/cli": "11.2.7",
"@angular/compiler-cli": "11.2.7",
"@angular/language-service": "11.2.7",
"@angular/material-moment-adapter": "11.2.9",
"@nestjs/schematics": "7.2.6",
"@nestjs/testing": "7.6.5",
"@ngrx/schematics": "11.0.0",
"@ngrx/store-devtools": "11.0.0",
"@nrwl/angular": "12.0.6",
"@nrwl/cli": "12.0.6",
"@nrwl/jest": "12.0.6",
"@nrwl/nest": "12.0.6",
"@nrwl/node": "12.0.6",
"@nrwl/tao": "12.0.6",
"@nrwl/eslint-plugin-nx": "12.0.6",
"@nrwl/workspace": "12.0.6",
"@types/chrome": "0.0.104",
"@types/jasmine": "3.6.9",
"@types/jasminewd2": "2.0.3",
"@types/jest": "26.0.8",
"@types/node": "14.14.33",
"@types/puppeteer": "2.1.5",
"@types/speakeasy": "2.0.5",
"@typescript-eslint/eslint-plugin": "4.19.0",
"@typescript-eslint/parser": "4.19.0",
"array.prototype.flatmap": "1.2.4",
"canvas": "2.7.0",
"codelyzer": "6.0.0",
"concurrently": "5.0.0",
"dotenv": "8.2.0",
"eslint": "7.22.0",
"eslint-config-prettier": "8.1.0",
"eslint-detailed-reporter": "0.8.0",
"jasmine-core": "3.6.0",
"jasmine-spec-reporter": "5.0.2",
"jest": "26.2.2",
"jest-preset-angular": "8.3.2",
"jest-puppeteer": "4.4.0",
"ngx-build-plus": "11.0.0",
"pixelmatch": "4.0.2",
"prettier": "2.2.1",
"prettier-linter-helpers": "1.0.0",
"puppeteer": "3.0.2",
"string.prototype.matchall": "4.0.4",
"stylelint": "13.3.3",
"stylelint-config-sass-guidelines": "7.1.0",
"stylelint-scss": "3.17.1",
"supertest": "4.0.2",
"ts-jest": "26.5.3",
"ts-node": "8.9.1",
"tslib": "2.2.0",
"typescript": "4.1.5",
"webpack-bundle-analyzer": "3.9.0",
"webpack-cli": "4.1.0"
}
}
I have been playing around with transformIgnorePatterns and allowJs:true and esModuleInterop but to no success.