Hone logo
Hone
Problems

Jest HTML Reporter: Generate a Custom HTML Report

Creating a custom HTML reporter for Jest allows for more visually appealing and informative test results than the default console output. This challenge asks you to build a Jest reporter that generates an HTML file summarizing test results, including pass/fail status, execution times, and potentially other relevant information. This is useful for teams who prefer a graphical representation of their test suite's health and for integrating test results into documentation or dashboards.

Problem Description

You need to create a Jest reporter that generates an HTML file containing a summary of the test results. The reporter should:

  1. Extend the JestReporter base class: Your reporter class should inherit from Jest's JestReporter class.
  2. Handle Test Events: The reporter must listen to and process the following Jest events:
    • testStart: Called before a test case starts.
    • testDone: Called after a test case completes (success or failure). This event provides the test case's title, status (passed, failed, skipped), and execution time.
    • suiteStart: Called before a test suite (describe block) starts.
    • suiteEnd: Called after a test suite ends.
  3. Generate HTML: Based on the received events, the reporter should dynamically generate an HTML file. The HTML should include:
    • A title indicating the test run.
    • A summary of the total tests run, passed, failed, and skipped.
    • A list of test suites, with each suite expandable/collapsible to show its individual test cases.
    • For each test case, display the title, status (passed/failed/skipped), and execution time. Failed tests should clearly display the error message.
  4. File Output: The reporter should write the generated HTML to a file specified by the user via a Jest configuration option (e.g., --reporter-html-file=report.html). If no file is specified, default to report.html in the project root.
  5. Asynchronous Operation: The HTML generation and file writing should be handled asynchronously to avoid blocking the Jest process.

Examples

Example 1:

Input: Jest run with a single passing test:
describe('My Suite', () => {
  it('should pass', () => {
    expect(true).toBe(true);
  });
});

Output: report.html (or specified file) containing:
<!DOCTYPE html>
<html>
<head>
  <title>Jest Report</title>
</head>
<body>
  <h1>Jest Report</h1>
  <p>Tests: 1, Passes: 1, Failures: 0, Skips: 0</p>
  <div>
    <h2>My Suite</h2>
    <ul>
      <li>should pass (Passed, 0.01s)</li>
    </ul>
  </div>
</body>
</html>

Explanation: A simple HTML report showing one passing test within a suite.

Example 2:

Input: Jest run with one passing and one failing test:
describe('My Suite', () => {
  it('should pass', () => {
    expect(true).toBe(true);
  });
  it('should fail', () => {
    expect(false).toBe(true);
  });
});

Output: report.html (or specified file) containing:
<!DOCTYPE html>
<html>
<head>
  <title>Jest Report</title>
</head>
<body>
  <h1>Jest Report</h1>
  <p>Tests: 2, Passes: 1, Failures: 1, Skips: 0</p>
  <div>
    <h2>My Suite</h2>
    <ul>
      <li>should pass (Passed, 0.01s)</li>
      <li>should fail (Failed, 0.02s) - Error: Expected true to be true.</li>
    </ul>
  </div>
</body>
</html>

Explanation: The report shows both a passing and a failing test, with the error message displayed for the failing test.

Example 3: (Edge Case - No tests run)

Input: Jest run with no tests defined.
Output: report.html (or specified file) containing:
<!DOCTYPE html>
<html>
<head>
  <title>Jest Report</title>
</head>
<body>
  <h1>Jest Report</h1>
  <p>Tests: 0, Passes: 0, Failures: 0, Skips: 0</p>
</body>
</html>

Explanation: Handles the case where no tests are run, displaying a report with zero tests.

Constraints

  • TypeScript: The solution must be written in TypeScript.
  • Jest API: You must use the Jest API correctly to listen for and process events.
  • HTML Generation: The generated HTML should be valid and reasonably well-formatted. While complex styling is not required, basic structure and readability are important.
  • File Writing: The file writing operation must be asynchronous.
  • Configuration: The reporter should respect the --reporter-html-file configuration option.
  • Performance: While not a primary concern, avoid excessively complex or inefficient HTML generation logic.

Notes

  • Consider using a templating library (e.g., Handlebars, EJS) to simplify HTML generation, but it's not strictly required.
  • You'll need to install the necessary Jest types: npm install --save-dev @types/jest
  • Think about how to handle different types of test failures (e.g., exceptions, assertion errors).
  • The HTML structure can be simplified for this challenge; focus on the core functionality of reporting test results.
  • Error handling is important. Gracefully handle cases where the file cannot be written.
  • Remember to export your reporter class so Jest can find it. You'll need to configure Jest to use your reporter.
Loading editor...
typescript