karma-browserify coverage reports contain file include paths instead of source code

Question

Using karma-browserify to do unit tests with Jasmine. The tests correctly run but the coverage reports show file include paths instead of source code. You can reproduce this by installing the following project and run 'gulp unit':

https://github.com/bshack/shackstack

Here is an example of the coverage report contents:

typeof require === "function" && require("/xxx/xxx/xxx/shackstack/app/media/script/service/utilities.js");

Here is my karma.config:

module.exports = function(karma) {
    'use strict';
    karma.set({
        basePath: '',
        frameworks: [
            'jasmine',
            'browserify'
        ],
        files: [{
            pattern: 'app/media/script/service/*.js',
            included: true
        },
        {
            pattern: 'app/media/test/spec/*Spec.js',
            included: true

        }],
        reporters: [
            'progress',
            'coverage'
        ],
        preprocessors: {
            'app/media/script/service/*.js': [
                'browserify',
                'coverage'
            ],
            'app/media/test/spec/*Spec.js': [
                'browserify'
            ]
        },
        browsers: [
            //'Chrome',
            //'Firefox',
            //'Safari',
            'PhantomJS'
        ],
        singleRun: false,
        autoWatch: false,
        // browserify configuration
        browserify: {
            debug: true,
            transform: [
                'brfs',
                'browserify-shim'
            ]
        },
        coverageReporter: {
            type: 'html',
            dir: 'app/report/istanbul/',
            subdir: '.'
        },
        // If browser does not capture in given timeout [ms], kill it
        captureTimeout: 60000
    });
};

any thoughts?

If this is a bug you're able to reproduce you should probably file it as an issue at the correct repo. — YPCrumble
filed a bug with karma-browserify: github.com/nikku/karma-browserify/issues/166 — bshack

bshack bshack · Accepted Answer · 2016-02-08T01:38:25

Fixed, basically you don't use karma coverage as you would normally, instead you have to use istanbul as a browserify transform.

var istanbul = require('browserify-istanbul');
module.exports = function(karma) {
    'use strict';
    karma.set({
        basePath: '',
        frameworks: [
            'jasmine',
            'browserify'
        ],
        files: [{
            pattern: 'app/media/script/service/*.js'
        },
        {
            pattern: 'app/media/test/spec/*Spec.js'
        }],
        reporters: [
            'progress',
            'coverage'
        ],
        preprocessors: {
            'app/media/script/service/*.js': [
                'browserify'
            ],
            'app/media/test/spec/*Spec.js': [
                'browserify'
            ]
        },
        browsers: [
            //'Chrome',
            //'Firefox',
            //'Safari',
            'PhantomJS'
        ],
        singleRun: false,
        autoWatch: false,
        browserify: {
            debug: true,
            transform: [
                'brfs',
                'browserify-shim',
                istanbul({
                    ignore: ['**/node_modules/**']
                })
            ]
        },
        coverageReporter: {
            type: 'html',
            dir: 'app/report/istanbul/',
            subdir: '.'
        },
        // If browser does not capture in given timeout [ms], kill it
        captureTimeout: 60000
    });
};

karma-browserify coverage reports contain file include paths instead of source code

1 Answers