Pular para o conteúdo

Guia de Testes

O Juca usa Vitest para testes unitários e de integração, Testing Library para testes de componentes e Playwright para testes E2E. Esta página cobre como rodar, escrever e as convenções de teste do projeto.

FerramentaVersãoFinalidade
Vitest^4.0.18Runner de testes unitários e de integração
@vitest/coverage-v8^4.0.18Provedor de cobertura V8
Playwright^1.58.0Testes E2E (somente Chromium)
Testing Library^16.3.2Utilitários para testes de componentes React
jest-dom^6.9.1Matchers de asserção para o DOM
user-event^14.6.1Simulação de interação do usuário
jsdom^28.0.0Ambiente de browser para testes unitários
Terminal window
# Testes unitários (execução única)
npm test
# Modo watch (reexecuta ao alterar arquivos)
npm run test:watch
# Relatório de cobertura
npm run test:coverage
# Testes E2E
npm run test:e2e
# E2E com browser visível
npm run test:e2e:headed
# E2E com modo UI (depurador visual)
npm run test:e2e:ui

Os testes ficam junto ao código que testam:

Local do CódigoLocal do TesteExemplo
src/app/api/unified/sessions/route.tssrc/app/api/unified/sessions/__tests__/route.test.tsTeste de rota de API
src/lib/blocks/types.tssrc/lib/blocks/__tests__/types.test.tsTeste de biblioteca
src/components/blocks/DiagnosisBlock.tsxsrc/components/blocks/__tests__/DiagnosisBlock.test.tsxTeste de componente
src/actions/briefing.tssrc/actions/__tests__/briefing.test.tsTeste de Server Action
(fluxos E2E)e2e/*.spec.tsSpecs end-to-end
(dados E2E)e2e/fixtures/briefing-blocks.tsFixtures compartilhados

Arquivos de teste do Vitest podem especificar seu ambiente:

// @vitest-environment node
// Use para: código server-side (jsPDF, SQLite, sistema de arquivos)
// @vitest-environment jsdom
// Use para: testes de componente (React, manipulação do DOM)

O ambiente padrão é jsdom (configurado em vitest.config.ts).

import { createDiagnosisData } from '@/lib/blocks/types';
import { makeBlock } from './helpers';
describe('createDiagnosisData', () => {
it('creates diagnosis block from analysis', () => {
const analysis = { /* mock CaseAnalysis */ };
const data = createDiagnosisData(analysis);
expect(data).toHaveProperty('situation');
expect(data).toHaveProperty('area');
});
});

O helper de testes makeBlock() cria fixtures de blocos com sobreposições de tipo e dados:

const block = makeBlock({
type: 'diagnosis',
data: { situation: 'pesquisando', area: 'civil' }
});

Os testes E2E usam Playwright com mock de API via page.route():

import { test, expect } from '@playwright/test';
test('renders briefing blocks', async ({ page }) => {
// Mock da resposta da API
await page.route('/api/unified/analyze', async route => {
await route.fulfill({
json: { success: true, data: { blocks: mockBlocks } }
});
});
await page.goto('/');
await expect(page.getByTestId('work-canvas')).toBeVisible();
});

Destaques da configuração do Playwright:

ConfiguraçãoValor
BrowserSomente Chromium (Desktop Chrome)
Paralelotrue
Retentativas2 no CI, 0 localmente
ScreenshotsSomente em falhas
TracesNa primeira retentativa
URL Basehttp://localhost:3000
ÁreaArquivos de TesteCobertura
Rotas de API (src/app/api/)51Boa
Lib de backend (src/lib/)48Boa
Componentes (src/components/)24Parcial (ui/ e blocks/ cobertos)
Server Actions (src/actions/)2Parcial
Specs E2E (e2e/)8Fluxos principais cobertos

O GitHub Actions roda a cada push para main/develop e em PRs para main:

  1. Job lint-and-build: npm cinpm run lintnpm run build
  2. Job test-unit: npm cinpm testnpm run test:coverage

Os artefatos de cobertura são enviados com retenção de 14 dias.