Backend interview prep

Start

Karma Test Runner

Learn Angular Karma Test Runner with configuration, browsers, coverage reports, watch mode, CI/CD integration, headless testing, Jasmine integration, enterprise best practices, and interview questions.

Karma is the default test runner used by Angular applications.

While Jasmine is responsible for writing tests, Karma is responsible for executing those tests inside one or more browsers and reporting the results.

A typical Angular testing stack consists of:

  • Jasmine → Testing Framework
  • Karma → Test Runner
  • TestBed → Angular Testing Environment
  • Chrome Headless → Browser

Karma enables developers to execute tests automatically during development and within CI/CD pipelines.

Table of Contents

  1. What is Karma?
  2. Why Use Karma?
  3. Karma Architecture
  4. How Karma Works
  5. Karma Configuration
  6. Running Tests
  7. Watch Mode
  8. Browser Testing
  9. Chrome Headless
  10. Code Coverage
  11. CI/CD Integration
  12. Enterprise Banking Example
  13. Best Practices
  14. Common Mistakes
  15. Top 10 Interview Questions
  16. Interview Cheat Sheet
  17. Summary

What is Karma?

Karma is a JavaScript test runner.

It executes unit tests written using frameworks such as:

  • Jasmine
  • Mocha
  • QUnit

Angular CLI configures Karma with Jasmine by default.

Why Use Karma?

Benefits include:

  • Automatic browser execution
  • Live reload during development
  • Multiple browser support
  • Code coverage reporting
  • CI/CD integration
  • Fast feedback
  • Angular CLI integration

Angular Testing Stack

flowchart LR

Developer

Developer --> Jasmine

Jasmine --> Karma

Karma --> Browser

Browser --> TestResults

How Karma Works

Development flow

  1. Developer writes tests.
  2. Jasmine defines the test cases.
  3. Karma launches a browser.
  4. Karma executes all tests.
  5. Results are displayed.
  6. Files change.
  7. Karma reruns the affected tests.

Karma Execution Flow

flowchart LR

SourceCode

SourceCode --> JasmineTests

JasmineTests --> Karma

Karma --> Chrome

Chrome --> Results

Karma Configuration

Angular projects include:

karma.conf.js

Typical configuration

module.exports = function(config) {

  config.set({

    frameworks: [

      'jasmine',

      '@angular-devkit/build-angular'

    ],

    browsers: [

      'Chrome'

    ],

    reporters: [

      'progress'

    ]

  });

};

Important Configuration Options

Option Purpose
frameworks Testing framework
browsers Browser list
reporters Output format
files Files to load
plugins Karma plugins
autoWatch Watch mode
singleRun Run once for CI
coverageReporter Coverage output

Running Tests

Run all tests

ng test

Angular CLI:

  • Builds the application
  • Starts Karma
  • Launches the browser
  • Executes all tests
  • Displays the results

Watch Mode

By default:

ng test

Karma automatically watches source files.

Whenever code changes:

  • Rebuild
  • Rerun tests
  • Display updated results

This provides fast developer feedback.

Watch Mode Architecture

flowchart LR

Developer

Developer --> CodeChange

CodeChange --> Karma

Karma --> Browser

Browser --> UpdatedResults

Browser Support

Karma supports multiple browsers.

Examples

  • Chrome
  • Chrome Headless
  • Firefox
  • Edge
  • Safari (platform dependent)

Multiple browsers improve cross-browser confidence.

Chrome Headless

In CI/CD pipelines, browsers usually run without a graphical interface.

Example

browsers: [

'ChromeHeadless'

]

Benefits

  • Faster execution
  • Lower resource usage
  • Works on build servers
  • Ideal for automation

Code Coverage

Generate coverage

ng test --code-coverage

Angular generates

coverage/

Reports include:

  • Statements
  • Functions
  • Branches
  • Lines

Coverage Metrics

Metric Description
Statements Executed statements
Branches Decision coverage
Functions Tested functions
Lines Executed lines

Example

Statements : 96%

Branches : 91%

Functions : 95%

Lines : 97%

Coverage Architecture

flowchart LR

Tests

Tests --> Karma

Karma --> Coverage

Coverage --> HTMLReport

Debugging Tests

Karma allows debugging inside the browser.

Useful techniques:

  • Browser Developer Tools
  • Breakpoints
  • Console logs
  • Source maps

Debugging is especially helpful for asynchronous and DOM-related tests.

Continuous Integration

Typical CI pipeline

flowchart TD

Developer

Developer --> Git

Git --> Pipeline

Pipeline --> Karma

Karma --> ChromeHeadless

ChromeHeadless --> Coverage

Coverage --> Deployment

Example

ng test --watch=false

--browsers=ChromeHeadless

Common CI platforms

  • GitHub Actions
  • GitLab CI
  • Jenkins
  • Azure DevOps

Enterprise Banking Example

Modules

  • Customer Accounts
  • Payments
  • Loans
  • Credit Cards
  • Investments
  • Authentication

Pipeline

flowchart LR

Commit

Commit --> Build

Build --> Karma

Karma --> ChromeHeadless

ChromeHeadless --> Coverage

Coverage --> DeploymentApproval

Quality Gates

  • Unit tests must pass
  • Coverage threshold met
  • No build failures
  • Static analysis completed

Performance Best Practices

Practice Benefit
Chrome Headless Faster execution
Watch Mode Quick feedback
Parallel Execution Reduced build time
Mock Dependencies Faster tests
Test Only Business Logic Better maintainability
Coverage Reports Measure quality
Run in CI Continuous validation
Keep Tests Independent Reliable execution

Common Mistakes

Running Tests Against Production Services

Always mock:

  • HTTP requests
  • Databases
  • External APIs
  • Third-party integrations

Ignoring Coverage

Passing tests do not necessarily indicate sufficient coverage.

Monitor:

  • Statements
  • Branches
  • Functions
  • Lines

Committing Focused Tests

Remove:

fit()

fdescribe()

before committing code.

Depending on Test Order

Each test should execute independently.

Avoid shared mutable state between tests.

Ignoring CI Failures

Every failed build should be investigated before deployment.

Karma Best Practices

Practice Recommendation
Chrome Headless Preferred for CI
Watch Mode Development
Mock External Services Always
Code Coverage Enable
Independent Tests Yes
CI/CD Integration Yes
Fast Test Execution Yes
Clear Reporting Yes

Karma vs Jasmine

Feature Karma Jasmine
Purpose Test Runner Testing Framework
Executes Tests ✅ ❌
Assertions ❌ ✅
Matchers ❌ ✅
Browser Launch ✅ ❌
Reports ✅ ❌
Test Syntax ❌ ✅
Angular CLI Integration ✅ ✅

Advantages

Benefit Description
Automatic Browser Execution Simplifies testing
Live Reload Faster development
Multi-Browser Support Better compatibility
Headless Execution CI/CD friendly
Coverage Reports Measure code quality
Angular CLI Integration Easy setup

Top 10 Karma Interview Questions

1. What is Karma?

Answer

Karma is a JavaScript test runner that executes Angular unit tests in one or more browsers and reports the results.

2. What is the difference between Jasmine and Karma?

Answer

Jasmine is the testing framework used to write test cases and assertions, while Karma is responsible for launching browsers, running those tests, and reporting the results.

3. What is Chrome Headless?

Answer

Chrome Headless is a version of Chrome that runs without a graphical interface, making it ideal for CI/CD pipelines and automated testing.

4. How do you run Angular unit tests?

Answer

Use:

ng test

Angular CLI builds the project, starts Karma, launches the browser, and executes the tests.

5. What is Watch Mode?

Answer

Watch Mode automatically reruns tests whenever source files change, providing rapid feedback during development.

6. What is Code Coverage?

Answer

Code coverage measures how much of the application's code is exercised by the test suite, including statements, branches, functions, and lines.

7. Why use Karma in CI/CD?

Answer

Karma supports automated execution, headless browsers, reporting, and coverage generation, making it well suited for continuous integration pipelines.

8. Which browsers does Karma support?

Answer

Karma supports browsers such as Chrome, Chrome Headless, Firefox, Edge, and others through plugins.

9. Can Karma run tests without opening a browser window?

Answer

Yes. Chrome Headless enables tests to run without a visible browser window.

10. What are Karma best practices?

Answer

  • Use Chrome Headless in CI
  • Enable code coverage
  • Mock external dependencies
  • Keep tests independent
  • Run tests automatically in CI/CD
  • Monitor coverage thresholds
  • Keep test execution fast

Interview Cheat Sheet

Requirement Karma Feature
Test Execution Karma
Browser Launch Chrome / Firefox
Headless Testing ChromeHeadless
Watch Mode autoWatch
Coverage ng test --code-coverage
CI/CD ChromeHeadless
Reports Progress / Coverage
Angular CLI Built-in Support
Multiple Browsers Supported
Enterprise Testing Karma + Jasmine

Summary

Karma is Angular's default test runner, responsible for executing Jasmine tests inside real browsers and reporting the results. Features such as watch mode, Chrome Headless, code coverage, and seamless Angular CLI integration make it an excellent choice for both local development and enterprise CI/CD pipelines. When combined with well-written unit tests and proper mocking strategies, Karma helps teams deliver reliable, maintainable, and high-quality Angular applications.

Key Takeaways

  • ✅ Karma is a test runner, not a testing framework.
  • ✅ Jasmine writes tests; Karma executes them.
  • ✅ ng test starts Karma automatically.
  • ✅ Watch Mode reruns tests after file changes.
  • ✅ Chrome Headless is ideal for CI/CD pipelines.
  • ✅ Enable code coverage to monitor test quality.
  • ✅ Mock external dependencies for reliable tests.
  • ✅ Keep tests independent and repeatable.
  • ✅ Integrate Karma into automated build pipelines.
  • ✅ Karma is a common Angular interview topic.

Next Article

➡️ 112-TestBed-QA.md