Vue Testing Best Practices

Name: Vue Testing Best Practices
Author: vuejs-ai

Para testing en Vue.js. Cubre Vitest, Vue Test Utils, testing de componentes, mocking, patrones de testing y Playwright para testing E2E.

Estrellas: 2.8k
Actividad: 27
Actualizado: hace 6 meses
Commits: 0
Contexto: 532 tok
Paquete: 12 archivos

Instalar

Funciona con cualquier agente que lea SKILL.md

npx -y skills add vuejs-ai/skills --skill vue-testing-best-practices --agent claude-code

Se instala solo en este repositorio.

Qué hace

Aporta patrones y guías de referencia para testear componentes Vue 3, composables y stores Pinia
Recomienda Vitest y Vue Test Utils para testing unitario/componentes, y Playwright para E2E
Cubre soluciones a problemas comunes: race conditions, async setup, Teleport, defineAsyncComponent, snapshots

Úsalo cuando

Al configurar infraestructura de test para proyectos Vue 3
Cuando los tests se rompen al refactorizar internals de componentes
Cuando aparecen errores como "injection Symbol(pinia) not found"
Al elegir un framework de testing end-to-end para apps Vue

No lo uses cuando

Qué lo activa

Di cualquiera de estas frases y el agente debería cargar este skill.

“Configura Vitest y Vue Test Utils para mi proyecto Vue 3”
“Mis tests fallan de forma intermitente por race conditions, ayúdame”
“¿Cómo testeo un componente con defineAsyncComponent?”
“Necesito testear contenido dentro de un Teleport”

SKILL.md

En inglés

conClaude ChatGPT Perplexity

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

Reproducido de vuejs-ai/skills bajo licencia MIT. Leer esta página en markdown.

Archivos

12 archivos en el paquete. Solo se lee SKILL.md al activarse — las referencias se cargan si el skill decide que las necesita.

Detalles

Creador: vuejs-ai
Categoría: Testing y QA
Licencia: MIT
Recursos incluidos: Incluye scripts o referencias
Repositorio: vuejs-ai/skills
Código fuente: Ver SKILL.md

Más de vuejs-ai/skills

Este repo incluye 8 skills. Si instalas uno, normalmente ya tienes los demás.

Vue Best Practices

2.8k

Debe usarse para tareas de Vue.js: recomienda Composition API con `<script setup>` y TypeScript. Cubre Vue 3, SSR, Volar, vue-tsc, Vue Router, Pinia y Vite.

Costo de contexto al activarse: 2.2k tok
Tamaño del paquete: 23 archivos
Última actualización: hace 6 meses

herramientas desarrollo

Vue Debug Guides

2.8k

Depuración y manejo de errores en Vue 3: errores en tiempo de ejecución, warnings, fallos async y problemas de SSR/hidratación. Úsalo al diagnosticar o corregir problemas de Vue.

Costo de contexto al activarse: 5.2k tok
Tamaño del paquete: 140 archivos
Última actualización: hace 6 meses

herramientas desarrollo

Create Adaptable Composable

2.8k

Crea un composable Vue de nivel librería que acepta entradas maybe-reactive (MaybeRef / MaybeRefOrGetter), normalizadas con toValue()/toRef() dentro de watch/watchEffect.

Costo de contexto al activarse: 668 tok
Tamaño del paquete: 1 archivo
Última actualización: hace 6 meses

herramientas desarrollo

Vue Jsx Best Practices

2.8k

Sintaxis JSX en Vue (por ejemplo, class frente a className, configuración del plugin JSX).

Costo de contexto al activarse: 98 tok
Tamaño del paquete: 2 archivos
Última actualización: hace 6 meses

herramientas desarrollo

Vue Options Api Best Practices

2.8k

Estilo Options API de Vue 3 (data(), methods, contexto this). Cada referencia muestra únicamente la solución en Options API.

Costo de contexto al activarse: 462 tok
Tamaño del paquete: 11 archivos
Última actualización: hace 6 meses

herramientas desarrollo

Vue Pinia Best Practices

2.8k

Buenas prácticas de Pinia: configuración de stores, patrones de gestión de estado y reactividad con stores.

Costo de contexto al activarse: 293 tok
Tamaño del paquete: 7 archivos
Última actualización: hace 6 meses

herramientas desarrollo

Skills relacionados

Úsalo al recibir feedback de code review, antes de implementar sugerencias, sobre todo si el feedback parece poco claro o técnicamente cuestionable: exige rigor técnico y verificación, no acuerdo performativo ni implementación ciega.

Costo de contexto al activarse: 1.6k tok
Tamaño del paquete: 1 archivo
Última actualización: el mes pasado

testing qa

Requesting Code Review

271k

Úsalo al completar tareas, implementar features mayores, o antes de mergear, para verificar que el trabajo cumple los requisitos.

Costo de contexto al activarse: 739 tok
Tamaño del paquete: 2 archivos
Última actualización: hace 4 días

testing qa

Systematic Debugging

271k

Úsalo ante cualquier bug, fallo de test o comportamiento inesperado, antes de proponer arreglos.

Costo de contexto al activarse: 2.4k tok
Tamaño del paquete: 11 archivos
Última actualización: hace 24 días

testing qa