karma-webpack

library5.0.1jsnpmunverified

Karma plugin that uses webpack to preprocess test files. Current stable version is 5.0.1, released February 2024, with a release cadence of roughly major versions every 1-2 years. It provides both a Karma framework and preprocessor, bundling test files and dependencies into shared bundles and chunks via webpack 5. Key differentiators: seamless integration of webpack with Karma's test runner, automatic handling of multiple outputs, and support for TypeScript out of the box. Requires webpack ^5.0.0 as a peer dependency and Node >=18.

testing web-framework

npm install karma-webpack

github ↗package ↗

INSTALL

IMPORT

SIG · KARMA-WEBPACK

karma-webpack

testingjavascriptv5.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

karma-webpack

✓ npm install karma-webpack --save-dev

✗ npm install karma-webpack --save

Install as a dev dependency for Karma testing

webpack framework

✓ frameworks: ['webpack', ...]

✗ frameworks: ['karma-webpack']

Use 'webpack' as framework name, not 'karma-webpack'

webpack preprocessor

✓ preprocessors: { '**/*.test.js': ['webpack'] }

✗ preprocessors: { '**/*.test.js': ['karma-webpack'] }

Preprocessor name is 'webpack', not 'karma-webpack'

Configures Karma to use webpack as both framework and preprocessor for test files with a basic webpack setup.

// karma.conf.js module.exports = (config) => { config.set({ frameworks: ['mocha', 'webpack'], plugins: ['karma-webpack', 'karma-mocha'], files: [ { pattern: 'test/**/*.test.js', watched: false } ], preprocessors: { 'test/**/*.test.js': ['webpack'] }, webpack: { mode: 'development', module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' } ] } }, browsers: ['ChromeHeadless'], singleRun: true }); };

Debug

Known issues

breakingNode >= 18 required starting from v5.0.0

fix

Upgrade Node.js to version 18 or higher

affects: >=5.0.0

breakingWebpack 5 peer dependency required from v5.0.0-alpha.5 onward

fix

Update webpack to ^5.0.0

affects: >=5.0.0-alpha.5

deprecatedThe .watch() method is deprecated since v5.0.0-alpha.4

fix

Use webpack's built-in watch mode via Karma's autoWatch instead

affects: >=5.0.0-alpha.4

gotchaFiles must set 'watched: false' to avoid conflicts with webpack's own watch

fix

Set { pattern: 'test/**/*.test.js', watched: false } in karma files config

affects: *

gotchaDo not specify webpack entry option; Karma-webpack manages entries automatically

fix

Remove entry from webpack config; let karma-webpack handle it

affects: *

Errors

Common errors & fixes

Error: No provider for "framework:webpack"!

Missing 'karma-webpack' plugin in plugins array or not installed

fix

Add 'karma-webpack' to the plugins list: plugins: ['karma-webpack', ...]

Error: Module not found: Error: Can't resolve 'webpack'

Webpack not installed or peer dependency not satisfied

fix

Run npm install webpack@^5.0.0 --save-dev

TypeError: Cannot read properties of undefined (reading 'length')

webpackMiddleware config not provided or empty

fix

Provide webpackMiddleware config: webpackMiddleware: { noInfo: true } or similar

Error: [webpack-cli] Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

Webpack config contains options not compatible with webpack 5

fix

Update webpack config to be webpack 5 compatible (e.g., use optimization.splitChunks correctly)

Upgrade

Version history

5.0.1latest on npm

Audit

Dependencies

webpackrequiredPeer dependency: requires webpack ^5.0.0 for bundling

Agent activity

7 hits · last 30 days

node

Resources

githubhttps://github.com/webpack-contrib/karma-webpack ↗

packagehttps://www.npmjs.com/package/karma-webpack ↗