Configuration

Introduction

The way to configure this plugin depends on how it is invoked by Jest - either it is run as a "custom reporter" using the reporters-option, or as a testResultsProcessor. The first mentioned method has all its configuration residing in the same file (jest.config.js), while the latter requires a separate configuration file. Please refer to the examples below for further information.

Continuous Integration

The plugin may also be configured using environment variables for dynamic file saving paths in different environments. You can find an example here.

List of Configuration Options

All of the following configuration options are optional. NOTE: The environment variables will take precedence over configurations set in the configuration files

pageTitle (string)

JEST_HTML_REPORTER_PAGE_TITLE

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

Default: "Test Suite"

outputPath (string)

JEST_HTML_REPORTER_OUTPUT_PATH

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

Default: "./test-report.html"

includeFailureMsg (boolean)

JEST_HTML_REPORTER_INCLUDE_FAILURE_MSG

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

Default: false

includeConsoleLog (boolean)

JEST_HTML_REPORTER_INCLUDE_CONSOLE_LOG

If set to true, this will output all triggered console logs for each test suite. Note: Jest needs to be run with --verbose=false for this to work.

Default: false

includeSuiteFailure (boolean)

JEST_HTML_REPORTER_INCLUDE_SUITE_FAILURE

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

Default: false

styleOverridePath (string)

JEST_HTML_REPORTER_STYLE_OVERRIDE_PATH

The path to a file containing CSS styles that should override the default styling. The plugin will search for the styleOverridePath from the root directory, therefore there is no need to prepend the string with ./ or ../. Have a look at the defaultTheme for a reference of the elements available for styling.

Default: null

useCssFile (boolean)

JEST_HTML_REPORTER_USE_CSS_FILE

If set to true, the CSS styles will link in the current theme's .css file instead of inlining its content on the page.

Default: false

customScriptPath (string)

JEST_HTML_REPORTER_CUSTOM_SCRIPT_PATH

Path to a javascript file that should be injected into the test report.

Default: null

theme (string)

JEST_HTML_REPORTER_THEME

The name of the reporter themes to use when rendering the report. You can find the available themes in the documentation

Default: "defaultTheme"

logo (string)

JEST_HTML_REPORTER_LOGO

Path to a logo that will be included in the header of the report

Default: null

executionTimeWarningThreshold (number)

JEST_HTML_REPORTER_EXECUTION_TIME_WARNING_THRESHOLD

The 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.

Default: 5

dateFormat (string)

JEST_HTML_REPORTER_DATE_FORMAT

The format in which date/time should be formatted in the test report. Have a look in the documentation for the available date format variables.

Default: "yyyy-mm-dd HH:MM:ss"

sort (string)

JEST_HTML_REPORTER_SORT

Sorts the test results using the given method. Available sorting methods can be found in the documentation.

Default: "default"

statusIgnoreFilter (string)

JEST_HTML_REPORTER_STATUS_FILTER

A comma-separated string of the test result statuses that should be ignored when rendering the report. Available statuses are: "passed", "pending", "failed"

Default: null

boilerplate (string)

JEST_HTML_REPORTER_BOILERPLATE

The 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 results

Default: null

Configuration Examples

As a custom reporter

Add your configuration to jest.config.js in the following manner:

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

As a testResultProcessor

When running as a testResultProcessor, the configuration needs to be put in a separate file named jesthtmlreporter.config.json placed within the root folder of the project:

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

It is also possible to configure the plugin with package.json (although this is not recommended). Add an entry named "jest-html-reporter" to your package.json like so:

{
	...
	"jest-html-reporter": {
		"pageTitle": "Your test suite",
		"outputPath": "test-report.html",
		"includeFailureMsg": true
	}
}

With Continuous Integration (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 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