jpskill.com
🛠️ 開発・MCP コミュニティ

vue-testing-best-practices

Vue.jsのテストにおいて、VitestやVue Test Utilsを使ったコンポーネントテスト、モック、E2Eテストまで網羅する実践的な手法を学ぶSkill。

📜 元の英語説明(参考)

Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing.

🇯🇵 日本人クリエイター向け解説

一言でいうと

Vue.jsのテストにおいて、VitestやVue Test Utilsを使ったコンポーネントテスト、モック、E2Eテストまで網羅する実践的な手法を学ぶSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⬇ このSkillをダウンロード(.skill) 元のソースを見る ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-17
取得日時
2026-05-17
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

[Skill 名] vue-testing-best-practices Vue.js のテストに関するベストプラクティス、パターン、およびよくある落とし穴についてです。

テスト

  • Vue 3 プロジェクトのテストインフラストラクチャのセットアップ → testing-vitest-recommended-for-vue を参照してください。
  • コンポーネントの内部をリファクタリングするとテストが壊れ続ける → testing-component-blackbox-approach を参照してください。
  • レースコンディションによりテストが断続的に失敗する → testing-async-await-flushpromises を参照してください。
  • ライフサイクルフックまたは inject を使用する Composable がテストに失敗する → 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 を参照してください。

参考資料

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Vue.js testing best practices, patterns, and common gotchas.

Testing

Reference