[Webpack 2] Add Code Coverage to tests in a Webpack project

Posted 2020-07-31 Answer1215

How much of your code runs during unit testing is an extremely valuable metric to track. Utilizing code the karma-coverage plugin and babel-plugin-__coverage__ plugin, we can get an accurate measure of how well we’re covering the files that we are testing.

 

Install:

npm i -D karam-coverage babel-plugin-__coverage__

 

 karma.config.js:

const webpackEnv = {test: true}
const webpackConfig = require(‘./webpack.config‘)(webpackEnv)
process.env.BABEL_ENV = ‘test‘ // so we load the correct babel plugins
const fileGlob = ‘src/js/**/*.test.js‘

module.exports = function setKarmaConfig(config) {
  config.set({
    basePath: ‘‘,
    frameworks: [‘mocha‘, ‘chai‘],
    files: [fileGlob],
    preprocessors: {
      [fileGlob]: [‘webpack‘]
    },
    webpack: webpackConfig,
    webpackMiddleware: {noInfo: true},
    reporters: [‘progress‘, ‘coverage‘],
    coverageReporter: {
      reporters: [
        {type: ‘lcov‘, dir: ‘coverage/‘, subdir: ‘.‘},
        {type: ‘json‘, dir: ‘coverage/‘, subdir: ‘.‘},
        {type: ‘text-summary‘},
      ],
    },
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: false,
    browsers: [‘Chrome‘],
    singleRun: true,
    concurrency: Infinity
  })
}

 

.bablerc

{
  "presets": ["es2015-webpack", "stage-2"],
  "env": {
    "test": {
      "plugins": [
        ["__coverage__", {"ignore": "*.+(test|stub).*"}] // exclude .test & .stub files
      ]
    }
  }
}

 

package.json:

scripts: {
    "test": "karma start",
    "watch:test": "npm test -- --auto-watch --no-single-run",
    "validate": "npm-run-all --parallel validate-webpack:* lint test",
}