Debug Tests in NG Test | 易学教程

问题

I am using Angular CLI and VS code but none of my breakpoints in my spec files seem to be getting hit when I run ng test?

Do I need to do some config?

回答1:

The other answers are completely valid answers but having been using Angular for around 18 months now I tend to do it in the browser - chrome tools!

Run ng test then f12 and find the spec file via the webpack context. Add a breakpoint(s) and refresh and it will hit said breakpoints. As per screenshot

回答2:

Angular 8.2.13 + Visual Studio Code 1.39.2 update

For whatever reason there is _karma_webpack_ prefix (was not there for version 7), so I had to add an extra pathMapping section to .vscode/launch.json:

    {
      "type": "chrome",
      "request": "attach",
      "name": "Unit tests",
      "address": "localhost",
      "port": 9333,
      "sourceMaps": true,
      "webRoot": "${workspaceFolder}",
      "pathMapping": {
        "/_karma_webpack_": "${workspaceFolder}"
      }
    },

This is what worked for me with Angular CLI 1.0.* and Chrome on Windows 7.

Change configuration files

In your project root directory open karma.conf.js. Right after singleRun: false add , followed by this section:

    customLaunchers: {
      ChromeDebug: {
        base: 'Chrome',
        flags: [ '--remote-debugging-port=9333' ]
      }
    }

Add configuration to .vscode/launch.json:

    {
      "type": "chrome",
      "request": "attach",
      "name": "Unit tests",
      "address": "localhost",
      "port": 9333,
      "sourceMaps": true,
      "webRoot": "${workspaceFolder}"
    },

Start debugging

Run ng test --browsers ChromeDebug

Wait for Chrome browser to start. You will see something like this in command line:

01 06 2017 16:07:29.276:INFO [launcher]: Launching browser ChromeDebug with unlimited concurrency

Set the breakpoint in one of your .spec.ts files.
In Visual Studio Code choose Unit tests debug configuration and hit F5 ("Start Debugging" button).
Press Shift+Ctrl+F5 or refresh the Chrome window to rerun the tests and hit the breakpoint.

For convenience

You can also modify your package.json and add a new script:

"test-debug": "ng test --browsers ChromeDebug",

Then next time you want to start ng test with debugging just run:

npm run test-debug

References:

Debugging Jasmine Unit tests running with Karma runner in VS Code
Debugging Karma tests with VSCode
Angular CLI 8.1.3 Debug Unit Tests configuration - Unverified breakpoint
microsoft/vscode-recipes - Chrome Debugging with Angular CLI

回答3:

In the new release of VSCode (1.14.0) they follow this recipe:

You can debug the Angular App entirely ( including the unit tests ), the recipe is straightforward.

回答4:

Just to add to the other answers:

Follow the instructions @titusfx mentioned.
In the terminal run ng test.
In Visual Studio Code debug view select ng test from the drop down.
you might need to refresh the browser if cannot hit the break points the first time.