karma-vite

1.0.5 verified Mon Apr 27 auth: no javascript

A Karma plugin that uses Vite to transform ES modules for testing. Current stable version is 1.0.5, released December 2023, supporting Vite 2 through 5. It enables using Vite's fast development server and module transformation within Karma test runner. Unlike karma-webpack or karma-rollup, it leverages Vite's on-demand compilation and HMR-like middleware for quicker test re-runs. Requires Karma 6+ and Vite 2-5 as peer dependencies. Ships TypeScript types.

Common errors

error Karma never starts. Tests are not executed. ↓

cause urlRoot is set to default '/' in Karma config, which conflicts with karma-vite middleware.

fix

Set urlRoot to a non-root path (e.g., '/karma/') in karma.conf.js, or upgrade to karma-vite v1.0.1+.

error Cannot find module 'karma-vite' ↓

cause Plugin not installed or not registered correctly in karma config.

fix

Run 'npm install -D karma-vite'. Ensure 'karma-vite' is listed in the plugins array (not require()'d directly).

error TypeError: Cannot read properties of undefined (reading 'call') ↓

cause viteClientMiddleware receives an undefined response object due to middleware chain issues (affects v1.0.0–1.0.2).

fix

Upgrade to karma-vite v1.0.3 or later.

error Vite config 'define' not working. Environment variables are undefined in tests. ↓

cause Bug in karma-vite v1.0.0 where Vite's define config is ignored.

fix

Upgrade to karma-vite v1.0.1 or later.

Warnings

gotcha The files pattern must include type: 'module', watched: false, and served: false. Missing these can cause infinite loops or modules not being served. ↓

fix Set type: 'module', watched: false, served: false on all test file entries.

breaking Karma testing never starts if urlRoot is the default value ('/') in Karma config. ↓

fix Upgrade to 1.0.1 or later. Alternatively, set urlRoot to a non-root path (e.g., '/karma/').

deprecated Support for Vite 2 was removed in v1.0.5 (since Vite 2 is no longer maintained). ↓

fix Use Vite 3, 4, or 5 with karma-vite >=1.0.5.

gotcha viteClientMiddleware always calls next() even when it should not, causing middleware chaining issues in some Karma setups. ↓

fix Upgrade to 1.0.3 or later.

gotcha Vite define variables are not applied when using karma-vite v1.0.0. ↓

fix Upgrade to 1.0.1 or later.

gotcha Coverage reports can be generated via vite-plugin-istanbul, but only if 'coverage' reporter is present in Karma config. If coverage reporter is not configured, coverage instrumentation may silently not work. ↓

fix Ensure karma-coverage plugin is installed and add 'coverage' to reporters array in Karma config.

Install

npm install karma-vite

yarn add karma-vite

pnpm add karma-vite

Imports

karma-vite
wrong
```
const karmaVite = require('karma-vite');
```
correct
```
module.exports = (config) => { config.set({ plugins: ['karma-vite'], frameworks: ['vite'] }); };
```
The plugin is a Karma framework plugin; it should be registered via 'plugins' array in karma.conf.js, not required directly in test files.
KarmaViteConfig
wrong
```
const { KarmaViteConfig } = require('karma-vite');
```
correct
```
import type { KarmaViteConfig } from 'karma-vite';
```
TypeScript users can import the KarmaViteConfig interface for configuring the vite property in karma.conf.js. CJS require is not supported for types; use import type.
karma-vite (as a plugin)
wrong
```
plugins: [require('karma-vite')]
```
correct
```
plugins: ['karma-vite']
```
Karma resolves plugin names from npm packages; using require() for the plugin object is unnecessary and can break plugin resolution.

Quickstart

Minimal Karma configuration to run Jasmine tests with Vite transformation. Tests are ES modules with .ts extension, and Vite handles TypeScript compilation.

// karma.conf.js
module.exports = (config) => {
  config.set({
    plugins: ['karma-vite', 'karma-jasmine'],
    frameworks: ['vite', 'jasmine'],
    files: [
      {
        pattern: 'test/**/*.spec.ts',
        type: 'module',
        watched: false,
        served: false,
      },
    ],
  });
};