karma-webpack

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({
    // ... 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
    },
  });
}

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

// 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`;
    },
},

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'
}

Current Maintainers

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.

Ryan Clark	April Arcus	Mika Kalathil	Joshua Wiens	Will Farley	Daniela Valero
Jonathan Trang	Carlos Morales

Similar packages

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.