vue-testing-best-practices

Provide Vue.js testing guidance for unit and integration tests with Vitest and Vue Test Utils.

5.7k|318|Updated Jan 28, 2026

Search Tags:#vitest #vue #test #pinia #testing-best-practices #vue-test-utils

Ready to run

npx skills add https://github.com/antfu/skills --skill vue-testing-best-practices-antfu

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vue-testing-best-practices
Source: https://github.com/antfu/skills/tree/main/skills/vue-testing-best-practices
Command: npx skills add https://github.com/antfu/skills --skill vue-testing-best-practices-antfu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a distilled set of Vue.js testing best practices to help teams write robust, maintainable tests for Vue 3 apps using Vitest, Vue Test Utils, and Pinia.

Core Features & Use Cases

Blackbox testing philosophies: focus on user-visible behavior rather than internal implementation details.
Testing patterns for async operations, Suspense, and Teleport edge cases, plus strategies for integrating composables, stores, and E2E concerns.
Practical use cases with concrete guidance and references to Vue Testing docs, Vitest, and Testing Library when appropriate.

Quick Start

Ask the AI to generate a basic Vue 3 component test scaffold following this skill's guidelines, using Vitest and Vue Test Utils.

Frequently Asked Questions about vue-testing-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

What is the best way to test Vue 3 components with Vitest and Vue Test Utils?▼

The best way to test Vue 3 components is adopting a blackbox testing philosophy, focusing on user-visible behavior rather than internal implementation details. This approach uses Vitest and Vue Test Utils to ensure tests remain robust and maintainable.

How do I test Vue 3 Suspense and Teleport edge cases?▼

To test Vue 3 Suspense and Teleport edge cases, apply specific testing patterns for asynchronous operations and component rendering boundaries. These strategies ensure reliable integration testing when handling dynamic component loading and DOM teleportation scenarios.

How do I write unit tests for Vue components using Pinia stores?▼

Writing unit tests for Vue components using Pinia involves strategies for integrating composables and stores directly within your test setup. This ensures your Vue 3 testing environment accurately reflects state management interactions.

Can I use this Vue testing guidance for end-to-end testing?▼

Yes, this guidance includes E2E considerations alongside unit and integration testing for Vue 3 applications. It provides practical use cases with concrete references to Vue Testing docs, Vitest, and Testing Library to cover comprehensive testing workflows.

Does Vue testing best practices support generating a basic component test scaffold?▼

Yes, you can generate a basic Vue 3 component test scaffold by asking the AI to follow these skill guidelines. It quickly structures your test files using Vitest and Vue Test Utils according to established best practices.