I’m working on a project at Twitter that uses React and webpack. After a few conversations with @sokra last year, this is the setup I put in place for testing React components (authored using JSX and ES6) using Karma.


You’ll need to install various packages. It looks like a lot of dependencies, but all the non-Karma packages will be necessary for general module bundling during development.

Full set of required packages:

webpack entry file

If you use webpack-specific features in your modules (e.g., loaders, plugins) you will need to use webpack to build a test bundle. The fastest and simplest approach is to create a single, test-specific entry file.

Create a file named tests.bundle.js. Within this file, you create a webpack context to match all the files that conform to a naming pattern – in this case *.spec.js(x).

var context = require.context('.', true, /.+\.spec\.jsx?$/);
module.exports = context;

Next, you point Karma to this file.

Karma config

Karma is configured using a karma.conf.js file. The browsers, plugins, and frameworks are specified in the standard way.

Point Karma at the tests.bundle.js file, and run it through the relevant preprocessor plugins (see example below).

The karma-webpack plugin relies on 2 custom properties of the Karma config: webpack and webpackMiddleware. The value of the former must be a webpack config object.

module.exports = function (config) {
browsers: [ 'Chrome' ],
// karma only needs to know about the test bundle
files: [
frameworks: [ 'chai', 'mocha' ],
plugins: [
// run the bundle through the webpack and sourcemap plugins
preprocessors: {
'tests.bundle.js': [ 'webpack', 'sourcemap' ]
reporters: [ 'dots' ],
singleRun: true,
// webpack config object
webpack: {
devtool: 'inline-source-map',
module: {
loaders: [
exclude: /node_modules/,
loader: 'babel-loader,
test: /\.jsx?$/
webpackMiddleware: {
noInfo: true,

Rather than duplicating your webpack config, you can require it in the Karma config file and override the devtool value to get sourcemaps working.

var webpackConfig = require('./webpack.config');
webpackConfig.devtool = 'inline-source-map';

module.exports = function (config) {
webpack: webpackConfig

That’s all you need to do to configure Karma to use webpack to load your JSX, ES6 React components.