vue-testing-best-practices について
Vue.js のテスト手法やパターン、よくある問題を扱うスキルです。テスト環境の構築、コンポーネントや composable のテスト、非同期処理、E2E テストを案内します。
主な機能
- 01Vue 3 のテスト環境構築
- 02コンポーネントと composable のテストパターン
- 03非同期テストと競合状態への対処
- 04ブラウザーと Node のランナー選択
- 05E2E フレームワークの推奨
活用シーン
- 01Vue 3 のテスト構成の選択
- 02ライフサイクルフックを使う composable のテスト
- 03非同期テストの不安定さの調査
- 04DOM イベントと算出スタイルのテスト
インストール
コマンドをコピーしてターミナルで実行します。
$
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 対応