Testando seu Javascript com Jest!

Normalmente, uma pessoa que está começando a aprender Javascript sempre testa suas funções usando o “console.log()”. Até certo ponto ele é mais que suficiente para você saber se seu código está fazendo o que deve, mas vai chegar um momento em que você vai começar a fazer muitas funções, e para escrever um console.log() dentro de todas só pra testar, vai ser bem chato.

Para lhe poupar desse trabalho, a equipe de desenvolvedores do facebook criou um framework maravilhoso chamado “Jest”! Com ele você pode testar seus códigos Javascript sem precisar ficar adicionando e retirando os console.log() das suas funções.

Instalação

Para se começar a usar o Jest é muito simples.
Passo 1: Crie uma pasta onde irão ficar os arquivos de teste e entre nela.
Passo 2: Crie um arquivo chamado package.json, e nele coloque o seguinte conteúdo:

Passo 3: Navegue até a pasta usando o comando cd do terminal e rode o seguinte: npm install --save-dev jest (para isso você deve ter o npm instalado, e de preferência atualizado). Note que foram adicionadas duas coisas, a pasta node_modules e o arquivo package-lock.json, deixe os dois lá.

Pronto! Você já tem tudo que precisa para começar a testar seu código. Agora vamos aprender como é que se faz pra escrever esses testes.

Escrevendo os Testes e Funções

Passo 1: Crie um arquivo calcs.js, e nele coloque o seguinte conteúdo:

Passo 2: Crie um arquivo testes.test.js, e nele coloque o seguinte conteúdo:

No arquivo calcs.js, você apenas criou uma função simples de somar dois números e exportou ela usando o module.exports. Já no arquivo testes.test.js é onde a magia acontece. Na primeira linha, a constante calcs está recebendo as funções que estão sendo exportadas pelo calcs.js (a constante e o arquivo não precisam ter o mesmo nome), e abaixo está escrito apenas um teste, com a sintaxe bem intuitiva a propósito. Primeiro há uma breve descrição e depois o resultado que ele espera receber a partir de um certo teste.

Agora abra o seu terminal, navegue até a pasta e rode o comando npm test (ele pode demorar um pouco para executar da primeira vez).

Pronto! Você acabou de rodar seu primeiro teste com o Jest. Vamos escrever mais funções e mais testes? Abra o calcs.js, adicione a função division e altere o module.exports, como abaixo:

Agora abra o arquivo de testes e adicione as linhas 7, 8 e 9.

Perceba que antes nós usamos o nome da constante como se fosse o nome da função (após o expect), mas como agora o arquivo calcs.js tem mais de uma função, nós precisamos especificar qual delas será usada no teste. E outra diferença é que o .toEqual considera até as casas decimais, então, se o valor retornado puder ser um número com ponto flutuante use o .toBeCloseTo, e coloque sempre pelo menos dois dígitos após o ponto.

Agora vamos criar o array.js e adicionar uma função que retorna apenas os números pares de dentro de um array.

Acima adicionamos mais um require de outro arquivo, e também mais um teste. Perceba agora que nós pulamos os dois primeiros testes com o .skip e usamos variáveis para o .toEqual e o expect não ficarem muito grandes e confusos.

“Tem como pular vários testes de uma só vez?” Sim!

O describe (linha 4) pode ser usado para agrupar vários testes em uma suíte. Você também pode colocar um .skip nele para pular vários testes sem precisar adicionar o pulo em cada um deles.

Adicione a função addItem4 e altere o module.exports no arquivo array.js, como feito abaixo:

Agora, tire o .skip do describe e adicione o seguinte teste dentro da suíte:

O .toContain é usado quando você espera que um certo array contenha um certo elemento. No caso acima, o array declarado não tem o ‘item4’, mas após a chamada da função addItem4, é esperado que tenha.

Adicione o teste abaixo…

Acima estão mais alguns recursos bem legais, com expressões lógicas que não a simples igualdade.

Se livrando da pasta node_modules

Saindo um pouco da parte de escrever testes e funções, note que a pasta node_modules (que é adicionada quando você instala o Jest) é necessária para que os testes funcionem. Mas há um jeito de se livrar dela, que é instalando o Jest globalmente. Para se fazer isto, apenas rode o seguinte comando (com a permissão de root): npm install -g jest
Isso vai fazer com que você não precise mais da pasta node_modules e também lhe dá a opção de trocar o npm test pelo comando jest. Faça a prova, exclua a node_modules e tente rodar um teste novamente. Perceba também que você não vai mais precisar instalar o Jest sempre que quiser criar uma nova pasta de testes, pois você já o instalou globalmente.

Ótima Ferramenta!

O Jest é um framework simples, fácil de configurar, muito bom tanto para iniciantes quanto para programadores mais experientes. E outra, ele pode ser usado não só para testes simples como os feitos neste artigo, mas também para testes de front-end em páginas web! Se você se interessou por ele e gostaria de aprender mais, clique aqui para ver toda a documentação criada pelo time do facebook (que aliás é muito boa). Bons estudos e que a força esteja com você!