How to get code coverage numbers accurate to line, webpack, jasmine and karma?

I'm having difficulty getting the correct code coverage numbers when trying to use a combination of webpack, isparta, jasmine and karma. The numbers at the end of the test run do not correctly reflect the ES6 code. However, the user interface displays the correct ES6 file with the correct highlight, and not with the correct numbers.

Here is the screenshot I'm talking about Invalid code coverage numbers . The code and backlight are correct, but the numbers are not indicated. For example, the statement number is completely disabled. I assume that these numbers come from the passed code.

Here is my karma.config.js

'use strict';

var conf = require('./gulp/conf');
var _ = require('lodash');
var wiredep = require('wiredep');
var webpackConfig = require('./webpack.config.js');

function listFiles() {
    var wiredepOptions = _.extend({}, conf.wiredep, {
        dependencies: true,
        devDependencies: true
    });

    var dependencies = wiredep(wiredepOptions).js;

    dependencies.push('test-context.js');

    return dependencies;
}

module.exports = function(config) {

    var configuration = {
        files: listFiles(),
        logLevel: 'WARN',
        frameworks: ['jasmine'],
        browsers : ['PhantomJS'],
        plugins : [
            'karma-phantomjs-launcher',
            'karma-coverage',
            'karma-jasmine',
            'karma-webpack'
        ],
        preprocessors: {
            'test-context.js': ['webpack']
        },
        webpack: webpackConfig,
        webpackMiddleware: {
            noInfo: true
        },
        reporters: ['progress', 'coverage'],
        coverageReporter: {
            dir : 'coverage/',
            reporters: [
                { type: 'html' }
            ]
        }
    };

    config.set(configuration);
};

Here is my webpack configuration

var webpack = require('webpack');

module.exports = {
    node: {
      fs: 'emtpy'
    },
    module: {
        preLoaders: [
            {
                test: /\.js$/,
                loader: 'isparta',
                include: /(src)/
            }
        ],
        loaders: [
            {
                test: /\.js$/,
                include: /(src)/,
                loader: 'babel?stage=0'
            }
        ]
    },
    resolve: {
        extensions: [
            '',
            '.js'
        ]
    },
    devtool: 'inline-source-map'
};

Here is test.context.js

var context = require.context('./test', true, /\.js$/);
context.keys().forEach(context);

var srcContext = require.context('./src', true, /\.js$/);
srcContext.keys().forEach(srcContext);
+4
1
0

Source: https://habr.com/ru/post/1611664/


All Articles