code coverage with karma-coverage

Having some trouble configuring karma coverage with webpack. The testing itself is working great. Here’s my attempted config:

// Karma configuration // Generated on Sat Apr 19 2014 15:17:46 GMT-0500 (CDT)

var path = require(‘path’), webpack = require(‘webpack’);

module.exports = function(config) { config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '.',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['mocha', 'sinon-chai'],


    // list of files / patterns to load in the browser
    files: [
        {
            pattern: 'test/client/**/*Test.js'
        }
    ],

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
        'test/client/**/*Test.js': ['webpack'],
        'public/js/**/*.js': ['coverage']
    },

    webpack: {
        resolve: {
            root: [
                path.resolve('public'),
                path.resolve('public/js'),
                path.resolve('public/components')
            ],
            modulesDirectories: [
                'components',
                'node_modules',
                'templates'
            ],
            alias: {
                jquery: 'jquery/dist/jquery.js',
                backbone: 'backbone/backbone.js',
                underscore: 'lodash/dist/lodash.compat.js',
                'backbone.marionette': 'marionette/lib/core/backbone.marionette.js',
                'backbone.hammerjs': 'backbone.hammer.js/backbone.hammer.js',
                'hammerjs' : 'jquery-hammerjs/jquery.hammer-full.js',
                'dustjs-linkedin': 'dustjs-linkedin/dist/dust-core.js',
                'dustjs-helpers': 'dustjs-helpers/dist/dust-helpers.js',
                velocity: 'velocity/jquery.velocity.js',
                transition: 'bootstrap/js/transition',
                collapse: 'bootstrap/js/collapse'
            },
            extensions: ['', '.js', '.json']
        },
        module: {
            loaders: [
                {
                    test: /jquery\.js$/,
                    loader: "expose?jQuery!expose?$"
                },
                {
                    test: /\.less$/,
                    loader: "style-loader!css-loader!less-loader"
                }
            ]
        },
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                dust: 'dustjs-linkedin',
                _: 'underscore',
                Backbone: 'backbone',
                Marionette: 'backbone.marionette'
            })
        ],
        debug: false,
        stats: {
            colors: true,
            reasons: true
        },
        progress: true
    },

    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['mocha', 'coverage', 'junit'],

    coverageReporter: {
        dir : './coverage-client-unit',
        reporters: [
            {type: 'lcov'},
            {type: 'cobertura', file: 'client-coverage.xml'}
        ]
    },

    junitReporter: {
        outputFile: './test-results.xml'
    },

    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_DEBUG,

    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,

    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['PhantomJS'],

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false
});

};

Any ideas?

[schmod]

If anybody is stumbling upon this thread, it’s worth mentioning that babel-plugin-istanbul is a new option that offers a painless way to instrument ES6 sources with Istanbul. If you’re already using Babel in your Webpack configuration, it is extremely straightforward to set up and use.

I spent a lot of time fiddling with the other options presented earlier in this thread. Compared to the other options, the Babel plugin is (by far) the easiest to configure, and produces the most accurate coverage reports.

If you’re already using babel, just npm install babel-plugin-istanbul and add istanbul to your list of babel plugins.

In karma.config.js, do include the 'coverage' reporter, but do not include the 'coverage' preprocessor.

For example, my configuration looks like this:

preprocessors: {
  'test/index.js': ['webpack', 'sourcemap']
},
reporters: ['spec', 'kjhtml', 'coverage'],
coverageReporter: {
    dir: 'reports/coverage',
    reporters: [
      {
        type: 'html',
        subdir: 'report-html'
      }
}

---

Hope this helps anybody else caught in this rabbit-hole!

[deepsweet]

just made https://github.com/deepsweet/istanbul-instrumenter-loader to deal with it, works fine for me.