vue-testing-best-practices
Provides best practices and patterns for testing Vue.js applications.
Install
mkdir -p .claude/skills/vue-testing-best-practices && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/1185" && unzip -o skill.zip -d .claude/skills/vue-testing-best-practices && rm skill.zipInstalls to .claude/skills/vue-testing-best-practices
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing.Key capabilities
- →Vue component mocking guidance
- →Black-box testing strategy
- →Async state handling patterns
- →Composable testing wrappers
- →E2E testing framework selection
How it works
Provides reference-based patterns for isolating Vue components and managing virtual DOM testing scenarios.
Inputs & outputs
When to use vue-testing-best-practices
- →Set up Vitest for a Vue 3 project
- →Write black-box tests for components
- →Implement E2E tests with Playwright
About this skill
Vue.js testing best practices, patterns, and common gotchas.
Testing
- Setting up test infrastructure for Vue 3 projects → See testing-vitest-recommended-for-vue
- Tests keep breaking when refactoring component internals → See testing-component-blackbox-approach
- Tests fail intermittently with race conditions → See testing-async-await-flushpromises
- Composables using lifecycle hooks or inject fail to test → See testing-composables-helper-wrapper
- Getting "injection Symbol(pinia) not found" errors in tests → See testing-pinia-store-setup
- Components with async setup won't render in tests → See testing-suspense-async-components
- Snapshot tests keep passing despite broken functionality → See testing-no-snapshot-only
- Choosing end-to-end testing framework for Vue apps → See testing-e2e-playwright-recommended
- Tests need to verify computed styles or real DOM events → See testing-browser-vs-node-runners
- Testing components created with defineAsyncComponent fails → See async-component-testing
- Teleported modal content can't be found in wrapper queries → See teleport-testing-complexity
Reference
When not to use it
- →Direct DOM manipulation without Vue context
- →Non-Vue web applications
Prerequisites
Limitations
- →Requires adherence to provided reference patterns
- →Dependent on proper component decoupling
How it compares
Focuses on Vue-specific reactivity and lifecycle challenges rather than general DOM testing.
Compared to similar skills
vue-testing-best-practices side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| vue-testing-best-practices (this skill) | 5 | 6mo | No flags | Intermediate |
| vue | 0 | 6mo | No flags | Intermediate |
| vue-best-practices | 19 | 5mo | No flags | Intermediate |
| vue-debug-guides | 4 | 6mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by vuejs-ai
View all by vuejs-ai →You might also like
vue
valibali
Use when editing .vue files, creating Vue 3 components, writing composables, or testing Vue code - provides Composition API patterns, props/emits best practices, VueUse integration, and reactive destructuring guidance
vue-best-practices
antfu
MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.
vue-debug-guides
vuejs-ai
Vue 3 debugging and error handling for runtime errors, warnings, async failures, and SSR/hydration issues. Use when diagnosing or fixing Vue issues.
vue-router-best-practices
antfu
Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.
vueuse
onmax
Use when working with VueUse composables - provides reactive utilities for state, browser APIs, sensors, network, animations. Check VueUse before writing custom composables - most patterns already implemented.
frontend-vue-development
TencentBlueKing
前端 Vue 开发规范，涵盖 Vue 2/3 组件开发、Vuex 状态管理、路由配置、组件通信、样式规范、国际化。当用户进行前端开发、编写 Vue 组件、处理状态管理或实现页面交互时使用。