[pt-BR] Fundamentos de Testes Unitários no Front-end - #1
Tags: javascript, tutorial, beginners, react
Published: 2022-02-21 16:38:55

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](https://dev.to/dxwebster/series/16968).

### 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](https://dev.to/dxwebster/pt-br-parte-2-hands-on-como-implementar-testes-unitarios-no-react-25jg)

---

### Referências:
Esse conteúdo foi baseado no vídeo [“Treinamento: Como implementar testes unitários em React utilizando Jest”](https://youtu.be/wTrjx54wDgM](https://youtu.be/wTrjx54wDgM)) do canal da Zappts, feito pelo [Cláudio Castro](https://www.linkedin.com/in/ccastrojr/).

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