Introdução a testes unitários com Jest e Testing Library React.js
Tags: react, programming, testing
Published: 2022-01-05 13:14:05

Nesse guia, eu trago uma introdução de teste unitários utilizando duas ferramentas, Jest e Testing Library no React.js

É de extrema importância a implementação de testes em seus projetos, principalmente naqueles que serão grandes, e que existem uma grande probabilidade de inclusão de novos desenvolvedores durante o processo de criação.

> “No começo criar testes pode atrasar o desenvolvimento e não mostrar explicitamente a vantagem da criação desses testes, mas com o crescimento da aplicação ou sendo uma aplicação pequena mas muito importante, é essencial ter essa confiança de desenvolver sabendo que o código novo não vai afetar a funcionalidade do antigo e abranger várias situações que podem acontecer com o componente.”

---

## Entendendo os testes
As vezes algumas dúvidas surgem, do tipo, como que eu irei testar um componente? O que eu preciso testar nele? Preciso checar o valor das variáveis? O foco desses testes não são checar todas as linhas e entranhas do código, você precisa testar o tem que acontecer com o componente, como se fosse realmente um usuário.
Um exemplo de linha de raciocínio de testes, sendo ele um `<Button />`, quais são as funcionalidades de um botão?:
- Deve apareça na tela,
- Deve ter um atributo (href, role, onClick, etc...),
- Deve chamar uma função quando houver um click(onClick),
- Deve estar desativado quando eu mandar desativado,
- Deve estar ativo quando eu mandar ativado.

---

## Criando nosso projeto 
Para criar um projeto com tudo organizado e configurado, utilize o comando:

`yarn create next-app --exemple with-jest with-jest-ap`

Todos os testes terão uma extensão `.test.jsx` ou `spec.jsx` , é uma boa prática incluir todos em uma pasta na raiz do projeto chamada `__tests__`, agora para rodar o nosso primeiro teste que já vem implementado, basta digitar no console

`yarn test`

E Teremos um output parecido com esse:

![Output terminal com as informações dos tests](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8d92c59wudwmjvzo33gv.png)

Basta pressionar a tecla “a” e ele ia rodar no formato `--watch` passando esse parâmetro, é como se o teste ficasse assistindo toda alteração que é salva no projeto e ele roda os testes novamente, evitando o trabalho de ficar digitando `yarn dev` toda hora no console.

---

## Testes na prática:
A estrutura base do teste ficaria mais ou menos assim:


```
describe('<Componente />', () => {
  it('should test', () => {
    expect()
  });
});
```

- **describe:** seria um conjunto de testes de um mesmo componente (No caso o `<Home />`),
- **it:** seria uma unidade de teste, uma boa prática começar com “should” para ficar mais intuitivo,
- **expect:** espera que contem algo.

> “Uma boa prática seria na parte do “describe” sempre colocar o nome do Componente `<Home />` para ficar claro onde o teste falhou, já que nunca teremos dois componentes com o mesmo nome.”

Agora trazendo para um cenário um pouco mais real, iremos testar um componente `<Button />` checando algumas coisas simples, como texto e atributo.

![Estrutura de exemplo usando um botão](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vfqrqew5nq9aygx86rnn.png) 

6- Importação necessárias para rodar os testes,
7- Importação do componente.
9- Agrupamento dos testes, descrever o componente para ficar fácil a identificação,
10- O teste em si, lembrando de sempre começar com should, para ficar intuitivo,
11- Utilizando o `render()` função para "renderizar" o componente,
13- Nós capturamos o componente através do 
`getByRole()` e jogamos ele na variável `button`,
15- Chamamos `expect()` funcão para chegar se o `button` existe no documento com a função `toBeInTheDocument()`.

---

E com isso encerro a primeira parte da introdução de testes unitários utilizando Jest e Testing Library no React.js. Claro que tudo isso é apenas um pedaço desse mundo gigante de testes no Front-end, essa introdução foi só para mostrar na pratica como podemos testar alguns componentes um pouco mais simples.

Fontes:
https://pt-br.reactjs.org/
https://jestjs.io/pt-BR/
https://testing-library.com/