Socket
Socket
Sign inDemoInstall

jest-html-reporter

Package Overview
Dependencies
4
Maintainers
1
Versions
69
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

jest-html-reporter


Version published
Weekly downloads
204K
decreased by-1.73%
Maintainers
1
Install size
525 kB
Created
Weekly downloads
 

Package description

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

Readme

Source

jest-html-reporter

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





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.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. To read more about these, please refer to the documentation.

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 be placed within a new file named jesthtmlreporter.config.json residing in the root folder. More information about this can be found in the documentation.

Node Compatibility

This plugin is compatible with Node version ^4.8.3


Configuration

Please note that all configuration properties are optional.

PropertyTypeDescriptionDefault
pageTitleSTRINGThe title of the document. This string will also be outputted on the top of the page."Test Suite"
outputPathSTRINGThe path to where the plugin will output the HTML report. The path must include the filename and end with .html"./test-report.html"
includeFailureMsgBOOLEANIf this setting is set to true, this will output the detailed failure message for each failed test.false
includeConsoleLogBOOLEANIf set to true, this will output all triggered console logs for each test suite.false
styleOverridePathSTRINGThe path to a file containing CSS styles that should override the default styling.*null
useCssFileBOOLEANIf set to true, the CSS styles will link in the current theme's .css file instead of inlining its content on the pagefalse
customScriptPathSTRINGPath to a javascript file that should be injected into the test reportnull
themeSTRINGThe name of the reporter themes to use when rendering the report. You can find the available themes in the documentation"defaultTheme"
logoSTRINGPath to a logo that will be included in the header of the reportnull
executionTimeWarningThresholdNUMBERThe threshold for test execution time (in seconds) in each test suite that will render a warning on the report page. 5 seconds is the default timeout in Jest.5
dateFormatSTRINGThe format in which date/time should be formatted in the test report. Have a look in the documentation for the available date format variables."yyyy-mm-dd HH:MM:ss"
sortSTRINGSorts the test results using the given method. Available sorting methods can be found in the documentation."default"
statusIgnoreFilterSTRINGA comma-separated string of the test result statuses that should be ignored when rendering the report. Available statuses are: "passed", "pending", "failed"null
boilerplateSTRINGThe path to a boilerplate file that should be used to render the body of the test results into. {jesthtmlreporter-content} within the boilerplate will be replaced with the test resultsnull

*The plugin will search for the styleOverridePath from the root directory, therefore there is no need to prepend the string with ./ or ../ - You can read more about the themes in the documentation.


Continuous Integration

Configuration may also be performed with environment variables for dynamic file saving paths in different environments. NOTE: Environment variables will take precedence over configurations set in jesthtmlreporter.config.json and package.json

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

Configuration Environment Variables

The environment variables reflect the configuration options available in JSON format. Please read the documentation for more information on these variables.

Keywords

FAQs

Last updated on 02 Sep 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc