Skills vue-testing-best-practices

📦

vue-testing-best-practices

Name: vue-testing-best-practices
Author: github.com/vuejs-ai

v1.0.0 Content revision r1 Safe ⚡ Contains scripts⚙️ External commands🌐 Network access🔑 Env variables

Improve Vue Testing Practices

Vue teams often struggle with brittle component tests, async rendering, and E2E setup choices. This skill gives practical Vue testing patterns for Vitest, Vue Test Utils, Pinia, Teleport, Suspense, and Playwright.

Supports: Claude Codex Code(CC)

🥈 80 Silver

Install with my Agent

Copy this request to your Agent. It includes the canonical Skill page and manifest.

Agent request

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.

Your Agent should still show its plan and request any confirmation required by the security policy.

Agent-readable resources

Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.

Markdown detail GET /skills/vuejs-ai-vue-testing-best-practices.md Signed manifest GET /api/skills/vuejs-ai-vue-testing-best-practices/manifest Signed lockfile GET /api/skills/vuejs-ai-vue-testing-best-practices/lockfile

Test it

Using "vue-testing-best-practices". A Vue component test fails before async content appears.

Expected outcome:

Identify missing waits around asynchronous rendering.
Recommend flushPromises after mounting the component.
Suggest testing loading, success, and error states separately.

Using "vue-testing-best-practices". A team relies on large snapshots for component coverage.

Expected outcome:

Explain why snapshot-only checks give weak confidence.
Recommend visible text, emitted events, accessibility queries, and focused snapshots.
Flag dynamic content that makes snapshots unstable.

Using "vue-testing-best-practices". A project needs browser-level Vue E2E tests.

Expected outcome:

Recommend Playwright for cross-browser coverage.
Outline dev server integration, retries, traces, and stable locators.
Separate critical user flows from lower-value visual checks.

Security Audit

Safe

v4 • 7/7/2026 Open versioned report

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.

Files scanned

2,227

Lines analyzed

Review items

False positives ignored

Risk Factors

⚡ Contains scripts (5)

reference/async-component-testing.md:28 reference/async-component-testing.md:46 reference/async-component-testing.md:60 reference/async-component-testing.md:85 reference/async-component-testing.md:142

⚙️ External commands (4)

reference/async-component-testing.md:98-110 reference/testing-no-snapshot-only.md:109-111 reference/testing-suspense-async-components.md:57-72 reference/testing-suspense-async-components.md:203-213

🌐 Network access (6)

reference/testing-e2e-playwright-recommended.md:50 reference/testing-e2e-playwright-recommended.md:80 SKILL.md:26 SKILL.md:27 SKILL.md:28 SKILL.md:29

🔑 Env variables (10)

reference/testing-e2e-playwright-recommended.md:43 reference/testing-e2e-playwright-recommended.md:44 reference/testing-e2e-playwright-recommended.md:45 reference/testing-e2e-playwright-recommended.md:81 reference/testing-e2e-playwright-recommended.md:43 reference/testing-e2e-playwright-recommended.md:44 reference/testing-e2e-playwright-recommended.md:45 reference/testing-e2e-playwright-recommended.md:81 reference/testing-vitest-recommended-for-vue.md:160 reference/testing-vitest-recommended-for-vue.md:160

No confirmed security findings were detected by the latest completed static and semantic audit. This does not prove the skill has no side effects.

Audited by: codex View Audit History →

Share & cite this report

Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.

Open versioned report

Copy report link

https://skillstore.io/skills/vuejs-ai-vue-testing-best-practices/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown badge

[![Skillstore security assessment](https://skillstore.io/badges/skills/vuejs-ai-vue-testing-best-practices/security.svg)](https://skillstore.io/skills/vuejs-ai-vue-testing-best-practices?utm_source=security_passport_badge)

HTML badge

<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>

Embed card

<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>

Academic citations (APA · BibTeX · CFF)

APA citation

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/4

BibTeX citation

@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"

Compare variants

2 installable variants

Each author remains a separate installable skill. The recommended variant is ranked by Skillstore evidence.

Why this variant is first

Higher Skillstore usage

Author / source Skillstore Score Evidence Confidence Skillstore usage Updated

github.com/vuejs-ai Recommended Current

vuejs-ai-vue-testing-best-practices

Skillstore Score 80

Evidence Confidence High

Skillstore usage 18

Updated

2026-08-21

github.com/vuejs-ai

antfu-vue-testing-best-practices

Skillstore Score 80

Evidence Confidence High

Skillstore usage 14

Updated

2026-08-21

Skillstore Score

Why this score Evidence Confidence: High

Architecture

100

Maintainability

Content

Community

Spec Compliance

What You Can Build

Set Up Vue Unit Tests

Choose Vitest settings, DOM environment, setup files, and scripts for a Vue 3 project.

Fix Brittle Component Tests

Replace implementation-focused assertions with user-visible behavior, emitted events, and stable selectors.

Plan E2E Coverage

Design Playwright tests for login flows, product flows, browsers, retries, and CI behavior.

Try These Prompts

Review My Test Setup

Review my Vue test setup. Recommend Vitest, Vue Test Utils, environment, scripts, and setup files. Note any risky assumptions.

Improve Component Coverage

Analyze this Vue component test plan. Suggest behavior-focused assertions, useful selectors, async waits, and cases that avoid implementation details.

Debug Async Rendering

Help debug this flaky Vue test. Focus on async setup, Suspense, Teleport, Pinia setup, flushPromises, and event timing.

Design Full Test Strategy

Create a Vue testing strategy for this application. Cover unit, component, composable, store, async, visual, and Playwright E2E coverage.

Best Practices

Test visible behavior, public events, and user interactions before internal component state.
Await Vue updates, promises, and browser actions before making assertions.
Use stable selectors and accessible queries that match how users interact.

Avoid

Do not rely on full-component snapshots as the only proof of correctness.
Do not call private methods or inspect internal state unless no public signal exists.
Do not ignore async setup, Teleport, Suspense, or store setup in test fixtures.