Karma + Browserify + Jasmine + Istanbul + React coverage

Question

I'm trying to get the coverage report for my tests but the coverage output for all files is always on a single line showing the require with the path to the file. For example...

The tests however are running fine. This is a react project so I had to include some additional paths to the files and preprocessor to get the tests to run.

I'm not sure if there is something wrong with my karma config? This is what my config currently looks like...

/* global module */
module.exports = function (config) {
    'use strict';
    config.set({
        autoWatch: true,
        singleRun: true,

        frameworks: ['browserify', 'jasmine'],

        files: [
            'node_modules/karma-babel-preprocessor/node_modules/babel-core/browser-polyfill.js',
            'node_modules/react/react.js',
            'src/**/*.jsx',
            'src/**/!(*spec).js'
        ],

        browsers: ['PhantomJS'],

        preprocessors: {
            'node_modules/react/react.js': ['browserify', 'sourcemap'],
            'src/**/*.jsx': ['browserify', 'sourcemap', 'coverage'],
            'src/**/!(*spec).js': ['browserify', 'sourcemap', 'coverage'],
        },

        browserify: {
            debug: true,
            transform: [ 'babelify' ]
        },

        reporters: ['progress', 'coverage'],

        coverageReporter: {
            instrumenters: {isparta: require('isparta')},
            instrumenter: {
                'src/**/*.js': 'isparta',
                'src/**/*.jsx': 'isparta'

            },
            reporters: [
                {
                    type: 'text-summary',
                    subdir: normalizationBrowserName
                },
                {
                    type: 'lcov',
                    subdir: normalizationBrowserName
                },
                {
                    type: 'html',
                    dir: 'coverage/',
                    subdir: normalizationBrowserName
                }
            ]
        }

    });

    function normalizationBrowserName(browser) {
        return browser.toLowerCase().split(/[ /-]/)[0];
    }

};

UPDATE: I used a commonjs transform as well and was able to get things to work a bit better but tests wouldn't run and the coverage was the transformed code.

Answer 1

Make sure to include all your source code for the coverage. For instance, I have the following karma.conf.js: (check the preprocessor section)

// Karma configuration
// Generated on Mon Sep 07 2015 23:22:13 GMT-0400 (Eastern Daylight Time)

module.exports = function(config) {

    var SourceCode = [
        'app/app.js',
        'app/Modules/*.js',                     // Basic Path Files (Modules for Source, UnitTests to keep test files separate)
        'app/Modules/**/_*.init.js',            // Declarative functions needed for next line - Initialization Code
        'app/Modules/**/*.js',
        'app/UnitTests/**/*.mock.js',           // Mock Declarations for Tests
        'app/UnitTests/**/*.test.js'
    ];

    var Libraries = [
        'app/bower_components/angular/angular.js',
        'app/bower_components/angular-animate/angular-animate.js',
        'app/bower_components/angular-aria/angular-aria.js',
        'app/bower_components/angular-route/angular-route.js',
        'app/bower_components/firebase/firebase.js',
        ...
// Testing
        'app/bower_components/angular-mocks/angular-mocks.js',
        'app/bower_components/angular-material/angular-material-mocks.js',
        'app/bower_components/mockfirebase/browser/mockfirebase.js',
        'node_modules/sinon/pkg/sinon.js',
    ];

    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', 'chai'],      // 


        // list of files / patterns to load in the browser
        files: Libraries.concat(SourceCode),


        // 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: {
            'app/Modules/**/*.js': ['coverage']          // Ensure all files are in Code Coverage
        },

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

        coverageReporter: {
            type : 'html',
            dir : 'docs/coverage/'
        },

        logLevel: 'LOG_DEBUG',

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


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


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