karma-webpack
    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

    Install

    npm npm i -D karma-webpack

    yarn yarn add -D karma-webpack

    Usage

    karma.conf.js

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

    karma.conf.js

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

    And tell webpack to generate sourcemaps.

    webpack.config.js

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

    Maintainers


    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

    Keywords

    Install

    npm i karma-webpack

    DownloadsWeekly Downloads

    392,166

    Version

    5.0.0

    License

    MIT

    Unpacked Size

    36.4 kB

    Total Files

    13

    Last publish

    Collaborators

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