Começando com Jest e React Testing Library
Tags: testing, react, beginners, javascript
Published: 2022-06-24 16:31:00

A fase de testes é essencial no processo de desenvolvimento de software. Este momento é fundamental para verificar se o produto, de fato, atende às especificações estabelecidas. Além disto, permite identificar e corrigir comportamentos inesperados que poderiam comprometer a qualidade e a confiabilidade da aplicação.

Quando começamos a programar, o processo de testagem acontece de forma orgânica. Por exemplo, ao criarmos um botão que ao ser clicado muda de cor, após escrevermos o código para tanto, é natural querermos executar manualmente o programa e verificarmos o seu funcionamento. Todavia, em projetos maiores, não seria prático testar todas as funcionalidades desta forma. Testes automatizados reduzem custos, aumentam a produtividade, a eficiência e a eficácia do time. Além disso, possibilitam implementar novas funcionalidades sem “quebrar” o código antigo. Desenvolvedores que trabalham com _React_ têm à disposição o **Jest** e a **React Testing Library (RTL)** para testar suas aplicações.

A lógica por trás do uso destas ferramentas é simular a execução das funcionalidades da aplicação e conferir se a resposta é igual à esperada. Ao testarmos manualmente um botão de cor A que muda para cor B quando clicado, provavelmente, seguiríamos esta sequência de ações:

1. Abrir a página;
2. Procurar pelo botão de cor A;
3. Clicar no botão;
4. Conferir se o botão mudou para a cor B.

O teste automatizado para verificar o funcionamento de um botão azul, com o texto “Troca a Cor”, presente no componente `< Page />`, que ao ser clicado deva mudar para a cor vermelha, poderia ser escrito assim:

```javascript

import { render, screen } from '@testing-library/react';
import userEvent from "@testing-library/user-event";
import Page from './Page';
 
test('Deve trocar a cor de azul para vermelha quando clicado', () => {
 
  //Abrir a página
  render(<Page />);
 
  //Encontrar o botão com o nome “Troca a Cor”
  const colorButton = screen.getByRole('button', {name: 'Troca a Cor'});
 
  //Clicar no botão
  userEvent.click(colorButton);
 
  //Verificar se o botão assumiu a cor vermelha
  expect(colorButton).toHaveStyle({backgroundColor: 'red'});
  
});

```

Como observado, é possível estabelecer um paralelo entre o teste automatizado e o teste realizado de forma manual, o que facilita a compreensão de cada passo realizado. 

### Dissecando o código

Quem entendeu o exemplo acima observando os comentários pode pular esta seção.

1. Para abrir a página, utilizamos a função _"render()"_;
2. Para procurar pelo botão, poderíamos utilizar a query _“getByRole”_, informando que a _“role”_, ou papel desempenhado, é de um botão;  
3. Para clicar no botão, poderíamos utilizar a biblioteca _“[userEvent](https://github.com/testing-library/user-event)”_, que simula interações com a interface;
4. Para verificar se o botão mudou de cor, utilizamos o _expect()_, para verificar se a propriedade _“background color”_ do _CSS_ aplicado é a cor B.

Este exemplo é simples e, naturalmente, conforme a complexidade do código aumenta, funcionalidades mais sofisticadas disponíveis no _Jest_ e na _RTL_ serão necessárias para que os testes sejam realizados de forma adequada. Contudo, objetivo deste artigo não é exaurir todas as possibilidades de uso destas tecnologias, mas ajudar iniciantes a compreender um pouco do funcionamento destas ferramentas fundamentais para garantir a qualidade do código e das próprias interfaces construídas em _React_.

### Sim, mas o que é o _Jest_?

O _[Jest](https://jestjs.io/pt-BR/docs/getting-started)_ é um _framework_ para testes em _JavaScript_ e responsável por localizar, executar e informar se os testes passaram ou falharam. Pode ser utilizado em aplicações em _React_, _Vue_, _Node_, _Typescript_, _Angular_, etc.
Por meio do comando _“expect()”_, podemos verificar se o objeto possui o atributo que esperamos para definir se a funcionalidade atende ou não às especificações requeridas.

### Quais são as responsabilidades da _React Testing Library_?

A _[RTL](https://testing-library.com/docs/queries/about/#screen)_ disponibiliza uma _[DOM](https://developer.mozilla.org/pt-BR/docs/Web/API/Document_Object_Model/Introduction)_ virtual, na qual, podemos localizar os elementos que compõem a página. O objeto _“screen”_ exportado por esta DOM virtual contém os comandos de busca (_queries_) necessários para encontrar estes elementos e seu uso é recomendado, pois, realizar a mesma tarefa utilizando apenas o _Jest_ seria muito trabalhoso. 

A _query_ utilizada para encontrar o botão foi da família _“getBy”_. Este tipo de _query_ é utilizado quando esperamos encontrar um objeto na página. Caso esperássemos **não** encontrar o objeto, utilizaríamos _“queryBy”_, e, nas situações em que encontrar o objeto procurado depende do carregamento de uma requisição assíncrona (como, por exemplo, o retorno das informações referentes a uma consulta a um banco de dados), utilizaríamos _“findBy”_. 

### Nota sobre acessibilidade

No exemplo, localizamos o botão pesquisando pelo **papel** _(role)_ que o mesmo desempenha na página _(button)_. Todavia, é importante mencionar que é possível localizar elementos pesquisando pelo **texto**, pelo **id**, pelo **título**, entre outras possibilidades. A _query_ _[getByRole](https://testing-library.com/docs/queries/about#priority)_, contudo, é capaz de localizar todos os elementos acessíveis na tela. Se não for possível encontrar o elemento em questão com esta ferramenta, é possível que haja problemas de acessibilidade na aplicação.

### Resumo e dicas

Nesse artigo, falamos um pouco sobre testes automatizados e sua importância para a manutenção da qualidade do software. Além disso, discutimos a respeito do _framework Jest_ e da biblioteca _RTL_, utilizados para realizar testes automatizados em aplicações _React_. Para aprofundar um pouco mais sobre o assunto, recomendo este [curso](https://www.udemy.com/course/react-testing-library/) da Bonnie Schulkin, hospedado na Udemy, que serviu de base para este texto. Outra dica é consultar as documentações da _[RTL](https://testing-library.com/docs/queries/about/)_ e do _[Jest](https://jestjs.io/pt-BR/)_, e começar a experimentar os conceitos em seus projetos. Ainda há a opção de utilizar o praticar na no _[playground](https://testing-playground.com/)_ do _RTL_. Para ir ainda mais fundo, este _[artigo](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library)_, escrito por um dos criadores da _RTL_, pode ser bastante proveitoso.

Já usa _RTL_ e _Jest_? Deixe seu comentário! Até a próxima!