https://github.com/webpack/karma-webpack

karma-webpack

Installation

  1. npm install --save-dev karma-webpack

Usage

  1. // Karma configuration
  2. module.exports = function(config) {
  3. config.set({
  4. // ... normal karma configuration
  5. files: [
  6. // all files ending in "_test"
  7. 'test/*_test.js',
  8. 'test/**/*_test.js'
  9. // each file acts as entry point for the webpack configuration
  10. ],
  11. preprocessors: {
  12. // add webpack as preprocessor
  13. 'test/*_test.js': ['webpack'],
  14. 'test/**/*_test.js': ['webpack']
  15. },
  16. webpack: {
  17. // karma watches the test entry points
  18. // (you don't need to specify the entry option)
  19. // webpack watches dependencies
  20. // webpack configuration
  21. },
  22. webpackMiddleware: {
  23. // webpack-dev-middleware configuration
  24. // i. e.
  25. noInfo: true
  26. },
  27. plugins: [
  28. require("karma-webpack")
  29. ]
  30. });
  31. };

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 testcases this can result in many big files. The alterative configuration creates a single bundle with all testcases.

  1. files: [
  2. // only specify one entry point
  3. // and require all tests in there
  4. 'test/test_index.js'
  5. ],
  6. preprocessors: {
  7. // add webpack as preprocessor
  8. 'test/test_index.js': ['webpack']
  9. },
  1. // test/test_index.js
  2. // require all modules ending in "_test" from the
  3. // current directory and all subdirectories
  4. var testsContext = require.context(".", true, /_test$/);
  5. 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.

  1. npm install --save-dev karma-sourcemap-loader

And then add it to your preprocessors

  1. preprocessors: {
  2. 'test/test_index.js': ['webpack', 'sourcemap']
  3. }

And tell webpack to generate sourcemaps

  1. webpack: {
  2. // ...
  3. devtool: 'inline-source-map'
  4. }

Options

This is the full list of options you can specify in your Karma config.

webpack

Webpack configuration.

webpackMiddleware

Configuration for webpack-dev-middleware.

License

Copyright 2014-2015 Tobias Koppers

MIT