How to set up Angular code coverage in VS Code

In less than 30 seconds.

Here’s how to configure code coverage to discover which chunks of your Angular application are being tested.




1. Change the angular.json

Scroll to the test section and add the codeCoverage: true line.

Like this.

"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"codeCoverage": true

Now, when you restart the Angular testing process, you’ll see a new folder in your project called coverage. This is the code coverage report for your Angular application.

2. Set up the code coverage report in Visual Studio Code.

Well, there’s an extension that will do this for us. It’s called Coverage Gutters.

Go to Extensions in VS Code, search for Coverage Gutters and install it.

Once installed, you’ll see green lines to show what part of your Angular code is being tested.

3. Start Coverage Gutters


Don’t forget that Angular code coverage is not a silver bullet.

Just because 100% of the code in your Angular project is being tested doesn’t mean that all the possible use cases and production scenarios are bug free.

That said, code coverage is a great thermometer to help you decide how many tests you need to write.

If you enjoyed this article and found it useful please bang the 👏 button and follow me for more cool articles like this one.

Follow Me: GitHub, Medium, Personal Blog

Originally published at