Set up coverage for a karma web package using angular 2

Question

How to configure karma coverage using angular2 + webpack?

I followed the angular webstack quick start guide. But the coverage tool is empty and does not display my tests. Thanks!

my folder structure

project |--src (project files) |--tests (all my testfiles) 

my webpack.test.js is as follows

 var helpers = require('./helpers'); module.exports = { devtool: 'inline-source-map', resolve: { extensions: ['', '.ts', '.js'] }, module: { loaders: [ { test: /\.ts$/, loaders: ['ts'] }, { test: /\.html$/, loader: 'null' }, { test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, loader: 'null' }, { test: /\.css$/, exclude: helpers.root('src', 'app'), loader: 'null' }, { test: /\.css$/, include: helpers.root('src', 'app'), loader: 'null' } ] } } 

my Karma.conf.js

 var webpackConfig = require('./webpack.test'); module.exports = function (config) { var _config = { basePath: '', frameworks: ['jasmine', 'sinon'], files: [ {pattern: './config/karma-test-shim.js', watched: false} ], preprocessors: { './config/karma-test-shim.js': ['webpack', 'sourcemap'] }, plugins:[ require('karma-jasmine'), require('karma-coverage'), require('karma-webpack'), require('karma-phantomjs-launcher'), require('karma-sourcemap-loader'), require('karma-mocha-reporter'), require('karma-sinon') ], coverageReporter: { type : 'html', dir : 'coverage/' }, webpack: webpackConfig, webpackMiddleware: { stats: 'errors-only' }, webpackServer: { noInfo: true }, reporters: ['mocha','coverage'], port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: true, browsers: ['PhantomJS'], singleRun: false }; config.set(_config); }; 

and karma-test-shim.js

 Error.stackTraceLimit = Infinity; require('core-js/es6'); require('reflect-metadata'); require('zone.js/dist/zone'); require('zone.js/dist/long-stack-trace-zone'); require('zone.js/dist/proxy'); require('zone.js/dist/sync-test'); require('zone.js/dist/jasmine-patch'); require('zone.js/dist/async-test'); require('zone.js/dist/fake-async-test'); var testContext = require.context('../tests', true, /\.spec\.ts/); testContext.keys().forEach(testContext); var testing = require('@angular/core/testing'); var browser = require('@angular/platform-browser-dynamic/testing'); testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting()); 

Answer 1

Yuu need to import plugin with code plugin into plugins

  require('karma-coverage-istanbul-reporter'), 

Also use the code below to add the istanbul repeater property as shown below

  coverageIstanbulReporter: { reports: ['html', 'lcovonly'], fixWebpackSourcePaths: true, // enforce percentage thresholds // anything under these percentages will cause karma to fail with an exit code of 1 if not running in watch mode thresholds: { emitWarning: false, // set to `true` to not fail the test command when thresholds are not met global: { // thresholds for all files statements: 80, lines: 80, branches: 80, functions: 80 }, each: { // thresholds per file statements: 80, lines: 80, branches: 80, functions: 80, overrides: {} } } }, 

The full configuration for karma.config.js should be lower:

  // Karma configuration file, see link for more information // https://karma-runner.imtqy.com/0.13/config/configuration-file.html module.exports = function(config) { config.set({ basePath: '', frameworks: ['jasmine', '@angular/cli'], plugins: [ require('karma-jasmine'), require('karma-chrome-launcher'), require('karma-jasmine-html-reporter'), require('karma-coverage-istanbul-reporter'), require('@angular/cli/plugins/karma'), require('karma-htmlfile-reporter'), ], client: { clearContext: false // leave Jasmine Spec Runner output visible in browser }, coverageIstanbulReporter: { reports: ['html', 'lcovonly'], fixWebpackSourcePaths: true, // enforce percentage thresholds // anything under these percentages will cause karma to fail with an exit code of 1 if not running in watch mode thresholds: { emitWarning: false, // set to `true` to not fail the test command when thresholds are not met global: { // thresholds for all files statements: 80, lines: 80, branches: 80, functions: 80 }, each: { // thresholds per file statements: 80, lines: 80, branches: 80, functions: 80, overrides: {} } } }, angularCli: { environment: 'dev' }, // reporters: config.angularCli && config.angularCli.codeCoverage ? ['spec', 'karma-remap-istanbul'] : ['spec'], // reporters: ['mocha'], reporters: ['progress', 'html', 'kjhtml'], htmlReporter: { outputFile: 'testreports/report.html', // Optional pageTitle: 'Rest Reports', subPageTitle: 'Suite-wise report ', groupSuites: true, useCompactStyle: true, useLegacyStyle: false }, port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: true, browsers: ['Chrome'], singleRun: false }); };