https://github.com/webpack/karma-webpack
npm install --save-dev karma-webpack
// karma.conf.js -- karma configuration // if you import your existing 'webpack.config.js' setup here, // be sure to read the note about 'entry' below. module.exports = function(config) { config.set({ // ... normal karma configuration files: [ // all files ending in "_test" 'test/*_test.js', 'test/**/*_test.js' // each file acts as entry point for the webpack configuration ], preprocessors: { // add webpack as preprocessor 'test/*_test.js': ['webpack'], 'test/**/*_test.js': ['webpack'] }, webpack: { // you don't need to specify the entry option because // karma watches the test entry points // webpack watches dependencies // ... remainder of webpack configuration (or import) }, webpackMiddleware: { // webpack-dev-middleware configuration // i.e. noInfo: true, // and use stats to turn off verbose output stats: { // options i.e. chunks: false } }, plugins: [ require("karma-webpack") ] }); };
For additional information about webpackMiddleware.stats options see Stats Options
This configuration is more performant, but you cannot run single test anymore (only the complete suite).
The above configuration generates 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 'test/test_index.js' ], 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$/); testsContext.keys().forEach(testsContext);
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
© 2012–2015 Tobias Koppers
Licensed under the MIT License.
https://webpack.github.io/docs/usage-with-karma.html