React: realizando testes com Jest e Testing Library

Configurando testes em um projeto React - Apresentação

Dando as boas-vindas ao curso de React

Olá, estudante da Alura! Meu nome é Pedro, sou um homem branco, com cabelos e barba escuros, e estou aqui para dar as boas-vindas a mais um curso de React na plataforma da Alura.

Audiodescrição: Pedro é um homem branco, com cabelos escuros e barba escura. Ele está no estúdio da Alura, com um fundo claro.

Explorando a importância dos testes em React

Talvez já tenhamos nos perguntado sobre a eficiência de um teste dentro de uma aplicação. Será que realmente precisamos escrever um teste unitário? Devemos nos preocupar com teste de integração dentro de uma aplicação React? A resposta é sim, é muito importante. Mais do que isso, neste curso, vamos utilizar um projeto fantástico da Usedev para entender como funcionam testes unitários, testes de integração, como adicionar contextos nos nossos testes e como configurar testes na nossa aplicação React. Vamos começar do zero.

Introduzindo ferramentas de teste: Jest e Testing Library

Vamos entender o que é o Jest, o framework que utilizaremos para testar dentro do React. Utilizaremos também o Testing Library, uma biblioteca fantástica de testes que oferece diversas funcionalidades interessantes. Há muito conteúdo empolgante para explorarmos neste curso, e estamos ansiosos para que avancemos juntos, passo a passo, nesse mundo de testes, compreendendo detalhadamente como cada elemento funciona.

Requisitos e conhecimentos prévios necessários

Para este curso, é necessário ter algum conhecimento em React, especialmente em aplicações desenvolvidas com TypeScript, funcionamento dos hooks, e como estilizar utilizando o Tailwind. É importante que já tenhamos adquirido essas informações fundamentais do React antes de iniciarmos esta jornada juntos.

Explorando o projeto da UseDev

O site da UseDev está incrível. Temos um catálogo de produtos, uma página de detalhes de produto e um carrinho interativo, onde podemos adicionar e remover produtos. Está realmente fantástico. Vamos seguir em frente e começar a entender como testar essa aplicação.

Concluindo com integração de Workflow no GitHub

No final do curso, ainda adicionaremos uma integração no GitHub de Workflow para que nossos testes sejam executados automaticamente sempre que fizermos um push em qualquer branch do nosso repositório. Há muito conteúdo interessante para explorarmos, então vamos em frente!

Configurando testes em um projeto React - Entendendo o que são testes de softwares

Explorando as motivações para escrever testes

Antes de entrarmos no código e começarmos a entender como a aplicação dos testes funciona, vamos explorar visualmente algumas motivações e o que aprendemos ao adotar testes em nossos projetos React, utilizando TypeScript.

Quais seriam as motivações para começarmos a escrever testes em nossas aplicações? O primeiro ponto é garantir o comportamento esperado, seja de um componente ou de uma função. Quando entramos no mundo dos testes, nosso objetivo é assegurar que o comportamento de algo que desenvolvemos seja o esperado. O teste garante que o comportamento será aquele que definimos no teste. Caso contrário, precisaremos corrigir nosso arquivo para que ele se adapte ao teste, ou nosso teste pode estar verificando um contexto ou função de forma incorreta. Assim, o primeiro ponto é garantir esse comportamento.

Benefícios adicionais dos testes

Além disso, os testes nos proporcionam uma refatoração segura. Com a segurança de comportamento garantida pelos testes, se precisarmos fazer alguma alteração e o teste quebrou, significa que nossa alteração provocou um efeito colateral. O teste serve justamente para garantir aquele comportamento, e se ele não está passando, temos um problema no componente. Isso resulta em uma redução de bugs, principalmente no ambiente de produção. Quando nossos componentes e funções são testados e garantem o comportamento esperado, sabemos que, quando o código estiver em produção, ele se comportará conforme os testes e nossas expectativas.

Além disso, temos uma documentação viva do nosso código. Se, no dia a dia, pegarmos uma função que não desenvolvemos ou não conhecemos, podemos, além de olhar para o TypeScript daquela função ou componente, verificar o arquivo de testes para entender os casos de uso, como foi implementado e como podemos utilizar aquele componente. Isso nada mais é do que uma documentação viva do nosso projeto, constantemente atualizada.

Introduzindo as ferramentas de teste

Agora, falando das principais ferramentas que abordaremos na sequência, quando partirmos para o código, a primeira delas é o Jest. Se ainda não conhece, ouvirá falar muito dele, pois é o runner nativo que utilizaremos para rodar nossos testes. Temos também a Testing Library, que entra como uma API, oferecendo melhorias para o Jest. Enquanto o Jest é mais voltado para o Node, a Testing Library oferece algumas integrações adicionais. Temos ainda a React Testing Library, que adiciona funcionalidades à Testing Library para renderizar componentes React e testá-los.

Resumindo, o Jest é nosso test runner, ou seja, a plataforma que executa nossos testes. Ele já possui um mocking nativo, e aprenderemos sobre o conceito de mocking e stubs nas próximas aulas. Com o Jest, conseguimos escrever testes síncronos e assíncronos, utilizando o Event Loop do Node. Ele entende testes tanto síncronos quanto assíncronos e já possui compatibilidade com o TypeScript, facilitando a aplicação de testes no dia a dia, especialmente porque nosso código já está com TypeScript nativamente.

Explorando a Testing Library e React Testing Library

Além disso, nós temos o Testing Library, que atua como uma API agnóstica, ou seja, não depende de nenhum framework para funcionar. Ele simplesmente adiciona algumas melhorias focadas no comportamento do usuário dentro dos nossos testes. Como tem esse foco, será muito útil para testar o DOM, que é o nosso Document Object Model, ou seja, a interação com os componentes e funcionalidades, como se fosse uma renderização em tela. Ele também serve para testar o Node, caso queiramos uma função simples, entre outros cenários que não exploramos aqui, pois não fazem sentido dentro deste contexto de testes voltados para integração e unitários no front-end.

O React Testing Library é uma extensão do Testing Library, sendo o principal responsável por renderizar nossos componentes React em tela. Além de permitir a renderização dos componentes React para testes, ele evita testes de implementação. Quando testamos um componente, não queremos apenas verificar se foi renderizado, mas também se as informações estão corretas, como elas interagem, o uso de hooks, contextos, entre outros. O React Testing Library é voltado para testes funcionais e de integração, evitando testes de implementação, pois para isso podemos utilizar o Jest, que já é suficiente. Assim, passamos para um nível superior ao falar do React Testing Library. Além disso, ele incentiva testes de acessibilidade devido à manipulação do DOM e outros fatores que o Testing Library oferece.

Compreendendo os tipos de testes

Ao testar elementos do DOM, começamos a entender mais sobre IDEs e o funcionamento separado de cada componente, o que nos ajuda a escrever melhor nossos testes. Temos dois tipos principais de testes: unitários e de integração, que abordaremos na sequência destas aulas. Os testes unitários isolam funções ou componentes em testes mais simples, rápidos e fáceis de manter, pois têm poucas ou nenhuma dependência entre si. Já os testes de integração priorizam a renderização de vários componentes juntos, validando interações reais, como testes com contextos, hooks providers, e interações em formulários. Quando pensamos em testes de integração, consideramos um contexto maior do que simplesmente testar uma função ou componente.

Ao realizar testes de integração, nos aproximamos ainda mais da experiência do usuário com nossa aplicação, o que é imprescindível no nosso dia a dia como pessoas desenvolvedoras. É importante garantir que a experiência do usuário seja boa, utilizando os testes como aliados. Preferimos gastar tempo nos testes de integração, mantendo as partes mais importantes bem testadas, assegurando uma boa experiência ao usuário, em vez de focar apenas em testes unitários para componentes. Os testes unitários são mais eficazes para funções, enquanto os testes de integração são mais adequados para componentes compostos e interações maiores.

Comparando testes unitários e de integração

Comparando, os testes unitários, ou utilitários, são mais rápidos e isolados, mas também mais frágeis a refatorações, exigindo mudanças frequentes quando alteramos uma função. Já os testes de integração são mais realistas, simulando interações do usuário, mas são mais lentos, pois geram vários componentes em tela virtualmente. Eles são mais resistentes a refatorações, pois uma simples mudança não quebra uma tela ou integração como um todo. Se mudarmos uma cor ou texto, a funcionalidade continua entre componentes. No entanto, se um teste unitário espera uma mudança específica, ele pode ser mais frágil. Os testes de integração são mais resistentes, e adotamos uma abordagem balanceada, com testes unitários e de integração na nossa aplicação.

Preparando para a prática

Agora que temos esse panorama, vamos para o código para começar a configurar e escrever nossos testes. Espero vocês na sequência.

Configurando testes em um projeto React - Entendendo diferenças entre Jest, Testing-Library e Enzyme

Introduzindo o universo de testes em React

Vamos discutir sobre o universo de testes em aplicações desenvolvidas com React. Antes de abordarmos diretamente os testes, sua implementação e outros detalhes, precisamos discutir alguns pontos importantes para entender o ecossistema de testes, as bases para começar a construir testes e a abordagem que adotamos ao tratar dessa parte de testes.

Primeiramente, estamos com o navegador aberto no projeto do UseDev, um projeto totalmente funcional. Ele possui uma parte de categorias onde aplicamos alguns filtros. Interessantemente, há pequenas divergências propositais no projeto para abordarmos melhorias. Temos uma página de detalhes onde é possível selecionar cor, tamanho de um produto e quantidade. Há também uma parte funcional de carrinho e finalização de pedido. Ou seja, é um projeto completo com um fluxo do início ao fim. Utilizamos o server.json e, ao acessá-lo no editor de texto, podemos ver que os produtos estão todos dentro de um arquivo .json. Isso simula a parte de categorias e produtos como se fosse uma API real, mas não lidamos com uma API de pagamentos para efetuar pagamentos reais. Portanto, o server.json é excelente para trabalharmos com o projeto.

Explorando a estrutura do projeto e o uso do server.json

Para ilustrar, aqui está um exemplo de como os produtos estão estruturados no server.json:

{
  "products": [
    {
      "id": 1,
      "name": "Camiseta Capy",
      "price": 89.9,
      "category": 1,
      "description": "Camiseta 100% algodão",
      "colors": ["bege", "branca", "cinza"],
      "sizes": ["P", "M", "G", "GG"],
      "image": "/products/tshirt.png"
    },
    {
      "id": 2,
      "name": "Mousepad </>",
      "price": 40.99,
      "category": 2,
      "description": "Mousepad gamer",
      "colors": [],
      "sizes": [],
      "image": "/products/mousepad.png"
    },
    {
      "id": 3,
      "name": "Boné 404 Not Found",
      "price": 59.2,
      "category": 4,
      "description": "Boné trucker com ajuste de 5 pontos",
      "colors": ["preto", "cinza"],
      "sizes": [],
      "image": "/products/cap.png"
    },
    {
      "id": 4,
      "name": "Copo Dia de Programador",
      "price": 9.99,
      "category": 3,
      "description": "Copo térmico de 500ml",
      "colors": [],
      "sizes": [],
      "image": "/products/cup.png"
    }
  ],
  "categories": [
    {
      "id": 1,
      "name": "Roupas",
      "image": "/categories/clothes.png"
    },
    {
      "id": 2,
      "name": "Decoração",
      "image": "/categories/decorations.png"
    },
    {
      "id": 3,
      "name": "Canecas",
      "image": "/categories/mugs.png"
    },
    {
      "id": 4,
      "name": "Acessórios",
      "image": "/categories/accessories.png"
    }
  ],
  "cart": []
}

Discutindo a importância dos testes e o uso do TypeScript

Outro ponto importante é que o projeto utiliza TypeScript, como podemos ver pelos arquivos com terminação .tsx e pelo tsconfig configurado juntamente com o Vite no projeto. Mas por que deveríamos utilizar testes nesta aplicação? O que devemos ou não testar? Existem conceitos importantes a serem considerados. Nosso objetivo não é transformar ninguém em uma pessoa desenvolvedora focada em TDD (Test-Driven Development), ou seja, desenvolvimento orientado a testes. Essa não é uma prática que utilizamos no dia a dia de trabalho. O intuito principal é que se entenda quando aplicar ou não testes em uma aplicação ou componente.

Para avançarmos, precisamos entender as diferenças entre os testes e por que existem tantos frameworks que cuidam dessa parte para nós. O primeiro deles, provavelmente já conhecido, é o Jest. Para acessar sua documentação, podemos visitar o site Jestjs.org. A documentação tem suporte para o português, e a seleção de idioma está disponível no menu superior, próximo ao símbolo do GitHub.

Explorando o Jest e sua função como test runner

O Jest é o runner dos testes, ou seja, ele é o motor que roda por trás, juntamente com o Node, para executar os testes. Para adicionar o Jest ao projeto, utilizamos o comando:

npm install --save-dev jest

Isso realiza a instalação e nos dá acesso às suas configurações para executar os testes. No entanto, o Jest é apenas um runner e não tem acesso a elementos do DOM, que são necessários ao rodar uma aplicação com React, Angular, Vue, Svelte, etc. O Jest é limitado a testes com JavaScript e TypeScript, sem envolver elementos do DOM, ou seja, elementos visuais disponíveis no navegador.

Comparando Testing Library e Enzyme

No contexto de testes em aplicações, destacam-se dois players que talvez já conheçamos: o React Testing Library, conhecido apenas como Testing Library, e o Enzyme, que é um dos frameworks mais antigos para testar aplicações que manipulam o DOM.

Começando pelo Enzyme, ele é considerado o precursor nessa área de testes. A própria documentação do Enzyme, disponível em enzymejs.github.io, menciona que sua API é uma imitação do jQuery. Portanto, para quem já utilizou jQuery em versões mais antigas do JavaScript, o Enzyme será bastante familiar.

Por outro lado, a Testing Library representa uma evolução na forma como tratamos os testes. Ela oferece uma API mais completa, especialmente para o React. Podemos iniciar a Testing Library com ou sem TypeScript, sendo que a única diferença será a inclusão das bibliotecas de dependência do TypeScript, identificadas pelo prefixo @types. Durante a instalação, utilizamos o comando:

npm install --save-dev @testing-library/react @testing-library/dom

A escolha do framework, como Vue ou Angular, determinará a versão específica da Testing Library a ser utilizada.

Integrando Jest e Testing Library no projeto

É importante destacar que o uso do Jest não é excluído pelo uso do Enzyme ou da Testing Library. Enquanto a Testing Library foca na integração com o DOM, permitindo testar componentes em tela e criar snapshots (fotografias virtuais do estado atual da aplicação), o Jest é utilizado para testes funcionais e unitários, verificando se funções retornam valores consistentes e se são puras, sem efeitos colaterais.

Portanto, temos dois pilares principais nos testes: a integração e manipulação do DOM com a Testing Library, e os testes mais simples e conhecidos com o Jest, que são comuns em ambientes como Node ou em algoritmos.

Para iniciar, vamos instalar tanto o Jest quanto a Testing Library em nosso projeto. No editor de texto, abrimos uma nova aba do terminal e executamos:

npm install jest

Em seguida, consultamos a documentação do React Testing Library para copiar o script de instalação com TypeScript, já que nosso projeto suporta essa linguagem. O script é semelhante ao anterior, mas inclui @types/react e @types/react-dom.

No arquivo package.json, verificamos que as dependências @types/react e @types/react-dom já estão presentes. Assim, podemos instalar apenas a Testing Library React e a Testing Library DOM. No terminal integrado, executamos essa instalação.

Após a instalação, discutiremos como rodar testes e validar seu funcionamento, dando início a essa parte de testes, que certamente será muito enriquecedora. Até a próxima!

Sobre o curso React: realizando testes com Jest e Testing Library

O curso React: realizando testes com Jest e Testing Library possui 220 minutos de vídeos, em um total de 48 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Configurando testes em um projeto React
• Avançando em testes de funções utilitárias
• Testando integrações e contextos
• Testando telas com múltiplos contextos
• Criando uma GitHub Action de testes