| name | vue3-testing |
| description | Desenvolve testes unitários com Vitest e testes E2E com Playwright seguindo padrões do projeto. Use quando criando ou modificando testes, ou quando precisar de templates e padrões de teste. |
Vue 3 Testing
Guidelines completas para desenvolvimento de testes unitários (Vitest) e testes E2E (Playwright) no projeto Vue 3 FSD.
Princípios Fundamentais
- Testes junto ao código: Testes unitários em
__tests__/ dentro de cada feature/componente
- E2E por fluxo: Testes E2E organizados por feature/flow em
playwright/
- Mocking consistente: MSW para APIs, mocks para dependências externas
- Cobertura adequada: Testar casos principais e edge cases
- Manutenibilidade: Testes claros, legíveis e fáceis de manter
Quando Usar Esta Skill
- Criando novos testes unitários ou E2E
- Modificando testes existentes
- Dúvidas sobre padrões de teste do projeto
- Precisa de templates de teste
- Configurando mocks e stubs
- Organizando estrutura de testes
Estrutura de Testes
Testes Unitários (Vitest)
src/
└── features/
└── [feature-name]/
├── __tests__/
│ └── [feature].spec.ts
└── index.vue
Testes E2E (Playwright)
playwright/
└── [feature-name]/
├── [feature]-flow.spec.ts
└── [feature]-[scenario].spec.ts
Recursos Disponíveis
Configuração
Vitest
- Configuração em
vitest.config.ts
- Ambiente:
jsdom
- Exclui:
e2e/**, playwright/**
Playwright
- Configuração em
playwright.config.ts
- Base URL:
http://localhost:8080
- Browsers: Chromium, Firefox, WebKit
Convenções
- Nomenclatura:
[nome].spec.ts para unitários, [nome].spec.ts para E2E
- Describe blocks: Descrever o que está sendo testado
- Test names: Em português, descritivos do comportamento esperado
- Arrange-Act-Assert: Estrutura clara dos testes
Links Relacionados
