📊 Capítulo 16: React Testing Library & Vitest

Especialização em Frontend com React

🗺️ A Filosofia do React Testing Library: Testar Comportamento de Usuário

flowchart TD
    TEST["render(<FormularioLogin />)"]
    --> USER["const user = userEvent.setup()"]
    --> TYPE1["await user.type(screen.getByRole('textbox', { name: /e-mail/i }), 'admin@empresa.com')"]
    --> CLICK["await user.click(screen.getByRole('button', { name: /entrar/i }))"]
    --> ASSERT["expect(await screen.findByText(/bem-vindo/i)).toBeInTheDocument()"]

    NOTE["'The more your tests resemble the way your software is used,\nthe more confidence they can give you.' (Kent C. Dodds)"]
    ASSERT -.-> NOTE

    style TEST fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style USER fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style TYPE1 fill:#e1f5fe,stroke:#03a9f4,stroke-width:1.5px
    style CLICK fill:#fff9c4,stroke:#fbc02d,stroke-width:1.5px
    style ASSERT fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
    style NOTE fill:#c8e6c9,stroke:#2e7d32,stroke-width:1.5px

🎯 Slide 1: Prioridade de Seletores Acessíveis

1. getByRole (Prioridade Máxima): Testa o elemento conforme leitores de tela e usuários reais o percebem (button, heading, dialog).
2. getByLabelText: Para inputs de formulário.
3. getByPlaceholderText / getByText: Quando acessibilidade específica não for suficiente.
4. getByTestId: Apenas como último recurso!

🎯 Slide 2: fireEvent vs userEvent

• fireEvent: Dispara eventos DOM sintéticos simples.

• userEvent (Recomendado): Simula a interação humana real (movimenta o foco, clica, digita caractere a caractere disparando keydown, keypress e keyup na ordem correta).

🎯 Slide 3: Mocking de APIs com Mock Service Worker (MSW)

• O MSW intercepta requisições no nível de rede do Node.js, permitindo testar fluxos HTTP completos sem alterar o código dos seus componentes!