---
name: Vue Testing Best Practices
slug: vue-testing-best-practices
category: Quality
description: Vue Testing Best Practices provides patterns and guidance for testing Vue.js applications with Vitest, Vue Test Utils, and Playwright. Use it when setting up test infrastructure, mocking, handling async behavior, or choosing E2E frameworks.
github: "https://github.com/antfu/skills/tree/main/skills/vue-testing-best-practices"
language: TypeScript
stars: 5760
forks: 317
install: "npx degit https://github.com/antfu/skills/tree/main/skills/vue-testing-best-practices ~/.claude/skills/vue-testing-best-practices"
installs_to: ~/.claude/skills/vue-testing-best-practices
source_path: skills/vue-testing-best-practices/SKILL.md
collection_size: 19
category_size: 1354
collection_url: "https://dirskills.com/collections/antfu/skills"
added: 2026-08-15T06:52:37.122Z
last_synced: 2026-08-15T06:52:37.122Z
canonical_url: "https://dirskills.com/skills/vue-testing-best-practices"
---

# Vue Testing Best Practices

Vue Testing Best Practices provides patterns and guidance for testing Vue.js applications with Vitest, Vue Test Utils, and Playwright. Use it when setting up test infrastructure, mocking, handling async behavior, or choosing E2E frameworks.

**Install:**

```bash
npx degit https://github.com/antfu/skills/tree/main/skills/vue-testing-best-practices ~/.claude/skills/vue-testing-best-practices
```

## README

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

### Testing
- Setting up test infrastructure for Vue 3 projects → See [testing-vitest-recommended-for-vue](reference/testing-vitest-recommended-for-vue.md)
- Tests keep breaking when refactoring component internals → See [testing-component-blackbox-approach](reference/testing-component-blackbox-approach.md)
- Tests fail intermittently with race conditions → See [testing-async-await-flushpromises](reference/testing-async-await-flushpromises.md)
- Composables using lifecycle hooks or inject fail to test → See [testing-composables-helper-wrapper](reference/testing-composables-helper-wrapper.md)
- Getting "injection Symbol(pinia) not found" errors in tests → See [testing-pinia-store-setup](reference/testing-pinia-store-setup.md)
- Components with async setup won't render in tests → See [testing-suspense-async-components](reference/testing-suspense-async-components.md)
- Snapshot tests keep passing despite broken functionality → See [testing-no-snapshot-only](reference/testing-no-snapshot-only.md)
- Choosing end-to-end testing framework for Vue apps → See [testing-e2e-playwright-recommended](reference/testing-e2e-playwright-recommended.md)
- Tests need to verify computed styles or real DOM events → See [testing-browser-vs-node-runners](reference/testing-browser-vs-node-runners.md)
- Testing components created with defineAsyncComponent fails → See [async-component-testing](reference/async-component-testing.md)
- Teleported modal content can't be found in wrapper queries → See [teleport-testing-complexity](reference/teleport-testing-complexity.md)

## Reference

- [Vue.js Testing Guide](https://vuejs.org/guide/scaling-up/testing)
- [Vue Test Utils](https://test-utils.vuejs.org/)
- [Vitest Documentation](https://vitest.dev/)
- [Playwright Documentation](https://playwright.dev/)