A karma reporter that uses the latest istanbul 1.x APIs (with full sourcemap support) to report coverage.
npx @tessl/cli install tessl/npm-karma-coverage-istanbul-reporter@3.0.0Karma 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.
npm install karma-coverage-istanbul-reporter --save-devThe 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 neededFor manual plugin registration:
// karma.conf.js
module.exports = function(config) {
config.set({
plugins: ['karma-coverage-istanbul-reporter'],
// ... other config
});
};// 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
}
}
}
});
};The reporter works within the Karma plugin ecosystem:
coverage-istanbul reporter with KarmaThe 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]
};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);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;
}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);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// karma.conf.js
module.exports = function(config) {
config.set({
reporters: ['progress', 'coverage-istanbul'],
coverageIstanbulReporter: {
reports: ['html', 'text-summary'],
dir: 'coverage/'
}
});
};// 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'
}
}
}
});
};// 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/'
}
});
};