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?

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

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.

O teste que passa pelo motivo errado:

Teste de ausência tem uma armadilha que pega todo mundo

Se o seletor estiver escrito errado, o teste passa do mesmo jeito

Não porque o componente escondeu o alerta, mas porque aquela busca não acharia nada nunca, nem com o alerta na tela

Perceba a diferença: verde por comportamento certo e verde por busca quebrada geram exatamente o mesmo resultado no terminal

Por isso vale a regra: teste de ausência anda em PAR com um teste de presença

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

O positivo prova que o seletor encontra o elemento

O negativo prova que a condição realmente cortou a renderização

Sozinho, o negativo não prova quase nada 🙂

Sumir do DOM e sumir da tela não são a mesma coisa:

Antes de escrever a asserção, responde uma pergunta: o teu componente REMOVE o elemento ou só esconde ele?

No exemplo aqui o componente retorna null, então o alerta nem chega a existir no DOM

Mas tem um monte de caso em que o elemento continua lá, só que escondido por estilo, com altura zero ou fora da área visível

Nesse cenário a asserção de não existir falha, e o teste está certo: o elemento existe, ele só não aparece

Se o que tu quer garantir é o que o usuário enxerga, a asserção é de visibilidade

Se o que tu quer garantir é que a lógica condicional não renderizou nada, aí sim é ausência

São duas perguntas diferentes, e cada uma pede uma asserção diferente, beleza?

E quando o elemento some depois de uma ação?

O caso do artigo é o mais tranquilo: a prop já chega false e o alerta nunca é renderizado

Só que na vida real o elemento costuma sumir DEPOIS de alguma coisa: um clique, uma resposta da API, um timer que estoura

E aí mora o falso verde

Se tu assertar a ausência logo depois de disparar a ação, o teste pode passar porque o elemento ainda nem tinha aparecido, não porque ele foi removido

A sequência que salva é sempre a mesma:

1. prove que o elemento está na tela
2. dispare a ação que deveria removê-lo
3. só então prove que ele saiu

E quando o sumiço depende de algo assíncrono, a asserção precisa ESPERAR o desaparecimento, e não olhar o DOM uma única vez e dar o veredito

Sem esse cuidado tu não tem um teste, tu tem um sorteio

Buscar pelo que o usuário vê, não pela classe:

Repara que no exemplo com Enzyme a busca é pela classe .alerta

Funciona, mas amarra o teste num detalhe de implementação

No dia que alguém renomear essa classe, ou mexer na forma de estilizar o componente, o teste quebra sem que nada tenha quebrado pro usuário

E o pior tipo de teste é o que dá trabalho sem apontar problema real

Buscando pelo texto que aparece na tela, pelo papel do elemento (role) ou por um atributo dedicado a teste, a busca sobrevive ao refactor de CSS

Regra prática pra levar pro resto da suíte: se a mudança não afeta o usuário, ela não deveria pintar o teste de vermelho

Checklist rápido antes de dar o teste por pronto:

Roda esses quatro itens na cabeça, leva menos de um minuto

• tem um teste de presença fazendo par com o de ausência?
• o componente REMOVE o elemento ou apenas esconde ele?
• o sumiço depende de clique, requisição ou timer? se depende, a asserção espera o desaparecimento?
• a busca está presa a uma classe de CSS que pode mudar amanhã?

Se passou nos quatro, teu teste de ausência está falhando pelos motivos certos, que é exatamente o que a gente quer 😀