Introdução ao Jest

Recentemente, escrevi uma postagem no blog sobre como estou aprendendo a testar meu back-end com RSpec. Bem, eu queria continuar aprendendo e mover minhas novas habilidades de teste para o front-end.

Existem muitos test runners por aí para o front-end, mas o que mais se destacou para mim foi Jest. Decidi começar a aprender o Jest porque ele foi desenvolvido pelo Facebook e funciona imediatamente com o React. Além disso, pelo que li, é um dos executores de teste mais fáceis de configurar e começar a trabalhar rapidamente.

Vamos mergulhar e ver como você pode rapidamente colocar o Jest em funcionamento para brincar com alguns de seus recursos interessantes. Para começar, crie um novo arquivo e faça cd nele na linha de comando. Corre:

npm install jest --save-dev

yarn add --dev jest

// package.json
"scripts": {
"test": "jest"
}

Isso é muito simples. Estamos criando um objeto com três métodos subTotal, taxe totalwhere totaldepende dos primeiros dois métodos. Agora crie um novo arquivo chamado checkout.test.jsque é onde escreveremos nossos testes. A convenção de nomenclatura aqui deve ter o .test.jsno final para que Jest saiba quais arquivos executar durante o teste.

No início de nosso novo arquivo de teste para que não exija nosso arquivo de checkout como:

const checkout = require('./checkout')

Jest usa a testpalavra-chave para definir um teste. O primeiro argumento é uma string que descreve o que é o teste e o segundo argumento é uma função de retorno de chamada que executa o teste.

Usamos a expectpalavra-chave para criar uma asserção e o .toBe()matcher para dizer a Jest a que esperamos que essa asserção seja igual. Então, na linha quatro, estamos afirmando que nosso subTotalmétodo no checkoutobjeto, quando passado um array com dois valores sendo ambos iguais a 5, retornará ou será igual a 10.

Execute npm testem sua CLI e veja o que acontece. Você deve ver algo semelhante à captura de tela abaixo.

Por que você não pratica a redação de um teste para as funções fiscais e totais antes de continuar lendo. O que você descobriu?

Aqui está o que eu inventei.

Agora posso dizer que tenho 100% de cobertura para meu projeto, mas e se quiséssemos melhorar esses testes e torná-los um pouco mais infalíveis? Felizmente, Jest tem vários matchers para escolher e podemos escrever mais de uma afirmação por teste.

Um método que achei útil é o .notmétodo que pode ser usado em conjunto com qualquer um dos comparadores para testar o oposto, dessa forma.

Outra coisa que descobri foi que ter mais de um cenário de teste pode ser útil. Por exemplo, ao brincar com o .toEqual()combinador, decidi usar um valor diferente para o meu taxmétodo. O teste falhou devido a um erro de arredondamento. Graças ao teste expandido, pude melhorar meu método e torná-lo mais resiliente.

Isso é tudo para começar com Jest, mas volte em algumas semanas para ver meu próximo post, onde abordarei funções simuladas em Jest. Enquanto isso, deixe um comentário abaixo e diga-me qual é o seu matcher favorito que você encontrou e como você planeja usá-lo!