Vitest テスティング

Vite によって駆動された高速テストフレームワーク Vitest を使用した JavaScript/TypeScript プロジェクトのテストに関するエキスパート知識です。

クイックスタート

インストール

# Bun を使用（推奨）
bun add -d vitest

# npm を使用
npm install -D vitest

設定

// vitest.config.ts
import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    globals: true,
    environment: 'node', // or 'jsdom'
    coverage: {
      provider: 'v8',
      reporter: ['text', 'json', 'html'],
      thresholds: { lines: 80, functions: 80, branches: 80 },
    },
    include: ['**/*.{test,spec}.{js,ts,jsx,tsx}'],
  },
})

テストの実行

# すべてのテストを実行（Bun を推奨）
bun test

# ウォッチモード（デフォルト）
bun test --watch

# 1 回実行（CI モード）
bun test --run

# カバレッジ付き
bun test --coverage

# 特定のファイル
bun test src/utils/math.test.ts

# パターンマッチング
bun test --grep="calculates sum"

# UI モード（対話的）
bun test --ui

# 詳細な出力
bun test --reporter=verbose

テストの記述

基本的な構造

import { describe, it, expect, beforeEach, afterEach } from 'vitest'
import { add, subtract } from './math'

describe('Math utilities', () => {
  beforeEach(() => {
    // Setup before each test
  })

  it('adds two numbers correctly', () => {
    expect(add(2, 3)).toBe(5)
  })

  it('subtracts two numbers correctly', () => {
    expect(subtract(5, 3)).toBe(2)
  })
})

パラメータ化されたテスト

describe.each([
  { input: 2, expected: 4 },
  { input: 3, expected: 9 },
])('square function', ({ input, expected }) => {
  it(`squares ${input} to ${expected}`, () => {
    expect(square(input)).toBe(expected)
  })
})

アサーション

// 等値性
expect(value).toBe(expected)
expect(value).toEqual(expected)

// 真偽値
expect(value).toBeTruthy()
expect(value).toBeNull()
expect(value).toBeDefined()

// 数値
expect(number).toBeGreaterThan(3)
expect(number).toBeCloseTo(0.3, 1)

// 文字列と配列
expect(string).toMatch(/pattern/)
expect(array).toContain(item)

// オブジェクト
expect(object).toHaveProperty('key')
expect(object).toMatchObject({ a: 1 })

// 例外
expect(() => throwError()).toThrow('message')

// Promise
await expect(promise).resolves.toBe(value)
await expect(promise).rejects.toThrow()

モッキング

関数のモック

import { vi } from 'vitest'

const mockFn = vi.fn()
mockFn.mockReturnValue(42)
mockFn.mockResolvedValue('async result')
mockFn.mockImplementation((x) => x * 2)

expect(mockFn).toHaveBeenCalled()
expect(mockFn).toHaveBeenCalledWith('arg')

モジュールのモック

vi.mock('./api', () => ({
  fetchUser: vi.fn(() => ({ id: 1, name: 'Test User' })),
}))

import { fetchUser } from './api'

beforeEach(() => {
  vi.clearAllMocks()
})

タイマー

beforeEach(() => vi.useFakeTimers())
afterEach(() => vi.restoreAllMocks())

it('advances timers', () => {
  const callback = vi.fn()
  setTimeout(callback, 1000)
  vi.advanceTimersByTime(1000)
  expect(callback).toHaveBeenCalledOnce()
})

it('mocks dates', () => {
  const date = new Date('2024-01-01')
  vi.setSystemTime(date)
  expect(Date.now()).toBe(date.getTime())
})

カバレッジ

# カバレッジレポートを生成
bun test --coverage

# HTML レポート
bun test --coverage --coverage.reporter=html
open coverage/index.html

# 閾値に対してチェック
bun test --coverage --coverage.thresholds.lines=90

インテグレーションテスト

import request from 'supertest'
import { app } from './app'

describe('API endpoints', () => {
  it('creates a user', async () => {
    const response = await request(app)
      .post('/api/users')
      .send({ name: 'John' })
      .expect(201)

    expect(response.body).toMatchObject({
      id: expect.any(Number),
      name: 'John',
    })
  })
})

ベストプラクティス

• ソースファイルごとに 1 つのテストファイル：math.ts → math.test.ts
• describe() ブロックで関連するテストをグループ化
• 説明的なテスト名を使用
• 外部依存関係のみをモック
• 独立した非同期テストには concurrent テストを使用
• 高価なフィクスチャは beforeAll() で共有
• 80%以上のカバレッジを目指しますが、100%を追い求めない

参照

• test-quality-analysis - テストの問題検出
• playwright-testing - E2E テスト
• mutation-testing - テスト効果の検証