Jest Coverage Theme

Are those coverage reports too bright? Not enough contrast? Not colourful enough? Well, this package is for you!

This package allows you to change the colours of your Jest coverage reports to make them more readable and visually appealing. By default, it will use a dark theme. However, you can provide whatever CSS you want to customise the look of your coverage reports.

If you find this package useful, please consider donating to help support its development.

Thanks!

Installation

1. Install the package

    npm i jest-coverage-theme

Usage

Default Dark Theme

To style the coverage report with the default dark theme

1. When running jest tests with --coverage, add ; npx jest-coverage-theme to the end of your command.

For example:

    npx jest --coverage; npx jest-coverage-theme,

Note: by including the ; before calling npx jest-coverage-theme, you ensure the style is applied to the coverage report even if your tests fail. If you wish to not apply the style to coverage upon test failure, replace ; with &&.

Custom Theme

To style the coverage report with a custom theme

1. Copy the default theme from node_modules/jest-coverage-theme/dark-theme.css and paste it into a new file in your project.
2. Modify the CSS to your liking.
3. When running jest tests with --coverage, add ; npx jest-coverage-theme --css-path=<path-to-your-css-file-relative-to-project-root> to the end of your command.

For example:

You've created custom-theme.css in the following directory: <project root>/themes/custom-theme.css

    npx jest --coverage; npx jest-coverage-theme --css-path=themes/custom-theme.css

Note: by including the ; before calling npx jest-coverage-theme, you ensure the style is applied to the coverage report even if your tests fail. If you wish to not apply the style to coverage upon test failure, replace ; with &&.