Debug Tests in NG Test

Question

I am using Angular CLI and VSCode 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?

did you try debugging via chrome dev tools? you can do this as a workaround until you find the correct way to do it. as far as I know, you need to configure the .vscode/launch.json file, I just don't know with what — Giora Guttsait, May 11 '17 at 13:25
Thats basically what I'm asking... it works fine for debugging my code... just don't know/understand how to do this for ng test! — 72GM, May 11 '17 at 13:33
So, you want to run unit tests in debug mode? Are you attempting to debug unit tests? — R. Richards, May 11 '17 at 17:13

72GM · Accepted Answer · 2020-05-26T14:10:05.967

69

Update for Angular version 9

The source files have been moved but you can still debug this way if you do the following steps

In devtools, select the sources tab
Press CTRL + P
Type in the name of the file you want to debug

Valid for versions below 9

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

edited May 26 '20 at 14:10

answered Jul 13 '18 at 13:57

72GM

2,926
3
27
33

7

what about "DEBUG" button in UI. What is the functionality of it ? – Günay Gültekin Apr 04 '19 at 07:25
2

this does not work for me. Webpack only loads styles (both directly on karma and the /debug.html). – Torsten N. Apr 27 '20 at 08:24
yeah I've just upgraded to Angular v9 and the ability to do this has disappeared – 72GM May 21 '20 at 15:54
Still doesn't work for me, I can find the source files, but breakpoints aren't working... – Ben Winding Jun 12 '20 at 02:44
you must be doing something differently. 100% works for me and my colleagues ... and from the CLI team guidance as per the ticket i raised for the original issue... https://github.com/angular/angular-cli/issues/17792#issuecomment-634022498 – 72GM Jun 17 '20 at 14:07

Andrei Sinitson · Answer 2 · 2020-03-27T11:49:22.713

This is what worked for me with:

Angular 9.0.6 + Visual Studio Code 1.43.2
Angular 8.2.13 + Visual Studio Code 1.39.2
Angular 7, 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.

For versions 8.* - 9.* (note "pathMapping section!):

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

For version 7.*:

{
  "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:

Why do we have to run `ng test` manually? Can it not be a `preLaunchTask`? I've tried and haven't been able to get it to work very well but then again I don't really know what I am doing. — steinybot, Oct 15 '19 at 00:41
@steinybot: I found all this `start something on each debugging session` workflow quite annoying, that's why I prefer to start it manually and this is why I use `"request": "attach"` instead of `"request": "launch"`. I don't use `preLaunchTask` for any of my debug configurations, but I can try it out and play with it. What did you try so far? Do you have GitHub gist or something similar? — Andrei Sinitson, Nov 03 '19 at 12:05
A good option to use is `ng test --browsers ChromeDebug --watch=true`, wait until the tests run and then you have time to attach the debugger. — Sandro, May 12 '20 at 13:28
Spot on Andrei. This weeks for me even now. I've read so many posts over the last few days that simply do not work. — AndyKing, Jun 03 '20 at 16:33

score 13 · Answer 3 · edited Aug 18 '17 at 09:47

13

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.

edited Aug 18 '17 at 09:47

answered Jul 12 '17 at 07:34

titusfx

1,896
27
36

1

Recipe should be updated and I create a bug report, but there is not much activity right now, so I didn't event get an answer to `Should I create pull request?` question. Anyway, working configuration is here: https://github.com/microsoft/vscode-recipes/issues/225 (tested it on Angular CLI 8.3.17 and Angular 8.2.13 today). – Andrei Sinitson Nov 03 '19 at 12:10
This solution is explicit for VSCode (1.14.0) or before. So, is correct. Look at the answer of A-Sharabiani, maybe that could help. – titusfx May 27 '20 at 17:58
1

This solution worked for me. Angular 11.2.4, Angular CLI 11.2.3, VS Code 1.55.0, Node.js 12.181.3 – Dragos Durlut Apr 19 '21 at 17:20

score 6 · Answer 4 · answered Apr 04 '18 at 21:05

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.

score -4 · Answer 5 · answered May 17 '19 at 14:49

-4

You can simply add a 'debugger' where you want to debug and run

ng test

When the chrome browser opens, turn on the dev tools and it will stop on your 'debugger'

answered May 17 '19 at 14:49

Joao Vitor Marques

304
3
4

Debug Tests in NG Test

5 Answers5

Change configuration files

Start debugging

For convenience

Linked