Os testes unitários são os testes mais básicos da cadeia de testes no desenvolvimento de software.

Diferentemente dos outros tipos de teste (integração e e2e), os testes unitários, também chamados de teste de unidade, garantem que uma pequena unidade esteja funcionando mesmo desconectada de todo o restante da aplicação.

Eles nos ajudam a garantir uma entrega com maior qualidade, visto que podem ser rodados sempre que uma nova implementação for feita no código e garantir que nada esteja quebrado antes do deploy.

Veremos neste conteúdo, os fundamentos básicos da implementação de testes unitários em React, utilizando a a react-testing-library. Você pode consultar no final da página a referência utilizada para produção deste conteúdo.

Este conteúdo esta dividido em 4 partes, sendo esta a parte mais teórica e as demais são práticas, em que você aprenderá:

• Como testar componentes
• Como testar hooks
• Como testar chamadas a APIs

Nesta série nos preocuparemos mais no "como testar", qual ferramenta ou qual método utilizar. Mas se você quiser expandir ainda mais seu conhecimento sobre testes, recomendo que você leia esta série sobre "o que testar" no front-end. Confira aqui.

O que será abordado:

• Testes unitários no front-end
• A responsabilidade de um componente
• Prevenindo falsos-positivos

Testes unitários no front-end

Antes de ir para a parte prática, vamos entender como os testes unitários se aplicam a interface, a começar por uma simples analogia:

A estrutura de um front-end de uma aplicação web poderia ser comparada a um quebra-cabeça. Se uma das peças se quebrar de forma que não possa mais ser encaixada a outra peça, a imagem ficará comprometida e a peça quebrada precisará ser consertada.

Se tratando de front-end, as peças são os componentes e o quebra-cabeça é a aplicação. Embora seja comum componentes quebrarem durante o desenvolvimento, não queremos de forma alguma que nossos componentes estejam quebrados em produção. Seria um desastre!

E para evitar isso, implementamos testes unitários em cada componente, de forma a garantir que tudo está funcionando bem.

Entretanto, para escrever bons testes no front-end, o código também deve ser bem escrito, a lógica dos componentes também deve ser bem pensada.

A qualidade dos testes andam de mãos dadas com a qualidade dos componentes!

A responsabilidade de um componente

Se lembrarmos do princípio da responsabilidade única, em que uma classe ou componente, deve ter uma única e exclusiva responsabilidade, podemos melhorar a qualidade do componente.

Entretanto, caso um componente ainda esteja com mais reponsabilidades do que deveria, os testes vão nos ajudar a identificar.

Se ao escrever testes percebermos que será necessário testar duas funcionalidades em um mesmo componentes, já é um alerta de que possivelmente teremos que dividí-lo em dois componentes distintos.

Um exemplo prático seria algo como, um componente button que também tem a função de navegação. Pensando em boas práticas de desenvolvimento, isso não seria algo certo, pois botão é botão e link é link.

Prevenindo falsos-positivos

Os testes uniários também nos ajudam a prevenir falsos-positivos. Ao dar manutençao e testar uma única rotina, podemos pensar que tudo está funcionando bem, quando na realidade podem ainda haver bugs em nosso código.

Vamos supor que alteramos alguma coisa no componente B, e precisamos saber se gerou alguma alteracao no componente A. É muito comum testarmos manualmente apenas o componente A e não testar o componente B ou até mesmo outros módulos que o utilizam.

Acabamos assumindo que tudo está funcionando, quando na realidade pode ter algo quebrado. Assim, os testes unitários rodando antes de cada deploy, testam tanto o componente A que sofreu manutenção, quanto o componente B que usa o componente A e garante se tudo ainda está funcionando conforme o esperado.

👉 Vamos ver agora na prática? Leia a parte 2

Referências:

Esse conteúdo foi baseado no vídeo “Treinamento: Como implementar testes unitários em React utilizando Jest” do canal da Zappts, feito pelo Cláudio Castro.

Confira o repositório com o projeto: https://github.com/ccastrojr/react_unit_test