vue-testing-best-practices について
Vue.js プロジェクト向けのテスト実践スキルです。テスト環境、コンポーネント、非同期処理、E2E テストの指針を扱います。
主な機能
- 01Vue 3 テスト環境の指針
- 02コンポーネントのブラックボックステスト
- 03非同期処理とコンポーザブルのテスト
- 04E2E・ブラウザテストの選択
活用シーン
- 01Vue 3 プロジェクトのテスト環境構築
- 02非同期テストの競合状態の調査
- 03Vue アプリの E2E テスト方式の選定
インストール
コマンドをコピーしてターミナルで実行します。
$
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を参照
- 非同期の setup を持つコンポーネントがテストでレンダリングされない → testing-suspense-async-componentsを参照
- 機能が壊れていてもスナップショットテストが通り続ける → testing-no-snapshot-onlyを参照
- Vue アプリに適した E2E テストフレームワークを選ぶ → testing-e2e-playwright-recommendedを参照
- 計算済みスタイルや実際の DOM イベントを検証する必要がある → testing-browser-vs-node-runnersを参照
- defineAsyncComponent で作成したコンポーネントのテストに失敗する → async-component-testingを参照
- Teleport されたモーダルのコンテンツがラッパーのクエリで見つからない → teleport-testing-complexityを参照
参考資料
コメント
Markdown 対応