Karma Setup

Installing Karma and Its Plugins

Karma is distributed as several separate npm packages: the core karma package, one framework adapter (like karma-jasmine), one or more launchers (like karma-chrome-launcher), and optionally reporters and preprocessors. Unlike Jest, there is no single package that bundles everything — you assemble Karma from parts.

Install everything as dev dependencies, since Karma only runs during development and CI, never in production.

npm install --save-dev karma karma-cli \
  karma-jasmine jasmine-core \
  karma-chrome-launcher

This installs the core runner, the CLI, the Jasmine adapter and its assertion library, and the Chrome launcher — enough to run tests in Chrome or ChromeHeadless.

Generating a Starter Config

npx karma init karma.conf.js

# Interactive prompts:
# Which testing framework? jasmine
# Do you want to use Require.js? No
# Do you want to capture any browsers automatically? Chrome
# What is the location of your source and test files? src/**/*.js, test/**/*.spec.js
# Should any of the files be excluded?
# Do you want Karma to watch all the files and run tests on change? Yes

• karma init walks you through an interactive wizard and writes a working karma.conf.js.
• It's a good way to see the file's shape, but most real projects hand-edit the file afterward.
• Angular projects generated by older Angular CLI versions already ship a working karma.conf.js — you rarely need to run karma init there.
• After generating the file, review every option; the wizard's defaults are a starting point, not a final answer.

Karma Setup Cheat Sheet

Common installation commands for different project types.

Karma Setup via Angular CLI

If you generated your project with an Angular CLI version that still defaults to Karma, running ng generate application (or the older ng new) already installs karma, karma-jasmine, karma-jasmine-html-reporter, karma-chrome-launcher, and karma-coverage, and writes a ready-to-run karma.conf.js for you.

ng new my-app
cd my-app
ng test        # runs karma start under the hood

ng test is a thin wrapper: it invokes the Angular builder, which in turn calls Karma with the generated config.

Useful npm Scripts

A small, consistent set of npm scripts saves everyone on a team from memorizing raw Karma CLI flags.

// package.json
{
  "scripts": {
    "test": "karma start",
    "test:ci": "karma start --single-run --browsers ChromeHeadless",
    "test:watch": "karma start --auto-watch --no-single-run"
  }
}

Common Mistakes

• Installing karma without also installing a framework adapter, then wondering why describe/it are undefined.
• Installing Chrome launcher packages but never installing (or having available) an actual Chrome/Chromium binary.
• Running karma init inside an Angular CLI project and overwriting a working, CLI-managed configuration.
• Mixing global and local Karma CLI installs, causing version mismatches between what runs and what's configured.

Key Takeaways

• Karma is assembled from separate npm packages: core, framework adapter, launcher, and optional extras.
• karma init scaffolds a starter karma.conf.js interactively.
• Angular CLI projects (on older/Karma-default versions) already ship a working setup via ng test.
• Consistent npm scripts (test, test:ci, test:watch) make Karma easier to use across a team.