mcpField
V
vitest

vitest

github.com/pymodelテスト・品質40491 回インストール4 週間前に更新
リポジトリ

vitest について

Vitest テストの作成、設定、保守に役立つベストプラクティススキルです。46のルールを8分野に分類し、非同期処理、分離、モック、性能、Vitest 5 への移行を扱います。

主な機能

  1. 018カテゴリ、46のルール
  2. 02非同期テストのパターン
  3. 03セットアップと分離の指針
  4. 04モックと型安全性の実践
  5. 05性能と CI の提案
  6. 06Vitest 5 移行の指針

活用シーン

  1. 01Vitest テストの作成やレビュー
  2. 02不安定または遅いテストの調査
  3. 03テスト環境の設定
  4. 04Jest から Vitest へのテスト移行

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/pymodel/react-frontend-skills --skill vitest

インストール後、Claude Code で/vitestを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
assert-edge-cases.md
assert-expect-assertions.md
assert-one-assertion-concept.md
assert-specific-matchers.md
assert-toequal-vs-tobe.md
async-act-wrapper.md
async-await-assertions.md
async-concurrent-expect.md
async-error-handling.md
async-fake-timers.md
async-return-promises.md
async-waitfor-polling.md
env-browser-api-mocking.md
env-globals-config.md
env-per-file-override.md
env-setup-files.md
mock-avoid-overmocking.md
mock-clear-between-tests.md
mock-implementation-not-value.md
mock-msw-network.md
mock-spyon-vs-mock.md
mock-type-safety.md
mock-vi-mock-hoisting.md
org-describe-nesting.md
org-file-colocation.md
org-test-naming.md
org-test-skip-only.md
perf-bail-fast-fail.md
perf-bench-test-context.md
perf-disable-isolation.md

詳細

Vitest のベストプラクティス

Vitest 5 に対応したテストガイドです。8 つのカテゴリにわたる 46 のルールを紹介します。Vitest 5 には Node.js 22.12+ と Vite 6.4+ が必要です。Vitest 4.1 はバックポートのサポートを継続しています。

適用するタイミング

次の場合に、これらのガイドラインを参照してください。

  • 新しい Vitest テストを作成するとき
  • 不安定なテストや遅いテストをデバッグするとき
  • テスト設定を行うとき
  • PR でテストコードをレビューするとき
  • Jest から Vitest に移行するとき
  • CI/CD のテストパフォーマンスを最適化するとき

ドキュメントに記載された移行時の差異以外の Jest 固有の API や設定は対象外です。引き続き Jest で実行するテストについては、Jest の公式ドキュメントを参照してください。

優先度別のルールカテゴリ

優先度カテゴリ影響度プレフィックス
1非同期パターンCRITICALasync-
2テストのセットアップと分離CRITICALsetup-
3モックのパターンHIGHmock-
4パフォーマンスHIGHperf-
5スナップショットテストMEDIUMsnap-
6環境MEDIUMenv-
7アサーションLOW-MEDIUMassert-
8テストの構成LOWorg-

クイックリファレンス

1. 非同期パターン（CRITICAL）
  • async-await-assertions - 非同期アサーションを await します（Vitest 5 では await されていないアサーションは失敗します）
  • async-return-promises - テスト関数からプロミスを返します
  • async-fake-timers - 時間に依存するコードにはフェイクタイマーを使用します
  • async-waitfor-polling - 非同期条件には vi.waitFor を使用します
  • async-concurrent-expect - 並行テストではテストコンテキストの expect を使用します
  • async-act-wrapper - act の警告を避けるため、ユーザーイベントを await します
  • async-error-handling - 非同期エラー処理を適切にテストします
2. テストのセットアップと分離（CRITICAL）
  • setup-beforeeach-cleanup - afterEach フックで状態をクリーンアップします
  • setup-restore-mocks - 各テストの後にモックを復元します
  • setup-avoid-shared-state - テスト間でミュータブルな状態を共有しないようにします
  • setup-beforeall-expensive - コストの高い一度限りのセットアップには beforeAll を使用します
  • setup-reset-modules - モジュールの状態をテストするときは、モジュールをリセットします
  • setup-test-factories - 複雑なテストデータにはテストファクトリーを使用します
  • setup-vitest5-migration - Vitest 5 への移行を計画的に進めます（5.0）
3. モックのパターン（HIGH）
  • mock-vi-mock-hoisting - vi.mock の巻き上げ動作を理解します
  • mock-spyon-vs-mock - vi.spyOn と vi.mock を適切に使い分けます
  • mock-implementation-not-value - 動的なモックには mockImplementation を使用します
  • mock-msw-network - ネットワークリクエストのモックには MSW を使用します
  • mock-avoid-overmocking - 過剰なモックを避けます
  • mock-type-safety - モックの型安全性を維持します
  • mock-clear-between-tests - テスト間でモックの状態をクリアします（Vitest 5 のデフォルト）
4. パフォーマンス（HIGH）
  • perf-pool-selection - パフォーマンスに適したプールを選択します
  • perf-disable-isolation - 安全な場合はテストの分離を無効にします
  • perf-happy-dom - 可能であれば jsdom より happy-dom を使用します
  • perf-sharding - CI の並列化にはシャーディングを使用します
  • perf-run-mode-ci - CI 環境では run モードを使用します
  • perf-bail-fast-fail - CI で素早く失敗させるには bail を使用します
  • perf-bench-test-context - bench フィクスチャを使って Vitest 5 のベンチマークを作成します
5. スナップショットテスト（MEDIUM）
  • snap-inline-over-file - 小さな値にはインラインスナップショットを優先します
  • snap-avoid-large - 大きなスナップショットを避けます
  • snap-stable-serialization - スナップショットのシリアライズを安定させます
  • snap-review-updates - コミット前にスナップショットの更新をレビューします
  • snap-describe-intent - スナップショットテストには意図がわかる名前を付けます
6. 環境（MEDIUM）
  • env-per-file-override - 必要に応じてファイルごとに環境を上書きします
  • env-setup-files - グローバル設定にはセットアップファイルを使用します
  • env-globals-config - グローバル設定を一貫して構成します
  • env-browser-api-mocking - テスト環境で利用できないブラウザー API をモックします
7. アサーション（低〜中）
  • assert-specific-matchers - 汎用的なマッチャーより、具体的なマッチャーを使います
  • assert-edge-cases - エッジケースと境界値をテストします
  • assert-one-assertion-concept - 1つのテストで1つの概念をテストします
  • assert-expect-assertions - 非同期テストではexpect.assertionsを使います
  • assert-toequal-vs-tobe - toBeとtoEqualを正しく使い分けます
8. テストの構成（低）
  • org-file-colocation - テストファイルをソースファイルと同じ場所に配置します
  • org-describe-nesting - 論理的なグループ分けにはdescribeブロックを使います
  • org-test-naming - 内容が分かるテスト名を付けます
  • org-test-skip-only - skipとonlyを適切に使います

使用方法

まずプロジェクトのルートディレクトリで実行します。

npx -y @pymodel/react-frontend-skills detect               # installed vs. targeted versions
npx -y @pymodel/react-frontend-skills scan --skill vitest  # deprecated APIs → rule IDs

上記のルールのうちタスクに該当するもの、およびscanで検出された各項目について、references/<rule-id>.mdを読み、その重要性と、誤ったコードと正しいコードを確認します。

関連スキル

  • TDDの手法については、tddスキルを参照してください
  • MSWを使ったAPIのモックについては、mswスキルを参照してください
  • TypeScriptのテストパターンについては、typescriptスキルを参照してください

コメント

Markdown 対応