vitest

Vitest - Modern TypeScript Testing

Overview

Vitest is a next-generation test framework powered by Vite, designed for modern TypeScript/JavaScript projects. It provides blazing-fast test execution through HMR-based test running, native ESM support, and first-class TypeScript integration.

Key Features:

• ⚡ Vite-native: Instant HMR-based test execution (10-100x faster than Jest)
• 🎯 TypeScript-first: Built-in TypeScript support, no configuration needed
• 🔄 ESM-native: Native ES modules, async/await, top-level await
• 🧪 Jest-compatible: Compatible API for easy migration
• 📸 Snapshot testing: Built-in snapshot support
• 🎨 Component testing: React Testing Library, Vue Test Utils integration
• 📊 Coverage: Built-in v8/c8 coverage (faster than Istanbul)
• 🌐 UI mode: Beautiful web UI for test debugging

Installation:

npm install -D vitest
# TypeScript types (usually auto-detected)
npm install -D @vitest/ui  # Optional: UI mode

Basic Setup

1. Configure Vitest

vitest.config.ts:

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    globals: true,           // Use describe/it/expect globally
    environment: 'node',     // or 'jsdom' for DOM testing
    coverage: {
      provider: 'v8',        // or 'istanbul'
      reporter: ['text', 'json', 'html'],
      exclude: [
        'node_modules/',
        'dist/',
        '**/*.test.ts',
        '**/*.spec.ts',
      ],
    },
    include: ['**/*.{test,spec}.{ts,tsx}'],
    exclude: ['node_modules', 'dist', '.idea', '.git', '.cache'],
  },
});

2. TypeScript Configuration

tsconfig.json:

{
  "compilerOptions": {
    "types": ["vitest/globals"]  // For global describe/it/expect
  }
}

Alternative (without globals):

import { describe, it, expect } from 'vitest';

3. Package.json Scripts

{
  "scripts": {
    "test": "vitest run",              // CI mode (single run)
    "test:watch": "vitest",            // Watch mode (default)
    "test:ui": "vitest --ui",          // UI mode
    "test:coverage": "vitest run --coverage"
  }
}