vue-testing-best-practices について
Vue プロジェクトの開発者向けテスト実践スキルです。テスト環境、コンポーネントやコンポーザブルのテスト、非同期処理、ブラウザーと Node のランナーを扱い、よくある失敗も取り上げます。
主な機能
- 01Vue テスト基盤の指針
- 02コンポーネントのブラックボックステストパターン
- 03非同期処理とライフサイクルのテスト指針
- 04Pinia と Suspense のテスト設定
- 05ブラウザーと Node のランナーに関する考慮点
活用シーン
- 01Vue 3 のテスト環境の選択
- 02不安定な非同期テストの調査
- 03ライフサイクルフックを使うコンポーザブルのテスト
- 04Teleport または非同期コンポーネントのテスト
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/vue-testing-best-practicesを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
reference/async-component-testing.mdteleport-testing-complexity.mdtesting-async-await-flushpromises.mdtesting-browser-vs-node-runners.mdtesting-component-blackbox-approach.mdtesting-composables-helper-wrapper.mdtesting-e2e-playwright-recommended.mdtesting-no-snapshot-only.mdtesting-pinia-store-setup.mdtesting-suspense-async-components.mdtesting-vitest-recommended-for-vue.md詳細
Vue.js のテストに関するベストプラクティス、パターン、よくある注意点です。
テスト
- Vue 3 プロジェクトのテスト環境をセットアップする → testing-vitest-recommended-for-vue を参照
- コンポーネント内部のリファクタリングを行うと、テストが繰り返し失敗する → testing-component-blackbox-approach を参照
- 競合状態によってテストが断続的に失敗する → testing-async-await-flushpromises を参照
- ライフサイクルフックや inject を使うコンポーザブルのテストが失敗する → testing-composables-helper-wrapper を参照
- テストで「injection Symbol(pinia) not found」エラーが発生する → testing-pinia-store-setup を参照
- async setup を使うコンポーネントがテストでレンダリングされない → testing-suspense-async-components を参照
- 機能が壊れていてもスナップショットテストが通り続ける → testing-no-snapshot-only を参照
- Vue アプリ向けのエンドツーエンドテストフレームワークを選ぶ → testing-e2e-playwright-recommended を参照
- 算出スタイルや実際の DOM イベントを検証する必要がある → testing-browser-vs-node-runners を参照
- defineAsyncComponent で作成したコンポーネントのテストが失敗する → async-component-testing を参照
- Teleport されたモーダルのコンテンツがラッパーのクエリで見つからない → teleport-testing-complexity を参照
リファレンス
コメント
Markdown 対応