Test Driven Development (TDD) com Jest

O que é TDD?

O TDD, ou Test Driven Development, segue um ciclo bastante definido e objetivo para construir software de qualidade. Tudo começa com a etapa chamada Red. Nesse momento, o desenvolvedor escreve um teste automatizado que, propositalmente, irá falhar. Isso acontece porque ainda não existe nenhum código que atenda àquele requisito definido pelo teste. O erro é esperado, pois sinaliza que a funcionalidade realmente não foi implementada.

Em seguida, entramos na etapa Green. Agora o objetivo é escrever o código mais simples possível para fazer aquele teste específico passar. Não se preocupa com arquitetura, padrões ou otimizações: o foco é apenas garantir que o comportamento exigido pelo teste está funcionando. Quando o teste finalmente passa, significa que aquela parte da lógica foi atendida.

Por último, chega a etapa de Refactor. Aqui, com todos os testes passando, o desenvolvedor pode aprimorar, reorganizar ou limpar o código, deixando a solução mais elegante e fácil de manter. O diferencial é que, durante a refatoração, os testes continuam rodando. Assim, se qualquer detalhe for alterado de forma errada e quebrar a lógica esperada, o teste falha imediatamente, servindo como um alerta instantâneo.

Esse ciclo — Red, Green e Refactor — é curto, contínuo e iterativo. Ele incentiva o programador a pensar nos requisitos antes mesmo de começar a implementar, pois tudo parte do teste. Ao seguir esse processo, o código se torna naturalmente mais robusto, claro, fácil de evoluir e com muito menos bugs em produção.

Passos para aplicar TDD com Jest

• Defina o comportamento esperado Antes de escrever qualquer código, defina exatamente o que a função, componente ou módulo precisa fazer. Isso pode ser feito escrevendo descrições dos testes ou cenários de uso.

• Crie um teste que falha Escreva um teste em Jest para validar a funcionalidade desejada. No início, esse teste irá falhar porque a implementação ainda não existe.

  Copiar
  // sum.test.js
  import { sum } from './sum';
  
  test('deve somar dois números corretamente', () => {
    expect(sum(2, 3)).toBe(5);
  });

• Implemente o código mínimo necessário

  Implemente apenas o suficiente para que o teste passe.

  Copiar
  // sum.js
  export function sum(a, b) {
    return a + b;
  }

• Refatore com segurança Agora, com o teste passando, é possível refatorar o código se necessário, sabendo que qualquer erro será detectado automaticamente pelos testes.

Vantagens práticas do TDD

O TDD traz uma série de benefícios práticos que impactam diretamente a qualidade e a confiança no desenvolvimento de software. Ao escrever os testes antes de qualquer linha de código, o desenvolvedor já está antecipando possíveis cenários de erro e comportamentos inesperados, o que naturalmente reduz a incidência de bugs no sistema. Esse hábito de prever problemas desde o início deixa o processo de desenvolvimento muito mais seguro.

Além disso, o TDD proporciona uma refatoração muito mais tranquila. Isso acontece porque todas as alterações realizadas no código ficam protegidas pelos testes automatizados já existentes. Sempre que uma modificação é feita, os testes são executados e, se algo quebrar, o desenvolvedor é alertado imediatamente, evitando que funcionalidades importantes deixem de funcionar sem que ninguém perceba.

Outro aspecto fundamental do TDD é o aumento na clareza e entendimento do código. Os testes funcionam como uma espécie de documentação viva do sistema, descrevendo exatamente como cada função, classe ou componente deve se comportar em diferentes situações. Isso facilita tanto para quem está desenvolvendo quanto para quem chega depois no projeto e precisa entender rapidamente o que cada parte faz.

O desenvolvimento incremental é outra vantagem clara: o ciclo curto de escrever um teste, implementar a solução e refatorar permite que o sistema evolua de forma controlada, com feedback imediato sobre o que está funcionando ou não. Isso evita grandes surpresas ou retrabalho no final do projeto.

Por fim, o TDD naturalmente conduz a uma cobertura de testes muito mais abrangente. Como todo o desenvolvimento é guiado pelos testes, a tendência é que uma parcela muito maior do código esteja coberta, contribuindo para um projeto mais robusto, confiável e preparado para mudanças futuras.

Exemplo com React e Jest

Imagine um componente simples de botão que incrementa um contador ao ser clicado.

1. Escreva o teste:

Copiar
// CounterButton.test.jsx
import { render, fireEvent, screen } from '@testing-library/react';
import CounterButton from './CounterButton';

test('deve incrementar o contador ao clicar', () => {
  render(<CounterButton />);
  const button = screen.getByText('Contador: 0');
  fireEvent.click(button);
  expect(button).toHaveTextContent('Contador: 1');
});

2. Implemente o componente:

Copiar
// CounterButton.jsx
import { useState } from 'react';

export default function CounterButton() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Contador: {count}
    </button>
  );
}

O teste irá passar, comprovando que o componente atende ao requisito. Caso o botão pare de funcionar em algum momento devido a uma alteração, o teste falhará e alertará imediatamente o desenvolvedor.