vue-testing-best-practices

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 を参照

リファレンス

• Vue.js テストガイド
• Vue Test Utils
• Vitest ドキュメント
• Playwright ドキュメント