npm i -D karma-webpackkarma.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'
}
})
}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.
You can use the karma-sourcemap-loader to get the source maps generated for your test bundle.
npm i -D karma-sourcemap-loaderAnd 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'
}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 configuration (webpack.config.js).
Configuration for webpack-dev-middleware.
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 w
5FC1
ebpackBlocker middleware the loader will not serve
the files until the code has finished recompiling.
⚠️ ThebeforeMiddlewareoption is only supported inkarma >= v1.0.0
|
Mika Kalathil |
|
|
|
|
|
|