jest-html-reporter

What is jest-html-reporter?

jest-html-reporter is a Jest test results processor that generates a customizable HTML report. It helps in visualizing test results in a more readable and accessible format.

What are jest-html-reporter's main functionalities?

Basic HTML Report

This configuration generates a basic HTML report with a custom page title. It is added to the Jest configuration file (jest.config.js or package.json).

{
  "reporters": [
    "default",
    [
      "jest-html-reporter",
      {
        "pageTitle": "Test Report"
      }
    ]
  ]
}

Custom Output Path

This configuration specifies a custom output path for the HTML report. The report will be saved to the specified location.

{
  "reporters": [
    "default",
    [
      "jest-html-reporter",
      {
        "outputPath": "./reports/test-report.html"
      }
    ]
  ]
}

Custom Report Title and Theme

This configuration allows setting a custom title and theme for the HTML report. The 'darkTheme' option provides a dark-themed report.

{
  "reporters": [
    "default",
    [
      "jest-html-reporter",
      {
        "pageTitle": "My Custom Test Report",
        "theme": "darkTheme"
      }
    ]
  ]
}

Include Failure Messages

This configuration includes detailed failure messages in the HTML report, making it easier to debug test failures.

{
  "reporters": [
    "default",
    [
      "jest-html-reporter",
      {
        "includeFailureMsg": true
      }
    ]
  ]
}

Sort Results

This configuration sorts the test results in the HTML report by status, making it easier to identify failed tests.

{
  "reporters": [
    "default",
    [
      "jest-html-reporter",
      {
        "sort": "status"
      }
    ]
  ]
}

Other packages similar to jest-html-reporter

jest-stare

jest-stare is another Jest test results processor that generates an HTML report. It provides a more detailed and interactive report compared to jest-html-reporter, including charts and graphs for better visualization.

jest-html-reporters

jest-html-reporters is a highly customizable HTML report generator for Jest. It supports multiple themes, custom styles, and additional data like screenshots and logs, making it more versatile than jest-html-reporter.

README

📜

jest-html-reporter

A Jest test results processor for generating a summary in HTML.



Inspired by karma-htmlfile-reporter

Installation

npm:

$ npm install jest-html-reporter --save-dev

yarn:

$ yarn add jest-html-reporter --dev

Usage

Configure Jest to process the test results by adding the following entry to the Jest config (jest.config.json):

"reporters": [
	"default",
	["./node_modules/jest-html-reporter", {
		"pageTitle": "Test Report"
	}]
]

As you run Jest from within the terminal, a file called test-report.html will be created within your root folder containing information about your tests.

There are multiple configuration options available. Read more about these further down in this document.

Alternative Usage as a Test Results Processor

To run the reporter as a test results processor (after Jest is complete instead of running in parallel), add the following entry to the Jest config (jest.config.json):

{
	"testResultsProcessor": "./node_modules/jest-html-reporter"
}

Note: When running as a testResultsProcessor, the configuration needs either to be placed within a new file named jesthtmlreporter.config.json residing in the root folder

{
	"pageTitle": "Test Report",
}

or via adding a key to package.json named "jest-html-reporter":

{
	...
	"jest-html-reporter": {
		"pageTitle": "Test Report",
	}
}

📌 Configuration Options (All Optional)

Option	Type	Default	Description
additionalInformation	Array<{ label: string; value: string; }>	null	A list of additional information to be added to the top of the report.
append	boolean	false	Append test results to an existing report.
boilerplate	string	null	Path to an HTML boilerplate file. The {jesthtmlreporter-content} variable will be replaced with test results.
collapseSuitesByDefault	boolean	false	Collapse test suites (accordions) by default.
customScriptPath	string	null	Path to an external script file injected into the report.
dateFormat	string	yyyy-mm-dd HH:MM:ss	Date format for timestamps. See documentation for available formats.
executionTimeWarningThreshold	number	5	Warn if a test suite exceeds this execution time (in seconds).
includeConsoleLog	boolean	false	Include console.log outputs in the report (requires --verbose=false).
includeFailureMsg	boolean	false	Show detailed error messages for failed tests.
includeStackTrace	boolean	true	Show stack traces for failed tests.
includeSuiteFailure	boolean	false	Show detailed errors for entire failed test suites.
includeObsoleteSnapshots	boolean	false	Show obsolete snapshot names.
logo	string	null	Path to an image file to display in the report header.
outputPath	string	./test-report.html	Full path for the output report file (must end in .html).
pageTitle	string	"Test Report"	Title of the document and top-level heading.
sort	string	null	Sort test results by a specific method. Available values: ➤ status → Sorts by test status (pending → failed → passed). ➤ status:{custom-order} → Custom status order (e.g., "status:failed,passed,pending"). ➤ executionasc → Sorts by execution time ascending. ➤ executiondesc → Sorts by execution time descending. ➤ titleasc → Sorts by suite filename/test name ascending. ➤ titledesc → Sorts by suite filename/test name descending.
statusIgnoreFilter	string	null	Comma-separated list of statuses to exclude: "passed", "pending", "failed".
styleOverridePath	string	null	Path to a CSS file to override default styles.
useCssFile	boolean	false	Link to the CSS file instead of inlining styles.

Continuous Integration

All the configuration options provided in the table above are available via environment variables and follows the pattern of snake case in uppercase prepended with JEST_HTML_REPORTER_

Example: customScriptPath -> JEST_HTML_REPORTER_CUSTOM_SCRIPT_PATH

*NOTE: Environment variables will take precedence over configurations set in jesthtmlreporter.config.json and package.json*

CI Example

Here is an example of dynamically naming your output file and test report title to match your current branch that one might see in a automated deployment pipeline before running their tests.

export BRANCH_NAME=`git symbolic-ref HEAD 2>/dev/null | cut -d"/" -f 3`
export JEST_HTML_REPORTER_OUTPUT_PATH=/home/username/jest-test-output/test-reports/"$BRANCH_NAME".html
export JEST_HTML_REPORTER_PAGE_TITLE="$BRANCH_NAME"\ Test\ Report