vitest

このスキルを使用する場面

ユーザーが次のことを希望する場合は、いつでもこのスキルを使用してください。

• Vite プロジェクトに Vitest をセットアップする
• ユニットテストやコンポーネントテストを作成する
• さまざまな環境向けに Vitest を設定する
• Vitest の API とユーティリティを使用する
• Vue、React、または Svelte のコンポーネントをテストする
• テストにブラウザモードを使用する
• ビジュアルリグレッションテストをセットアップする
• 関数やモジュールをモックする
• テストにスナップショットを使用する
• テストカバレッジを設定する
• Vitest UI を使用する
• テストのパフォーマンスを最適化する
• テストをデバッグする
• Vitest のベストプラクティスを理解する
• Vitest の問題をトラブルシューティングする

このスキルの使用方法

このスキルは、Vitest の公式ドキュメントの構成（https://vitest.dev/guide/、https://vitest.dev/api/、https://vitest.dev/config/）に沿って整理されています。Vitest を使用する際は、次の手順に従ってください。

1. ユーザーのリクエストからトピックを特定します。

   • はじめに／快速开始 → examples/getting-started.md
   • 機能／功能特性 → examples/features.md
   • コンポーネントテスト／组件测试 → examples/component-testing.md
   • ブラウザモード／浏览器模式 → examples/browser-mode.md
   • API／API 文档 → api/
   • 設定／配置 → examples/config/

2. examples/ ディレクトリから適切なサンプルファイルを読み込みます。

   はじめに（快速开始）：

   • examples/getting-started.md - インストールと最初のテスト

   機能（功能特性）：

   • examples/features.md - 主な機能と特長
   • examples/ui.md - Vitest UI
   • examples/component-testing.md - コンポーネントテスト
   • examples/browser-mode.md - ブラウザモードでのテスト
   • examples/visual-regression-testing.md - ビジュアルリグレッションテスト
   • examples/trace-view.md - トレースビュー

   テスト（测试）：

   • examples/test-api.md - テスト API（test、it、describe など）
   • examples/mocking.md - 関数やモジュールのモック
   • examples/snapshots.md - スナップショットテスト
   • examples/coverage.md - コードカバレッジ

   設定（配置）：

   • examples/config/basic-config.md - 基本設定
   • examples/config/environment.md - 環境設定
   • examples/config/browser-config.md - ブラウザモードの設定

3. 構文、構成、ベストプラクティスについては、該当するサンプルファイルの具体的な指示に従います。

   重要な注意事項：

   • Vitest は Vite プロジェクト向けに設計されています
   • TypeScript、JSX、ESM を標準でサポートしています
   • HMR のような操作感を備えた高速なウォッチモードを提供します
   • Jest API と互換性があります
   • サンプルには JavaScript 版と TypeScript 版の両方が含まれています
   • 各サンプルファイルには、主要な概念、コード例、要点が含まれています

4. 必要に応じて、api/ ディレクトリの API ドキュメントを参照します。

   • api/test-api.md - テスト API リファレンス
   • api/vi-utility.md - vi ユーティリティ関数
   • api/expect.md - Expect アサーション
   • api/mocking.md - モック API

5. templates/ ディレクトリのテンプレートを使用します。

   • templates/vitest-config.md - Vitest 設定テンプレート
   • templates/test-examples.md - テストサンプルのテンプレート

ドキュメントの対応関係（https://vitest.dev/guide/、https://vitest.dev/api/、https://vitest.dev/config/ と一対一で対応）

ガイド（指南）:

• examples/getting-started.md → https://vitest.dev/guide/getting-started.html
• examples/features.md → https://vitest.dev/guide/features.html
• examples/ui.md → https://vitest.dev/guide/ui.html
• examples/component-testing.md → https://vitest.dev/guide/testing-components.html
• examples/browser-mode.md → https://vitest.dev/guide/browser.html
• examples/visual-regression-testing.md → https://vitest.dev/guide/visual-regression.html
• examples/trace-view.md → https://vitest.dev/guide/trace-view.html
• examples/mocking.md → https://vitest.dev/guide/mocking.html
• examples/snapshots.md → https://vitest.dev/guide/snapshot.html
• examples/coverage.md → https://vitest.dev/guide/coverage.html

設定:

• examples/config/basic-config.md → https://vitest.dev/config/
• examples/config/environment.md → https://vitest.dev/config/#environment
• examples/config/browser-config.md → https://vitest.dev/config/#browser

API リファレンス:

• api/test-api.md → https://vitest.dev/api/
• api/vi-utility.md → https://vitest.dev/api/vi.html
• api/expect.md → https://vitest.dev/api/expect.html
• api/mocking.md → https://vitest.dev/api/vi.html

サンプルとテンプレート

このスキルには、公式ドキュメントの構成に合わせて整理された詳細なサンプルが含まれています。すべてのサンプルは examples/ ディレクトリにあります（上記の対応関係を参照）。

サンプルを使用するには：

• ユーザーのリクエストからトピックを特定します
• 上記の対応関係から適切なサンプルファイルを読み込みます
• そのファイルの指示、構文、ベストプラクティスに従います
• コードサンプルを具体的なユースケースに合わせて調整します

テンプレートを使用するには：

• 一般的なスキャフォールディングには templates/ ディレクトリのテンプレートを参照します
• テンプレートをニーズやコーディングスタイルに合わせて調整します

ベストプラクティス

1. ウォッチモードを使用する：Vitest のスマートウォッチモードを活用して、フィードバックを速めます
2. テストを整理する：関連するテストを describe ブロックでグループ化します
3. TypeScript を使用する：ネイティブの TypeScript サポートを活用します
4. 効果的にモックする：モジュールのモックには vi.mock() を使用します
5. コンポーネントをテストする：Vue／React コンポーネントにはコンポーネントテストを使用します
6. UI モードを使用する：テストのデバッグ体験を向上させるには --ui フラグを使用します
7. パフォーマンスを最適化する：開発中は test.only() を使用します

リソース

• 公式ドキュメント：https://vitest.dev/
• はじめに：https://vitest.dev/guide/
• API リファレンス：https://vitest.dev/api/
• 設定：https://vitest.dev/config/
• GitHub リポジトリ：https://github.com/vitest-dev/vitest

キーワード

Vitest、vitest、テストフレームワーク、ユニットテスト、コンポーネントテスト、Vite、Jest 互換、ウォッチモード、HMR、TypeScript、ESM、モック、スナップショット、カバレッジ、ブラウザモード、ビジュアルリグレッションテスト、测试框架、单元测试、组件测试、监视模式、热模块替换、模拟、快照、覆盖率、浏览器模式、视觉回归测试