CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-karma-coverage-istanbul-reporter

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

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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/'
    }
  });
};
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/karma-coverage-istanbul-reporter@3.0.x
Publish Source
CLI
Badge
tessl/npm-karma-coverage-istanbul-reporter badge