DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/karma-webpack package

    5.0.0 • Public • Published

    npm node deps test coverage chat

    Karma Webpack

    Use webpack to preprocess files in karma


    npm npm i -D karma-webpack

    yarn yarn add -D karma-webpack



    module.exports = (config) => {
        // ... normal karma configuration
        // make sure to include webpack as a framework
        frameworks: ['mocha', 'webpack'],
        plugins: [
        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.


    preprocessors: {
      'test/test_index.js': [ 'webpack', 'sourcemap' ]

    And tell webpack to generate sourcemaps.


    webpack: {
      // ...
      devtool: 'inline-source-map'


    Ryan Clark

    Cody Mikol

    April Arcus

    Previous Maintainers

    Previous maintainers of the karma-webpack plugin that have done such amazing work to get it to where it is today.

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



    npm i karma-webpack

    DownloadsWeekly Downloads






    Unpacked Size

    36.4 kB

    Total Files


    Last publish


    • evilebottnawi
    • sokra
    • jhnns
    • michael-ciniawsky
    • d3viant0ne
    • ryanclark