Como testar a não existência de um elemento com React JS

Neste artigo você aprenderá a como testar a não existência de um elemento com React, uma ação importante para os testes da aplicação

Fala programador(a), beleza? Bora aprender mais sobre testes em React JS!

Em aplicações desenvolvidas com React JS, muitas vezes é crucial verificar a presença ou ausência de um componente ou elemento específico na renderização.

Esta validação pode ser fundamental, seja para testes unitários, testes de integração ou até mesmo no processo de desenvolvimento, para assegurar que a lógica condicional está funcionando conforme o esperado.

Neste artigo, exploraremos como testar a não existência de um elemento em um componente React, utilizando abordagens modernas e otimizadas.

O Problema

Vamos supor que você tem um componente que renderiza um alerta condicionalmente. Você quer garantir que, sob certas condições, esse alerta não seja renderizado.

function MensagemAlerta({ mostrar }) {
  if (!mostrar) return null;

  return <div className="alerta">Atenção! Isto é um alerta.</div>;
}

Agora, como você testa que o elemento com a classe “alerta” não está presente quando mostrar é false?

Utilizando o React Testing Library

O React Testing Library é uma excelente ferramenta para simular comportamentos do usuário e verificar o estado da UI.

Para verificar a não existência de um elemento, podemos utilizar a função queryBy*.

Instalando as Dependências

Antes de começar, certifique-se de ter instalado as bibliotecas necessárias:

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

Escrevendo o Teste

import { render } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect'; 
import MensagemAlerta from './MensagemAlerta'; 

test('não deve renderizar o alerta quando mostrar é false', () => {
  const { queryByText } = render(<MensagemAlerta mostrar={false} />);
  const elementoAlerta = queryByText(/Atenção! Isto é um alerta./);
  expect(elementoAlerta).not.toBeInTheDocument();
});

Note que utilizamos queryByText em vez de getByText. A diferença crucial é que getByText lançaria um erro se o elemento não fosse encontrado, enquanto queryByText simplesmente retorna null.

Testando com Enzyme

Outra biblioteca popular para testar componentes React é o Enzyme. Para testar a não existência de um elemento com Enzyme:

Instalando as Dependências

npm install --save enzyme enzyme-adapter-react-16

Escrevendo o Teste

import { shallow } from 'enzyme';
import MensagemAlerta from './MensagemAlerta';

test('não deve renderizar o alerta quando mostrar é false', () => {
  const wrapper = shallow(<MensagemAlerta mostrar={false} />);
  expect(wrapper.find('.alerta')).toHaveLength(0);
});

Com Enzyme, utilizamos a função find para procurar o elemento e, em seguida, verificamos se o seu comprimento é zero.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Verificar a não existência de um elemento é tão crucial quanto verificar sua presença, especialmente quando lidamos com lógicas condicionais no React.

Ambas as bibliotecas, React Testing Library e Enzyme, oferecem abordagens diretas para fazer isso.

Ao escrever testes, lembre-se sempre de pensar nos cenários que você quer cobrir e escrever testes para ambos os lados da moeda – a presença e a ausência de elementos.

Independentemente da biblioteca ou abordagem escolhida, o importante é garantir que seus componentes se comportem como esperado e ofereçam uma experiência de usuário consistente e livre de erros.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.