npm npm i -D karma-webpack
yarn yarn add -D karma-webpack
karma.conf.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 }, }); }
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: [], };
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.
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 setting webpack.transformPath
// 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`; }, },
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' }
Previous maintainers of the karma-webpack plugin that have done such amazing work to get it to where it is today.