Debug Tests in NG Test

Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

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": "${workspaceRoot}"
    },

---

Start debugging

1. Run ng test --browsers ChromeDebug

2. 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
   

3. Set the breakpoint in one of your .spec.ts files.

4. In Visual Studio Code choose Unit tests debug configuration and hit F5 ("Start Debugging" button).

5. 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

Answer 4

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