IT 技書の森

Vitest

Vite ベースの高速なテストフレームワークで、Jest 互換の API を提供する

テストフロントエンド

Vitest とは

Vitest は、Vite のビルドパイプラインを活用した高速なテストフレームワークで、Jest 互換の API (describe, it, expect) を提供する。ESM ネイティブ対応、TypeScript のゼロコンフィグサポート、HMR によるウォッチモードの高速化が特徴だ。2022 年にリリースされ、Jest からの移行先として急速に普及している。

Jest との比較

観点 Vitest Jest
速度 高速 (Vite の変換パイプライン) 中程度 (Babel/ts-jest)
ESM 対応 ネイティブ 実験的 (--experimental-vm-modules)
TypeScript ゼロコンフィグ ts-jest or @swc/jest が必要
設定 vite.config.ts を共有 jest.config.ts が別途必要
ウォッチモード HMR で変更ファイルのみ再実行 ファイル単位で再実行
API 互換性 Jest 互換 -

基本的な使い方

// sum.ts
export function sum(a: number, b: number): number {
  return a + b;
}

// sum.test.ts
import { describe, it, expect } from 'vitest';
import { sum } from './sum';

describe('sum', () => {
  it('adds two numbers', () => {
    expect(sum(1, 2)).toBe(3);
  });

  it('handles negative numbers', () => {
    expect(sum(-1, 1)).toBe(0);
  });
});

npx vitest        # ウォッチモード (開発中)
npx vitest run    # 1 回実行 (CI)
npx vitest --coverage  # カバレッジ付き

モック

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

// 関数のモック
const mockFn = vi.fn().mockReturnValue(42);

// モジュールのモック
vi.mock('./db', () => ({
  findUser: vi.fn().mockResolvedValue({ id: '1', name: 'Alice' }),
}));

// タイマーのモック
vi.useFakeTimers();
vi.advanceTimersByTime(1000);
vi.useRealTimers();

vitest.config.ts

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    globals: true,           // describe, it, expect をグローバルに
    environment: 'node',     // 'node' | 'jsdom' | 'happy-dom'
    coverage: {
      provider: 'v8',
      reporter: ['text', 'html'],
      thresholds: { lines: 80, branches: 80 },
    },
    include: ['src/**/*.test.ts'],
  },
});

Jest からの移行

API が Jest 互換のため、移行は比較的容易だ。

  1. jest → vitest に依存を変更
  2. jest.config.ts → vitest.config.ts に設定を移行
  3. jest.fn() → vi.fn() に置換
  4. jest.mock() → vi.mock() に置換

ほとんどのテストコードはそのまま動作する。

Vitest を扱う関連書籍も多い。

関連用語