,
27 tweets,
6 min read
Read on Twitter
Nessa thread, você aprenderá como configurar o Jest para:
✅ Fazê-lo compilar JavaScript moderno;
✅ Automatizar a execução dos testes;
✅ Utilizar code coverage;
Vem comigo! 👇
✅ Fazê-lo compilar JavaScript moderno;
✅ Automatizar a execução dos testes;
✅ Utilizar code coverage;
Vem comigo! 👇
O ponto de partida desse post é o final da thread mais recente que escrevi sobre o Jest: "Por que o Jest existe?"
O link está nos últimos tweets =)
O link está nos últimos tweets =)
No decorrer dela, eu mostrei como instalar o Jest e escrever o 1º teste em 9 passos.
O código e a estrutura de arquivos ficaram assim:
O código e a estrutura de arquivos ficaram assim:
Só que se você observar o topo dos arquivos `double.js` e `double.test.js`, verá que essa aplicação está utilizando o sistema de módulos do node.
Se tentarmos utilizar o sistema de módulos do ES6, ao executarmos os testes com o `yarn test` ou `npm test`, o erro "SyntaxError: Unexpected identifier" é exibido exatamente na linha do `import`:
Ou seja, o import quebrou a aplicação.
Isso aconteceu por que ainda não estamos utilizando o Babel.
Para resolvermos isso, vamos instalar as dependências necessárias para que o Jest consiga compilar o código dos testes, utilizando o Babel:
Isso aconteceu por que ainda não estamos utilizando o Babel.
Para resolvermos isso, vamos instalar as dependências necessárias para que o Jest consiga compilar o código dos testes, utilizando o Babel:
`yarn add --dev babel-jest @babel/core @babel/preset-env`
Após executar esse comando no terminal, nosso package.json exibirá que as dev dependencies foram instaladas:
Após executar esse comando no terminal, nosso package.json exibirá que as dev dependencies foram instaladas:
Agora, basta criarmos um arquivo `babel.config.js` na raiz do projeto e adicionarmos o seguinte código nele:
O `@babel/preset-env` permite que você escreva JavaScript moderno sem que seja necessário especificar
quais conversões de sintaxe são necessárias em seu ambiente (Node).
Já o objeto `targets` possibilita que você especifique com qual versão do node o Babel deve trabalhar.
quais conversões de sintaxe são necessárias em seu ambiente (Node).
Já o objeto `targets` possibilita que você especifique com qual versão do node o Babel deve trabalhar.
Agora, ao executarmos os testes novamente, com o `yarn test`, o Jest compila o código normalmente =)
Só que é chato executar testes manualmente.
O ideal é escrevermos um NPM Script que utiliza o Watch interativo do Jest.
Assim, todas as vezes que salvarmos o arquivo, os testes são imediatamente executados.
Vamos fazer isso o/
O ideal é escrevermos um NPM Script que utiliza o Watch interativo do Jest.
Assim, todas as vezes que salvarmos o arquivo, os testes são imediatamente executados.
Vamos fazer isso o/
No package.json, abaixo de "test", vamos adicionar uma entrada "test:watch", que recebe "yarn test -- --watch".
O que isso significa?
Significa que quando `test:watch` for executado, o comando `yarn test` será executado e o comando `--watch` será passado para o `yarn test`.
Significa que quando `test:watch` for executado, o comando `yarn test` será executado e o comando `--watch` será passado para o `yarn test`.
Agora, ao executar `yarn test:watch` no terminal, o Jest vigiará quando algum arquivo .test.js for salvo e atualizará os resultados dos testes:
Perceba que esse Watch é interativo. Ao pressionar `w`, você pode, por exemplo, especificar que apenas 1 arquivo seja executado, através de um Regex.
Além do watch, outra ferramenta importante ao escrever testes é o Code Coverage.
Code Coverage são dados que mostram quanto do seu código está coberto pelos testes que você escreveu.
O Jest já possui uma ferramenta de código embutida, o Istanbul.
Code Coverage são dados que mostram quanto do seu código está coberto pelos testes que você escreveu.
O Jest já possui uma ferramenta de código embutida, o Istanbul.
Para habilitá-lo, basta adicionarmos o parâmetro `--coverage` no fim do script "test":
Ao executar `yarn test:watch`, você verá uma tabela que exibe:
🔸 Arquivos que estão sendo testados
🔸 A porcentagem de declarações/statements, linhas de código, funções e ramificações de condicionais cobertas por testes
🔸 Linhas desconhecidas
🔸 Arquivos que estão sendo testados
🔸 A porcentagem de declarações/statements, linhas de código, funções e ramificações de condicionais cobertas por testes
🔸 Linhas desconhecidas
Se você me acompanha mais de perto, já percebeu que tenho falado sobre Testes Automatizados e Programação Funcional cada vez mais.
No próximo post sobre testes, vamos começar a praticar TDD com a arquitetura construída até aqui =)
No próximo post sobre testes, vamos começar a praticar TDD com a arquitetura construída até aqui =)
Acha que esse conteúdo pode ajudar + pessoas❓
👉Retweeta👈 essa thread!
Linkei o início dela ali
em baixo, para facilitar =)
Te vejo na próxima 🔥
👉Retweeta👈 essa thread!
Linkei o início dela ali
em baixo, para facilitar =)
Te vejo na próxima 🔥
Mais 5 threads sobre Testes:
🔗Por que o Jest Existe?
🔗Por que o Jest Existe?
🔗Explorando Testes Unitários - Com TDD
🔗Por que o Cypress JS Existe?
🔗Por que o Storybook JS existe?
🔗Como escrever Asserções Sem Utilizar Libs Robustas
