Começando com Jest e React Testing Library

#testing #react #beginners #javascript

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:

Abrir a página;
Procurar pelo botão de cor A;
Clicar no botão;
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:


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.

Para abrir a página, utilizamos a função "render()";
Para procurar pelo botão, poderíamos utilizar a query “getByRole”, informando que a “role”, ou papel desempenhado, é de um botão;
Para clicar no botão, poderíamos utilizar a biblioteca “userEvent”, que simula interações com a interface;
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 é 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 disponibiliza uma DOM 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, 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 da Bonnie Schulkin, hospedado na Udemy, que serviu de base para este texto. Outra dica é consultar as documentações da RTL e do Jest, e começar a experimentar os conceitos em seus projetos. Ainda há a opção de utilizar o praticar na no playground do RTL. Para ir ainda mais fundo, este artigo, escrito por um dos criadores da RTL, pode ser bastante proveitoso.