What is karma-webpack?
karma-webpack is a plugin that allows you to use Webpack to preprocess files in Karma. It enables you to bundle your test files using Webpack, which is particularly useful for projects that already use Webpack for their build process. This integration helps in leveraging Webpack's features like module bundling, code splitting, and asset management in your test environment.
What are karma-webpack's main functionalities?
Preprocessing Files
This feature allows you to preprocess your test files using Webpack. By specifying the files and preprocessors in the Karma configuration, you can bundle your test files with Webpack before running them in the browser.
module.exports = function(config) {
config.set({
frameworks: ['mocha'],
files: [
'test/**/*.spec.js'
],
preprocessors: {
'test/**/*.spec.js': ['webpack']
},
webpack: {
// Webpack configuration
},
browsers: ['Chrome'],
singleRun: true
});
};
Using Webpack Loaders
This feature allows you to use Webpack loaders in your test environment. For example, you can use Babel to transpile your ES6 code to ES5 before running your tests.
module.exports = function(config) {
config.set({
frameworks: ['jasmine'],
files: [
'test/**/*.spec.js'
],
preprocessors: {
'test/**/*.spec.js': ['webpack']
},
webpack: {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
}
},
browsers: ['Firefox'],
singleRun: true
});
};
Source Maps
This feature allows you to generate source maps for your test files. Source maps help in debugging by mapping the transpiled code back to the original source code.
module.exports = function(config) {
config.set({
frameworks: ['mocha'],
files: [
'test/**/*.spec.js'
],
preprocessors: {
'test/**/*.spec.js': ['webpack']
},
webpack: {
devtool: 'inline-source-map'
},
browsers: ['Chrome'],
singleRun: true
});
};
Other packages similar to karma-webpack
karma-browserify
karma-browserify is a plugin that allows you to use Browserify to bundle your test files in Karma. Like karma-webpack, it preprocesses your test files, but it uses Browserify instead of Webpack. Browserify is another popular module bundler that transforms and bundles JavaScript files.
karma-rollup-preprocessor
karma-rollup-preprocessor is a plugin that integrates Rollup with Karma. Rollup is a module bundler that compiles small pieces of code into something larger and more complex, such as a library or application. This plugin allows you to preprocess your test files using Rollup, similar to how karma-webpack uses Webpack.
karma-esbuild
karma-esbuild is a plugin that uses esbuild to bundle and transpile your test files in Karma. esbuild is an extremely fast JavaScript bundler and minifier. This plugin provides similar functionality to karma-webpack but leverages the speed and performance of esbuild.
![chat](https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg)
Karma Webpack
Use webpack to preprocess files in karma
Install
npm npm i -D karma-webpack
yarn yarn add -D karma-webpack
Usage
karma.conf.js
module.exports = (config) => {
config.set({
frameworks: ['mocha', 'webpack'],
plugins: [
'karma-webpack',
'karma-mocha',
],
files: [
{ pattern: 'test/**/*.test.js', watched: false }
],
preprocessors: {
'test/**/*.test.js': [ 'webpack' ]
},
webpack: {
},
});
}
Default webpack configuration
This configuration will be merged with what gets provided via karma's config.webpack.
const defaultWebpackOptions = {
mode: 'development',
output: {
filename: '[name].js',
path: path.join(os.tmpdir(), '_karma_webpack_') + Math.floor(Math.random() * 1000000),
},
stats: {
modules: false,
colors: true,
},
watch: false,
optimization: {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
minSize: 0,
cacheGroups: {
commons: {
name: 'commons',
chunks: 'initial',
minChunks: 1,
},
},
},
},
plugins: [],
};
How it works
This project is a framework and preprocessor for Karma that combines test files and dependencies into 2 shared bundles and 1 chunk per test file. It relies on webpack to generate the bundles/chunks and to keep it updated during autoWatch=true.
The first preproccessor triggers the build of all the bundles/chunks and all following files just return the output of this one build process.
Webpack typescript support
By default karma-webpack forces *.js files so if you test *.ts files and use webpack to build typescript to javascript it works out of the box.
If you have a different need you can override by settig webpack.transformPath
webpack: {
transformPath: (filepath) => {
const info = path.parse(filepath);
return `${path.join(info.dir, info.name)}.js`;
},
},
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'
}
Maintainers
Previous Maintainers
Previous maintainers of the karma-webpack
plugin that have done such amazing work to get it to where it is today.