🎯

vue-testing-best-practices

🎯Skill

from vuejs-ai/skills

What it does

Provides Vue.js testing best practices, patterns, and common gotchas covering Vitest, Vue Test Utils, component testing, mocking, async testing, Pinia store setup, and Playwright for E2E testing.

Overview

A Claude Code skill from vuejs-ai that provides Vue.js testing best practices, patterns, and common gotchas covering Vitest, Vue Test Utils, component testing, mocking, and Playwright for E2E testing. It includes organized reference guides for specific testing challenges like async components, Pinia store setup, Suspense testing, and teleport content queries.

Key Features

Vitest Integration - Recommended testing framework setup for Vue 3 projects with proper configuration guidance
Black-Box Component Testing - Promotes testing component behavior through public interfaces to avoid tests that break during refactoring
Async Testing Patterns - Covers async/await with flushPromises, Suspense async components, and composables using lifecycle hooks
Pinia Store Testing - Solves common "injection Symbol(pinia) not found" errors with proper test setup patterns
E2E with Playwright - Includes guidance for choosing and setting up Playwright as the end-to-end testing framework for Vue applications

Who is this for?

This skill is designed for Vue.js developers who need AI-assisted guidance for writing effective tests for their Vue 3 applications. It is particularly valuable for teams experiencing intermittent test failures, tests that break during refactoring, or issues testing async components, stores, and teleported content.

📦

Same repository

vuejs-ai/skills(21 items)

vue-testing-best-practices

Installation

Vibe Index InstallInstalls to .claude/skills/ - auto-recognized by Claude Code

npx vibeindex add vuejs-ai/skills --skill vue-testing-best-practices

skills.sh Install⚠ Installs to .agents/skills/ - may not be auto-recognized by Claude Code

npx skills add vuejs-ai/skills --skill vue-testing-best-practices

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/vue-testing-best-practices/SKILL.md

SKILL.md

4,929Installs

1,301

Last UpdatedJan 29, 2026

View on GitHub Back to Skills

More from this repository10

🏪

vuejs-ai/skills🏪Marketplace

Agent skills for Vue 3 development

🎯

vue-pinia-best-practices🎯Skill

Optimize Pinia state management in Vue.js with automated pattern detection, performance recommendations, and clean architectural guidance.

🎯

vue-best-practices🎯Skill

Enforces Vue 3 best practices, recommending Composition API, TypeScript, and performance optimizations for Vue.js development.

🎯

vue-debug-guides🎯Skill

Provides interactive debugging tutorials and real-time error diagnosis for Vue.js applications, with step-by-step visual guides and performance insights.

🎯

vue-router-best-practices🎯Skill

Guides Vue.js developers in implementing clean, scalable routing strategies with best practices for navigation, route guards, and dynamic routing.

🎯

create-adaptable-composable🎯Skill

Generates flexible Vue component architectures with dynamic composition, prop injection, and adaptive rendering strategies for scalable frontend development.

🎯

vue-options-api-best-practices🎯Skill

Validates and refactors Vue Options API components for optimal structure, lifecycle management, and performance best practices.

🎯

vue-jsx-best-practices🎯Skill

Covers Vue JSX best practices and differences from React JSX, including class vs className, JSX plugin configuration, and migrating React JSX code to Vue.

🔌

create-adaptable-composable🔌Plugin

A Vue 3 development skill that teaches AI agents to create adaptable composables, derived from real-world issues in Vue 3 projects.

🎯

vue-router-best-practices🎯Skill

Agent skills for Vue 3 development, derived from real-world issues and providing specialized patterns for AI agents to enhance Vue development workflows.