Setting up Karma with Browserify to test React (ES6) components

Question

I'm having trouble setting up a test config with Karma + Browserify for some React components. Mentioning code is written in ES6 and I've upgraded to latest Babel version (6+), which I assume is the root of all evil in this config.

Since Babel is now split and has this plugin-based approach (presets), I'm not sure how I should specify this in the karma.conf file.

My current config looks like this:

module.exports = function(config) {
  config.set({
    basePath: '',
    browsers: ['PhantomJS'],
    frameworks: ['browserify', 'jasmine'],
    files: [
      'app/js/**/*',
      'app/__tests__/**/*'
    ],
    preprocessors: {
      'app/js/**/*': ['browserify'],
      'app/__tests__/**/*': ['browserify']
    },
    browserify: {
      debug: true,
      transform: ['babelify']
    },
    singleRun: true
  });
};

However this fails with a bundle error (Unexpected token while parsing file...). Also I get You need to include some adapter that implements __karma__.start method! error message.

It's funny that this happens for some very simple components.

Eg simple React file:

import React from 'react';


class FooterComponent extends React.Component {
  render() {
    return (
      <footer>
        This is the application's footer
      </footer>
    );
  }
}


export default FooterComponent;

And the test file doesn't even import it. It's just an always passing test like:

describe('Testing `Footer` component.', () => {

  describe('Method: none', function() {
    it('Should be a passing test', function() {
      expect(true).toBe(true);
    });
  });

});

The Babel/Browserify related packages in package.json are:

{
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-react": "^6.0.15",
    "babelify": "^7.2.0",
    "browserify": "^12.0.1",
}

Any ideas are appreciated. Especially since this used to work before upgrading to Babel 6+.

Cheers!

Answer 1

Add a .babelrc file to your root directory:

{
  presets: ['es2015', 'react']
}