Iniciando com Jest: Parte 2 — Primeiro teste
Esse é o segundo artigo de uma série em que abordaremos como testar o nosso código JavaScript utilizando a biblioteca Jest. Nesse artigo nós aprenderemos a descrever os nossos cenários de testes utilizando alguns recursos disponibilizados pela API do Jest.
- Iniciando com Jest: Parte 1 — Configuração
- Iniciando com Jest: Parte 2 — Primeiro teste
- Iniciando com Jest: Parte 3 — Mocks (wip)
Todo o código que produziremos nesse artigo está na branch primeiro-teste-com-jest.
No artigo anterior preparamos a nossa máquina instalando o Node.js, criamos um projeto e instalamos a dependência Jest. Caso você não tenha o projeto em sua máquina e já possua o Node.js instalado, basta clonar o repositório testando_js, ir até o diretório do projeto no terminal e executar o comando npm install.
Iniciaremos com um código bem simples para entendermos como passar os nossos cenários de testes para o código utilizando Jest.
No Jest podemos representar os nossos cenários de testes utilizando duas funções test e it. Ambas recebem dois parâmetros, o primeiro é uma string com a descrição do nosso cenário de teste e o segundo é uma função com a implementação do cenário.
Nesse momento provavelmente surgiu uma dúvida… Por que duas funções com nomes diferentes mas com a mesma assinatura?!
No Jest a função it é apenas um apelido para a função test. Acredito que isso seja uma boa estratégia para atrair quem já escreveu testes utilizando bibliotecas como Jasmine e Mocha. Podendo ter uma curva de aprendizado menor ou até migrar os testes atuais para Jest sem ter que aprender um novo dialeto.
Outro ponto importante é que podemos ter cenários de testes que estão ligados por um contexto e/ou que necessitem de implementações semelhantes. Caso isso seja necessário, utilizaremos a função describe.
A função describe possui a mesma assinatura das funções test e it. A grande diferença é que a função describe é responsável por agrupar os nossos cenários de testes, enquanto as funções test e it representam os nossos cenários.
Nessa série nós seguiremos a seguinte convenção. Toda vez que tivermos a necessidade de agrupar dois ou mais cenários de teste em um describe, utilizaremos a função it para representá-los. Caso o cenário de teste não tenha a necessidade de ser agrupado, utilizaremos a função test.
Seguindo as convenções de nomenclatura do Jest, criaremos um arquivo chamado math.spec.js dentro do diretório src/__tests__/. Esse arquivo ficará responsável por conter todos os testes do nosso módulo math.
O próximo passo é identificar os cenários de testes possíveis para a função evenOrOdd.
Observando a função identificamos dois cenários de testes. O primeiro é o retorno de uma string “even” caso o resto da divisão do número, passado por parâmetro, seja igual a zero e o segundo é que será retornado “odd” caso o resto dessa divisão seja diferente de zero.
A primeira tarefa a se fazer é importar a função evenOrOdd em nosso arquivo de testes.
Com a função importada corretamente, nós abriremos um terminal e executaremos o comando npm run test:watch no mesmo nível de diretório do nosso package.json.
Como podemos observar o Jest encontrou o nosso arquivo math.spec.js, mas ocorreu um erro pois não foi encontrado um teste.
Para resolver esse problema nós passaremos os nossos cenários de teste para o arquivo math.spec.js utilizando a função test para descrever os nossos dois cenários de testes.
A primeira será com a descrição ‘should return “even” when a rest of the division by 2 is equal to zero’ e a segunda ‘should return “odd” when a rest of the division by 2 is different than zero’.
Assim que salvamos o arquivo, o terminal em que executamos o comando npm run test:watch é atualizado.
Nesse momento temos o nosso arquivo de teste criado com o nossos cenários de teste. Mas como garantimos que de fato eles estão passando?
Todo cenário de teste tem algum resultado esperado. Para essa questão, o Jest disponibiliza a função expect.
A função expect é responsável por realizar a comparação esperada pelo nosso cenário de teste. Ela recebe apenas um parâmetro, o valor a ser comparado, e retorna um objeto com várias funções que nos auxiliam na comparação do nosso cenário de teste.
Como os nossos cenários de teste comparam o retorno de uma string, utilizaremos a função toBe.
É sempre bom acompanhar o resultado do npm run test:watch conforme fazemos alterações em nosso arquivo de teste. Assim que adicionamos a função expect e salvamos o arquivo temos o resultado abaixo em nosso terminal:
Nossos testes falharam pois a nossa comparação não está correta. Entendemos exatamente o que ocorreu assim que observamos a saída do terminal disponibilizada pelo Jest. Em ambos os casos nós tentamos comparar undefined com os valores string “even” e “odd”.
Para corrigir os testes, nós adicionaremos a execução da função evenOrOdd passando os parâmetros corretos esperados por cada cenário de teste.
No primeiro cenário, passaremos um número par e no segundo um número ímpar.
Com as funções adicionadas e recebendo os parâmetros esperados, nossos testes voltam a passar!
Nesse artigo nós aprendemos como passar os nossos cenários de testes para o código utilizando algumas funções chaves do Jest e acompanhar a sua execução no terminal. Nos próximos artigos nós continuaremos a escrita de testes e utilizaremos outros recursos disponibilizados pelo Jest.
Acredito que não foi difícil chegar até aqui, mas caso tenha alguma dúvida ou feedback por favor deixe seu comentário!
