Como verificar se um elemento foi renderizado corretamente no DOM usando JavaScript

Como verificar se um elemento foi renderizado corretamente?

Quando estamos escrevendo testes em JavaScript, é essencial garantir que os elementos que esperamos na interface do usuário foram corretamente renderizados no DOM. Isso ajuda a garantir que nossa aplicação está exibindo as informações corretamente, com todos os elementos e comportamentos interativos esperados.

Testando se um elemento foi renderizado com Jest e Testing Library

Usando Jest e Testing Library, podemos verificar se os elementos estão presentes no DOM após o componente ser renderizado. Essas ferramentas tornam a verificação de elementos simples e eficiente.

Exemplo básico de teste de renderização:

import { render } from '@testing-library/react';
import MyComponent from './MyComponent';

test('deve renderizar o componente corretamente', () => {
  const { getByText } = render(<MyComponent />);
  expect(getByText('Texto esperado')).toBeInTheDocument();
});

O que o código está fazendo: O código acima utiliza render() da Testing Library para renderizar o componente MyComponent. Em seguida, a função getByText é usada para verificar se o texto 'Texto esperado' está presente no documento. Se estiver, o teste passa.

Como testar a renderização de outros tipos de elementos

Além de testar textos, também podemos testar a presença de botões, imagens, inputs e outros elementos HTML. Isso pode ser feito utilizando métodos como getByLabelText, getByRole ou getByAltText, dependendo do tipo de elemento.

Exemplo de teste para um botão:

test('deve renderizar o botão corretamente', () => {
  const { getByRole } = render(<MyComponent />);
  const button = getByRole('button');
  expect(button).toBeInTheDocument();
});

O que o código está fazendo: Esse exemplo busca um botão no componente usando getByRole('button') e, em seguida, verifica se o botão foi renderizado no DOM.

Testando se os elementos estão sendo removidos do DOM

Às vezes, é importante garantir que elementos que não são mais necessários sejam removidos corretamente do DOM. Isso pode acontecer após uma interação com o usuário, como a submissão de um formulário ou a conclusão de uma ação assíncrona.

Exemplo de teste para remoção de elemento:

import { render, fireEvent } from '@testing-library/react';
import MyComponent from './MyComponent';

test('deve remover o elemento após o clique', () => {
  const { queryByText, getByText } = render(<MyComponent />);
  const removeButton = getByText('Remover item');

  fireEvent.click(removeButton);
  expect(queryByText('Item removido')).not.toBeInTheDocument();
});

O que o código está fazendo: Esse código verifica que, após o clique no botão "Remover item", o elemento 'Item removido' é removido do DOM. Usamos queryByText() porque ele retorna null caso o elemento não seja encontrado, o que é esperado quando o item é removido.

Testando renderizações condicionais

Se um componente renderiza ou não um elemento com base em uma condição, precisamos testar esse comportamento também. Podemos fazer isso utilizando funções que buscam elementos, como getByText, mas em cenários condicionais, podemos querer garantir que um elemento não foi renderizado em determinados estados.

Exemplo de teste condicional:

test('não deve renderizar o elemento se a condição for falsa', () => {
  const { queryByText } = render(<MyComponent showElement={false} />);
  expect(queryByText('Elemento visível')).toBeNull();
});

O que o código está fazendo: Esse teste garante que, quando a propriedade showElement é falsa, o texto 'Elemento visível' não será renderizado. O uso de queryByText() é importante aqui, pois retorna null quando o elemento não está presente.

Dicas para escrever testes de renderização mais eficazes

Sempre verifique o que foi renderizado e se o comportamento está correto: O teste de renderização deve sempre incluir uma verificação do estado visual do componente e não apenas a presença de elementos.
Use a consulta correta: Se você está buscando um botão, use getByRole('button'); para links, use getByRole('link'). Isso ajuda a tornar seus testes mais acessíveis e alinhados com as práticas recomendadas para a web.

Como verificar a renderização com testes assíncronos

Quando lidamos com renderização assíncrona, como a que acontece após uma requisição API ou tempo de carregamento, precisamos esperar que a renderização seja concluída. Testing Library fornece métodos como findByText, findByRole, ou findByTestId para lidar com esses cenários assíncronos.

Exemplo com renderização assíncrona:

import { render, waitFor } from '@testing-library/react';
import AsyncComponent from './AsyncComponent';

test('deve renderizar o texto após requisição', async () => {
  const { findByText } = render(<AsyncComponent />);
  const element = await findByText('Dados carregados');
  expect(element).toBeInTheDocument();
});

O que o código está fazendo: Nesse exemplo, usamos findByText para aguardar que o componente AsyncComponent renderize a mensagem 'Dados carregados' após uma operação assíncrona.

Conclusão

Testar a renderização de elementos no DOM é essencial para garantir que o código esteja funcionando corretamente e que os usuários possam interagir com sua aplicação de maneira eficaz. Usando Jest e Testing Library, você pode escrever testes eficientes que verificam se os elementos estão sendo renderizados corretamente, se o comportamento esperado está acontecendo e até mesmo se os elementos são removidos quando necessário.

Melhores práticas para testar a renderização de elementos com Jest e Testing Library

Verificar a renderização de elementos é um passo essencial para garantir a qualidade do seu código e a experiência do usuário. Com ferramentas como Jest e Testing Library, você pode facilmente testar a renderização de textos, botões e outros elementos HTML, além de garantir que o estado visual do componente corresponda às expectativas. Essas práticas de testes de renderização são a base para garantir que as interações e comportamentos do usuário ocorram como planejado.

Algumas aplicações:

Utilize getByText() e getByRole() para buscar e verificar a presença de elementos renderizados.
Use queryByText() e queryByRole() para verificar se elementos foram removidos do DOM.
Teste renderizações assíncronas com funções como findByText() para garantir que os dados sejam carregados corretamente.

Dicas para quem está começando

Foque nos testes de renderização mais simples, como verificar se o texto ou botão esperado está na tela.
Compreenda como as consultas getBy*() e queryBy*() funcionam para melhorar a precisão dos seus testes.
Ao testar interações assíncronas, sempre use findByText() ou waitFor() para esperar pelo estado correto da interface.

Contribuições de João Gutierrez

Como verificar se um elemento foi renderizado corretamente?