Vitest Test Creator

🚀 クイックスタート

ユニットテスト（純粋な関数）

// src/utils/__tests__/sum.unit.test.ts
import { describe, it, expect } from 'vitest'
import { sum } from '../sum'

describe('sum', () => {
  it('2つの数を足す', () => {
    expect(sum(2, 3)).toBe(5)
  })
})

ブラウザテスト（Reactコンポーネント）

// src/components/__tests__/Button.browser.test.tsx
import { render, cleanup } from '@testing-library/react'
import { describe, it, expect, afterEach } from 'vitest'
import { Button } from '../Button'

describe('Button', () => {
  afterEach(() => cleanup())

  it('ボタンが表示される', () => {
    const { container } = render(<Button>Click</Button>)
    expect(container.querySelector('button')).toBeInTheDocument()
  })
})

テストタイプの詳細は file-layout.md を参照。

テスト実行コマンド

詳細は workflow.md を参照。

よくあるトラブル（TOP 3）

❌ jest-dom マッチャーが見つからない

エラー: Property 'toBeInTheDocument' does not exist

解決:

• •テストファイルが .browser.test.tsx 拡張子か確認
• •vitest.setup.ts に import '@testing-library/jest-dom/vitest' があるか確認

❌ screen.getByRole() で複数要素エラー

エラー: Found multiple elements with role "searchbox"

解決: container.querySelector() を使用するか、afterEach(() => cleanup()) を追加

❌ テストがタイムアウト

エラー: Timeout of XXXX ms

解決:

• •非同期テストに await があるか確認
• •vi.useFakeTimers() を使用している場合は vi.runAllTimers() を追加

すべてのトラブルシューティング → troubleshooting.md

次のステップ

テスト作成・編集:

• •unit-testing.md - ユニットテストの基本構造、パターン、ベストプラクティス
• •browser-testing.md - ブラウザテストの基本構造、例、ベストプラクティス
• •file-layout.md - テストファイル配置・命名規則

テストデータ・モック:

• •test-data-factories.md - テストデータ生成（fishery、@faker-js/faker）
• •mocking.md - 関数モック、モジュールモック、Next.js モック

リファレンス:

• •jest-dom-matchers.md - jest-dom マッチャー完全リスト
• •workflow.md - テスト実行ワークフロー、開発フロー、トラブルシューティング手順
• •troubleshooting.md - エラー別トラブルシューティング完全ガイド