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

[jamiebuilds]

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' }
  ]
},

[dtinth]

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.