How to set up Angular code coverage in VS Code

Daniel Kreider
Daniel Kreider
Published on June 19th at 2:25pm

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

In less than 30 seconds.

Three.

Two.

One.

GO!

1. Change the angular.json

Open the angular.json file in the root folder of your Angular project.

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.

angular%20code%20coverage

2. Setup the code coverage report in Visual Studio Code.

So now that we've got our code coverage reports generated, how do we show them?

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

And last of all, use the CTRL + SHIFT + P shortcut to open the commands window and select Coverage Gutters: Watch to show the code coverage status in Visual Studio Code.

start%20angular%20code%20coverage

Conclusion

Don't forget that Angular code coverage isn't 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.

Questions? Comments? Don't hesitate to reach out.

signature

Angular Consultant