Um projeto que tenho feito com muito carinho (chamado JavaScript Assertivo) está pra ser lançado e isso tem me animado bastante nos últimos tempos! Em breve devo fazer um post dedicado somente à esse assunto.

Como eu não me aguento, achei que seria um bom momento pra fazer uma série de dicas de teste com JavaScript envolvendo Jest e preparei alguns (10, no total) tweets carinhosamente apelidados de JesTips! Aproveitei pra agrupar todo o conteúdo na hashtag #JavaScriptAssertivo no Twitter.

A ideia era comentar sobre alguns deslizes que são fáceis de serem cometidos quando estamos testando, além de falar sobre melhorias e boas-práticas que ajudam a manter nossos testes mais limpos e organizados. Isso de forma simples, com pequenos exemplos de código e que pudessem ser facilmente aplicados em qualquer projeto.

Então pra deixar registrado por aqui também, todos os tweets dessa pequena série vão ficar agrupados nesse post seguindo sua ordem de publicação.

Espero que curta!

JesTip 🃏

Então bora pra primeira!

Realizar um mock manual sem implementação após executar "jest.mock" é redundante.

O Jest possui controle do sistema de arquivos e já realiza o mock de todas as funções de um módulo após executar essa ação.#JavaScriptAssertivo pic.twitter.com/JbD2MWrIjA

— Gabriel Ramos (@gabrieluizramos) August 20, 2021

---

JesTip 🃏

É comum escrever testes de forma mais granular, facilitando a leitura e entendimento do código.

Em alguns casos você pode unir testes de um mesmo contexto, reunindo asserções e evitando repetição (como renderização de elementos e ajuste de mocks)#JavaScriptAssertivo pic.twitter.com/ZtHgLrnSP1

— Gabriel Ramos (@gabrieluizramos) August 23, 2021

---

JesTip 🃏

Evitar lógica ao realizar seus mocks reduz esforço cognitivo e melhora a legibilidade dos seus testes.

Os métodos de mock auxiliam nesse momento e seus retornos ainda podem ser definidos dentro de um escopo que faça mais sentido pra você.#JavaScriptAssertivo pic.twitter.com/qb8aonyDOn

— Gabriel Ramos (@gabrieluizramos) August 24, 2021

---

JesTip 🃏

Snapshots (especialmente nos arquivos externos) deixam os testes lentos pois envolvem operação de leitura/escrita em disco.

Uma boa estratégia é manter somente um para um caso geral, trocando os demais snapshots por asserções mais comuns.#JavaScriptAssertivo pic.twitter.com/HfrnYmBkj0

— Gabriel Ramos (@gabrieluizramos) August 25, 2021

---

JesTip 🃏

Snapshots não são exclusivos pra validar renderização de componentes e podem ser usados para validar payload. Inclusive inlineSnapshots são ótimos para isso!

Você pode utilizá-los ao invés do tradicional .toMatchObject em algumas situações.#JavaScriptAssertivo pic.twitter.com/cMbMkiRQAu

— Gabriel Ramos (@gabrieluizramos) August 26, 2021

---

JesTip 🃏

O mock de componentes internos quando estiver escrevendo testes unitários de um componente "pai" (não de integração) deixam os cenários mais isolados.

Os data-test-id (que não devemos abusar no código real de componentes) podem ajudar.#JavaScriptAssertivo pic.twitter.com/axjYZ0okLP

— Gabriel Ramos (@gabrieluizramos) August 27, 2021

---

JesTip 🃏

Essa é bem mais de boa...

Testes que utilizam Promises tendem a passar pela forma como são executados.

Não esqueça de colocar expect.assertions, (principalmente nos casos de promises rejeitadas) pra evitar que resultem em falsos-positivos.#JavaScriptAssertivo pic.twitter.com/gbtyKHCIbH

— Gabriel Ramos (@gabrieluizramos) August 30, 2021

---

JesTip 🃏

É comum ver em alguns tutoriais a utilização do requireActual pra realizar um mock parcial de um arquivo e manter as implementações que você não quer substituir ("bypass").

O spyOn facilita muito esse trabalho e permite um maior controle.#JavaScriptAssertivo pic.twitter.com/QQFSZJ54bV

— Gabriel Ramos (@gabrieluizramos) August 31, 2021

---

JesTip 🃏

Testando diversas entradas de valores ("table-driven") de forma repetitiva?

O Jest possui uma implementação própria pra te auxiliar nessa tarefa.#JavaScriptAssertivo pic.twitter.com/M4TZe2ML5M

— Gabriel Ramos (@gabrieluizramos) September 1, 2021

---

JesTip 🃏

Finalizando nossa sequência de pequenas dicas: no fim do dia teste também é código!

Crie abstrações necessárias pra facilitar o seu trabalho, seja pra fazer algum fluxo, construção de valores predefinidos ou realização de ajustes que se repetem.#JavaScriptAssertivo pic.twitter.com/1W1lMiYDeZ

— Gabriel Ramos (@gabrieluizramos) September 2, 2021