TDD em JavaScript: como parar de ter medo de bugs e começar a codar com confiança

Por que o TDD não é uma tendência da moda, mas seu novo melhor amigo

Imagine: você escreve código, tudo funciona perfeitamente. Você executa o aplicativo — sem bugs. Uma semana depois, você adiciona um novo recurso e... tudo quebra. Familiar? Se você já passou horas procurando um erro que apareceu devido a uma alteração acidental em um módulo vizinho — este artigo é para você.

Desenvolvimento Orientado a Testes (Test-Driven Development, TDD) não é apenas uma metodologia, mas um verdadeiro salva-vidas para o desenvolvedor. No mundo do JavaScript, onde o código muda mais rápido que o clima, o TDD ajuda a se manter à tona. Vamos entender como isso funciona e por que, depois do TDD, você não conseguirá mais escrever código como antes.

O que é TDD de verdade? (Spoiler: não é sobre testes)

Muitos pensam que TDD é apenas "escrever testes antes do código". Mas na verdade é uma filosofia de design. O TDD faz você pensar sobre como seu código será usado, antes de escrevê-lo. É como um arquiteto que primeiro desenha a planta do edifício e depois começa a construir.

O ciclo do TDD consiste em três etapas (frequentemente chamado de "Red-Green-Refactor"):

\n
• Red: Escreva um teste que certamente falhará (porque a funcionalidade ainda não existe).
\n
• Green: Escreva o código mínimo para que o teste passe.
\n
• Refactor: Melhore o código sem alterar seu comportamento (os testes garantem que você não quebrou nada).
\n

E sim, esse ciclo se repete para cada pequena unidade de funcionalidade. Parece uma desaceleração? Talvez. Mas a longo prazo, você economizará horas de depuração.

Por que o JavaScript é ideal para TDD

JavaScript é uma linguagem dinâmica. Esta é sua força e fraqueza. Erros em tempo de execução são comuns, especialmente em projetos grandes. O TDD transforma o JavaScript de uma ferramenta "flexível, mas frágil" em uma plataforma confiável.

Além disso, o ecossistema JS é rico em ferramentas de teste: Jest, Mocha, Chai, Jasmine. Usaremos o Jest — é simples, poderoso e popular. Se você ainda não conhece o Jest, não se preocupe: começaremos do básico.

Prática: escrevendo uma calculadora com TDD

A teoria é boa, mas vamos para o código real. Escreveremos uma calculadora simples usando TDD. Este é um exemplo clássico, mas demonstra perfeitamente o processo.

Passo 1: Configuração do projeto

Crie uma nova pasta e inicialize o projeto:

mkdir tdd-calculator\ncd tdd-calculator\nnpm init -y\nnpm install --save-dev jest\n

Adicione o script no package.json:

"scripts": {\n  "test": "jest"\n}\n

Passo 2: Vermelho — escrevendo o teste para adição

Crie o arquivo calculator.test.js:

// calculator.test.js\nconst { add } = require('./calculator');\n\ndescribe('Calculator', () => {\n  test('adds 2 + 3 to equal 5', () => {\n    expect(add(2, 3)).toBe(5);\n  });\n});\n

Execute o teste: npm test. Ele falhará com um erro, porque a função add não existe. Isso é normal — esta é a fase vermelha.

Passo 3: Verde — escrevendo o código mínimo

Crie o calculator.js:

// calculator.js\nfunction add(a, b) {\n  return a + b;\n}\n\nmodule.exports = { add };\n

Execute o teste novamente. Verde? Ótimo! Acabamos de passar pela fase verde.

Passo 4: Refatoração

O código é simples, não há nada para refatorar. Mas imagine que queremos adicionar uma verificação de tipo. O TDD permite fazer isso com segurança: primeiro o teste, depois o código.

// calculator.test.js\ntest('throws error if arguments are not numbers', () => {\n  expect(() => add('2', 3)).toThrow('Arguments must be numbers');\n});\n

Agora modificamos o add: