[![npm][npm]][npm-url]
[![node][node]][node-url]
[![coverage][cover]][cover-url]

src="https://worldvectorlogo.com/logos/karma.svg">


src="https://cdn.rawgit.com/webpack/media/e7485eb2/logo/icon.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
``js
module.exports = (config) => {
config.set({
// ... normal karma configuration

// make sure to include webpack as a framework
frameworks: ['mocha', 'webpack'],

plugins: [
'karma-webpack',
'karma-mocha',
],

files: [
// all files ending in ".test.js"
// !!! use watched: false as we use webpacks watch
{ pattern: 'test/*/.test.js', watched: false }
],

preprocessors: {
// add webpack as preprocessor
'test/*/.test.js': [ 'webpack' ]
},

webpack: {
// karma watches the test entry points
// Do NOT specify the entry option
// webpack watches dependencies

// webpack configuration
},
});
}
`

$3

This configuration will be merged with what gets provided via karma's config.webpack.

`js
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: [],
};
`

$3

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.

$3

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

`js
// this is the by default applied transformPath
webpack: {
transformPath: (filepath) => {
// force *.js files by default
const info = path.parse(filepath);
return ${path.join(info.dir, info.name)}.js;
},
},
`

$3

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

`bash
npm i -D karma-sourcemap-loader
`

And then add it to your preprocessors.

karma.conf.js
`js
preprocessors: {
'test/test_index.js': [ 'webpack', 'sourcemap' ]
}
`

And tell webpack to generate sourcemaps.

webpack.config.js
`js
webpack: {
// ...
devtool: 'inline-source-map'
}
`

Current Maintainers

src="https://avatars.githubusercontent.com/u/13606342?s=460&u=467cf9a106d2bb474cf627ffd4e0eac80d0b4705&v=4"> Cody Mikol

Previous Maintainers

Previous maintainers of the karma-webpack` plugin that have done such amazing work to get it to where it is today.

src="https://avatars0.githubusercontent.com/u/7922109?v=4&s=150"> Ryan Clark	src="https://avatars3.githubusercontent.com/u/2045543?v=4&s=150"> April Arcus	src="https://avatars.githubusercontent.com/u/4650931?v=3&s=150"> Mika Kalathil	src="https://avatars.githubusercontent.com/u/8420490?v=3&s=150"> Joshua Wiens	Will Farley	src="https://avatars.githubusercontent.com/u/1307954?v=3&s=150"> Daniela Valero
src="https://avatars.githubusercontent.com/u/122108?v=3&s=150"> Jonathan Trang	src="https://avatars.githubusercontent.com/u/3285723?v=3&s=150"> Carlos Morales

[npm]: https://img.shields.io/npm/v/karma-webpack.svg
[npm-url]: https://npmjs.com/package/karma-webpack

[node]: https://img.shields.io/node/v/karma-webpack.svg
[node-url]: https://nodejs.org

[cover]: https://codecov.io/gh/webpack-contrib/karma-webpack/branch/master/graph/badge.svg
[cover-url]: https://codecov.io/gh/webpack-contrib/karma-webpack