React Testing Libraty

Fala devs, tudo bom?

Estava aqui pensando em tantas coisas que me apaixonei no mundo da tecnologia e uma delas é o RTL (React Testing Libraby). Essa biblioteca de testes fantástica que vem se tornando cada vez mais relevantes em aplicações react. Quando você cria uma aplicação usando o 'create-react-app', ela já vem com os suportes necessários para que possa colocar em prática os testes de sua aplicação, caso crie sua aplicação por outro método basta instalar as dependências do RTL

Instalação:

npm install --save-dev @testing-library/react
  ou
yarn add --dev @testing-library/react

Esse artigo terá como base código próprio com finalidade de exemplificar um caso básico da prática de teste. A página testada será uma página notFound de uma aplicação React onde trabalho com diversas rotas.

Antes de mais nada é importante ressaltar que para o teste entender o uso de rotas faz-se necessário o uso de um método chamado renderWithRouter. Sem mais delongas vamos ao código de fato e ao teste da página notFound.

import React from 'react';
  import './not-found.css';
  

  const NotFound = () => (
   <div className="not-found">
    <h2>
     { `Page requested not found` }
     <span role="img" aria-label="Crying emoji"> 😭</span>
    </h2>
    <img
     className="not-found-image"
     src={ `https://media.giphy.com/media/kNSeTs31XBZ3G/giphy.gif` }
     alt="Pikachu crying because the page requested was not found"
    />
   </div>
  );
  

  export default NotFound;

Acima pode-se ler um desenvolvimento simples aonde se retorna um h2, e 2(duas) imagens para nossa página.

O teste visa justamente checar se tudo que precisamos está sendo renderizado na tela.

import React from 'react';
  import { screen } from '@testing-library/react';
  import renderWithRouter from './renderWithRouter';
  import App from '../App';
  

  describe('Teste o componente <NotFound.js />', () => {
   it(
    'Teste se a página contém um heading h2 com o texto "Page requested not found 😭"',
    () => {
     const { history } = renderWithRouter(<App />);
     history.push('/*');
     const notFoundText = screen.getByRole('heading',
      { name: /Page requested not found/i });
     const emoji = screen.getByRole('img', { name: 'Crying emoji' });
     expect(notFoundText).toBeInTheDocument();
     expect(emoji).toBeInTheDocument();
    },
   );
   it('Teste se a página mostra a imagem', () => {
    const { history } = renderWithRouter(<App />);
    history.push('/*');
    const imageNotFound = screen.getAllByRole('img');
    expect(imageNotFound[1]).toHaveAttribute('src', 'https://media.giphy.com/media/kNSeTs31XBZ3G/giphy.gif');
   });
  });

Explicando um pouco o código do teste, parece complexo, mas na verdade é bem simples, vamos começar com o básico das sintaxes.

Describe: Vai ser usado para organizar seus blocos de testes, geralmente usamos para separar por finalidades ou componentes que desejamos testar. ao chamar o describe passamos uma string para essa espécie de título e chamamos uma callback que recebera os testes em si.

test ou it: É o que vamos usar para de fato criar o teste, novamente vamos passar uma string passando de preferência mais detalhes sobre o que está sendo testado e uma callback que receberá o código de teste.

it('Teste se a página mostra a imagem', () => {
    const { history } = renderWithRouter(<App />);
    history.push('/*');
    const imageNotFound = screen.getAllByRole('img');
    expect(imageNotFound[1]).toHaveAttribute('src', 'https://media.giphy.com/media/kNSeTs31XBZ3G/giphy.gif');
   });
  });

Pegando um fragmento do teste acima vamos nos atentar em como de fato desenvolvemos esse teste. O primeiro passo e falar o que eu quero testar, é literalmente como se fosse falado "pega para mim este elemento da tela", na linguagem do código podemos traduzir com o screen.getAllByRole, uma das muitas querys que o RTL possui, se apegue a documentação para achar a que melhor se encaixa ao momento que o seu teste se encontra. No nosso caso o que acontece é basicamente "pegue todas as imagens presentes na tela" e assim o teste entende e na constante imageNotFound se cria um array com todas as imagens, se atente a isso. Okay, tenho o elemento que quero testar, mas e agora? Basta simplesmente falar para o teste "eu espero que essa imagem tenha esse atributo" já que nesse caso estamos procurando por uma url de imagem, novamente se atenha a documentação para saber qual expect usar, na linguagem do código isso é representado com:

expect(imageNotFound[1]).toHaveAttribute('src', 'https://media.giphy.com/media/kNSeTs31XBZ3G/giphy.gif');

Aqui vai uma observação, se atente que no expect foi chamada a constante e o index do elemento que eu quero testar, afinal o getAllByRole cria um array de todos os elementos que tenha o mesmo role, então nosso código tem que ser bem detalhadinho para não haver erros ou até mesmo os temidos falsos positivos.

RTL é muito mais extenso e muito mais fascinante do que eu poderia me estender aqui, deixo como indicação final a leitura da documentação e espero que ao menos instigue ao estudo dessa área tão importante para aqueles que ainda não conhecem e aqueles que conhecem que possam se aprofundar com essa ferramenta extremamente poderosa.