Aula 13 – Testes Unitários: Vitest e React Testing Library 🧪

Escrever testes garante que seu código continue funcionando após mudanças e refatorações. Hoje vamos aprender a testar nossos componentes da forma correta.

🛠️ O que testar?

Não precisamos testar tudo, mas devemos focar em: - Lógica de Negócio: Funções que fazem cálculos ou transformações. - Interação do Usuário: O botão clicado disparou a ação correta? - Renderização: O componente exibiu o dado esperado?

🏗️ Ferramentas Modernas

Vitest: O sucessor do Jest, extremamente rápido e nativo do Vite.
React Testing Library (RTL): Foca em testar o componente como o usuário o vê (testando acessibilidade e texto, não a implementação interna).

Instalação:

$ npm install -D vitest jsdom @testing-library/react @testing-library/jest-dom

📝 Escrevendo seu Primeiro Teste

import { render, screen } from '@testing-library/react';
import { test, expect } from 'vitest';
import Saudacao from './Saudacao';

test('deve renderizar o nome do usuário corretamente', () => {
  render(<Saudacao nome="Ricardo" />);
  const elemento = screen.getByText(/Olá, Ricardo/i);
  expect(elemento).toBeInTheDocument();
});

🚀 Prática da Aula

Vamos criar testes para o componente Contador.

Crie o componente Contador com um estado inicial zero.
Escreva um teste que verifica se o valor "0" aparece na tela.
Escreva um teste que simula o clique no botão de "Incrementar" e verifica se o valor mudou para "1".
Use o userEvent para simular as interações de forma mais realista.

📊 Por que testar?

graph TD
    A[Mudança no Código] --> B{Tem Testes?}
    B -- Sim --> C[Testes rodam e dão segurança]
    B -- Não --> D[Rezamos para não quebrar nada em produção]
    C --> E[Deploy Tranquilo]
    D --> F[Bugs inesperados]

Dica: TDD

Tente o Test Driven Development: escreva o teste ANTES de escrever o código do componente. Isso ajuda a pensar melhor na arquitetura da sua solução!