karma-webpack
    Overview
    Documentation
    Tutorials
    Insights
    Code
    Dependencies
    Contributors
    Jobs

karma-webpack

Use webpack with karma

4.0.2  •  Updated 10 months ago  •  by webpack-contrib  •  MIT License

npm node deps tests coverage chat size

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

Popularity

Weekly Downloads
356.7K
Stars
799

Maintenance

Development

Last ver 10 months ago
Created 6 years ago
Last commit 10 months ago
9 days between commits

Technology

Node version: 10.15.2
36.5K unpacked

Compliance

MIT License
OSI Approved
0 vulnerabilities

Contributors

61 contributors
d3viant0ne
Maintainer, 37 commits, 27 merges, 21 PRs
Michael Ciniawsky
Maintainer, 21 commits, 31 merges, 6 PRs
Tobias Koppers
37 commits, 13 merges
MikaAK
25 commits, 19 merges, 5 PRs
Matthieu Foucault
Maintainer, 7 commits, 15 merges, 6 PRs
Works at Button, Inc
Ryan Clark
Maintainer, 13 commits, 8 merges, 13 PRs

Tags

karma
karma-plugin
karma-preprocessor
karma-webpack
webpack
Openbase helps developers choose among and use millions of open-source packages, so they can build amazing products faster.
FacebookTwitterLinkedIn
© 2020 Devstore, Inc.