Crafting a Custom HTML Reporter for Jest Tests

Jest, a popular JavaScript testing framework, provides built-in reporters for test results. However, for more visual or detailed reporting needs, creating a custom HTML reporter can be highly beneficial. This challenge tasks you with building a custom reporter for Jest that outputs test results in a well-structured HTML format.

Problem Description

Your goal is to develop a Jest reporter that generates an HTML file summarizing the test suite's execution. This HTML report should provide a clear overview of test outcomes, including passed, failed, and skipped tests.

Key Requirements:

• HTML Output: The reporter must generate a single HTML file.
• Summary Statistics: The report should display the total number of tests, passed tests, failed tests, and skipped tests.
• Test Suite Breakdown: Organize tests by their respective describe blocks.
• Individual Test Results: For each test, clearly indicate whether it passed, failed, or was skipped.
• Failure Details: For failed tests, display the test name, error message, and stack trace.
• Styling: The HTML should be reasonably styled for readability (e.g., using basic CSS).
• Jest Reporter Interface: Implement the standard Jest reporter interface.

Expected Behavior:

When Jest runs with your custom reporter, it should produce an index.html file in a designated output directory (e.g., reports/). This file should be viewable in a web browser and accurately reflect the outcome of the test run.

Edge Cases:

• Tests with no describe blocks.
• Empty test suites.
• Tests that throw synchronous errors.
• Tests that throw asynchronous errors (promises).

Examples

Example 1: A simple passing test suite.

Input:
A Jest test file like:
```typescript
describe('Math operations', () => {
  test('should add two numbers', () => {
    expect(2 + 2).toBe(4);
  });
});

Output: An index.html file (content will be HTML, not code). The HTML would show:

• Total Tests: 1
• Passed: 1
• Failed: 0
• Skipped: 0
• A section for "Math operations" with the test "should add two numbers" marked as "PASSED".

Example 2: A test suite with failures.

Input:
A Jest test file like:
```typescript
describe('String manipulation', () => {
  test('should concatenate strings', () => {
    expect('hello' + ' ' + 'world').toBe('hello world');
  });
  test('should reverse a string', () => {
    expect('abc').toBe('cba'); // This will fail
  });
});

Output: An index.html file. The HTML would show:

• Total Tests: 2
• Passed: 1
• Failed: 1
• Skipped: 0
• A section for "String manipulation" with:
  • "should concatenate strings" marked as "PASSED".
  • "should reverse a string" marked as "FAILED", with details of the failure (e.g., "Expected 'abc' to be 'cba'").

Example 3: Handling skipped tests.

Input:
A Jest test file like:
```typescript
describe('Array operations', () => {
  test.skip('should sort an array', () => {
    expect([3, 1, 2]).toEqual([1, 2, 3]);
  });
  test('should find an element', () => {
    expect([1, 2, 3].includes(2)).toBe(true);
  });
});

Output: An index.html file. The HTML would show:

• Total Tests: 2
• Passed: 1
• Failed: 0
• Skipped: 1
• A section for "Array operations" with:
  • "should sort an array" marked as "SKIPPED".
  • "should find an element" marked as "PASSED".

Constraints

• The reporter should be implemented in TypeScript.
• The generated HTML file should be valid HTML5.
• The reporter should be able to handle a moderate number of tests (up to 1000) without significant performance degradation in report generation.
• Jest configuration will be provided to specify the output directory for the report.

Notes

• Familiarize yourself with the Jest Reporter API: ReporterOnRunStart, ReporterOnTestResult, ReporterOnRunComplete, etc.
• You'll need to decide how to structure your HTML to represent the nested nature of describe blocks.
• Consider using a simple templating approach or string concatenation to build the HTML.
• The exact styling is up to you, but aim for clarity and ease of understanding.
• You'll need to set up a Jest configuration file (jest.config.js) to enable your custom reporter.