@vitest/ui

@vitest/ui provides a web-based user interface for the Vitest testing framework, offering developers a visual and interactive way to run, monitor, and analyze their test suites. The package includes both a Vite plugin for development mode and an HTML reporter for generating standalone test reports.

Package Information

• Package Name: @vitest/ui
• Package Type: npm
• Language: TypeScript
• Installation: npm install @vitest/ui

Core Imports

import vitestUI from "@vitest/ui";

For the HTML reporter:

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

Basic Usage

Vite Plugin (Development Mode)

import { defineConfig } from 'vite';
import vitestUI from '@vitest/ui';

export default defineConfig({
  plugins: [
    vitestUI(vitestContext), // vitestContext is a Vitest instance
  ],
});

HTML Reporter (Build Mode)

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

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

Architecture

@vitest/ui is built around several key components:

• Vite Plugin: Serves the UI interface during development with real-time WebSocket communication
• HTML Reporter: Generates static HTML reports for CI/CD and offline viewing
• Client Application: Vue.js-based SPA that provides the actual UI interface
• WebSocket Client: Real-time communication layer for live test updates
• Explorer Tree: Hierarchical test result management and visualization

Capabilities

Vite Plugin Integration

Provides a Vite plugin that serves the Vitest UI during development, enabling real-time test monitoring and interaction through a web interface.

declare function vitestUI(ctx: Vitest): Plugin;

Vite Plugin

HTML Report Generation

Generates comprehensive HTML reports containing test results, coverage information, and interactive visualizations for offline viewing and CI/CD integration.

declare class HTMLReporter implements Reporter {
  constructor(options: HTMLOptions);
  onInit(ctx: Vitest): Promise<void>;
  onFinished(): Promise<void>;
}

HTML Reporter

Client-Side WebSocket API

Browser-based API for connecting to and controlling Vitest through WebSocket communication, including test execution, file management, and result viewing.

interface BrowserUI {
  setCurrentFileId(fileId: string): void;
  setIframeViewport(width: number, height: number): Promise<void>;
}

Client API

Types

interface WSMessage {
  type: string;
  data: any;
}

type RunState = 'idle' | 'running';

interface BrowserRunnerState {
  files: string[];
  config: SerializedConfig;
  type: 'orchestrator';
  provider: string;
  wrapModule: <T>(module: () => T) => T;
}

interface HTMLOptions {
  outputFile?: string | Partial<Record<string, string>>;
}

// External types from dependencies:
// - Vitest: from 'vitest/node'
// - Plugin: from 'vite'  
// - Reporter: from 'vitest/reporters'
// - SerializedConfig: from 'vitest'