Getting Karma code coverage for pre-transpilation source code

Question

I'm using Karma to run tests, webpack to bundle files, and babel for es6 -> es5 transpilation. I've got the tests running and code coverage being generated, but the code coverage numbers are for the source files after being transpiled. Is there anyway to get code coverage for the original source files instead?

I tried using the sourcemap preprocessor but it didn't seem to do anything. Do I need to add that to the webpack config somewhere?

karma.conf.js

config.set({
    browsers: ['Chrome'], //run in Chrome

    files: [
        'src/**/*-test.js'
    ],

    frameworks: ['mocha'], //use the mocha test framework

    plugins: [
        'karma-chrome-launcher',
        'karma-mocha',
        'karma-sourcemap-loader',
        'karma-webpack',
        'karma-coverage',
    ],

    preprocessors: {
        'src/**/*-test.js': ['webpack']
    },

    reporters: ['dots', 'coverage'], //report results in this format

    coverageReporter: {
        reporters: [{
            type: 'text-summary',
        }, {
            type: 'html',
            dir: 'build/reports/coverage'
        }]
    },

    singleRun: true, //just run once by default

    webpack: {
        node: {
            fs: 'empty'
        },

        // Instrument code that isn't test or vendor code.
        module: {
            loaders: [{
                test: /\.js?$/,
                include: path.join(__dirname, 'src/js'),
                loader: 'babel?stage=0'
            }],

            postLoaders: [{
                test: /\.js$/,
                exclude: /(test|node_modules)\//,
                loader: 'istanbul-instrumenter'
            }]
        }
    },

    webpackMiddleware: {
        noInfo: true //please don't spam the console when running in karma!
    }
});

Binny

You could use isparta-loader for that. – Briefing

When I try to add isparta as a preLoader (with and without the babel property), it no longer is transpiling the code and errors on import statements. It says to use that instead of the standard babel loader so I'm not sure what I'm doing wrong. – Binny

Answer 1

The following configuration works fine:

karma.conf.js

var path = require('path');

module.exports = function(config) {
  config.set({
    browsers: [ 'Chrome' ], //run in Chrome

    files: [
      'src/**/*-test.js'
    ],

    frameworks: [ 'mocha' ], //use the mocha test framework

    preprocessors: {
      'src/**/*-test.js': [ 'webpack' ]
    },

    reporters: [ 'dots', 'coverage' ], //report results in this format

    coverageReporter: {
      reporters: [
        {
          type: 'text-summary'
        },
        {
          type: 'html',
          dir: 'build/reports/coverage'
        }
      ]
    },

    singleRun: true, //just run once by default

    webpack: {
      node : {
        fs: 'empty'
      },

      // Instrument code that isn't test or vendor code.
      module: {
        preLoaders: [
          { test: /\.js$/, loader: 'isparta', include: path.join(__dirname, 'src/js') }
        ],
        loaders: [
          {
            test: /\.js$/,
            include: path.join(__dirname, 'src/js'),
            loader: 'babel?stage=0'
          }
        ]
      }
    },

    webpackMiddleware: {
      noInfo: true //please don't spam the console when running in karma!
    }
  });
};

package.json

{
  "devDependencies": {
    "babel-core": "^5.8.22",
    "babel-loader": "^5.3.2",
    "chai": "^3.2.0",
    "isparta-loader": "^0.2.0",
    "karma": "^0.13.9",
    "karma-chrome-launcher": "^0.2.0",
    "karma-coverage": "^0.5.0",
    "karma-mocha": "^0.2.0",
    "karma-webpack": "^1.7.0",
    "mocha": "^2.2.5",
    "webpack": "^1.11.0"
  }
}

Briefing

This worked great for me. Much simpler than anything else I have come across. It is also the only example I've seen not to use the 'alternative Karma configuration' where require.context is used to create a single entry point. – Undecagon

I also found that this solution works way better than the require.context option when dealing with big codebases. – Hypertensive

Thanks for this, after spending few hours trying other solutions, this one finally gave me idea how to get it working. I am using the "alternative configuration" mentioned by @Undecagon and it works with that too. – Allie

This is not likely to work under webpack 2. I am getting isparta is not a loader – Coates