Jest can output test results in various formats, but its default is a simple CLI output. To get more detailed, shareable reports, you’ll want to use a reporter that generates HTML.
This is what a typical Jest HTML report looks like in the wild.
<!DOCTYPE html>
<html>
<head>
<title>Jest Test Results</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { font-family: sans-serif; margin: 20px; }
.summary { margin-bottom: 20px; padding: 10px; border: 1px solid #ccc; }
.summary span { margin-right: 20px; }
.test-suite { margin-bottom: 20px; border: 1px solid #eee; }
.test-suite h3 { background-color: #f0f0f0; padding: 10px; margin: 0; }
.test-suite ul { list-style: none; padding: 10px; }
.test-suite li { margin-bottom: 5px; }
.passing { color: green; }
.failing { color: red; }
.pending { color: gray; }
.skipped { color: orange; }
</style>
</head>
<body>
<h1>Jest Test Results</h1>
<div class="summary">
<span>Total Tests: 5</span>
<span>Passed: 3</span>
<span>Failed: 1</span>
<span>Pending: 1</span>
</div>
<div class="test-suite">
<h3>User Authentication Suite</h3>
<ul>
<li class="passing">Login with valid credentials</li>
<li class="passing">Login with invalid password</li>
<li class="failing">Logout functionality</li>
<li class="pending">Forgot password link</li>
</ul>
</div>
<div class="test-suite">
<h3>API Integration Suite</h3>
<ul>
<li class="passing">Fetch user data</li>
<li class="skipped">Admin-only endpoint</li>
</ul>
</div>
</body>
</html>
The fundamental problem Jest’s default reporter solves is providing immediate, human-readable feedback during development. However, when you need to share test results, track regressions over time, or integrate with CI/CD pipelines, raw CLI output is insufficient. HTML reports offer a structured, visual, and often more detailed representation of your test suite’s health.
To achieve this, you’ll typically use a third-party Jest reporter package. The most popular and well-maintained option is jest-html-reporter.
First, install it:
npm install --save-dev jest-html-reporter
or
yarn add --dev jest-html-reporter
Next, you need to configure Jest to use this reporter. You can do this in your jest.config.js (or jest.config.ts) file. If you don’t have one, create it in your project’s root directory.
Here’s a basic configuration:
// jest.config.js
module.exports = {
// ... other Jest configurations
reporters: [
'default', // Keeps the default CLI reporter
['jest-html-reporter', {
pageTitle: 'My Project Test Report',
outputPath: './reports/my-test-report.html',
includeFailureMessages: true,
includeConsoleLogOutput: true,
enableScreenshot: true, // Requires jest-image-snapshot if you want actual screenshots
theme: 'dark' // or 'light'
}]
],
// ...
};
Let’s break down the key parts of this configuration:
-
reporters: This is an array where you list the reporters Jest should use.'default': This is important if you still want to see the familiar output in your terminal as tests run.['jest-html-reporter', { /* options */ }]: This is how you specify a custom reporter and its options. The first element is the package name, and the second is an object containing configuration for that reporter.
-
jest-html-reporteroptions:pageTitle: The title that appears in the browser tab when you open the generated HTML report.outputPath: The absolute or relative path where the HTML report file will be saved. In this example, it will be in areportsdirectory at the root of your project.includeFailureMessages: If set totrue, detailed error messages and stack traces for failing tests will be included in the report. This is crucial for debugging.includeConsoleLogOutput: Iftrue, anyconsole.log,console.warn, etc., statements within your tests will be captured and displayed in the report. This can be invaluable for understanding test execution flow.enableScreenshot: If set totrue, the reporter will attempt to generate screenshots for failing tests. Note: This often requires additional setup with a library likejest-image-snapshotand might not work out-of-the-box without it.theme: Allows you to switch between a'dark'and'light'visual theme for the report.
After setting up your jest.config.js, run your Jest tests as you normally would:
npm test
or
yarn test
Jest will execute your tests, and if everything is configured correctly, you’ll find an HTML file at the outputPath you specified (e.g., ./reports/my-test-report.html). Open this file in your web browser to view the detailed test results.
The jest-html-reporter is highly configurable, offering options for filtering tests, custom styling, and more. You can explore its full range of options in its official documentation on npm or GitHub.
The most surprising thing about generating HTML reports is that you’re not limited to just reporting on test outcomes. With certain reporters and configurations, you can embed actual DOM snapshots, console logs, and even screenshots of your UI components at the time of the test failure. This transforms the report from a simple pass/fail ledger into a rich debugging artifact.
When you run Jest with the jest-html-reporter configured, it intercepts the test results emitted by Jest’s core runner. It then processes these results, categorizing them by test suite and individual test case. For each test, it notes its status (passed, failed, pending, skipped), execution time, and any associated error messages or console output. This information is then systematically injected into an HTML template, which the reporter generates and saves to the specified file path. The structure is designed to be easily navigable in a browser, with collapsible sections for test suites and detailed views for individual test failures.
The next step in enhancing your test reporting is to integrate these HTML reports into your Continuous Integration (CI) pipeline, allowing for automated generation and archival of results on every commit or build.