node package manager


Use webpack with karma


npm install --save-dev karma-webpack
// Karma configuration 
module.exports = function(config) {
// ... normal karma configuration 
files: [
// all files ending in "_test" 
// each file acts as entry point for the webpack configuration 
preprocessors: {
// add webpack as preprocessor 
'test/*_test.js': ['webpack'],
'test/**/*_test.js': ['webpack']
webpack: {
// karma watches the test entry points 
// (you don't need to specify the entry option) 
// webpack watches dependencies 
// webpack configuration 
webpackMiddleware: {
// webpack-dev-middleware configuration 
// i. e. 
noInfo: true
plugins: [

This configuration is more performant, but you cannot run single test anymore (only the complete suite).

The above configuration generate a webpack bundle for each test. For many testcases this can result in many big files. The alterative configuration creates a single bundle with all testcases.

files: [
// only specify one entry point 
// and require all tests in there 
preprocessors: {
// add webpack as preprocessor 
'test/test_index.js': ['webpack']
// test/test_index.js 
// require all modules ending in "_test" from the 
// current directory and all subdirectories 
var testsContext = require.context(".", true, /_test$/);

Every test file is required using the require.context and compiled with webpack into one test bundle.

You can use the karma-sourcemap-loader to get the source maps generated for your test bundle.

npm install --save-dev karma-sourcemap-loader

And then add it to your preprocessors

preprocessors: {
'test/test_index.js': ['webpack', 'sourcemap']

And tell webpack to generate sourcemaps

webpack: {
  // ... 
devtool: 'inline-source-map'

This is the full list of options you can specify in your Karma config.

Webpack configuration.

Configuration for webpack-dev-middleware.

Copyright 2014-2015 Tobias Koppers