Vitest 設定

20.1.1. vitest.config.ts

プロジェクトルートに vitest.config.ts ファイルを作成し、以下の設定を基本として使用します。

import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],

  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },

  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./vitest.setup.ts'],
    include: ['src/**/*.{test,spec}.{ts,tsx}'],
    exclude: ['node_modules', 'dist', 'e2e'],
  },
})

• globals: true を設定すると、describe、it、expect などを import なしで使用できます。
• environment は jsdom または happy-dom のいずれかを指定します。
• setupFiles にグローバル設定ファイルのパスを指定します。
• include パターンは *.test.ts または *.spec.ts ファイルのみを対象とします。

---

20.1.2. テスト環境

jsdom と happy-dom のうち、プロジェクトの要件に合った環境を選択します。

項目	jsdom	happy-dom
実行速度	普通	高速（jsdom 比約 2〜3 倍）
DOM 互換性	高い（ブラウザ標準に近い）	普通（一部 API 未サポート）
コミュニティエコシステム	広い	成長中
推奨用途	精密な DOM 検証が必要な場合	高速なフィードバックが必要な場合

• DOM イベントバブリング、window.getComputedStyle など精密なブラウザ API テストが必要な場合は jsdom を使用します。
• 単純なレンダリング検証が中心のテストでは happy-dom を使用して実行速度を確保します。
• TQS 基準のデフォルト値は jsdom に指定します。

---

20.1.3. 設定ファイル

vitest.setup.ts ファイルでグローバルモック設定とテストユーティリティを初期化します。

// vitest.setup.ts
import { config } from '@vue/test-utils'

// グローバルコンポーネントスタブ設定
config.global.stubs = {
  RouterLink: true,
  RouterView: true,
}

// グローバルモック設定
vi.stubGlobal('matchMedia', vi.fn(() => ({
  matches: false,
  addListener: vi.fn(),
  removeListener: vi.fn(),
})))

// IntersectionObserver モック
vi.stubGlobal('IntersectionObserver', vi.fn(() => ({
  observe: vi.fn(),
  unobserve: vi.fn(),
  disconnect: vi.fn(),
})))

• @vue/test-utils の config.global を通じて、すべてのテストに共通で適用されるプラグイン、スタブ、モックを設定します。
• ブラウザ専用 API（matchMedia、IntersectionObserver など）はグローバルモックとして登録します。

---

20.1.4. 実行コマンド

package.json の scripts に以下のコマンドを登録します。

{
  "scripts": {
    "test": "vitest run",
    "test:watch": "vitest",
    "test:coverage": "vitest run --coverage",
    "test:ui": "vitest --ui"
  }
}

コマンド	説明
yarn test	全テストを 1 回実行します
yarn test:watch	ファイル変更検知時に関連テストを自動再実行します
yarn test:coverage	カバレッジレポートを含めてテストを実行します
yarn test:ui	Vitest UI をブラウザで実行します

• 開発中は yarn test:watch を常時実行して高速なフィードバックを確保しなければなりません。
• CI 環境では yarn test を使用して単一実行後に終了します。
• カバレッジ測定は yarn test:coverage で実行し、詳細基準は 20.4 節に従います。