Karma Basics

The Five Building Blocks of Karma

Every Karma project, no matter how complex, is built from the same five ingredients configured inside karma.conf.js: a framework adapter to provide test syntax, a list of files to load, one or more browser launchers, one or more reporters, and a handful of run-mode flags like singleRun and autoWatch.

Once you can identify these five pieces in any karma.conf.js file, you can read (and safely modify) almost any Karma configuration you encounter, even one written years ago for an older Angular version.

module.exports = function(config) {
  config.set({
    frameworks: ['jasmine'],          // 1. framework adapter
    files: ['src/**/*.spec.js'],      // 2. files to load
    browsers: ['ChromeHeadless'],     // 3. browser launchers
    reporters: ['progress'],          // 4. output formatting
    singleRun: true,                  // 5. run-mode flag
    autoWatch: false
  });
};

Every setting maps directly to one of the five building blocks: framework, files, browsers, reporters, and run-mode flags.

Default Project Layout

my-angular-app/
  src/
    app/
      app.component.ts
      app.component.spec.ts
  karma.conf.js
  package.json

• Spec files usually sit right next to the source file they test, named *.spec.js or *.spec.ts.
• karma.conf.js normally lives at the project root, next to package.json.
• package.json typically has a "test": "karma start" (or "ng test") script.
• Karma does not require a build step itself, but TypeScript/Angular projects add a preprocessor to compile specs first.

Karma Basics Cheat Sheet

The essential vocabulary you need before writing your first configuration.

The config.set() Function

A karma.conf.js file exports a single function that receives a config object. Inside that function, you call config.set() exactly once with a plain JavaScript object describing every setting for the run. Karma merges your object with its internal defaults.

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    files: ['test/**/*.spec.js'],
    browsers: ['ChromeHeadless']
  });
};

basePath resolves every relative path in the config (like entries in files) against this directory.

Starting Karma from the Command Line

The karma CLI package provides the karma start command. Passing a config file path is optional if a karma.conf.js already exists in the current directory — Karma finds it automatically.

• karma start — run with the local karma.conf.js.
• karma start karma.ci.conf.js — run with an alternate config file.
• karma start --single-run — override singleRun to true for this invocation only.
• karma start --browsers ChromeHeadless — override the browsers list for this invocation only.

Common Mistakes

• Forgetting that config.set() must be called exactly once, inside the exported function.
• Using absolute paths in files instead of paths relative to basePath.
• Not installing the matching adapter/launcher packages for frameworks and browsers listed in the config.
• Editing a copy of karma.conf.js without realizing the build tool (like Angular CLI) still points at the original file.

Key Takeaways

• Every Karma project is built from five pieces: framework, files, browsers, reporters, and run-mode flags.
• karma.conf.js exports a function that calls config.set() once with all settings.
• CLI flags like --single-run and --browsers can override config values for a single invocation.
• Understanding these basics lets you read almost any existing Karma configuration confidently.