istanbul-instrumenter-loader: coverage issues don't match source

Question

I'm using istanbul-instrumenter-loader to try to generate code coverage reports for my untranspiled es6 code, and while everything runs fine, the issues reported in the generated HTML output doesn't seem to line up with the actual source.

For example:

(in case the image is removed) A const declaration has 3 "if statement not covered" after it, even though there is no such statement or any code at all after that line. Sometimes "statement not covered" is marked in the middle of a string, or in an object declaration, or across multiple statements, etc etc.

Here's my Karma config file:

module.exports = function(config) {
    config.set({
        basePath: '../../',
        frameworks: [ 'qunit' ],

        files: [
            'test/index.js',

            // Session tickets
            { pattern: 'test/tickets/*.json', watched: true, included: false, served: true }

        ],

        preprocessors: {
            'test/index.js': 'webpack'
        },
        webpack: {
            module: {
                rules: [{
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loaders: ['istanbul-instrumenter-loader', 'babel-loader']
                },
                {
                    test: /\.vue$/,
                    loaders: ['vue-loader']
                },
                {
                    test: /\.png$/,
                    loaders: ['url-loader']
                }]
            }
        },
        reporters: [ 'coverage-istanbul', 'progress' ],
        coverageIstanbulReporter: {
            type: 'html',
            dir: './coverage'
            fixWebpackSourcePaths: true
        },
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: [ 'Chrome' ],
        browserNoActivityTimeout: 30000,
        singleRun: true,
        concurrency: Infinity,
        client: {
            captureConsole: true
        },
        browserConsoleLogOptions: {
            terminal: true,
            level: ''
        }
    })
};

Answer 1

I had a similar problem and solved it by running istanbul-instrumenter-loader before babel-loader.

You'd need to replace:

{
    test: /\.js$/,
    exclude: /node_modules/,
    loaders: ['istanbul-instrumenter-loader', 'babel-loader']
}

with:

{
    test: /\.js$/,
    exclude: /node_modules/,
    use: [
        {
            loader: 'babel-loader'
        },
        {
            loader: 'istanbul-instrumenter-loader',
            options: {
                esModules: true
            }
        }
    ]
}