Visão Geral

Estrutura organizada para evitar conflitos entre frameworks de teste (Vitest vs Playwright).

Estrutura

packages/console/
├── test-shared/          # ✅ Utils compartilhados (SEM dependências de framework)
│   ├── fixtures/         # Dados fixos (tokens, users, ids)
│   └── factories/        # Criadores de objetos
│
├── test-utils/           # 🧪 Utils específicos do Vitest
│   ├── handlers/         # MSW handlers
│   ├── middlewares/      # MSW middlewares
│   └── server.ts         # MSW server setup
│
└── e2e/                  # 🎭 Testes Playwright
    ├── pages/            # Page Objects
    └── specs/            # Testes E2E

Regras de Importação

✅ Permitido

// Testes Vitest podem importar de:
import { TOKENS } from "../../test-shared"; // ✅ Shared
import { mswServer } from "../../test-utils"; // ✅ Vitest utils

// Testes Playwright podem importar de:
import { TOKENS } from "../../test-shared"; // ✅ Shared
import { LoginPage } from "../pages/login"; // ✅ Page Objects

❌ Proibido (causa conflitos)

// ❌ Playwright NÃO deve importar de test-utils (tem dependências Vitest)
import { mswServer } from "../../test-utils"; // ❌ ERRO!

// ❌ Vitest NÃO deve importar de e2e/pages (são Page Objects do Playwright)
import { LoginPage } from "../../e2e/pages"; // ❌ ERRO!

Framework Agnostic

Propósito: Utils compartilhados sem dependências externas de testes.

Características:

• ✅ Zero dependências de frameworks de teste
• ✅ Apenas JavaScript/TypeScript puro
• ✅ Importável por Vitest E Playwright
• ✅ Fixtures simples e factories leves

Conteúdo:

test-shared/fixtures/tokens.ts

export const TOKENS = {
  valid: () => generateMockToken(),
  expired: () => generateMockToken(expiredTime),
};

// test-shared/factories/user.ts
export const createUser = (overrides = {}) => ({
  id: "test-user",
  name: "Test User",
  ...overrides,
});

Vitest Específico

Propósito: Setup e mocks específicos do Vitest (MSW, etc).

Características:

• Apenas para testes Vitest
• Pode ter dependências pesadas (MSW, faker, etc)
• Inclui server MSW e handlers HTTP
• Setup de testes de integração

Conteúdo:

test-utils/server.ts

import { setupServer } from "msw/node";

export const mswServer = setupServer(...handlers);

// test-utils/handlers/auth.handlers.ts
export const authHandlers = [
  http.post("/api/login", () => {
    return HttpResponse.json({ token: TOKENS.valid() });
  }),
];

Playwright Específico

Propósito: Testes End-to-End com Playwright.

Características:

• Testa fluxos completos da aplicação
• Page Object Model
• Foca em interação do usuário
• Usa test-shared/ para fixtures

Conteúdo:

e2e/pages/login.page.ts

export class LoginPage extends BasePage {
  async login(email, password) { ... }
}

// e2e/specs/login.spec.ts
test('should login', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.login('user@test.com', 'pass');
});

Por que essa separação?

Problema Anterior

❌ Testes Playwright importavam de `test-utils/`
   ↓
   `test-utils/` tinha dependências Vitest (MSW com Vitest)
   ↓
   Playwright carregava código do Vitest
   ↓
   CONFLITO: "Cannot redefine Symbol($$jest-matchers-object)"

Solução Atual

✅ Testes Playwright importam de `test-shared/`
   ↓
   `test-shared/` NÃO tem dependências de framework
   ↓
   Playwright carrega apenas código puro
   ✅ SEM CONFLITOS

Checklist ao Criar Utils

Antes de adicionar algo em test-shared/:

• É framework-agnostic? (sem vitest, @playwright/test, msw)
• É simples? (sem lógica complexa)
• Será usado por Vitest E Playwright?
• Não tem dependências externas pesadas?

Se qualquer resposta for NÃO, coloque em:

• test-utils/ se for específico do Vitest
• e2e/ se for específico do Playwright

Exemplos de Uso

Criar novo token fixture

test-shared/fixtures/tokens.ts

export const TOKENS = {
  admin: () => generateMockToken({ role: "admin" }),
};

Criar handler MSW

test-utils/handlers/templates.handlers.ts

export const templateHandlers = [
  http.get("/api/templates", () => {
    return HttpResponse.json([createTemplate()]);
  }),
];

Criar Page Object

e2e/pages/template.page.ts

export class TemplatePage extends BasePage {
  async installTemplate() { ... }
}

Documentação

• Utilitários Compartilhados - Utils compartilhados
• Testes Playwright - Testes Playwright
• Utils Vitest - Utils Vitest (se existir)