Angular项目:Chrome调试器在单元测试中无法正常工作

Question

在我的Angular 8应用程序中，我在调试单元测试时遇到了Chrome调试器的问题。调试单元测试代码本身是可行的，直到我想逐步完成我的生产代码(由测试调用(。

我使用ng test启动测试。在Chrome中，我在单元测试代码中添加了一个断点，并在代码中显示调试器中的正确行。然而，当我进入生产代码时，它走错了行。有时它会变成空行和声明，这根本没有意义。据推测，源映射没有正确生成，但我不确定。

如何进行单元测试调试？我试图将目标从es5设置为es2015，但之后我无法再在Chrome中打开源文件。

tsconfig.spec.json

{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/spec"
},
"files": ["test.ts", "polyfills.ts"],
"include": ["**/*.spec.ts", "**/*.d.ts", "../node_modules/@mycompany/**/*.ts"],
"exclude": ["../node_modules/@mycompany/**/*.spec.ts"]
}

tsconfig.json

{
"extends": "./node_modules/gts/tsconfig-google.json",
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"strict": false,
"target": "es5",
"typeRoots": ["node_modules/@types"],
"types": [
"node",
"jasmine",
"googlemaps"
],
"lib": [
"es2017",
"dom"
],
"baseUrl": ".",
"paths": {
"app/*": ["src/app/*"],
"assets/*": ["src/assets/*"],
"shared/*": ["src/app/shared/*"]
}
}
}

angular.json

.......
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"scripts": [],
"stylePreprocessorOptions": {
"includePaths": ["src/css", "node_modules/@mycompany/styles/lib/sass"]
},
"styles": ["src/css/styles.scss"],
"assets": [
"src/assets",
"src/favicon.ico",
{
"glob": "**/*",
"input": "node_modules/@mycompany/styles/lib/images",
"output": "/assets/images"
}
]
}
},
.......

Answer 1

问题出现在我的package.json中。我使用了一个npm run test命令来调试单元测试并生成其代码覆盖率。但是--code-coverage标志似乎干扰了源映射。

因此，我为代码覆盖率创建了第二个命令。两者现在都很有魅力！如果我运行npm test并使用Chrome添加断点，我可以逐步完成代码！

初始，不工作配置：

"scripts": {
"ng": "ng",
....
"test": "ng test --code-coverage",
....
}

工作配置：

"scripts": {
"ng": "ng",
....
"test": "ng test", // <- default task, no coverage such that source maps will work!
"test:coverage": "ng test --code-coverage",
....
}