Karma , Istanbul - code coverage report Unknown% ( 0/0 )

Question

I'm getting this Coverage Summary

=============================== Coverage summary ===============================
Statements   : Unknown% ( 0/0 )
Branches     : Unknown% ( 0/0 )
Functions    : Unknown% ( 0/0 )
Lines        : Unknown% ( 0/0 )
================================================================================

I applied the changes instructed in the Angular Documentation for code coverage: https://angular.io/guide/testing#enable-code-coverage-report

but I keep getting the same empty summery.

my karma.conf.js

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, './coverage/singleWindow'),
      reports: ['html', 'lcovonly', 'text-summary'],
      fixWebpackSourcePaths: true,
      thresholds: {
        statements: 80,
        lines: 80,
        branches: 80,
        functions: 80
      }
       },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    restartOnFileChange: true,
});
}

Answer 1

I had the same issue with Angular 7 when running tests using ng test.

As it turns out, Angular CLI disable code coverage by default. You have to start your tests using ng test --code-coverage for it to work.

You can make it always on by adding "codeCoverage": true to the test task of your angular.json file:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "name-of-your-app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          /* ... */
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "./karma.conf.js",
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "codeCoverage": true
          }
        }
      }
    }
  }
}

For more informations: https://angular.io/guide/testing#enable-code-coverage-reports