javascript - Karma/Istanbul Code Coverage does not find functions and always returns 100%

Question

I am attempting to add Code Coverage for my Karma tests, however although it finds the correct JS files that I'm testing, it does not find the functions inside those files.

From what I have read so far I believe it to be to do with the files not being correctly browserified before being passed to istanbul to do the coverage, but admittedly I am new to this so I'm hoping for some suggestions.

Here is my JS file(common.js):

var applicationSettings = require('./settings');

var common = {
    getAjaxBaseUrl: function () {
        var strVirtualDirectory = applicationSettings.VirtualDirectory;
        if (strVirtualDirectory.length > 1) {
            if (!strVirtualDirectory.startsWith("/")) {
                strVirtualDirectory = "/" + strVirtualDirectory;
            }
        }
    return strVirtualDirectory;
   }
}
module.exports = common;

And here are the tests I have written:

it('Client - Should get correct AjaxBaseUrl with /', function () {
    var clientSettings = require('./../client/scripts/settings');
    var clientCommon = require('./../client/scripts/common');

    clientSettings.VirtualDirectory = '/VD';
    expect(clientCommon.getAjaxBaseUrl()).to.equal('/VD');

});

it('Client - Should get correct AjaxBaseUrl without /', function () {
    var clientSettings = require('./../client/scripts/settings');
    var clientCommon = require('./../client/scripts/common');

    clientSettings.VirtualDirectory = 'VD';
    expect(clientCommon.getAjaxBaseUrl()).to.equal('/VD');
});

My Karma.conf is below:

// Karma configuration
// Generated on Mon Jan 11 2016 09:43:00 GMT+0000 (GMT Standard Time)

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: ['phantomjs-shim', 'browserify', 'mocha'],

        // list of files / patterns to load in the browser
        files: [
            'https://code.jquery.com/jquery-2.2.0.min.js',
            'http://cdn.kendostatic.com/2015.3.1111/js/kendo.all.min.js',
            'test_unit/*Spec.js',
            'client/scripts/*.js'
        ],

        // list of files to exclude
        exclude: [
        ],

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

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

        // Configure jUnit reporter
        junitReporter: {
            outputDir: '', // results will be saved as $outputDir/$browserName.xml 
            outputFile: undefined, // if included, results will be saved as $outputDir/$browserName/$outputFile 
            suite: '', // suite will become the package name attribute in xml testsuite element 
            useBrowserName: true // add browser name to report and classes names 
        },

        // Configure coverage reporter
        coverageReporter: {
            type: 'html',
            dir: 'test_coverage',
            subdir: '.',
            file: 'coverage.htm'
        },

        // 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_INFO,

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

        browserify: {
            configure: function (bundle) {
                bundle.transform('reactify', { extensions: ['.jsx'] });
            }        
        },        

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

        // Concurrency level
        // how many browser should be started simultaneous
        concurrency: Infinity,

    })
}

This does produce a report, but this shows 100% and the only line found in the common.js file is:

require("C:\Source\ProjectName\client\scripts\common.js");

I attempted to add Browerify-Istanbul into the mix, by adding a require for it at the top of the Karma.conf an additional transform in the browserify section

bundle.transform(istanbul)

However this just makes my tests fail and throw several errors:

undefined is not an object (evaluating '__cov_qQLFhXEMt7fatxiMx0_vQQ.b[' 1'][0]') getAjaxBaseUrl@C:/Users/CHARLE~1.WIC/AppData/Local/Temp/0d61da722d2838c9 600d83d1cbb4c0b8.browserify:43:1498 C:/Users/CHARLE~1.WIC/AppData/Local/Temp/0d61da722d2838c9600d83d1cbb4c0b 8.browserify:51742:1849

16 02 2016 09:14:08.515:ERROR [coverage]: [TypeError: Cannot read property 'star t' of undefined] TypeError: Cannot read property 'start' of undefined at C:SourceProjectName ode_modulesistanbullibo bject-utils.js:59:44 at Array.forEach (native) at Object.addDerivedInfoForFile (C:SourceProjectName ode_modulesistanbullibobject-utils.js:58:37) at Object.Collector.fileCoverageFor (C:SourceProjectName ode_modulesistanbullibcollector.js:94:15) at C:SourceProjectName ode_modulesistanbullib eporthtml.js:558:90 at Array.forEach (native) at HtmlReport.Report.mix.writeReport (C:SourceProjectName ode_modulesistanbullib eporthtml.js:557:27) at writeReport (C:SourceProjectName ode_modulesk arma-coveragelib eporter.js:62:16) at C:SourceProjectName ode_moduleskarma-coverage lib eporter.js:288:11 at C:SourceProjectName ode_moduleskarmalibhelp er.js:82:7 at FSReqWrap.oncomplete (fs.js:82:15)

Am I missing something, or going about this the wrong way?

Answer 1

I had the exact same issue. What worked for me was removing "coverage" from the preprocessors section AND using browserify-istanbul. Also, you want to configure browserify-istanbul to ignore your test files.

So your preprocessors should look something like (removed 'coverage'):

// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
    'test_unit/*Spec.js': ['browserify'],
    'client/scripts/*.js': ['browserify']    
},

And your browserify config should look something like:

browserify: {
    configure: function (bundle) {
        bundle.transform('reactify', { extensions: ['.jsx'] });
        bundle.transform(require('browserify-istanbul')({
          ignore: ['**/test_unit/**']
        }));
    }        
},        

Hope that helps