tessl/npm-vitest--ui

Web-based user interface for the Vitest testing framework with real-time test execution visualization and HTML reporting capabilities

—

Pending

Overview

Eval results

Files

HTML Reporter

Name: tessl/npm-vitest--ui
Author: tessl

The HTML Reporter generates comprehensive standalone HTML reports from Vitest test results, providing an interactive interface for viewing test outcomes, coverage data, and detailed error information.

Core Import

import HTMLReporter from "@vitest/ui/reporter";

API

HTMLReporter Class

Main class for generating HTML test reports.

declare class HTMLReporter implements Reporter {
  constructor(options: HTMLOptions);
  onInit(ctx: Vitest): Promise<void>;
  onFinished(): Promise<void>;
  processAttachment(attachment: TestAttachment): Promise<void>;
  writeReport(report: string): Promise<void>;
}

Constructor Parameters:

options: HTMLOptions - Configuration options for the HTML reporter

Methods:

onInit(ctx: Vitest): Promise<void> - Initialize the reporter with Vitest context
onFinished(): Promise<void> - Generate the final HTML report after tests complete
processAttachment(attachment: TestAttachment): Promise<void> - Process and store test attachments
writeReport(report: string): Promise<void> - Write the HTML report to the file system

Usage Examples

Basic Configuration

import { defineConfig } from 'vitest/config';
import HTMLReporter from '@vitest/ui/reporter';

export default defineConfig({
  test: {
    reporters: [
      new HTMLReporter({ outputFile: 'test-results/index.html' })
    ],
  },
});

Multiple Output Formats

import { defineConfig } from 'vitest/config';
import HTMLReporter from '@vitest/ui/reporter';

export default defineConfig({
  test: {
    reporters: [
      'default', // Console reporter
      new HTMLReporter({ outputFile: 'reports/test-results.html' }),
    ],
  },
});

Custom Output Directory

export default defineConfig({
  test: {
    reporters: [
      new HTMLReporter({ 
        outputFile: 'dist/reports/vitest-report.html' 
      })
    ],
  },
});

Report Generation Process

The HTML reporter follows this workflow:

Initialization: Sets up output directories and file paths
Data Collection: Gathers test results, module graphs, and source code
Attachment Processing: Handles test attachments (images, files, etc.)
Report Serialization: Converts test data to compressed JSON format
Asset Copying: Copies UI client files to the report directory
HTML Generation: Creates the final HTML file with embedded metadata

Report Structure

Generated reports include:

Interactive Test Tree: Hierarchical view of test files and suites
Test Results: Pass/fail status, timing information, and error details
Source Code: Syntax-highlighted source code for failed tests
Module Graphs: Dependency relationships between test files
Attachments: Images, screenshots, and other test artifacts
Coverage Integration: Links to HTML coverage reports when available

Attachment Handling

The reporter automatically processes test attachments:

// External URLs are preserved as-is
if (attachment.path.startsWith('http://') || attachment.path.startsWith('https://')) {
  attachment.body = undefined;
  return;
}

// Local files are copied to the report directory
const buffer = await readFile(attachment.path);
const hash = crypto.createHash('sha1').update(buffer).digest('hex');
const filename = hash + extname(attachment.path);
await writeFile(resolve(this.reporterDir, 'data', filename), buffer);

Types

// HTMLOptions is imported from 'vitest/node'
interface HTMLOptions {
  outputFile?: string | Partial<Record<string, string>>;
}

interface HTMLReportData {
  paths: string[];
  files: RunnerTestFile[];
  config: SerializedConfig;
  projects: string[];
  moduleGraph: Record<string, Record<string, ModuleGraphData>>;
  unhandledErrors: unknown[];
  sources: Record<string, string>;
}

interface TestAttachment {
  path?: string;
  body?: string | Buffer;
  contentType?: string;
}

Install with Tessl CLI