Enhance Jest Test Output with Color

Jest is a powerful testing framework, but by default, test output can be a bit bland. Adding color to your Jest test results can significantly improve readability and make it easier to quickly identify passing, failing, and pending tests. This challenge will guide you through implementing colored output for your Jest tests.

Problem Description

Your task is to create a Jest reporter that outputs test results using ANSI escape codes for color. This reporter should distinguish between:

• Passing tests: Typically shown in green.
• Failing tests: Typically shown in red.
• Pending tests: Typically shown in yellow or blue.
• Test suite names: Perhaps a different color to separate suites.
• Error messages/stack traces: These should remain readable, possibly with distinct styling.

You will need to create a custom Jest reporter that leverages ANSI escape codes to apply these colors. The reporter should be configurable and integrate seamlessly with Jest.

Examples

Example 1: Simple Passing Test

Let's imagine a very basic test file:

__tests__/example.test.ts

describe('My first test suite', () => {
  test('should pass', () => {
    expect(true).toBe(true);
  });
});

Expected Output (Conceptual, with colors):

  My first test suite
    ✓ should pass (1ms)

Test Suites: 1 passed, 1 total
Tests:      1 passed, 1 total

(Imagine "My first test suite" and "✓ should pass" are green.)

Example 2: Simple Failing Test

__tests__/example.test.ts

describe('My first test suite', () => {
  test('should fail', () => {
    expect(true).toBe(false);
  });
});

Expected Output (Conceptual, with colors):

  My first test suite
    × should fail (1ms)

      expect(true).toBe(false)

      Expected: false
      Received: true

Test Suites: 1 failed, 1 total
Tests:      1 failed, 1 total

(Imagine "My first test suite" and "× should fail" are red. The error message itself might have a different color or styling for clarity.)

Example 3: Mix of Passing and Pending

__tests__/mixed.test.ts

describe('Mixed tests', () => {
  test('this one passes', () => {
    expect(1 + 1).toBe(2);
  });

  test.skip('this one is pending', () => {
    expect(false).toBe(true); // This line will not be executed
  });
});

Expected Output (Conceptual, with colors):

  Mixed tests
    ✓ this one passes (1ms)
    - this one is pending (0ms)

Test Suites: 1 passed, 1 total
Tests:      1 passed, 1 pending, 2 total

(Imagine "Mixed tests" and "✓ this one passes" are green. "this one is pending" is yellow/blue. The hyphen ✓ indicates a passing test, and - indicates a pending test.)

Constraints

• The solution must be written in TypeScript.
• You should create a custom Jest reporter.
• The reporter must use ANSI escape codes for coloring.
• The reporter should handle passing, failing, and pending tests.
• The reporter should be able to be configured in jest.config.js.
• Performance impact of the reporter should be minimal.

Notes

• You'll need to understand Jest's custom reporter API. Refer to the Jest documentation for details on how to create a custom reporter.
• ANSI escape codes for colors are sequences of characters that, when printed to a compatible terminal, change text formatting. For example, \x1b[32m typically sets text to green.
• Consider using a small helper function to manage the ANSI escape codes for different colors to keep your reporter code clean.
• You don't need to implement complex test result summarization beyond the basic counts. The primary focus is on coloring individual test results and suite names.
• Think about how to get the actual test status (passed, failed, pending) and how to associate that with the output string.