Following the guide we upgraded angular 11 to 12. Before the upgrade karma is running the unit tests without any issues. However, after the upgrade this is what we end up with. Any idea how to check whats wrong.
I also compared the source with a refresh angular 12 project (karma works here), but changes did not make any difference.
- Generating browser application bundles (phase: setup)...16 08 2021 09:54:40.585:INFO [framework:karma-parallel]: sharding specs across 1 browser
\ Generating browser application bundles (phase: building)...16 08 2021 09:54:54.196:INFO [karma-server]: Karma v6.3.4 server started at http://localhost:9876/
16 08 2021 09:54:54.197:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
16 08 2021 09:54:54.201:INFO [launcher]: Starting browser Chrome
√ Browser application bundle generation complete.
16 08 2021 09:55:18.440:INFO [Chrome 92.0.4515.131 (Windows 10)]: Connected on socket 6PlChlKKHiVEnIfkAAAB with id 24689625
16 08 2021 09:55:47.993:WARN [Chrome 92.0.4515.131 (Windows 10)]: Disconnected (0 times) , because no message in 30000 ms.
Chrome 92.0.4515.131 (Windows 10) ERROR
Disconnected , because no message in 30000 ms.
Chrome 92.0.4515.131 (Windows 10) ERROR
Disconnected , because no message in 30000 ms.
Chrome 92.0.4515.131 (Windows 10) ERROR
Disconnected , because no message in 30000 ms.
{
"name": "my.client",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"postinstall": "ngcc",
"ng": "ng",
"start": "npm run serve",
"serve": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng serve --hmr --configuration=dev-hmr -o --port 7100",
"build": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build",
"build:prod": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build --configuration production --aot",
"test": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng test --watch=false --code-coverage",
"lint": "ng lint",
"e2e": "ng e2e --configuration=prod",
"yarn:install": "yarn --ignore-scripts",
"yarn": "yarn",
"sonar": "sonar-scanner"
},
"engines": {
"node": ">=8.14.0",
"yarn": ">=1.0.2 <2.0.0",
"npm": ">=6.4.1"
},
"private": true,
"dependencies": {
"@angular-material-components/datetime-picker": "6.0.2",
"@angular/animations": "^12.2.0",
"@angular/cdk": "^12.2.0",
"@angular/common": "^12.2.0",
"@angular/compiler": "^12.2.0",
"@angular/core": "^12.2.0",
"@angular/forms": "^12.2.0",
"@angular/material": "^12.2.0",
"@angular/platform-browser": "^12.2.0",
"@angular/platform-browser-dynamic": "^12.2.0",
"@angular/platform-server": "^12.2.0",
"@angular/router": "^12.2.0",
"@angularclass/hmr": "^3.0.0",
"@angularclass/hmr-loader": "^3.0.2",
"@aspnet/signalr": "^1.0.27",
"@asymmetrik/ngx-leaflet": "^8.1.0",
"@asymmetrik/ngx-leaflet-draw": "^7.0.0",
"@asymmetrik/ngx-leaflet-markercluster": "^5.0.1",
"@ngrx/effects": "^11.1.0",
"@ngrx/entity": "^11.1.0",
"@ngrx/router-store": "^11.1.0",
"@ngrx/schematics": "^12.1.0",
"@ngrx/store": "^11.1.0",
"@ngrx/store-devtools": "^11.1.0",
"@types/chart.js": "^2.9.32",
"@types/leaflet.markercluster": "^1.4.0",
"angular-auth-oidc-client": "9.0.8",
"angular-split": "^5.0.0",
"chart.js": "^2.9.3",
"core-js": "^3.10.0",
"file-saver": "^2.0.5",
"guid-typescript": "^1.0.9",
"jsrsasign": "^10.2.0",
"karma-coverage": "^2.0.3",
"leaflet": "^1.5.1",
"leaflet-deepzoom": "2.0.0",
"leaflet-draw": "^1.0.4",
"leaflet-draw-drag": "^0.4.5",
"leaflet-minimap": "^3.6.1",
"leaflet-mouse-position": "^1.2.0",
"leaflet-path-drag": "^1.1.0",
"leaflet.markercluster": "^1.4.1",
"lodash": "4.17.21",
"material-design-icons": "^3.0.1",
"ng2-charts": "2.4.2",
"ngrx-store-freeze": "^0.2.0",
"ngrx-store-logger": "^0.2.0",
"ngx-color-picker": "^11.0.0",
"ngx-odata-v4": "^1.1.1",
"ngx-papaparse": "^5.0.0",
"normalize.css": "^8.0.1",
"roboto-fontface": "^0.10.0",
"rxjs": "^6.6.7",
"text-mask-core": "^5.1.2",
"ts-date": "^2.1.7",
"tslib": "^2.0.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~12.2.0",
"@angular-eslint/builder": "4.3.0",
"@angular-eslint/eslint-plugin": "4.3.0",
"@angular-eslint/eslint-plugin-template": "4.3.0",
"@angular-eslint/schematics": "4.3.0",
"@angular-eslint/template-parser": "4.3.0",
"@angular/cli": "^12.2.0",
"@angular/compiler-cli": "^12.2.0",
"@angular/language-service": "^12.2.0",
"@types/chart.js": "^2.9.32",
"@types/file-saver": "^2.0.1",
"@types/geojson": "^7946.0.0",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.2",
"@types/leaflet": "^1.4.4",
"@types/leaflet-draw": "1.0.5",
"@types/leaflet-mouse-position": "^1.2.0",
"@types/lodash": "^4.14.119",
"@types/node": "^12.20.7",
"@typescript-eslint/eslint-plugin": "4.16.1",
"@typescript-eslint/parser": "4.16.1",
"codelyzer": "^6.0.0",
"copy-webpack-plugin": "4.6.0",
"eslint": "^7.6.0",
"jasmine-auto-spies": "^6.9.3",
"jasmine-core": "~3.7.1",
"jasmine-marbles": "^0.8.1",
"jasmine-spec-reporter": "~6.0.0",
"karma": "^6.3.4",
"karma-chrome-launcher": "~3.1.0",
"karma-cli": "^2.0.0",
"karma-firefox-launcher": "^1.1.0",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"karma-parallel": "^0.3.1",
"karma-sonarqube-unit-reporter": "^0.0.23",
"karma-trx-reporter": "^0.3.0",
"protractor": "^7.0.0",
"rebuild-node-sass": "^1.1.0",
"rxjs-marbles": "^6.0.1",
"sonarqube-scanner": "^2.8.0",
"ts-node": "^8.6.2",
"tslint": "~6.1.3",
"typescript": "4.3.5"
}
}
Did you ensure that the versions of karma, karma-chrome-launcher, karma-cli, karma-firefox-launcher, (all other karma packages) and jasmine packages were the same between the fresh Angular 12 version and your project? And then did you run a fresh npm install after making sure the versions are the same?
After that, try comparing test.ts, angular.json and tsconfig.spec.json between the fresh project and your project to ensure they are the same.