html reports fail w/ v1

[evansiroky]

When using the following config:

let webpackConfig = require('./webpack.config.js')

const instanbulInstrumenterCfg = {
  test: /\.js$/,
  exclude: /(tests|node_modules|bower_components)\//,
  loader: 'istanbul-instrumenter',
  query: {
    esModules: true
  }
}

webpackConfig.module.postLoaders = [ instanbulInstrumenterCfg ]

module.exports = function (config) {
  config.set({
    autoWatch: false,
    basePath: '',
    browsers: ['Chrome'],
    colors: true,
    concurrency: Infinity,
    coverageReporter: {
      reporters: [
        { type: 'text', subDir: 'text' },
        { type: 'html', subDir: 'html' }
      ],
      dir: 'coverage/'
    },
    frameworks: ['mocha'],
    files: ['tests/index.js'],
    logLevel: config.LOG_INFO,
    plugins: ['karma-chai', 'karma-chrome-launcher', 'karma-mocha',
      'karma-sourcemap-loader', 'karma-webpack',
      'karma-coverage', 'karma-mocha-reporter'],
    port: 9876,
    preprocessors: {
      'tests/index.js': ['webpack', 'sourcemap'],
      'tests/**/*\.test.js': [ 'webpack' ],
      'src/**/*.js': ['coverage', 'webpack']
    },
    reporters: ['progress', 'mocha', 'coverage'],
    singleRun: true,
    webpack: webpackConfig
  })
}

The coverage results do get printed to the terminal, however immediately after that I get this error:

[coverage]: TypeError: Cannot read property 'text' of undefined
    at /Users/evansiroky/git/reporter-demo/node_modules/istanbul/lib/report/html.js:288:53
    at Array.forEach (native)
    at annotateBranches (/Users/evansiroky/git/reporter-demo/node_modules/istanbul/lib/report/html.js:255:30)
    at HtmlReport.writeDetailPage (/Users/evansiroky/git/reporter-demo/node_modules/istanbul/lib/report/html.js:426:9)
    at /Users/evansiroky/git/reporter-demo/node_modules/istanbul/lib/report/html.js:489:26
    at SyncFileWriter.writeFile (/Users/evansiroky/git/reporter-demo/node_modules/istanbul/lib/util/file-writer.js:57:9)
    at FileWriter.writeFile (/Users/evansiroky/git/reporter-demo/node_modules/istanbul/lib/util/file-writer.js:147:23)
    at /Users/evansiroky/git/reporter-demo/node_modules/istanbul/lib/report/html.js:488:24
    at Array.forEach (native)
    at HtmlReport.writeFiles (/Users/evansiroky/git/reporter-demo/node_modules/istanbul/lib/report/html.js:482:23)
    at /Users/evansiroky/git/reporter-demo/node_modules/istanbul/lib/report/html.js:484:22
    at Array.forEach (native)
    at HtmlReport.writeFiles (/Users/evansiroky/git/reporter-demo/node_modules/istanbul/lib/report/html.js:482:23)
    at HtmlReport.writeReport (/Users/evansiroky/git/reporter-demo/node_modules/istanbul/lib/report/html.js:566:14)
    at writeReport (/Users/evansiroky/git/reporter-demo/node_modules/karma-coverage/lib/reporter.js:68:16)
    at /Users/evansiroky/git/reporter-demo/node_modules/karma-coverage/lib/reporter.js:296:11
    at /Users/evansiroky/git/reporter-demo/node_modules/karma/lib/helper.js:144:7
    at FSReqWrap.oncomplete (fs.js:123:15)

[deepsweet]

most likely it should be fixed with karma-runner/karma-coverage#251 because new istanbul-lib-instrument is not fully compatible with the old Istanbul's reporters or istanbul-lib-instrument just a little bit buggy at this moment.

@DatenMetzgerX any suggestions?

[MichaReiser]

I'm also using karma-coverage, but without the html report. I'm just creating the JSON output and post process the created JSON file using remap-istanbul. But to be honest, my setup is quite complicated as I have to use many custom branches to map the coverage information back to the original typescript source. As your setup is simpler then mine, maybe you can use nyc until karma-coverage is updated. Or how does your complete webpack setup looks like?

You still have to use karma-coverage to collect the test results but you use the JSON output instead of the html output. You have to store the JSON result in the .nyc-output directory of your project.

You can then use nyc to create your html report

nyc report --reporter html

This will create the report in the ./coverage directory

This does not work in all cases if you are using typescript. The coverage information will not be correctly remapped to the source code. Therefore additional extensions are needed, see #29

[evansiroky]

Here is my webpack config:

var isDev = process.env.NODE_ENV !== 'production'

var CopyWebpackPlugin = require('copy-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var webpack = require('webpack')
var path = require('path')

var htmlPlugin = new HtmlWebpackPlugin({
  template: 'index.html'
})

var cwp = new CopyWebpackPlugin(
  [
    {from: './assets', to: './assets'}
  ]
)

module.exports = {
  context: path.join(__dirname, 'src'),
  devtool: isDev ? 'inline-sourcemap' : null,
  entry: './js/client.js',
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-class-properties']
        }
      }, {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
      }, {
        test: /\.json$/,
        loader: 'json'
      }, {
        test: /\.(png|gif)$/,
        loader: 'file?name=[path][name].[ext]'
      }, {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'file'
      }, {
        test: /\.(woff|woff2)$/,
        loader: 'url?prefix=font/&limit=5000'
      }, {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url?limit=10000&mimetype=application/octet-stream'
      }, {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url?limit=10000&mimetype=image/svg+xml'
      }
    ]
  },
  output: {
    path: __dirname + '/dist/',
    filename: 'client.min.js'
  },
  plugins: isDev ? [
    new ExtractTextPlugin('site.css'),
    htmlPlugin,
    cwp
  ] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: true, sourcemap: true }),
    new ExtractTextPlugin('site.css'),
    htmlPlugin,
    cwp
  ]
}

I tried your suggestion of using nyc to process the json file. It ran without errors, but produced similar problems:

I'll try out the remap-istanbul tool later today.

[deepsweet]

my solution is to stuck with an old 0.x version until karma-runner/karma-coverage#251 is merged in. that's why we had a major bump here, to not automatically break your stuff by semver :)

[Shadowblazen]

Thanks - I had this same issue where I was trying to use the HTML coverage reporter in my karma configuration and it wasn't working. Pinning to "istanbul-instrumenter-loader": "0.2.0" as you suggested got the HTML coverage reporter working.

For better visibility, would it be possible to add a note to the README or a CHANGELOG indicating the issue?

in karma.conf.js (for karma users)

coverageReporter: {
    reporters: [
        // these reporters are incompatible with `istanbul-instrumenter-loader v1.0.0`
        // use `v0.2.0` instead if you need to use these reporters
        { type: 'html' },
        { type: 'lcov' }
    ],
}

Also, could you create tags for the older releases? I only started using this module yesterday. I assumed there was only 1 version because when I glanced at github I only saw a single release tag for v1.0.0 and no changelog, so it wasn't obvious there were any older versions or any breaking changes.

[nicolo-paganin]

+1

[mattlewis92]

I wrote this karma reporter today that you can use as an alternative to the karma-coverage reporter. It uses the latest istanbul APIs so provides accurate coverage reporting and works well with the instrumentation created by this loader. Hope it helps some people 😄

https://github.com/mattlewis92/karma-coverage-istanbul-reporter

[ghost]

+1 , downgrading to 0.2.0 solved my problem.

[gaurav5430]

I am facing the same error and i can't find 0.2.0 on the git repo. is 0.2.0 still usable, any ideas if this isfixed in higher versions of istanbul-instrumenter-loader or karma-coverage ?