Vue 3 Testing

Guidelines completas para desenvolvimento de testes unitários (Vitest) e testes E2E (Playwright) no projeto Vue 3 FSD.

Princípios Fundamentais

1. Testes junto ao código: Testes unitários em __tests__/ dentro de cada feature/componente
2. E2E por fluxo: Testes E2E organizados por feature/flow em playwright/
3. Mocking consistente: MSW para APIs, mocks para dependências externas
4. Cobertura adequada: Testar casos principais e edge cases
5. 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

• unit-testing.md - Padrões e templates de testes unitários
• e2e-testing.md - Padrões e templates de testes E2E
• mocking-patterns.md - Padrões de mocking com MSW e stubs
• templates.md - Templates prontos para copiar e adaptar

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

• Vue Test Utils
• Vitest
• Playwright
• MSW