BDD em JavaScript: escrevendo testes que o negócio entende

Como explicar a um programador que um bug não é "não funciona"?

Você já recebeu uma tarefa do tipo: "Faça o botão funcionar corretamente"? Ou, pior ainda, escreveu o código, os testes estão verdes, e o cliente diz: "Bem, não é isso que eu pedi". Dor familiar? Bem-vindo ao mundo onde o BDD (Behaviour-Driven Development) em JavaScript se torna uma tábua de salvação.

BDD não é apenas mais uma sigla da moda. É uma abordagem que faz desenvolvedores, testadores e analistas de negócios falarem a mesma língua. Em português claro, sem "metodologias" e "paradigmas arquiteturais". Hoje vamos ver como implementar BDD em um projeto JavaScript, escrever testes reais e entender por que isso torna o código mais limpo e a vida mais fácil.

O que é BDD e como ele difere do TDD?

Vamos logo esclarecer as coisas. BDD (Behaviour-Driven Development) é uma evolução do TDD (Test-Driven Development). Se o TDD diz: "Primeiro escreva o teste, depois o código", o BDD acrescenta: "Mas o teste deve ser compreensível para a avó investidora".

A ideia central do BDD: testamos o comportamento do sistema, não sua estrutura interna. Não perguntamos: "A função retorna true?". Perguntamos: "O usuário consegue adicionar um produto ao carrinho e ver o total do pedido?". A diferença é colossal.

Para BDD em JavaScript, existe uma linguagem especial — Gherkin. É um pseudo-inglês (ou pseudo-português) que parece um manual de instruções do Lego:

Funcionalidade: Carrinho de compras\n  Como um usuário registrado\n  Eu quero adicionar produtos ao carrinho\n  Para ver o valor total\n\n  Cenário: Adicionar um produto\n    Dado que o usuário está autenticado\n    Quando ele adiciona o produto "Notebook" ao carrinho\n    Então o carrinho exibe 1 produto\n    E o valor total é igual a 99900 reais\n

Concorde, isso se lê como um requisito de negócio, não como código. E essa é a principal vantagem do BDD.

Ferramentas para BDD em JavaScript

Para praticar behaviour-driven development em JavaScript, são necessárias as ferramentas certas. Aqui estão os três pilares:

\n
• Cucumber.js — o framework mais popular para BDD. Ele interpreta cenários Gherkin e os conecta ao código.
\n
• Jest + Jest-Cucumber — se você já usa Jest, esta é a opção ideal. Sem mágica, apenas integração pura.
\n
• Mocha + Chai + Gherkin — para quem gosta de montar o quebra-cabeça manualmente. Flexível, mas com mais código.
\n

Usaremos o Cucumber.js, pois é o padrão da indústria. A instalação é simples:

npm install @cucumber/cucumber --save-dev\n

Depois, criamos a pasta features/ — onde ficarão nossos arquivos .feature. E na pasta step_definitions/ — o código que dá vida aos cenários.

Escrevendo o primeiro teste BDD: autenticação do usuário

Vamos imaginar que estamos criando uma loja virtual. A primeira coisa a testar é o login. Crie o arquivo features/login.feature:

# language: pt\nFuncionalidade: Autenticação do usuário\n  Como um visitante do site\n  Eu quero entrar na minha conta\n  Para gerenciar meus pedidos\n\n  Cenário: Login bem-sucedido com dados corretos\n    Dado que estou na página de login\n    Quando eu insiro o email "user@example.com" e a senha "123456"\n    E clico no botão "Entrar"\n    Então vejo a saudação "Bem-vindo, João!"\n

Agora precisamos escrever os passos (steps) — código JavaScript que executa essas ações. Crie step_definitions/login.steps.js:

const { Given, When, Then } = require('@cucumber/cucumber');\nconst { expect } = require('chai');\n\n// Estado da aplicação (simulação)\nlet currentPage = '';\nlet userEmail =