# Build Reliable Vue Tests

Vue tests often fail because asynchronous rendering, framework internals, and test-runner configuration are handled incorrectly. This skill provides focused patterns for Vitest, Vue Test Utils, Pinia, Suspense, Teleport, and Playwright.

## Install

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

## Metadata

- Status: approved
- Slug: antfu-vue-testing-best-practices
- Version: 1.0.0
- Author version: 1.0.0
- Skillstore revision: r2
- Version status: valid
- Tree hash: e1671adc4fbbc4f52f0094a8b976df40e5a311316f3ff81411ac813d2722a073
- Author: github.com/vuejs-ai
- GitHub username: antfu
- License: MIT
- Repository: https://github.com/antfu/skills/tree/main/skills/vue-testing-best-practices/
- Ref: 89edfdc710d0846129dcee6a929477b04f08052c
- 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/antfu-vue-testing-best-practices
- Manifest: https://skillstore.pages.dev/api/skills/antfu-vue-testing-best-practices/manifest

## Capabilities

- Guides Vitest configuration for Vue 3 projects, including DOM environments, coverage, setup files, and CI behavior.
- Shows black-box component tests based on rendered output, user interactions, emitted events, props, and slots.
- Explains reliable async testing with awaited triggers, flushPromises, Suspense wrappers, and dynamic components.
- Covers Pinia setup, lifecycle-dependent composable wrappers, Teleport handling, and browser-versus-node runner choices.
- Provides Playwright setup, cross-browser projects, local server integration, page objects, screenshots, and stable selectors.
- Helps replace snapshot-only tests with focused behavioral assertions and small regression snapshots.

## Use Cases

- Stabilize component tests: Apply async waits, black-box assertions, Pinia setup, and Teleport handling to reduce brittle Vue component tests.
- Design a Vue test strategy: Choose Vitest, DOM runners, Playwright projects, selector conventions, and snapshot boundaries for a new or migrated suite.
- Review testing pull requests: Check Vue tests for implementation coupling, missing awaits, weak assertions, and incomplete end-to-end coverage before merge.

## Prompt Templates

### Create a component test

```
Write Vitest and Vue Test Utils tests for [component]. Cover visible output, props, user interactions, and emitted events. Avoid implementation details.
```

### Fix an asynchronous test

```
Diagnose this flaky Vue test: [test and component context]. Identify missing awaits, nextTick, flushPromises, Suspense, or dynamic-import handling. Return a corrected approach.
```

### Plan store and composable tests

```
Create a focused test plan for [Pinia store or composable]. Include setup, lifecycle or injection requirements, mocking boundaries, behavior assertions, and cleanup.
```

### Design a complete testing strategy

```
Audit [Vue project or test suite]. Recommend Vitest configuration, runner environments, component patterns, Playwright coverage, selector policy, snapshot limits, and CI priorities.
```

## Limitations

- Provides reference guidance and examples; it does not execute tests or modify projects independently.
- Assumes Vue 3 and may require adaptation for Vue 2, Nuxt-specific, or non-Vite projects.
- Example component names, routes, credentials, and ports are placeholders that must match the target application.
- Does not guarantee coverage, accessibility, or browser compatibility; teams must validate tests in their own environments.

## Best Practices

- Assert user-visible behavior and public component contracts before checking implementation details.
- Await every Vue update, triggered interaction, and unresolved promise before asserting asynchronous results.
- Keep end-to-end selectors stable and validate critical flows across required browsers in CI.

## Anti Patterns

- Reading component internals or calling private methods instead of simulating user behavior.
- Using full-component snapshots as the only proof of correctness.
- Mixing unit and end-to-end responsibilities without clear setup, isolation, cleanup, or selector conventions.

## Security Audit

- Audited at: 2026-07-23T04:37:06.084\+00:00
- Summary: All 42 static detections are false positives caused by Markdown examples, ordinary test configuration, localhost URLs, and official documentation links. The examples do not execute shell commands, read environment files, expose secrets, or contact untrusted services. No prompt injection or other semantic security concern was found.

## Stats

- Views: 224
- Downloads: 14
- Favorites: 0
- Popularity score: 0