Configure karma.js to work with react and ES6

Question

Im try to develop a react module with ES6 and couldn't find any generator for that, so i had to make it from a basic one. I was able to config almost everything, but im have a lot of problems try to configure karma, to test my module.

This is my karma.conf.js

// Karma configuration
// http://karma-runner.github.io/0.12/config/configuration-file.html
// Generated on 2015-03-17 using
// generator-karma 0.9.0

module.exports = function(config) {
  'use strict';

  config.set({
    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,

    // base path, that will be used to resolve files and exclude
    basePath: '../',

    // testing framework to use (jasmine/mocha/qunit/...)
    frameworks: ['commonjs', 'mocha', 'chai'],

    // list of files / patterns to load in the browser
    files: [
      'node_modules/karma-babel-preprocessor/node_modules/babel-core/browser-polyfill.js',
      'node_modules/react/react.js',
      'lib/**/*.js',
      'test/**/*.js'
    ],
    preprocessors: {
      'lib/**/*.cjsx': ['cjsx'],
      'test/**/*.cjsx': ['cjsx'],
      'lib/**/*.js': ['babel', 'commonjs'],
      'test/**/*.js': ['babel', 'commonjs']
    },
    babelPreprocessor: {
      options: {
        sourceMap: 'inline'
      },
      filename: function (file) {
        return file.originalPath.replace(/\.js$/, '.es5.js');
      },
      sourceFileName: function (file) {
        return file.originalPath;
      }
    },

    // list of files / patterns to exclude
    exclude: [
    ],

    // web server port
    port: 8080,

    // Start these browsers, currently available:
    // - Chrome
    // - ChromeCanary
    // - Firefox
    // - Opera
    // - Safari (only Mac)
    // - PhantomJS
    // - IE (only Windows)
    browsers: [
      'Chrome', 'PhantomJS'
    ],

    // Which plugins to enable
    plugins: [
      'karma-commonjs',
      'karma-cjsx-preprocessor',
      'karma-babel-preprocessor',
      'karma-phantomjs-launcher',
      'karma-chrome-launcher',
      'karma-mocha',
      'karma-chai'
    ],

    // Continuous Integration mode
    // if true, it capture browsers, run tests and exit
    singleRun: false,

    colors: true,

    // level of logging
    // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
    logLevel: config.LOG_INFO,

    // Uncomment the following lines if you are using grunt's server to run the tests
    // proxies: {
    //   '/': 'http://localhost:9000/'
    // },
    // URL root prevent conflicts with the site root
    // urlRoot: '_karma_'
  });
};

At this point i have the following error

Chrome 42.0.2311 (Mac OS X 10.10.2) ERROR
  Uncaught ReferenceError: module is not defined
  at /Users/admin/workspace/open_source/react-component-inspector/node_modules/react/react.js:1

and if i remove the react ref from files section i get this other error

PhantomJS 1.9.8 (Mac OS X) ERROR
  Uncaught Error: Could not find module 'react' from '/Users/admin/workspace/open_source/react-component-inspector/lib/index.es5.js'
  at /Users/admin/workspace/open_source/react-component-inspector/node_modules/karma-commonjs/client/commonjs_bridge.js:85

And if i remove the commonJS i get

PhantomJS 1.9.8 (Mac OS X) ERROR
  ReferenceError: Can't find variable: exports
  at /Users/admin/workspace/open_source/react-component-inspector/lib/index.es5.js:5

Or al least can anyone recommend me a yo generator with karma, ES6, jsx, to build a module, not a web app?

Thanks for the help

Answer 1

I believe you just need to add the react file's path to the list of preprocessor files. This is because the react file is also using the commonjs format just like your app's files, and when that file gets loaded in chrome, unlike node, the browser has no notion of where the "module" object came from. Updated excerpt from your code below.

        // list of files / patterns to load in the browser
        files: [
          'node_modules/karma-babel-preprocessor/node_modules/babel-core/browser-polyfill.js',
          'node_modules/react/react.js',
          'lib/**/*.js',
          'test/**/*.js'
        ],
        preprocessors: {
          // you can probably leave off babel here.
          'node_modules/react/react.js': ['babel', 'commonjs'],
          'lib/**/*.cjsx': ['cjsx'],
          'test/**/*.cjsx': ['cjsx'],
          'lib/**/*.js': ['babel', 'commonjs'],
          'test/**/*.js': ['babel', 'commonjs']
        },