Coverage Exclusions and Webpack Middleware

In notebook:
FrontEndMasters Webpack Deep Dive
Created at:
2017-01-03
Updated:
2017-01-03
Tags:
Webpack libraries JavaScript
​$ npm run test​

Now, we have a code coverage summary in our Terminal. (this the ​text-summary​ configured in the previous note)
The other reports can be found in the coverage/ directory. It's an html file. Can click through the files. 

Excluding the spec files

The lcov report also shows the controller.test.js file. This will of course skew (inflate) our coverage percentage. 

So to exclude the test files:
  //  ****   .babelrc   ****

{
  "presets": ["es2015", "es2016", "stage-2"],
  "env": {
    "test": {
      "plugins": [
        // 1. ++++ add the ignore pattern
        ["__coverage__", {"ignore": "*.+(test|stub).*"}]
      ]
    }
  }
}
Now the code coverage summary is much more precise. 

webpakcMiddleware

This in the ​karma.conf.js​ file
  // ****   karma.conf.js   ****
..
const fileGlob = 'src/**/*.test.js'

module.exports = config => {
  config.set({
    basePath: '',
    frameworks: ['mocha', 'chai'],
    files: [fileGlob],
    preprocessors: {
      [fileGlob]: ['webpack']
    },
    // this ↴
    webpack: webpackConfig,
    webpackMiddleware: {noInfo: true},
    reporters: ['progress', 'coverage'],
    coverageReporter: {
      
...
If you comment this out, the report in the Terminal will list all the files that were included in the tests. This setting will hide them. 

Q&A: Why is it only loading the controller for the tests?

It's because, this file is the only one required by our tests. 
​fileGlob​ above only includes the *.test.js files. 

Get coverage for the files we have in our project