Karma

Karma is a test runner designed to work with any testing framework and is particularly useful for JavaScript testing across multiple browsers.

Installation

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

Setup

Initialize Karma

# Interactive setup
npx karma init

# Answer prompts:
# - Framework: jasmine
# - Browser: Chrome
# - Test files: test/**/*-test.js

karma.conf.js

module.exports = function(config) {
  config.set({
    // Base path
    basePath: '',

    // Testing frameworks
    frameworks: ['jasmine'],

    // Files to include
    files: [
      'src/**/*.js',
      'test/**/*-test.js'
    ],

    // Files to exclude
    exclude: [],

    // Preprocess files
    preprocessors: {
      'src/**/*.js': ['coverage'],
      'test/**/*.js': ['babel']
    },

    // Reporters
    reporters: ['progress', 'coverage'],

    // Coverage reporter
    coverageReporter: {
      type: 'html',
      dir: 'coverage/'
    },

    // Port
    port: 9876,

    // Colors in output
    colors: true,

    // Logging level
    logLevel: config.LOG_INFO,

    // Auto watch
    autoWatch: true,

    // Browsers to test
    browsers: ['Chrome'],

    // CI mode
    singleRun: false,

    // Concurrency level
    concurrency: Infinity
  });
};

Running Tests

# Start Karma (watch mode)
npx karma start

# Run tests once
npx karma start --single-run

# Run with specific browser
npx karma start --browsers Chrome

# Run with multiple browsers
npx karma start --browsers Chrome,Firefox

# Run with coverage
npx karma start --reporters coverage

Writing Tests

Jasmine Example

describe('Calculator', function() {
  let calculator;

  beforeEach(function() {
    calculator = new Calculator();
  });

  describe('add method', function() {
    it('should add two numbers', function() {
      expect(calculator.add(2, 3)).toBe(5);
    });

    it('should handle negative numbers', function() {
      expect(calculator.add(-1, 3)).toBe(2);
    });
  });

  describe('subtract method', function() {
    it('should subtract two numbers', function() {
      expect(calculator.subtract(5, 3)).toBe(2);
    });
  });
});

Configuration Options

Option	Description
basePath	Base path for file resolution
frameworks	Testing frameworks to use
files	Files to load in browser
exclude	Files to exclude
preprocessors	Preprocess files
reporters	Report results
port	Karma server port
browsers	Browsers to test
singleRun	Run once and exit
autoWatch	Watch files for changes

Browser Launchers

# Install additional browsers
npm install --save-dev karma-firefox-launcher
npm install --save-dev karma-safari-launcher
npm install --save-dev karma-edge-launcher

# Configure in karma.conf.js
browsers: ['Chrome', 'Firefox', 'Safari']

Preprocessors

Babel

npm install --save-dev karma-babel-preprocessor @babel/core @babel/preset-env

preprocessors: {
  'src/**/*.js': ['babel'],
  'test/**/*.js': ['babel']
},
babelPreprocessor: {
  options: {
    presets: ['@babel/preset-env']
  }
}

Coverage

npm install --save-dev karma-coverage

preprocessors: {
  'src/**/*.js': ['coverage']
},
reporters: ['progress', 'coverage'],
coverageReporter: {
  type: 'html',
  dir: 'coverage/'
}

Reporters

Available Reporters

# Progress
npm install --save-dev karma-spec-reporter

# JUnit (for CI)
npm install --save-dev karma-junit-reporter

# Detailed results
npm install --save-dev karma-spec-reporter

# Coverage
npm install --save-dev karma-coverage

Configuration

reporters: ['progress', 'spec', 'coverage'],

specReporter: {
  maxLogLines: 5,
  suppressErrorSummary: false,
  suppressFailed: false,
  suppressPassed: false,
  showSpecTiming: true
},

junitReporter: {
  outputDir: 'test-results/',
  outputFile: 'test-results.xml'
}

CI/CD Integration

GitHub Actions

name: Tests
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '16'
      - run: npm ci
      - run: npm run test:ci

package.json

{
  "scripts": {
    "test": "karma start",
    "test:ci": "karma start --single-run --no-auto-watch --reporters junit,coverage"
  }
}

Watch Mode Configuration

// Automatically re-run tests on file changes
autoWatch: true,
autoWatchBatchDelay: 300,

// Specify files to watch
files: [
  {pattern: 'src/**/*.js', watched: true},
  {pattern: 'test/**/*.js', watched: true},
  {pattern: 'node_modules/**/*.js', watched: false}
]

Debugging Tests

# Run with verbose logging
npx karma start --log-level DEBUG

# Open debug page in browser
# Go to: http://localhost:9876/debug.html

# Run single file
npx karma run -- --grep "Calculator"

# Inspect in browser DevTools
# Debug button opens Chrome DevTools

Best Practices

• Keep test files alongside source code
• Use meaningful test descriptions
• Test edge cases and error conditions
• Maintain test isolation with beforeEach/afterEach
• Mock external dependencies
• Keep tests focused and independent
• Use code coverage to find untested code
• Integrate Karma into CI/CD pipeline

Resources

• Karma Documentation
• GitHub Repository
• Jasmine Documentation
• Available Plugins

---

Last updated: 2025-07-06|Edit on GitHub