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!

score 1 · Answer 1 · answered Nov 10 '15 at 19:08

1

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.

answered Nov 10 '15 at 19:08

I updated with my new config -- now it looks like it's building all my files, but it says i need to implement a karma start method? – bencripps Nov 10 '15 at 19:18
Including the `src` components shouldn't be necessary. Your `test` files will include them as necessary – Nov 10 '15 at 20:25
Are you working from a tutorial or example? This might be a helpful example: https://github.com/webpack/karma-webpack – Nov 10 '15 at 20:27
And this related question: http://stackoverflow.com/questions/24220888/error-you-need-to-include-some-adapter-that-implements-karma-start-method – Nov 10 '15 at 20:28

score 1 · Accepted Answer · edited Dec 01 '15 at 15:27

Here is the final file that works.

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

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.
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.

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
        }
    }
});
};

Karma Testing React with ES6/Babel

2 Answers2