[Webpack 2] Ensure all source files are included in test coverage reports with Webpack

Posted 2020-07-31 Answer1215

If you’re only instrumenting the files in your project that are under test then your code coverage report will be misleading and it will be difficult for you to track or enforce improvements to application coverage over time. In this lesson we’ll learn how to ensure all source files are included in coverage reports and how to enforce a specific threshold so you can work toward improving application code coverage.

 

Install:

npm i -D istanbul

 

Include all the src code not only test code:

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

module.exports = function setKarmaConfig(config) {
  config.set({
    basePath: ‘‘,
    frameworks: [‘mocha‘, ‘chai‘],
    files: [testGlob, srcGlob],
    preprocessors: {
      [testGlob]: [‘webpack‘],
      [srcGlob]: [‘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
  })
}

 

Use istanbul cli to check code coverage not below cetain number:

"check-coverage": "istanbul check-coverage --statements 23 --branches 5 --functions 9 --lines 24",

 

Add to validator:

"validate": "npm-run-all --parallel validate-webpack:* lint test --serial check-coverage",

Because it checkout coverage should run after test,  so add ‘--serial‘ flag