karma-coverage: HTML reporter now no longer works with browserify-istanbul in v4.0

HTML reporter now no longer works with browserify-istanbul in v4.0

I was having issues with the html reporter not outputting anything in v3.1 where the index.html would be written, but no reports would be contained inside (while the text reporter was working fine) so after seeing issue #123 I jumped to 4.0. Now I am getting the following issue:

ERROR [coverage]: [TypeError: Cannot read property 'text' of undefined]
TypeError: Cannot read property 'text' of undefined
    at /home/notnarb/Workspace/snip/node_modules/karma-coverage/node_modules/istanbul/lib/report/html.js:203:51
    at Array.forEach (native)
    at annotateStatements (/home/notnarb/Workspace/snip/node_modules/karma-coverage/node_modules/istanbul/lib/report/html.js:188:33)
    at HtmlReport.Report.mix.writeDetailPage (/home/notnarb/Workspace/snip/node_modules/karma-coverage/node_modules/istanbul/lib/report/html.js:427:9)
    at /home/notnarb/Workspace/snip/node_modules/karma-coverage/node_modules/istanbul/lib/report/html.js:488:26
    at SyncFileWriter.extend.writeFile (/home/notnarb/Workspace/snip/node_modules/karma-coverage/node_modules/istanbul/lib/util/file-writer.js:57:9)
    at FileWriter.extend.writeFile (/home/notnarb/Workspace/snip/node_modules/karma-coverage/node_modules/istanbul/lib/util/file-writer.js:147:23)
    at /home/notnarb/Workspace/snip/node_modules/karma-coverage/node_modules/istanbul/lib/report/html.js:487:24
    at Array.forEach (native)
    at HtmlReport.Report.mix.writeFiles (/home/notnarb/Workspace/snip/node_modules/karma-coverage/node_modules/istanbul/lib/report/html.js:481:23)

I made a temporary fix which now has the html reporter working properly (as far as I can tell, but certainly better than 0.3.1) - but I’m sure this isn’t the proper solution

# node_modules/* - old, ~/tmp/html.js - new
diff ~/Workspace/snip/node_modules/karma-coverage/node_modules/istanbul/lib/report/html.js ~/tmp/html.js
200a201
>           if (structuredText[startLine]) {
209a211
>           }
231a234
>           if (structuredText[startLine]) {
240a244
>           }

Sorry that I can’t be of too much more help than this – I don’t really understand the inner-workings of instanbul and karma-coverage, all I can determine is that for some reason a faulty startline is being communicated occasionally causing istanbul to crash and burn.

karma.conf.js

// Karma configuration
// Generated on Fri May 29 2015 17:32:24 GMT-0700 (PDT)

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


    // list of files / patterns to load in the browser
    files: [
        'test/**/*.js',
        'src/js/vendor/**/*.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/**/*.js' : ['browserify']
    },

    browserify: {
        debug: true,
        transform: ['hbsfy', 'browserify-istanbul']
    },


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

    coverageReporter: {
        reporters : [
            {"type": "text"},
            {"type": "html", dir: 'coverages'}
        ]
    },

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


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


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


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

package.json

{
    "browserify": "^10.2.1",
    "browserify-istanbul": "^0.2.1",
    "karma": "^0.12.35",
    "karma-browserify": "^4.2.1",
    "karma-chrome-launcher": "^0.1.12",
    "karma-coverage": "^0.4.0",
    "karma-firefox-launcher": "^0.1.6",
    "karma-mocha": "^0.1.10",
}

One thing worth reiterating: I couldn’t get html reports to work at all in 3.1 and now they work great with my hacky patch

About this issue

Original URL
State: open
Created 9 years ago
Reactions: 2
Comments: 68 (3 by maintainers)

Commits related to this issue

Transform ES6 => ES5 after instrumenting code. Running the code through Babelify before instrumenting it for code coverage resulted in incorrect statement location metadata. See the "statementMap" se... — committed to hypothesis/client by robertknight 7 years ago

Most upvoted comments

Solution (hopefully)

Went through like 9,000 different comments in a bunch of issues, and found this example repo: https://github.com/kt3k/karma-browserify-isparta-example

This works perfectly for me:

browserify: {
  debug: true,
  transform: [
    'babelify',
    ['browserify-istanbul', { instrumenter: require('isparta') }]
  ])
},
coverageReporter: {
  reporters: [
    { type: 'html' },
    { type: 'text' }
  ]
},

+19

jamiebuilds on Mar 10, 2016

Temporary Workaround

Tell Istanbul.Instrumenter to embed the source code inside the instrumenter’s results.

browserify.transform(require('browserify-istanbul')({
  instrumenterConfig: { embedSource: true }
}))

You’ll get the code coverage result for the compiled source. This means, in case you use React, JSX elements will be converted to React.createElement by the time you look at the coverage report.

+18

dtinth on Nov 30, 2015

For those working with webpack, you can find this useful:

https://github.com/deepsweet/istanbul-instrumenter-loader/issues/32

Basically work with older version of "istanbul-instrumenter-loader": "0.2.0"

aldoshin on Oct 19, 2016

I was able to work-around this issue by setting karma’s logLevel to config.LOG_DISABLE if that offers any insight. I have two projects with the exact same karma config and dependency versions. One fails while the other succeeds. I just noticed that one of the projects outputs 404 warnings from stray http requests while the other is silent.

blazzy on Jun 13, 2015

Thanks, @thejameskyle. I’ve also been able to use babel-istanbul successfully in place of isparta.

goblindegook on Mar 29, 2016

Guys, +1’ing doesn’t help. If you want to show that this is important to you, just subscribe to the issue. Or contribute something meaningful.

jaapz on Nov 27, 2015

Solution (…maybe)

I can’t even 😬

For me, switching the position of the transforms got it working

first running browserify-istanbul
- with isparta and the embedSource: true option <-- Important
then babelify worked.

karma.config.js

const isparta = require('isparta');
const istanbul = require('browserify-istanbul');

...

      transform: [
        istanbul({
          instrumenter: isparta, // <--module capable of reading babelified code I think
          instrumenterConfig: { embedSource: true }, // what got it working
          ignore: ['**/node_modules/**']
        }),
        ['babelify']
      ],

.babelrc

Not sure if the babel config matters but

{
  "presets": ["es2015", "react"],
  "sourceMap": "inline"
}

aerze on Aug 10, 2016

fwiw, someone else had success with a similar setup as mine.

boneskull on Mar 17, 2016

subtubes-io on Feb 10, 2016

FYI, I made it work and the solution was to use browserify-istanbul. Here’s an excerpt from my karma.conf.js

var isparta = require('isparta');
var browserifyInstanbul = require('browserify-istanbul')
var browserifyInstanbulConfig = {
  instrumenter: isparta,
  ignore: [
    '**/node_modules/**',
    '**/*.html',
    '**/*.spec.js',
  ],
};
...

browserify: {
  debug: true,
  transform: [
    [browserifyInstanbul(browserifyInstanbulConfig)],
    ['babelify'],
  ],
},

The order is important. You want to first instrument, then babelify.

maciej-gurban on May 17, 2017

@dsuckau, see @thejameskyle and @aerze comments. I happened to do something similar and it worked fine for me. If you mess up the order of these transforms then you might get some untrue results.

Here’s my karma.conf.js

var istanbul = require('browserify-istanbul');

module.exports = function (config) {
    config.set({
        browsers: ['PhantomJS'],
        frameworks: ['browserify', 'chai-as-promised', 'chai', 'mocha'],
        reporters: ['spec', 'coverage'],
        files: [
            'node_modules/babel-polyfill/dist/polyfill.js',
            'tests/spec/**/*.spec.js'
        ],
        preprocessors: {
            'tests/spec/**/*.spec.js': ['browserify']
        },
        coverageReporter: {
            dir: './tests/coverage',
            reporters: [
                { type: "html", subdir: "html" },
                { type: 'text-summary' }
            ]
        },
        browserify: {
            debug: true,
            // istanbul transform MUST go first
            transform: [
                istanbul({ instrumenter: require('isparta') }),
                'babelify'
            ]
        },
        // if you want to continuously re-run tests on file-save,
        // replace the following line with `autoWatch: true`,
        // but watch out for `ENOSPC` error.
        singleRun: true,
        logLevel: config.LOG_INFO
    })
};

what really helped to get past the error was this:

{ instrumenter: require('isparta') }

slykar on Sep 16, 2016

for me helps using this one https://github.com/malandrew/browserify-babel-istanbul

verlorendev on Feb 23, 2016

@fernandofleury Thanks you. I tried this way, still can not see any report in my console(windows). But after I push my code to github, I can see the coverage in codecov.io Still confused, 😹 Here is my karma.conf.js

SiZapPaaiGwat on Jan 19, 2016