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.
Documentation »





This plugin was inspired by karma-htmlfile-reporter

---

Installation

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

Usage

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

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

Then when 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.

Alternative usage with package.json

Although jest.config.js is specifically created for configuring Jest (and not this plugin), it is possible to configure Jest from within package.json by adding the following as a new line:

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

Node Compatibility

This plugin is compatible with Node version ^4.8.3

Configuration

The configurations are done directly within your package.json file

pageTitle (string)

[Default: "Test Suite"]

The title of the document. This string will also be outputted on the top of the page.

outputPath (string)

[Default: "./test-report.html"]

The path to where the plugin will output the HTML report. The path must include the filename and end with .html

includeFailureMsg (boolean)

[Default: false]

If this setting is set to true, this will output the detailed failure message for each failed test.

styleOverridePath (string)

[Default: null]

The path to a file containing CSS styles that will override the default styling of the report. The plugin will search for the file from the root directory, therefore there is no need to prepend the string with ./ or ../

Have a look at the default styling (located within this repository at src/style.js) for a reference to the IDs and classes available for styling.

Example configuration (package.json)

{
	...
	"jest-html-reporter": {
		"pageTitle": "Your test suite",
		"outputPath": "test-report/index.html",
		"includeFailureMsg": false,
		"styleOverridePath": "src/teststyle.css"
	}
}

Continuous Integration

The output path and report title can be set with an environment variable for dynamic file saving paths in different environments.

Values in package.json will take precedence over environment variables.

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 TEST_REPORT_PATH=/home/username/jest-test-output/test-reports/"$BRANCH_NAME".html
export TEST_REPORT_TITLE="$BRANCH_NAME"\ Test\ Report