Isparta not working with Babelify when using Babel6

[Rui Carneiro]

This issue is similar to #104 but my example is using jasmine. I have two examples:

• Babel 5: isparta ^3.5.3 and babelify ^6.4.0 (both using babel-core 5)
• Babel 6: isparta ^4.0.0 and babelify ^7.2.0 (both using babel-core 6)

The first one is working as expected, the second one runs the tests correctly but is always reporting 100%.

Even with if (false) return false; 😉

The repo with both examples: https://github.com/carneiror/gulp-karma-browserify-babelify-istanbul-isparta

[Evan Vaughn]

I had the same issue a few days ago. You'll need to use the browserify-babelify-Istanbul module in order to get it to properly work. It replaces istanbul with babel-istanbul for code coverage.

https://github.com/ambitioninc/babel-istanbul
https://github.com/malandrew/browserify-babel-istanbul

It'd be nice there if was a branch off of browserify-istanbul that used babel-istanbul instead of istanbul, but for now, I just made browserify-babel-istanbul a dependency

---

Now that I'm in front of a computer, here's what I have in my project (ignore the globalShim bit):

let browserify = require('browserify');
let browserifyBabalIstanbul = require('browserify-babel-istanbul');
let isparta = require('isparta');

let bundle = browserify({})
  .transform(babelify, {
      presets: 'es-2015',
   })
  .transform(globalShim.configure(externalDeps))
  .transform(browserifyBabelIstanbul({
      instrumenter: isparta,
      includeUntested: true,
  }))

With Karma, I think it would look something like this(?):

babelIstanbul = require('browserify-babel-istanbul');

browserify: {
   debug: true,
   transform: [
      [ babelify, { presets: ["es2015"] } ],
      babelIstanbul({
         instrumenter: isparta,
         ignore: ['**/node_modules/**', '**/tests/**']
      })
    ]
},

[Rui Carneiro]

I tried to replace browserify-istanbul with browserify-babel-istanbul and I had exactly the same output :(

[Yoshiya Hinosawa]

You need this setting in karma.conf.js

browserify: {
    debug: true,
    transform: [
        istanbul({
            instrumenter: isparta,
            instrumenterConfig: { babel: { presets: ["es2015"] } },
            ignore: ['**/node_modules/**', '**/tests/**']
        }), 
        [ babelify, { presets: ["es2015"] } ] 
    ]   
}

I got this report in your repository.

I don't 100% understand the above, but I guess the order of babelify and istanbul(isparta) is import. If I reverse the order of babelify and istanbul, I get empty report as yours.

See also my example: https://github.com/kt3k/karma-browserify-isparta-example

[Oleg Sklyanchuk]

Suggestion provided by @kt3k doesn't work. I get exactly the same results as the OP.

[Brandon Heyer]

I have my testing library as an external resource so that it is easier to test multiple libraries the same way, however, I was able to get what I presume to be correct overage results with a simpler setup, these are the important bits:

var istanbul = require( 'browserify-babel-istanbul' );
var babelify = require( 'babelify' );
var es2015 = require( 'babel-preset-es2015' );

module.exports = function( config ) { config.set( {
  //  
  // the usual boring config stuff
  //

  //
  // and the special babel stuff
  //
  preprocessors: {
    'src/**/*.js': [ 'browserify' ],
    'test/spec/**/*.spec.js': [ 'browserify' ]
  },

  frameworks: [
    // your frameworks,
    'browserify'
  ],

  files: [
    // your supplemental files,
    'src/**/*.js',
    'test/spec/**/*.spec.js'
  ],

  browserify: {
    debug: true,
    transform: [
      istanbul,
      [ babelify, { ignore: /\/node_modules\//, presets: [ es2015 ] } ]
    ]
  },

  coverageReporter: {
    reporters: {
      { type: 'html', dir: 'coverage' },
      { type: 'text-summary' }
    }
  },

  reports: [ 'coverage, dots' ]
} ) };

Because of my set up I also had to include a .babelrc file in my main package's directory as well as install the babel-preset-es2015 package there, you may or may not need to do the same.

These are my dependencies:

devDependencies: {
    "babel-core": "^6.4.5",
    "babel-preset-es2015": "^6.3.13",
    "babelify": "^7.2.0",
    "browserify-babel-istanbul": "^0.3.0",
    "isparta": "^4.0.0",
    "jasmine-core": "^2.4.1",
    "karma": "^0.13.19",
    "karma-browserify": "^5.0.1",
    "karma-coverage": "^0.5.3",
    "karma-jasmine": "^0.3.6",
    "karma-jasmine-jquery": "^0.1.1",
    "karma-phantomjs-launcher": "^0.2.3",
    "karma-sinon": "^1.0.4",
    "phantomjs": "^1.9.19",
    "sinon": "^1.17.2"
}

[Brandon Heyer]

On second glance, my line coverage appears to be the only one that is correct. It looks like it might be reporting stats for the entire browserify bundle, and not just the actual file... will continue to dig.

[goozo]

@brandonheyer did you have any more luck with this? I have ended up with reports being generated more or less ok but the istanbul colouring looks wrong.

my .babelrc:
{ "presets": ["es2015","react"] }

my karma.conf:

var babelIstanbul = require('browserify-babel-istanbul');
browserify: { debug: true,

  transform: [
    babelIstanbul({
      instrumenter: isparta,
      ignore: ['**/node_modules/**', '**/__tests__/*.js']
    }),
    'babelify'
  ],
  extensions: ['.js', '.jsx', '.coffee']
},`

[Brandon Heyer]

@goozo no I had to move on to other stuff -- oh enterprise dev. I had tried it from scratch a second time including using some alpha releases and nothing seemed to make the proper source map connections to avoid reporting on the babel code. I'm assuming once more libs come up to speed with the November babel changes things will fall back in line.

[Alex White]

@goozo @brandonheyer I had to also include a .babelrc with the es2015 preset. Just specifying in the karma.conf.js did not work. I was able to follow your example to success with that addition.