karma-webpack
Use webpack to preprocess files in karma.
Getting Started
To begin, you'll need to install karma-webpack:
npm i --save-dev karma-webpack
Then add config:
karma.conf.js
module.exports = (config) => {
config.set({
// ... normal karma configuration
files: [
// all files ending in "_test"
{ pattern: 'test/*_test.js', watched: false },
{ pattern: 'test/**/*_test.js', watched: false },
// 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.
stats: 'errors-only',
},
});
};
Alternative Usage
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 test cases this can result in many big files. The alternative configuration creates a single bundle with all test cases.
karma.conf.js
files: [
// only specify one entry point
// and require all tests in there
'test/index_test.js'
],
preprocessors: {
// add webpack as preprocessor
'test/index_test.js': [ 'webpack' ]
},
test/index_test.js
// require all modules ending in "_test" from the
// current directory and all subdirectories
const 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.
Source Maps
You can use the karma-sourcemap-loader to get the source maps generated for your test bundle.
npm i -D karma-sourcemap-loader
And then add it to your preprocessors.
karma.conf.js
preprocessors: {
'test/test_index.js': [ 'webpack', 'sourcemap' ]
}
And tell webpack to generate sourcemaps.
webpack.config.js
webpack: {
// ...
devtool: 'inline-source-map';
}
Options
This is the full list of options you can specify in your karma.conf.js, Name, Type, Default, Description, :-------------------------------------------:, :--------:, :-----:, :--------------------------------------------------------------------------------------, webpack, {Object}, {}, Pass webpack.config.js to karma, webpackMiddleware, {Object}, {}, Pass webpack-dev-middleware configuration to karma, beforeMiddleware, {Object}, {}, Pass custom middleware configuration to karma, before any karma middleware runs, ### webpack
webpack configuration (webpack.config.js).
webpackMiddleware
Configuration for webpack-dev-middleware.
beforeMiddleware
beforeMiddleware is a webpack option that allows injecting middleware before
karma's own middleware runs. This loader provides a webpackBlocker
middleware that will block tests from running until code recompiles. That is,
given this scenario
- Have a browser open on the karma debug page (http://localhost:9876/debug.html)
- Make a code change
- Refresh
Without the webpackBlocker middleware karma will serve files from before
the code change. With the webpackBlocker middleware the loader will not serve
the files until the code has finished recompiling.
⚠️ The
beforeMiddlewareoption is only supported inkarma >= v1.0.0
Contributing
Please take a moment to read our contributing guidelines if you haven't yet done so.