After an upgrade to Angular 13, my Jest unit tests are failing and i cannot understand why and how to fix them. I´ve searched for a while now and i have found some info for similar cases. It seems the reason for such fails is a change in Angular 13 which makes Jest somewhat incompatible, even though I´m using the latest version of Jest (27.5).
Here is my package.json:
{
"name": "app-angular",
"version": "6.67.1",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"serve-high-memory": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng serve",
"serve-open-high-memory": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng serve --open",
"dev-high-memory": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng build -c dev",
"dev-test-high-memory": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng build -c dev-test",
"staging-high-memory": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng build -c staging",
"release-high-memory": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng build -c release",
"prod-high-memory": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng build -c production",
"test-high-memory": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng test App-Angular",
"test": "jest --config ./jest.config.ts",
"test:coverage": "yarn jest --coverage",
"lint": "ng lint App-Angular",
"e2e": "ng e2e",
"release": "standard-version",
"commit": "git-cz"
},
"husky": {
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
},
"private": true,
"dependencies": {
"@angular-builders/jest": "^13.0.3",
"@angular/animations": "^13.2.3",
"@angular/cdk": "^13.2.4",
"@angular/common": "^13.2.3",
"@angular/compiler": "^13.2.3",
"@angular/core": "^13.2.3",
"@angular/forms": "^13.2.3",
"@angular/localize": "^13.2.3",
"@angular/material": "^13.2.4",
"@angular/material-moment-adapter": "^13.2.4",
"@angular/platform-browser": "^13.2.3",
"@angular/platform-browser-dynamic": "^13.2.3",
"@angular/router": "^13.2.3",
"@digitalascetic/ngx-pica": "^10.1.0",
"@ngrx/data": "^13.0.2",
"@ngrx/effects": "^13.0.2",
"@ngrx/entity": "^13.0.2",
"@ngrx/store": "^13.0.2",
"@ngrx/store-devtools": "^13.0.2",
"@ngx-progressbar/core": "5.3.2",
"@ngx-progressbar/http-client": "3.0.2",
"@ngx-translate/core": "^14.0.0",
"@ngx-translate/http-loader": "^7.0.0",
"@progress/kendo-angular-buttons": "^7.0.2",
"@progress/kendo-angular-common": "^2.0.2",
"@progress/kendo-angular-dateinputs": "^6.0.0",
"@progress/kendo-angular-dialog": "^6.0.1",
"@progress/kendo-angular-dropdowns": "^6.0.1",
"@progress/kendo-angular-excel-export": "^4.0.3",
"@progress/kendo-angular-grid": "^6.0.1",
"@progress/kendo-angular-inputs": "^8.0.3",
"@progress/kendo-angular-intl": "^3.1.2",
"@progress/kendo-angular-l10n": "^3.0.3",
"@progress/kendo-angular-label": "^3.1.2",
"@progress/kendo-angular-layout": "^6.4.2",
"@progress/kendo-angular-pdf-export": "^3.0.3",
"@progress/kendo-angular-popup": "^4.0.4",
"@progress/kendo-angular-progressbar": "^2.0.3",
"@progress/kendo-angular-scheduler": "^3.0.1",
"@progress/kendo-angular-scrollview": "^4.1.3",
"@progress/kendo-angular-treeview": "^6.0.0",
"@progress/kendo-data-query": "^1.5.5",
"@progress/kendo-drawing": "^1.16.2",
"@progress/kendo-licensing": "^1.2.2",
"@progress/kendo-recurrence": "^1.0.2",
"@progress/kendo-theme-default": "^5.1.1",
"@progress/kendo-theme-material": "^5.1.1",
"angular-fittext": "^2.1.1",
"b64-to-blob": "^1.2.19",
"bootstrap": "^5.1.3",
"changedpi": "^1.0.4",
"exifr": "^7.1.3",
"guid-typescript": "^1.0.9",
"jest-localstorage-mock": "^2.4.18",
"jest-mock": "^27.5.1",
"messageformat": "^2.3.0",
"moment": "^2.29.1",
"ngx-toastr": "^14.2.1",
"ngx-translate-messageformat-compiler": "^5.0.1",
"npm-check-updates": "^12.5.0",
"pica": "^9.0.1",
"rxjs": "^7.5.4",
"rxjs-compat": "^6.6.7",
"secure-ls": "^1.2.6",
"subsink": "^1.0.2",
"tslib": "^2.3.1",
"typescript-string-operations": "^1.4.1",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^13.2.4",
"@angular/cli": "13.2.4",
"@angular/compiler-cli": "^13.2.3",
"@angular/language-service": "^13.2.3",
"@commitlint/cli": "^16.2.1",
"@commitlint/config-conventional": "^16.2.1",
"@types/jest": "^27.4.1",
"@types/jquery": "^3.5.5",
"@types/node": "^17.0.21",
"codelyzer": "^6.0.0",
"cz-conventional-changelog": "^3.2.0",
"husky": "^4.3.6",
"jest": "^27.5.1",
"jest-preset-angular": "^11.1.1",
"protractor": "~7.0.0",
"standard-version": "^9.3.2",
"ts-node": "~10.6.0",
"tslint": "~6.1.3",
"typescript": "~4.5.5"
},
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
}
}
And my jest.config.ts file:
import type { Config } from '@jest/types';
import 'jest-preset-angular/setup-jest';
const config: Config.InitialOptions = {
verbose: true,
preset: "jest-preset-angular",
testEnvironment: "jsdom",
testRunner: "jest-jasmine2",
setupFilesAfterEnv: [
"<rootDir>/setupJest.ts"
],
testPathIgnorePatterns: [
"<rootDir>/node_modules/",
"<rootDir>/dist/",
"<rootDir>/src/test.ts"
],
globals: {
"ts-jest": {
tsconfig: "<rootDir>/src/tsconfig.spec.json",
stringifyContentPathRegex: "\\.html$",
astTransformers: {
before: [
"jest-preset-angular/build/InlineFilesTransformer",
"jest-preset-angular/build/StripStylesTransformer"
]
}
}
},
roots: [
"<rootDir>",
"./src",
"./projects"
],
modulePaths: [
"<rootDir>",
"./src",
"./projects"
],
moduleDirectories: [
"node_modules"
]
}
export default config;
The error i receive when i run yarn test is:
$ yarn test
yarn run v1.22.5
$ jest --config ./jest.config.ts
Error: Jest: Failed to parse the TypeScript config file C:\Projects\appAngularfrontend\kendoUpdate\jes
t.config.ts
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Projects\appAngularfrontend\kendoUpdate\node_modu
les\@angular\core\fesm2015\testing.mjs not supported.
Instead change the require of C:\Projects\appAngularfrontend\kendoUpdate\node_modules\@angular\core\fe
sm2015\testing.mjs to a dynamic import() which is available in all CommonJS modules.
at readConfigFileAndSetRootDir (C:\Projects\appAngularfrontend\kendoUpdate\node_modules\jest-confi
g\build\readConfigFileAndSetRootDir.js:136:13)
at async readConfig (C:\Projects\appAngularfrontend\kendoUpdate\node_modules\jest-config\build\ind
ex.js:225:18)
at async readConfigs (C:\Projects\appAngularfrontend\kendoUpdate\node_modules\jest-config\build\in
dex.js:420:26)
at async runCLI (C:\Projects\appAngularfrontend\kendoUpdate\node_modules\@jest\core\build\cli\inde
x.js:132:59)
at async Object.run (C:\Projects\appAngularfrontend\kendoUpdate\node_modules\jest-cli\build\cli\in
dex.js:155:37)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Can someone help?