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!
    }
});

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!
    }
});

• javascript
• karma-runner
• webpack
• babeljs
• karma-coverage

• You could use isparta-loader for that. – katranci Commented Aug 23, 2015 at 21:42
• 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. – Bill Commented Aug 24, 2015 at 0:20

1 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"
  }
}