Debug Tests in NG Test

angular visual-studio-code karma-jasmine angular-cli
72GM picture 72GM · May 11, 2017 · Viewed 41k times · Source

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?

Answer

72GM picture 72GM · Jul 13, 2018

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

enter image description here

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

enter image description here

Related questions

vs code cannot find module '@angular/core' or any other modules

my project was generated with [Angular CLI] version 1.2.6. I can compile the project and it works fine, but I always get error in vs code telling me cannot find module '@angular/core' cannot find module '@angular/router' cannot …

Read More
Visual Studio Code Automatic Imports

I'm in the process of making the move from Webstorm to Visual Studio Code. The Performance in Webstorm is abysmal. Visual studio code isn't being very helpful about finding the dependencies I need and importing them. I've been doing it …

Read More
Is there a way to remove unused imports and declarations from Angular 2+?

I'm assigned to take some messed code from other developers who have already left the company recently. I am curiously asking is there some plug-in of Visual Studio Code or other means that could help us to tidy and organize …

Read More