8

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!
    }
});
Rap
  • 6,851
  • 3
  • 50
  • 88
Bill
  • 25,119
  • 8
  • 94
  • 125
  • You could use [isparta-loader](https://www.npmjs.com/package/isparta-loader) for that. – katranci Aug 23 '15 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 Aug 24 '15 at 00:20

1 Answers1

15

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"
  }
}
katranci
  • 2,551
  • 19
  • 24
  • 2
    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. – djskinner Mar 03 '16 at 09:39
  • I also found that this solution works way better than the `require.context` option when dealing with big codebases. – telliks May 20 '16 at 14:04
  • 1
    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 @djskinner and it works with that too. – Marko Gresak May 23 '16 at 14:18
  • This is not likely to work under webpack 2. I am getting `isparta is not a loader` – Simon Jun 29 '17 at 06:52