How to make browser, babel and cover work together in karma

Question

I'm tired of trying to get the node libraries to work together correctly ... but this is part of the work, so here it goes ...

I have an ES6 application designed for a browser. I have a set of unit tests for my files that I use when my application was written in ES5. I use a browser to handle import / export of modules and combine my distribution. This works great when running the application in a browser. I can successfully browse the source and specification files and run the tests and the tests pass. I am very, very close to making this work.

The only problem is coverage. The closest I came shows the coverage of files created by karma that seem like this:

require('/absolute/path/to/the/corresponding/file.js'); 

and the coverage is obviously displayed as 100% for all files, because each of them is only one line.

This is my karma.conf.js:

 import babelify from 'babelify'; import isparta from 'isparta'; import paths from './paths'; var normalizeBrowserName = (browser) => 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) => { bundle.once('prebundle', () => 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, }); }; 

I really don't know how any of these libraries work, so I don't know where to start this debugging. I understand that arranging preprocessors matters, so the browser looks at the source files, transfers the resulting link files to the source map generator, and then the source map generator feeds any resulting coverage into karma. But there is some loss of connection between the browser and what the coverage handles. isparta (which uses istanbul behind the scenes) does not know that the browser is working, and I do not know what it sees.

I am incoherent right now because I seriously don’t know how this material works.

If anyone has experience testing modular ES6 with proper code coverage, please let me know if I'm on the right track or should I try something else.

Answer 1

This is the configuration that worked for me, please note that I use browserify-istanbul and not isparata.

 var istanbul = require('browserify-istanbul'); module.exports = function(config) { config.set({ basePath: '', frameworks: ['browserify', 'mocha'], files: [ 'test/**/*Spec.js' ], exclude: [ '**/*.sw?' ], preprocessors: { 'test/**/*Spec.js': ['browserify', 'coverage'] }, browserify: { debug: true, transform: [ ['babelify', { ignore: /node_modules/ }], istanbul({ ignore: ['test/**', '**/node_modules/**'] }) ], extensions: ['.jsx'] }, babelPreprocessor: { options: { sourceMap: 'inline' }, sourceFileName: function(file) { return file.originalPath; } }, coverageReporter: { dir: 'coverage/', reporters: [ { type: 'text-summary' } ] }, browserNoActivityTimeout: 180000, reporters: ['coverage', 'progress'], port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: true, browsers: ['Chrome'], singleRun: false }); }; 

it was a huge pain to work.

hope that helps

Answer 2

HOW: Karma + Babel + React + Browserify + Istanbul

I THINK I GOT IT.

If I do not, ping me [e-mail]

Not sure if the previous answer doesn't work using jasmine instead of mocha, but I got it working with these settings.

Required Packages: Except Obvious (React, Karma, Jasmine, Browserify)

 isparta - an Istanbul instrumenter for ES6 browserify-istanbul - a browserify transform babelify - another browserify transform babel - JS compiler babel-preset-2015 - ES6 compile preset babel-preset-react - React compile preset 

Create a .babelrc file in the root directory. I was very confused as to where to place the Babel options in the tools, but most (and these) Babel tools will look for .babelrc

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

karma.config.js:

 const isparta = require('isparta'); const istanbul = require('browserify-istanbul'); module.exports = function (config) { config.set({ basePath: '', browsers: ['Firefox', 'Chrome', 'PhantomJS', 'Safari'], captureConsole: true, clearContext: true, colors: true, files: [ // you need this for Phantom 'node_modules/phantomjs-polyfill/bind-polyfill.js', // import any third party libs, we bundle them in another gulp task './build/libs/vendor-bundle.js', // glob for spec files '__PATH_TO_SPEC_FILES_/*.spec.js' ], frameworks: ['jasmine', 'browserify'], logLevel: config.LOG_INFO, preprocessors: { // I had to NOT include coverage, the browserify transform will handle it '__PATH_TO_SPEC_FILES_/*.spec.js': 'browserify' }, port: 9876, reporters: ['progress', 'coverage'], browserify: { // we still use jQuery for some things :( // I don't think most people will need this configure section configure: function (bundle) { bundle.on('prebundle', function () { bundle.external(['jquery']); }); }, transform: [ // this will transform your ES6 and/or JSX ['babelify'], // (I think) returns files readable by the reporters istanbul({ instrumenter: isparta, // <--module capable of reading babelified code ignore: ['**/node_modules/**', '**/client-libs/**'] }) ], // our spec files use jsx and so .js will need to be compiled too extensions: ['.js', '.jsx'], // paths that we can `require()` from paths: [ './node_modules', './client-libs', './universal' ], debug: true }, coverageReporter: { reporters: [ { type: 'html', dir: 'coverage/Client' }, { type: 'text-summary' } ] } }); }; 

Answer 3

With karma, I think it will look something like this (?):

 // Karma configuration 'use strict'; let babelify = require( 'babelify' ); let browserify = require('browserify'); let browserifyBabalIstanbul = require('browserify-babel-istanbul'); let isparta = require('isparta'); browserify: { debug: true, transform: [ browserifyBabalIstanbul({ instrumenter: isparta, instrumenterConfig: { babel: { presets: ["es2015"] } }, ignore: ['**/node_modules/**', '**/unitest/**'] }), [ babelify, { presets: ["es2015"] } ] ] }, 

see the following link: Find a good way to get karma coverage report?