Package Exports

karma-webpack

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (karma-webpack) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Karma Webpack

Use webpack to preprocess files in karma

Install

npm i -D karma-webpack

Usage

karma.conf.js

module.exports = (config) => {
  config.set({
    // ... normal karma configuration

    // add webpack to your list of frameworks
    frameworks: ['mocha', 'webpack'],

    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' ],
      '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_'),
  },
  stats: {
    modules: false,
    colors: true,
  },
  watch: false,
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',
      minSize: 0,
      cacheGroups: {
        commons: {
          name: 'commons',
          chunks: 'initial',
          minChunks: 1,
        },
      },
    },
  },
  plugins: [],
  // Something like this will be auto added by this.configure()
  // entry: {
  //   'foo-one.test.js': 'path/to/test/foo-one.test.js',
  //   'foo-two.test.js': 'path/to/test/foo-two.test.js',
  // },
  // plugins: [
  //   new KarmaSyncPlugin()
  // ],
};

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

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`

`webpack`

webpack configuration (webpack.config.js).

Maintainers

Mika Kalathil	Joshua Wiens	Will Farley	Daniela Valero
Jonathan Trang	Carlos Morales