Jest: Escrever testes nunca foi tão divertido
Nessa longa estrada, já trabalhei com muitos frameworks para testes (escolha a metodologia que quiser, TDD, BDD, FDD, DDD, muitas vezes, os problemas são os mesmos!).
E sempre que o assunto de escrever testes entra em jogo, 99% do tempo era uma reação como:
Escrever testes para Front-end sempre foi um caos desgraçado. Nunca existiu um padrão, ou uma ferramenta boa e simples de se configurar. Muitas vezes, testes para front-end eram deixado de lado pela falta de clareza de como se fazer.
Ferramentas para isso sempre estiveram por aí, tais como QUnit, Jasmine, Mocha, Karma, Chai, Sinon e algumas outras que já receberam o aval de aposentada.
Analisando tudo de perto, elas resolvem um problema específico, mas, como sempre, nossas aplicações web são complexas, com múltiplos e diferentes meios de se chegar ao mesmo resultado. E fazer todas essas ferramentas trabalharem juntas, olha, levava dias para deixar do jeito certo e até mesmo para achar boas soluções e configurações fácies de se manter e extender.
Entra em cena o Jest, mais uma obra prima criada no Facebook
Antes de mais nada, quero deixar claro que nos primeiros dias de vida do Jest, ele não era lá essas coisas. Não mesmo.
Porém, ele foi, basicamente, reescrito do zero. Seu criador, Christoph Pojer, explica isso muito bem em uma entrevista irada no canal do Kent C. Dodds no YouTube, está em inglês, mas eu recomendo você dar uma olhada JavaScript & React Testing with Jest.
Agora chega de enrolação, vamos direto ao ponto:
O que faz do Jest o melhor framework para teste hoje em dia?
1. Documentação
Essa etapa é muito importante, Facebook desenvolveu um jeito muito certo de criar projetos open source, qual a mágica? Uma ótima documentação.
Você encontra de tudo. Como instalar, as melhores práticas, aplicações em diversas ferramentas.
E não só isso, mas, muitas das discussões no repositório oficial do github se tornam documentação e exemplos.
2. Instalação e Configuração
Se o item 1 já não fosse o suficiente, aqui eu te tenho que te dizer, foi o framework mais fácil de configurar que já trabalhei. Sério, não é sardinha ou post pago, com apenas 4 passos você tem um framework de testes pronto para usar.
Acha que é Zuera?
Ha! Olha aí:
# 1. adicionando Jest (mesmo que: npm install jest)
yarn add jest# 2. criando a pasta padrão de teste (é configurável)
mkdir __tests__# 3. arquivos terminando em .test são o padrão
vim __tests__/example.test.js# 4. rodando os testes (isso mesmo, jsdom já configurado)
./node_modules/.bin/jest --env=jsdom
Simples, não?
Se levarmos em conta que a etapa 2. e 3. nós estamos criando os arquivos, nossa instalação e configuração são reduzidas a apenas 2 linhas. 🎉
Você pode delegar a etapa 4. para um npm-scripts e criar várias tasks, alguns exemplos que uso diáriamente:
- yarn test:watch => jest --env=jsdom --watch, alterou os testes, Jest irá executar ele novamente
- yarn test:coverage => jest --env=jsdom --coverage, pré configurado com Istanbul para coverage!
- yarn test:memory => jest --env=node --logHeapUsage, realiza o log do máximo de heap memory que foi utilizado em cada teste. Isso é ótimo para buscar memory leaks no seu código.
Esse foi só alguns exemplos de quão prático o Jest está. Atualmente, todo um ecossistema de ferramentas em torno dele está sendo criado.
3. Rodar testes nunca foi tão divertido
Esse, não tem comparação. É a melhor experiência com test runners que já tive. Escrever e rodar testes nunca foi tão divertido.
Rápido, prático e com uma experiência ótima. Podendo filtrar testes utilizando expressões regulares ou o nome do arquivo, ótimo suporte para source map (caso seu teste falhe, o stack trace é ótimo!)
4. Testes assíncronos nunca foram tão fáceis
Bom, se você já deu uma olhada nos meus posts, eu sou um grande fã de async/await (1, 2).
E, utilizar esse padrão no Jest, é mais simples do que se parece.
Eu uso Babel em todos os meus projetos, e felizmente, a integração babel-jest já existe e funciona sem dificuldade!
Instalando o Babel:
# veja o item 2., onde instalamos Jest
yarn add babel-jest babel-polyfill babel-preset-latestCriando o .babelrc:
{
"presets": ["latest"]
}Tudo pronto, podemos usar async/await nos nossos testes:
# /__tests__/sum.test.jsit(‘async sum 1 + 2 to equal 3', async () => {
const sum = (a, b) => new Promise((res) => {
setTimeout(() => {
res(a + b)
}, 2000)
})
const underTest = await sum(1, 2);
expect(underTest).toBe(3)
})
Ou testando alguma API (exemplo sem mock):
# /__tests__/api.test.js
import axios from 'axios';const API = 'https://jsonplaceholder.typicode.com/users';it('async API call with Jest', async () => {
const req = await axios.get(API);
const underTest = req.data[0];
expect(underTest.name).toBe('Leanne Graham');
});
Clique aqui para saber mais sobre Axios
Viu como é simples? Isso sem precisar de configurações complexas. E isso é sem alterar muito a configuração padrão, estou apenas adicionando plugins pré-prontos. É muita mágica! 😱
5. Ele rápido, muito rápido!
Um dos benefícios do Jest, é que ele roda seus testes em paralelo, ou seja, você consegue salvar muito tempo com isso.
Simples, prático, isso é brilhante!
E isso foi só o básico de como Jest tem mudado minha experiência com testes e principalmente, ensinar como testar código. Existem vários tópicos que podemos abordar futuramente, tais como:
- Testando componentes com Snapshot testing
- Testando React Native com Jest
- Testando aplicações Node.js com Jest
- Usando Mocks (1, 2, 3) para testar dependências, API’s externas e efeitos colaterais.
Mas vamos ficar por aqui, quero que você tire algumas horas para brincar com esse framework e eu tenho certeza, você vai achar a experiência incrível!
Obrigado por ter lido até aqui, se você gostou do post, manda um 💚 e compartilha no Twitter! Valeu! 🙏🏼
