Angular 项目 : Chrome debugger not working correctly for unit tests

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",
....
}