Angular 项目:Chrome 调试器无法正常进行单元测试
Angular project: Chrome debugger not working correctly for unit tests
在我的 Angular 8 应用程序中,我在调试单元测试时遇到了 Chrome 调试器的问题。
调试单元测试代码本身有效,直到我想单步执行我的生产代码(由测试调用)。
我使用 ng test
启动测试。在 Chrome 中,我向单元测试代码添加了一个断点,单步执行代码会在调试器中显示正确的行。但是,当我进入生产代码时,它进入了错误的行。有时它会转向空行和声明,这根本没有意义。大概是source map没有正确生成,但我不确定。
如何进行单元测试调试?我尝试将目标从 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"
}
]
}
},
.......
问题出在我的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",
....
}
在我的 Angular 8 应用程序中,我在调试单元测试时遇到了 Chrome 调试器的问题。 调试单元测试代码本身有效,直到我想单步执行我的生产代码(由测试调用)。
我使用 ng test
启动测试。在 Chrome 中,我向单元测试代码添加了一个断点,单步执行代码会在调试器中显示正确的行。但是,当我进入生产代码时,它进入了错误的行。有时它会转向空行和声明,这根本没有意义。大概是source map没有正确生成,但我不确定。
如何进行单元测试调试?我尝试将目标从 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"
}
]
}
},
.......
问题出在我的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",
....
}