title: How to get Browserify, Babel, and Coverage working together in Karma?
body: <p>I'm growing weary of trying to get node libraries to work properly together, but it's part of the job, so here goes.</p>
  
  <p>I have an ES6 application intended for a browser. I have a set of unit tests for my files that I'm bringing up from when my application was written in ES5. I use Browserify to handle importing/exporting modules and bundling my distro. This works fine when running the application in the browser. I can successfully Browserify the source and spec files and run the tests, and the tests pass. I'm very close to getting this working.</p>
  
  <p>The only issue is the coverage. The closest I've come is showing coverage on the karma-browserify generated files, which each look like this:</p>
  
  <pre><code>require('/absolute/path/to/the/corresponding/file.js');
  </code></pre>
  
  <p>And the coverage obviously shows as 100% for all files, because each one is just one line.</p>
  
  <p>This is my karma.conf.js:</p>
  
  <pre><code>import babelify from 'babelify';
  import isparta  from 'isparta';
  import paths    from './paths';
  
  var normalizeBrowserName = (browser) =&gt; browser.toLowerCase().split(/[ /-]/)[0];
  
  export default function(config) {
      config.set({
          basePath: '..',
          browsers: ['PhantomJS'],
          frameworks: ['browserify', 'jasmine'],
          files: paths.test.files,
          preprocessors: {
              'app/**/*.js': ['browserify', 'sourcemap', 'coverage'],
              [paths.test.testFiles]: ['babel'],
          },
          plugins: [
              'karma-babel-preprocessor',
              'karma-browserify',
              'karma-coverage',
              'karma-jasmine',
              'karma-junit-reporter',
              'karma-phantomjs-launcher',
              'karma-sourcemap-loader',
          ],
          autoWatch: false,
          colors: false,
          loggers: [{ type: 'console' }],
          port: 9876,
          reporters: ['progress', 'dots', 'junit', 'coverage'],
          junitReporter: {
              outputFile: paths.test.resultsOut,
              suite: '',
          },
          browserify: {
              debug: true,
              noParse: paths.js.noparse(),
              configure: (bundle) =&gt; {
                  bundle.once('prebundle', () =&gt; bundle.transform(babelify.configure({ ignore: 'lib/!**!/!*' })));
              },
          },
          coverageReporter: {
              instrumenters: { isparta },
              instrumenter: {
                  [paths.test.cover]: 'isparta',
              },
              reporters: [
                  { type: 'text', },
                  { type: 'html', dir: paths.test.coverageOut, subdir: normalizeBrowserName },
                  { type: 'cobertura', dir: paths.test.coverageOut, subdir: '.', file: 'coverage.xml' },
              ],
          },
          logLevel: config.LOG_DEBUG,
      });
  };
  </code></pre>
  
  <p>I really have no idea how any of these libraries work, so I don't know where to start in debugging this. I understand that the ordering of the preprocessors matters, so that Browserify runs on the source files, feeds the resulting link files into the source map generator, then the source map generator feeds the resulting whatever into karma-coverage. But there's some loss of communication between Browserify and whatever handles the coverage. Isparta (which uses istanbul behind the scenes) has no idea that browserify is running, and I don't know what it sees.</p>
  
  <p>If anyone has any experience with testing modularized ES6 WITH proper code coverage, please let me know if I'm on the right track or if I should try something else.</p>