Pine Runner Jest Reporter

A custom Jest reporter that generates clean HTML and Markdown reports with support for test branch URLs.

Features

• Clean, readable HTML and Markdown test reports
• Console log capture and display
• Test Branch URL support - Display clickable links to test branches or related resources
• Color-coded test results (passed, failed, pending)
• Collapsible console logs
• Test duration tracking
• Dual output: HTML and Markdown formats

Installation

npm install --save-dev @sky-uk-ott/vpt-js-pine-runner-jest-reporter

pnpm i -D @sky-uk-ott/vpt-js-pine-runner-jest-reporter

Configuration

Add to your Jest configuration:

// jest.config.ts
export default {
  reporters: [
    'default',
    [
      '@sky-uk-ott/vpt-js-pine-runner-jest-reporter',
      {
        filename: 'test-report.html', // Optional, defaults to 'report.html'
        markdownFilename: 'test-report.md', // Optional, defaults to 'report.md'
      },
    ],
  ],
};

The reporter will generate both HTML and Markdown reports:

• HTML Report: Interactive report with collapsible sections and styled output
• Markdown Report: GitHub-friendly report with tables and emoji indicators

Adding Test Branch URLs

You can add test branch URLs to individual tests that will be displayed in both HTML and Markdown reports.

Basic Usage

Use console.log with the [TEST_BRANCH_URL] marker in the format testName::url:

test('my test with test branch URL', async () => {
  const testBranchUrl = 'https://example.com/test-branch/12345';

  // Log the test name and URL - this will be extracted and displayed in the report
  console.log(`[TEST_BRANCH_URL] ${expect.getState().currentTestName}::${testBranchUrl}`);

  // ... rest of your test code
  expect(true).toBe(true);
});

Example with Dynamic URL

test('test with dynamic test branch URL', async () => {
  const testRunId = 'abc-123-def-456';
  const environment = 'staging';

  // Construct the URL dynamically
  const testBranchUrl = `https://my-service.com/${environment}/runs/${testRunId}`;

  // Log with test name and URL
  console.log(`[TEST_BRANCH_URL] ${expect.getState().currentTestName}::${testBranchUrl}`);

  // Your test logic here
  const result = await myTestFunction();
  expect(result).toBeDefined();
});

Example with Query Parameters

test('test with detailed test branch URL', () => {
  const testId = Date.now();
  const testBranchUrl = `https://dashboard.example.com/tests?id=${testId}&view=details&tab=logs`;

  // Log with test name and URL
  console.log(`[TEST_BRANCH_URL] ${expect.getState().currentTestName}::${testBranchUrl}`);

  // Test code
  expect(true).toBe(true);
});

Example in a Describe Block

describe('My Test Suite', () => {
  test('test within suite', () => {
    const testBranchUrl = 'https://monitoring.example.com/suite/my-test-suite';

    // The test name will include ancestor titles: "My Test Suite > test within suite"
    console.log(`[TEST_BRANCH_URL] ${expect.getState().currentTestName}::${testBranchUrl}`);

    expect(2 + 2).toBe(4);
  });
});

How It Works

1. The reporter scans console logs for the [TEST_BRANCH_URL] marker
2. When found, it extracts the URL and removes it from the regular console logs
3. The URL is displayed as a clickable link in the HTML report, right below the test file path
4. The link opens in a new tab when clicked

Visual Appearance

HTML Report

The test branch URL will appear in a blue-highlighted box with:

• A "Test Branch URL:" label
• A clickable link to the URL
• Styled to stand out from other test information

Markdown Report

The test branch URL will appear as:

• A 🔗 emoji followed by "Test Branch URL:"
• A clickable markdown link
• Positioned right below the suite file path

Example markdown output:

### ✅ Suite 1: `src/my-test.spec.ts`

🔗 **Test Branch URL:** [https://example.com/branch/123](https://example.com/branch/123)

Notes

• Only one test branch URL per test file is supported (the last one will be used if multiple are logged)
• The URL must be on the same line as the [TEST_BRANCH_URL] marker
• The marker is case-sensitive: use [TEST_BRANCH_URL] exactly as shown
• Test branch URLs are automatically filtered out from the regular console log display
• Both HTML and Markdown reports will include the test branch URL