karma-webpack

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.

README

karma-webpack

Use webpack to preprocess files in karma.

Getting Started

To begin, you'll need to install karma-webpack:

npm i --save-dev karma-webpack

Then add config:

karma.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',
    },
  });
};

Alternative Usage

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.

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

Options

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

webpack configuration (webpack.config.js).

webpackMiddleware

Configuration for webpack-dev-middleware.

beforeMiddleware

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

1. Have a browser open on the karma debug page (http://localhost:9876/debug.html)
2. Make a code change
3. Refresh

Without the webpackBlocker middleware karma will serve files from before the code change. With the webpackBlocker middleware the loader will not serve the files until the code has finished recompiling.

⚠️ The beforeMiddleware option is only supported in karma >= v1.0.0

Contributing

Please take a moment to read our contributing guidelines if you haven't yet done so.

CONTRIBUTING

License

MIT