or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-karma-coverage-istanbul-reporter

A karma reporter that uses the latest istanbul 1.x APIs (with full sourcemap support) to report coverage.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/karma-coverage-istanbul-reporter@3.0.x

To install, run

npx @tessl/cli install tessl/npm-karma-coverage-istanbul-reporter@3.0.0

index.mddocs/

Karma Coverage Istanbul Reporter

Karma Coverage Istanbul Reporter is a Karma reporter plugin that integrates with Istanbul.js 1.x APIs to generate comprehensive code coverage reports with full sourcemap support. It serves as a bridge between the Karma test runner and Istanbul coverage reporting, providing advanced features for modern JavaScript testing workflows.

Package Information

  • Package Name: karma-coverage-istanbul-reporter
  • Package Type: npm
  • Language: JavaScript (Node.js)
  • Installation: npm install karma-coverage-istanbul-reporter --save-dev

Core Imports

The package is used as a Karma plugin and does not provide direct imports. It exports a Karma plugin configuration:

// Automatically loaded by Karma as karma-*
// No explicit import needed

For manual plugin registration:

// karma.conf.js
module.exports = function(config) {
  config.set({
    plugins: ['karma-coverage-istanbul-reporter'],
    // ... other config
  });
};

Basic Usage

// karma.conf.js
const path = require('path');

module.exports = function(config) {
  config.set({
    reporters: ['coverage-istanbul'],
    
    coverageIstanbulReporter: {
      reports: ['html', 'lcovonly', 'text-summary'],
      dir: path.join(__dirname, 'coverage'),
      combineBrowserReports: true,
      fixWebpackSourcePaths: true,
      skipFilesWithNoCoverage: true,
      thresholds: {
        global: {
          statements: 80,
          lines: 80,
          branches: 80,
          functions: 80
        }
      }
    }
  });
};

Architecture

The reporter works within the Karma plugin ecosystem:

  • Plugin Registration: Registers the coverage-istanbul reporter with Karma
  • Coverage Collection: Collects coverage data from instrumented code during test execution
  • Source Map Processing: Handles webpack source paths and fixes sourcemap references
  • Report Generation: Uses Istanbul.js libraries to generate coverage reports in multiple formats
  • Threshold Enforcement: Validates coverage against configured thresholds and fails builds when not met

Capabilities

Karma Plugin Configuration

The main export provides the Karma plugin registration.

/**
 * Karma plugin configuration object
 * Registers the coverage-istanbul reporter with Karma
 */
module.exports = {
  'reporter:coverage-istanbul': ['type', CoverageIstanbulReporter]
};

Coverage Istanbul Reporter

The core reporter class that implements the Karma reporter interface.

/**
 * Main reporter class for handling Istanbul coverage reporting
 * @param {Function} baseReporterDecorator - Karma base reporter decorator
 * @param {Object} logger - Karma logger instance
 * @param {Object} config - Karma configuration object with coverageIstanbulReporter settings
 */
function CoverageIstanbulReporter(baseReporterDecorator, logger, config);

Configuration Options

The reporter accepts configuration through the coverageIstanbulReporter key in Karma config.

interface CoverageIstanbulReporterConfig {
  /** Report types to generate (e.g., 'html', 'lcov', 'text-summary') */
  reports?: string[];
  
  /** Output directory for reports. Use %browser% placeholder for browser-specific paths */
  dir?: string;
  
  /** Combine reports from multiple browsers into one report */
  combineBrowserReports?: boolean;
  
  /** Fix webpack sourcemap paths for correct source mapping */
  fixWebpackSourcePaths?: boolean;
  
  /** Omit files with no coverage from reports */
  skipFilesWithNoCoverage?: boolean;
  
  /** Enable verbose logging for debugging */
  verbose?: boolean;
  
  /** Coverage thresholds configuration */
  thresholds?: {
    /** Emit warnings instead of errors for failed thresholds */
    emitWarning?: boolean;
    
    /** Global coverage thresholds */
    global?: CoverageThresholds;
    
    /** Per-file coverage thresholds */
    each?: CoverageThresholds & {
      /** Pattern-based threshold overrides */
      overrides?: { [pattern: string]: CoverageThresholds };
    };
  };
  
  /** Per-report configuration options */
  'report-config'?: { [reportType: string]: any };
  
  /** Istanbul watermark configuration */
  watermarks?: any;
  
  /** Istanbul instrumentation options */
  instrumentation?: any;
  
  /** Summary generation strategy */
  summarizer?: string;
}

interface CoverageThresholds {
  /** Statement coverage percentage threshold */
  statements?: number;
  
  /** Line coverage percentage threshold */
  lines?: number;
  
  /** Branch coverage percentage threshold */
  branches?: number;
  
  /** Function coverage percentage threshold */
  functions?: number;
}

Utility Functions

The package provides utility functions for handling webpack and path-related operations.

/**
 * Fixes webpack loader syntax and query parameters from file paths
 * @param {string} filePath - File path to clean
 * @returns {string} Cleaned file path
 */
function fixWebpackFilePath(filePath);

/**
 * Normalizes path separators for Windows compatibility
 * @param {string} filePath - File path to normalize
 * @returns {string} Normalized file path
 */
function fixPathSeparators(filePath);

/**
 * Fixes webpack source map paths for correct sourcemap resolution
 * @param {Object} sourceMap - Source map object
 * @param {Object} webpackConfig - Webpack configuration
 * @returns {Object} Fixed source map with corrected paths
 */
function fixWebpackSourcePaths(sourceMap, webpackConfig);

/**
 * Applies pattern-based threshold overrides using minimatch
 * @param {string} key - File path to match against patterns
 * @param {Object} overrides - Pattern-to-threshold mapping
 * @param {string} basePath - Base path for relative path resolution
 * @returns {Object} Matching threshold configuration
 */
function overrideThresholds(key, overrides, basePath);

Supported Report Types

The reporter supports all Istanbul.js report types:

/**
 * Available report types for coverage output
 */
type ReportType = 
  | 'clover'        // Clover XML format
  | 'cobertura'     // Cobertura XML format  
  | 'html'          // HTML report with file details
  | 'html-spa'      // Single-page HTML report
  | 'json'          // Raw JSON coverage data
  | 'json-summary'  // Summary JSON format
  | 'lcov'          // LCOV format with HTML
  | 'lcovonly'      // LCOV format only
  | 'teamcity'      // TeamCity service messages
  | 'text'          // Console text output
  | 'text-lcov'     // Text LCOV format
  | 'text-summary'  // Text summary output
  | 'none';         // No output

Usage Examples

Basic Configuration

// karma.conf.js
module.exports = function(config) {
  config.set({
    reporters: ['progress', 'coverage-istanbul'],
    
    coverageIstanbulReporter: {
      reports: ['html', 'text-summary'],
      dir: 'coverage/'
    }
  });
};

Advanced Configuration with Thresholds

// karma.conf.js
module.exports = function(config) {
  config.set({
    reporters: ['coverage-istanbul'],
    
    coverageIstanbulReporter: {
      reports: ['html', 'lcovonly', 'text-summary'],
      dir: 'coverage/%browser%',
      combineBrowserReports: false,
      fixWebpackSourcePaths: true,
      skipFilesWithNoCoverage: true,
      verbose: true,
      
      thresholds: {
        emitWarning: false,
        global: {
          statements: 90,
          lines: 90,
          branches: 85,
          functions: 90
        },
        each: {
          statements: 85,
          lines: 85,
          branches: 80,
          functions: 85,
          overrides: {
            'src/utils/**/*.js': {
              statements: 75
            }
          }
        }
      },
      
      'report-config': {
        html: {
          subdir: 'html-report'
        }
      }
    }
  });
};

Webpack Integration

// karma.conf.js for webpack projects
module.exports = function(config) {
  config.set({
    reporters: ['coverage-istanbul'],
    
    // Webpack preprocessing with istanbul loader
    preprocessors: {
      'src/**/*.js': ['webpack', 'sourcemap']
    },
    
    webpack: {
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'coverage-istanbul-loader',
            enforce: 'post'
          }
        ]
      }
    },
    
    coverageIstanbulReporter: {
      fixWebpackSourcePaths: true,
      reports: ['html', 'lcovonly'],
      dir: 'coverage/'
    }
  });
};