Testes no Front-end: métodos de consulta do RTL

Neste artigo, vamos explorar os principais métodos de consulta disponíveis na biblioteca React testing Library e entender a diferença entre eles.

React Testing Library (RTL)

O React Testing Library é uma biblioteca popular para escrever testes automatizados em aplicações React. Uma das principais funcionalidades dessa biblioteca é a capacidade de consultar elementos na tela e realizar interações com eles, como clique de botões e preenchimento de formulários.

Existem vários métodos de consulta disponíveis no React Testing Library, e cada um deles tem sua finalidade específica.

getBy

O método getBy é usado para obter um elemento com base em um seletor. Ele retorna o primeiro elemento que corresponde ao seletor especificado. Se nenhum elemento corresponder ao seletor, o getBy irá lançar um erro.

Podemos fazer essas consultas usando um método que começa com um prefixo indicando o tipo de consulta e um sufixo que indica qual o tipo de seletor estaremos usando para esta consulta.

Exemplo:

import { render, screen } from '@testing-library/react';

test('deve exibir o título da página', () => {
  render(<App />);
  const titulo = screen.getByText('Meu Título');
  expect(titulo).toBeInTheDocument();
});

Neste exemplo, estamos buscando o elemento que contém o texto "Meu Título" na tela usando o getByText. Se o elemento não for encontrado, o teste irá falhar.

queryBy

O método queryBy é semelhante ao getBy, mas não lança um erro se o elemento não for encontrado. Em vez disso, ele retorna null.

Exemplo:

import { render,screen } from '@testing-library/react';

test('deve exibir o título da página', () => {
  render(<App />);
  const titulo = screen.queryByText('Meu Título');
  expect(titulo).toBeInTheDocument();
});

Neste exemplo, estamos buscando o elemento que contém o texto "Meu Título" na tela usando o queryByText. Se o elemento for encontrado, o teste irá passar, pois estamos verificando se o título está presente na tela usando o método toBeInTheDocument().

Esse tipo de consulta é muito útil quando queremos verificar se um elemento não está presente, pois ele retorna null e não um erro imediatamente. Então você consegue utilizar o retornado com utilitários do jest, como o not.toBeInTheDocument() para verificar se elementos não estão presentes.

findBy

O método findBy é usado para obter um elemento assíncrono com base em um seletor. Ele aguarda até que o elemento seja encontrado ou até que expire o tempo limite especificado. Se o elemento não for encontrado, o findBy irá lançar um erro.

Exemplo:

import { render, screen } from '@testing-library/react';

test('deve exibir o título da página', async () => {
  render(<App />);
  const titulo = await screen.findByText('Meu Título');
  expect(titulo).toBeInTheDocument();
});

Neste exemplo, estamos buscando o elemento que contém o texto "Meu Título" na tela usando o findByText. O teste irá aguardar até que o elemento seja encontrado ou até que o tempo limite especificado seja atingido.

Note que tivemos que usar async await para aguardar que a promise fosse resolvida, e só assim continuar o nosso teste. Essa query é muito útil quando você precisar testar componentes que renderizam dados provenientes de API's, ou elementos que carregam em uma outra página ao você visitá-los.

getAllBy, queryAllBy e findAllBy

Os métodos getAllBy e queryAllBy são usados para obter uma lista de elementos com base em um seletor. O getAllBy irá lançar um erro se nenhum elemento corresponder ao seletor, enquanto o queryAllBy retorna uma lista vazia se nenhum elemento for encontrado.

Da mesma forma, temos o findAllBy que aguarda uma promisse ser resolvida, ou seja, ao menos um elemento aparecer em tela e se ele existir o método retorna uma lista desses elementos encontrados.

Exemplo:

import { render, screen } from '@testing-library/react';

test('deve exibir todos os itens da lista', () => {
  render(<ItemList />);
  const items = screen.getAllByTestId('item');
  expect(items.length).toBe(3);
});

Neste teste estamos fazendo uma consulta a vários elementos que possuem um test-id de item. Se encontrados, eles serão retornados e armazenados na variável items como um array desses itens. Se não encontrados o teste irá falhar.

Tranquilo!? Estes são os métodos de consulta disponíveis na API do React Testing Library. O conhecimento sobre cada método, o que cada um retorna nos dá uma visão muito boa sobre quais situações eles seriam adequados ao testar nossas aplicações.

Por exemplo, se você quiser que um teste falhe caso nenhum elemento seja encontrado é bom usar o getBy. Se for o caso em que você precisa aguardar o elemento aparecer na tela depois de um tempo, você pode usar o findBy, ou se quiser uma lista desses elementos pode usar findAllBy.

Deu para notar que cada um desses métodos de consulta utilizam um seletor, que identifica o que estamos consultando, por exemplo, o getByText ou queryByText vai buscar um elemento pelo seu texto. O getByTestId busca um elemento pelo seu data-test, e por aí vai. Se você quiser conhecer mais sobre cada um desses métodos pode clicar aqui e acessar a documentação do React Testing Library.

Grande abraço e até a próxima!