Angular Testing with Karma

What ng test Actually Runs

Historically, running ng test in an Angular CLI project invoked @angular-devkit/build-angular's Karma builder, which reads angular.json for test configuration, compiles your TypeScript, and hands a generated karma.conf.js (plus the compiled specs) to Karma itself. The framework adapter is Jasmine, the launcher is karma-chrome-launcher, and coverage uses karma-coverage.

This means everything covered earlier in this course — frameworks, browsers, reporters, preprocessors — still applies directly; Angular's tooling is a specific, opinionated configuration of the exact same Karma you've been learning, not a different tool.

// A typical Angular-generated karma.conf.js (simplified)
module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: { jasmine: {}, clearContext: false },
    reporters: ['progress', 'kjhtml'],
    browsers: ['Chrome'],
    restartOnFileChange: true
  });
};

The @angular-devkit/build-angular framework and plugin entries are what wire Angular's TypeScript compilation and test discovery into standard Karma.

Angular-Specific Additions

karma-jasmine-html-reporter    // shows results in the debug.html browser page itself
@angular-devkit/build-angular   // Angular's own framework + plugin integration
restartOnFileChange: true         // Angular-recommended setting for reliable rebuild+rerun
client.clearContext: false          // keeps the Jasmine HTML reporter's output visible

• karma-jasmine-html-reporter (kjhtml) renders results directly on the browser debug page, not just the terminal.
• @angular-devkit/build-angular's plugin handles TypeScript compilation via the Angular CLI's own build pipeline.
• restartOnFileChange: true is an Angular-recommended setting for more reliable rebuild-and-rerun behavior on file changes.
• Everything else — browsers, reporters, coverage — behaves exactly as it does in any other Karma project.

Angular + Karma Cheat Sheet

Where Angular-specific pieces map onto general Karma concepts.

Test Configuration in angular.json

In Angular CLI projects, some settings you'd otherwise put directly into karma.conf.js are instead configured through the test target in angular.json, which the CLI's Karma builder reads and merges into the generated configuration.

// angular.json (relevant excerpt)
"test": {
  "builder": "@angular-devkit/build-angular:karma",
  "options": {
    "polyfills": ["zone.js", "zone.js/testing"],
    "tsConfig": "tsconfig.spec.json",
    "karmaConfig": "karma.conf.js"
  }
}

The karmaConfig key still points at a real karma.conf.js file — Angular layers on top of Karma rather than replacing it.

Angular's Current Direction Away from Karma

It's worth being direct here too: newer Angular CLI versions have moved the default unit-test builder away from Karma, toward alternatives like Jest or a Web Test Runner-based builder, and Karma's own project has been marked as deprecated by its maintainers. If you're starting a brand-new Angular project today, check what your CLI version defaults to before assuming Karma is still the expected choice.

Common Mistakes

• Assuming Angular's testing setup is a completely separate tool from the Karma covered elsewhere in this course.
• Editing karma.conf.js directly for settings that angular.json's test target is actually meant to control.
• Not checking current Angular CLI defaults before assuming a brand-new project should use Karma at all.
• Removing karma-jasmine-html-reporter without realizing it's what powers the results shown on the debug.html page.

Key Takeaways

• Angular's classic ng test command is a thin, opinionated wrapper around standard Karma.
• Jasmine, karma-chrome-launcher, and karma-coverage are the default framework/launcher/coverage stack.
• angular.json's test target configures some settings instead of (or alongside) karma.conf.js.
• Newer Angular CLI versions increasingly default away from Karma — verify current defaults for new projects.