vue-testing-best-practices
Vueのテストプラクティスを改善する
Vueのテストスイートは、しばしば不安定で壊れやすく、設定が難しくなります。このスキルは、Vitest、Vue Test Utils、Pinia、非同期ヘルパー、Playwrightを使用して、信頼性の高いVue 3テストを作成するための実践的なガイダンスを提供します。
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
Review the Skillstore skill "vue-testing-best-practices" from https://skillstore.io/skills/vuejs-ai-vue-testing-best-practices.md and its manifest at https://skillstore.io/api/skills/vuejs-ai-vue-testing-best-practices/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「vue-testing-best-practices」を使用しています。 コンポーネントテストが、非同期データのレンダリング前に失敗する。
期待される結果:
考えられる問題は、マウント後にpromiseが未解決のままであることです。推奨事項は、Vueの更新をawaitし、保留中のpromiseをflushし、非同期コンポーネントまたはリクエストが完了してからのみアサーションを行うことです。
「vue-testing-best-practices」を使用しています。 チームがコンポーネントカバレッジのために広範なスナップショットに依存している。
期待される結果:
レスポンスでは、安定したマークアップに対してのみ小さなスナップショットを推奨し、表示テキスト、発火されたイベント、フォーム状態、ユーザー操作に対する振る舞いのアサーションを追加します。
「vue-testing-best-practices」を使用しています。 Teleportでレンダリングされたモーダルがwrapperクエリで見つからない。
期待される結果:
レスポンスでは、wrapperスコープのクエリがteleportされたDOMを見つけられない理由を説明し、ユニットテストではTeleportをスタブ化するか、統合テストではdocument bodyをクエリすることを推奨します。
セキュリティ監査
安全I found no evidence of malicious intent or prompt injection. The static findings are false positives from documentation examples: local dynamic imports, CI flags, localhost URLs, and Markdown backticks. No remediation is required before publication from this audit.
リスク要因
⚡ スクリプトを含む (5)
⚙️ 外部コマンド (4)
🌐 ネットワークアクセス (6)
🔑 環境変数 (10)
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/vuejs-ai-vue-testing-best-practices/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](https://skillstore.io/skills/vuejs-ai-vue-testing-best-practices?utm_source=security_passport_badge)HTMLバッジ
<a href="https://skillstore.io/skills/vuejs-ai-vue-testing-best-practices?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/vuejs-ai-vue-testing-best-practices/security.svg" alt="Skillstore security assessment" loading="lazy"></a>埋め込みカード
<iframe src="https://skillstore.io/embed/skills/vuejs-ai-vue-testing-best-practices.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>学術引用 (APA · BibTeX · CFF)
APA形式の引用
github.com/vuejs-ai. (2026). vue-testing-best-practices security audit report (audit version 4) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/vuejs-ai-vue-testing-best-practices/audits/4BibTeX形式の引用
@techreport{github-com-vuejs-ai-vuejs-ai-vue-testing-best-practices-2026,
author = {github.com/vuejs-ai},
title = {vue-testing-best-practices security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/vuejs-ai-vue-testing-best-practices/audits/4},
note = {Author version 1.0.0}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "vue-testing-best-practices security audit report (audit version 4)"
version: "1.0.0"
type: report
authors:
- name: "github.com/vuejs-ai"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/vuejs-ai-vue-testing-best-practices/audits/4"
identifiers:
- type: other
value: "skillstore:vuejs-ai-vue-testing-best-practices:audit:4"
description: "Skillstore immutable audit report identifier"
バリアントを比較
インストール可能なバリアント 2 件各作者のスキルは個別のインストール項目として維持されます。推奨バリアントは Skillstore の証拠で順位付けされます。
このバリアントが首位の理由
antfu-vue-testing-best-practices
2026-10-24
vuejs-ai-vue-testing-best-practices
2026-09-09
Skillstore スコア
このスコアの理由 証拠の信頼度: 高作成できるもの
不安定なコンポーネントテストを安定させる
非同期更新の問題を診断し、VueのDOM更新、promise、ユーザーイベントに適した待機方法を選択します。
Vueのテストインフラを計画する
テスト範囲、ランタイム要件、CI制約に基づいて、Vitest、ブラウザモード、Playwrightを選択します。
チームのテストパターンをレビューする
壊れやすいスナップショットや実装依存のチェックを、振る舞い重視のアサーションと保守しやすいヘルパーに置き換えます。
これらのプロンプトを試す
Viteプロジェクト向けのVue 3テスト環境を選ぶのを手伝ってください。私のユースケースに対して、Vitest、Vue Test Utils、ブラウザモード、Playwrightを比較してください。
失敗しているこのVueテストをレビューし、nextTick、flushPromises、waitFor、Suspenseのどれを使うべきか説明してください。非同期タイミングの問題に焦点を当ててください。
私のPiniaテスト手法を評価してください。createTestingPinia、setActivePinia、スタブ化されたアクション、実際のアクション実行をいつ使うべきか推奨してください。
composables、Piniaストア、非同期コンポーネント、Teleportモーダル、ブラウザ固有の振る舞い、E2Eフローを含む大規模アプリ向けに、Vueのテスト戦略を作成してください。
ベストプラクティス
- 実装の詳細よりも、ユーザーに見える振る舞いを先にテストします。
- テスト対象の振る舞いを正確にカバーできる最小のランナーを使用します。
- Vueの更新、外部promise、ユーザーイベントを明示的にawaitします。
回避
- コンポーネントが動作する唯一の証拠としてスナップショットを使用する。
- レンダリングされた出力を通じて操作する代わりに、privateなコンポーネントメソッドを呼び出す。
- 高速なコンポーネントテストでカバーできるロジックに、ブラウザテストやE2Eテストを使用する。
よくある質問
このスキルはどのVueバージョンを対象にしていますか？
VitestとPlaywrightのどちらを選ぶべきか判断するのに役立ちますか？
完全なテストファイルを生成しますか？
Vueの非同期動作を扱いますか？
Piniaテストをサポートしていますか？
このスキルは公開しても安全ですか？
開発者情報
ライセンス
MIT
作者バージョン
v1.0.0
Skillstore リビジョン
r1
参照
36e07d5e13068e5be64447e8f20b427cf2cbd21a
メンテナンスの新しさ
2026/7/18
利用状況
14 ダウンロード · 237 閲覧
ファイル構成
📄 teleport-testing-complexity.md
📄 testing-async-await-flushpromises.md
📄 testing-browser-vs-node-runners.md
📄 testing-component-blackbox-approach.md
📄 testing-composables-helper-wrapper.md
📄 testing-e2e-playwright-recommended.md
📄 testing-pinia-store-setup.md
📄 testing-suspense-async-components.md
📄 testing-vitest-recommended-for-vue.md
📄 SKILL.md