Image for post
Image for post
Documentação, exemplos e ótimo suporte. "open source" do jeito certo!

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:

Image for post
Image for post
Testes não, por favor!

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

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

Image for post
Image for post
Muita informação, com exemplos claros e didáticos

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

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

Image for post
Image for post
Quer developer mais feliz? Melhore a experiência dele com sua ferramenta

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!)

Image for post
Image for post
Mostrando a linha correta. E te digo, funciona com React e Node.js!

4. Testes assíncronos nunca foram tão fáceis

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-latest

Criando 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!

Image for post
Image for post
Mesma suite de testes com AVA e Jest, olha essa diferença?

https://twitter.com/_maximization/status/804161879811772417

Simples, prático, isso é brilhante!

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! 🙏🏼

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store