CODEWITHSUNDEEP
angularunit-testingkarma-runner
Wouter van Koppen
Wouter van Koppen

Reputation: 1121

Angular project: Chrome debugger not working correctly for unit tests

In my Angular 8 app, I have a problem with the Chrome debugger when debugging unit tests. Debugging the unit test code itself works, until I want to step through my production code (that is invoked by the test).

I startup the tests using ng test. In Chrome I add a breakpoints to the unit test code, and stepping through the code shows the correct line in the debugger. However, when I step into the production code, it steps to the wrong line. Sometimes it steps to empty lines and declarations, which make no sense at all. Presumably, the source map is not correctly generated, but I'm not sure.

How can I make unit test debugging work? I tried to set the target from es5 to es2015, but after that I could not open the source file any more in 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"
                            }
                        ]
                    }
                },
.......

Upvotes: 2

Views: 1612

Answers (1)

Wouter van Koppen
Wouter van Koppen

Reputation: 1121

The problem was in my package.json. I used one npm run test command for both debugging unit tests and generating its code coverage. But it seems that the --code-coverage flag interferes with the source maps.

Therefore, I created a second command for the code coverage. Both now work as charm! If I run npm test and add breakpoints using Chrome, I can step through the code!

Initial, not working config:

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

Working config:

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

Upvotes: 9

Related Questions