How to Add a Test Coverage Report to an Angular CLI Project

by Jason Swett,

Angular CLI has test coverage reporting somewhat built in.

First install the dependencies.

$ npm install karma karma-jasmine karma-chrome-launcher karma-jasmine-html-reporter karma-coverage-istanbul-reporter

Then run ng test.

$ ng test --code-coverage

Then run the server that shows you your report.

$ http-server -c-1 -o -p 9875 ./coverage

You should see something like this.

  •  
  •  
  •  
  •  

7 thoughts on “How to Add a Test Coverage Report to an Angular CLI Project

  1. Benjamin Alvarez

    Excellent contribution, thank you very much for taking the time to show us how to use this tool.

    when i try to run the server I can not see the report as samples in the guide.

    I try this
    ng serve -c-1 -o -p 9875 ./coverage

    Reply
  2. Jason

    I am confused. I thought this was a code coverage report, not a test coverage report. The code coverage report generated by istanbul tells us if all functions are called and if all if/else blocks can be executed, for example. but I was not aware that it tells us if we have enough unit tests written for this code. Are you saying that it does?

    Reply
  3. Jim

    Thanks for this Jason! I wasted so much time fiddling with my karma.conf.js file with no success.

    After running your first two commands, I had it working with literally no changes to the karma config file at all.

    Woohoo! 🥳

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *