Karma Testing React with ES6/Babel

Question

I am trying to test my project using karma as my test runner, using the webpack babel-loader. The code all builds successfully (i think? or the CLI says it does, but when i open the browser all files fail immedialey on the es6 imports. Any idea what i'm doing wrong?

var path = require('path');

module.exports = function(config) {
    config.set({
    basePath: '',
    // frameworks: ['jasmine', 'karma-webpack'],

    files: [
        'lib/bundle.js'
    ],

    exclude: ['*.styl'],

    preprocessors: {
        'test/**/*.js': ['webpack'],
        'test/**/*.jsx': ['webpack'],
        'src/**/*.jsx': ['webpack'],
        'src/**/*.js': ['webpack']
    },

    plugins: [
        require("karma-webpack")
    ],

    webpack: {
        entry: './src/entry.js',
         module: {
             loaders: [
                {
                    test: path.join(__dirname, 'src'),  
                    loader: 'babel-loader?stage=0&optional=runtime',
                    excludes: /node_modules/,
                    options: {
                        optional: ['runtime']
                    }
                }, 
                {
                    test: /\.styl$/,
                    loaders: ['style-loader', 'css-loader', 'stylus-loader']
                }
            ]
        },
        webpackMiddleware: {
          noInfo: true
        }
    }
});
};

10 11 2015 13:16:47.156:INFO [karma]: Delaying execution, these browsers are not ready: Chrome 46.0.2490 (Windows 8.1 0.0.0) Chrome 46.0.2490 (Windows 8.1 0.0.0) ERROR You need to include some adapter that implements karma.start method!

Chrome 46.0.2490 (Windows 8.1 0.0.0) ERROR You need to include some adapter that implements karma.start method!

Answer 1

Here is the final file that works.

Two things I was doing wrong (1 as noted in the comments below):

1. I was adding untranspiled code to the files array, which of course breaks in the browser. From Karma's documents, "Files is a list of files/patterns to load in the browser,' so of course it broke on jsx on es6 tokens.

2. I wasn't selecting jasmine as my framework so the Karma runner had no idea where to start which is why I was getting the start method error.

3. Lastly, I needed to include my tests in the files array, otherwise Karma will not load my tests and run them. (Note: the tests must be included in the preproccssor array as well).

   var path = require('path');
   
   module.exports = function(config) {
   
   config.set({
   
       basePath: '',
       frameworks: ['jasmine'],
   
       files: [
           'lib/bundle.js',
           'test/**/*.jsx',
           'test/**/*.js'
       ],
   
       exclude: ['*.styl'],
   
       preprocessors: {
           'test/**/*.js': ['webpack'],
           'test/**/*.jsx': ['webpack'],
           'src/**/*.jsx': ['webpack'],
           'src/**/*.js': ['webpack']
       },
   
       webpack: {
           entry: './src/entry.js',
           module: {
                loaders: [
                   {
                       test: /\.js$|.jsx$/,
                       loader: 'babel-loader?stage=0&optional=runtime',
                       excludes: /node_modules/
                   }, 
                   {
                       test: /\.styl$/,
                       loaders: ['style-loader', 'css-loader', 'stylus-loader']
                   }
               ]
           },
           webpackMiddleware: {
             noInfo: true
           }
       }
   });
   };
   

Answer 2

You're including the transpiled files in your test. See for example this line in your error:

WARNING in ./~/routes/dist/routes.js
Critical dependencies:
1:406-413 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
@ ./~/routes/dist/routes.js 1:406-413

Why is a dist file included? You should only be including src files and dependencies.

files: [
    '../node_modules/react/react.js',
    '../node_modules/babel-polyfill/dist/polyfill.js',
    '**/*.js',
    '**/*.jsx'
],

The last two don't look right. You're telling it to load all js/jsx files.. including the dist ones.