coverage-pretty-html-reporter

Warning

This package is still in the experimental phase. You can expect new functionalities, but with this comes the possibility of more frequent errors

Home	Stats	Code

Installation

You can use your favorite package manager

npm i -D coverage-pretty-html-reporter
yarn add -D coverage-pretty-html-reporter
pnpm add -D coverage-pretty-html-reporter
bun add -D coverage-pretty-html-reporter

Then configure nyc / c8 to use coverage-pretty-html-reporter

nyc --reporter=coverage-pretty-html-reporter mocha # ...
c8 --reporter=coverage-pretty-html-reporter mocha # ...

If you are using jest / vitest or other framework you may place correct config ex.:

/** @type {import('jest').Config} */
const config = {
  coverageReporters: ['coverage-pretty-html-reporter'],
};

import { defineConfig } from "vitest/config";
export default defineConfig({
  plugins: [],
  test: {
    coverage: {
      enabled: true,
      // @ts-expect-error
      reporter: ["coverage-pretty-html-reporter"],
    },
  },
});

Iframe - theme support

When the reporter UI is embedded in an iframe, the built-in theme toggle button is hidden. In this mode you are expected to control the theme from the parent window.

The iframe listens for postMessage events with the following payload:

type CoverageThemeMessage = {
  type: "coverage-theme";
  theme: "light" | "dark";
};

Example integration in the parent page:

<iframe
  id="coverage-report"
  src="/path/to/coverage/index.html"
  style="width: 100%; height: 100%; border: 0;"
></iframe>

<script>
  const iframe = document.getElementById("coverage-report");

  function setCoverageTheme(theme) {
    iframe?.contentWindow?.postMessage({ type: "coverage-theme", theme }, "*");
  }

  // Send initial theme once the iframe is loaded
  iframe.addEventListener("load", () => {
    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
    setCoverageTheme(prefersDark ? "dark" : "light");
  });

  // Example: hook into your own app theme system
  window.addEventListener("app-theme-changed", (event) => {
    setCoverageTheme(event.detail.theme); // "light" | "dark"
  });
</script>

Inside the iframe, the selected theme is persisted in localStorage under the coverage-theme key and a coverage-theme-changed CustomEvent is dispatched on window so internal components can react to theme changes.

Contributing

Fell free to report any bugs & share your ideas. PRs are welcome.

Developer guide

Requirements (see package.json#packageManager):

• bun@1.0.4
• node@^18.17.1

git clone git@github.com:akcyp/coverage-pretty-html-reporter.git
cd coverage-pretty-html-reporter

# Init
bun i
bun run build

# Production testing
bun run demo:nyc # or demo:c8
bun run demo:preview

# UI development
cd packages/reporter
bun run dev

# Reporter development - only production testing
# edit packages/reporter/node/index.ts
cd packages/example
bun run test:c8
bun run test:nyc