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

## Install

```bash
npx skillstore add github.com/vuejs-ai/vuejs-ai-vue-testing-best-practices
```

## Metadata

- Status: approved
- Slug: vuejs-ai-vue-testing-best-practices
- Version: 1.0.0
- Author version: 1.0.0
- Skillstore revision: r1
- Version status: valid
- Tree hash: c9216ba0e94f52bbec173a3ab5ce5a616b657978226960bdc41c350b0472319d
- Author: github.com/vuejs-ai
- GitHub username: vuejs-ai
- License: MIT
- Repository: https://github.com/vuejs-ai/skills/tree/main/skills/vue-testing-best-practices/
- Ref: 36e07d5e13068e5be64447e8f20b427cf2cbd21a
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: scripts, external\_commands, network, env\_access
- Quality score: 80
- Quality tier: silver
- Public page: https://skillstore.pages.dev/skills/vuejs-ai-vue-testing-best-practices
- Manifest: https://skillstore.pages.dev/api/skills/vuejs-ai-vue-testing-best-practices/manifest

## Capabilities

- Explains Vitest setup choices for Vue 3 and Vite projects.
- Shows blackbox component testing patterns with Vue Test Utils.
- Covers async component tests with flushPromises and Suspense.
- Guides Pinia store setup and Teleport testing edge cases.
- Recommends Playwright configuration and locator patterns for E2E tests.
- Warns against snapshot-only tests and fragile implementation checks.

## Use Cases

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

## Prompt Templates

### 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.
```

## Limitations

- It does not execute tests or modify project files by itself.
- Examples are generic and may need project-specific adaptation.
- It focuses on Vue 3 and Vite, not legacy Vue 2 setups.
- It does not replace official documentation for exact version changes.

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

## Anti Patterns

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

## Security Audit

- Audited at: 2026-07-07T07:07:29.503\+00:00
- Summary: 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.

## Stats

- Views: 238
- Downloads: 18
- Favorites: 1
- Popularity score: 0