| path | title | subtitle | date | tags | banner | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
/coletanea-jestip |
Coletânea JesTip |
Um compilado dessa série de tweets com algumas dicas de testes com JavaScript e Jest |
2021-09-05 |
|
|
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 🃏
— Gabriel Ramos (@gabrieluizramos) August 20, 2021
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
JesTip 🃏
— Gabriel Ramos (@gabrieluizramos) August 23, 2021
É 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
JesTip 🃏
— Gabriel Ramos (@gabrieluizramos) August 24, 2021
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
JesTip 🃏
— Gabriel Ramos (@gabrieluizramos) August 25, 2021
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
JesTip 🃏
— Gabriel Ramos (@gabrieluizramos) August 26, 2021
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
JesTip 🃏
— Gabriel Ramos (@gabrieluizramos) August 27, 2021
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
JesTip 🃏
— Gabriel Ramos (@gabrieluizramos) August 30, 2021
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
JesTip 🃏
— Gabriel Ramos (@gabrieluizramos) August 31, 2021
É 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
JesTip 🃏
— Gabriel Ramos (@gabrieluizramos) September 1, 2021
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
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>JesTip 🃏
— Gabriel Ramos (@gabrieluizramos) September 2, 2021
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