Angular 12 升级后 Karma 未 运行 单元测试
Karma not running unit test after Angular 12 upgrade
在 guide 之后，我们将 angular 11 升级到 12。在升级 karma 之前，运行 单元测试没有任何问题。然而，在升级之后，这就是我们最终得到的。知道如何检查哪里出了问题。
我还将源代码与刷新 angular 12 项目（业力在这里起作用）进行了比较，但更改没有任何区别。
- 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"
}
}
您是否确保 karma、karma-chrome-launcher、karma-cli、karma-firefox-launcher（所有其他 karma 包）和 jasmine 包的版本是新鲜的 Angular 12 版本和您的项目之间是否相同？然后，在确保版本相同后，你 运行 重新 npm install 了吗？
之后，尝试比较新项目和您的项目之间的 test.ts、angular.json 和 tsconfig.spec.json 以确保它们相同。
在 guide 之后，我们将 angular 11 升级到 12。在升级 karma 之前，运行 单元测试没有任何问题。然而，在升级之后，这就是我们最终得到的。知道如何检查哪里出了问题。
我还将源代码与刷新 angular 12 项目（业力在这里起作用）进行了比较，但更改没有任何区别。
- 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"
}
}
您是否确保 karma、karma-chrome-launcher、karma-cli、karma-firefox-launcher（所有其他 karma 包）和 jasmine 包的版本是新鲜的 Angular 12 版本和您的项目之间是否相同？然后，在确保版本相同后，你 运行 重新 npm install 了吗？
之后，尝试比较新项目和您的项目之间的 test.ts、angular.json 和 tsconfig.spec.json 以确保它们相同。