Esperando a Renderização de Elementos Assíncronos com Jest DOM
Quando lidamos com operações assíncronas em testes, é crucial garantir que os elementos tenham sido carregados antes de realizar verificações. O Jest DOM oferece mecanismos para lidar com essas situações, assegurando que o teste aguarde a renderização de elementos assíncronos antes de continuar.
Utilizando waitFor
O Jest DOM fornece a função waitFor para esperar que uma condição seja atendida antes de prosseguir com o teste. Junto com o uso de async/await, podemos lidar de maneira eficaz com operações assíncronas.
import { render, waitFor } from '@testing-library/react';
import MyComponent from './MyComponent';
it('deve renderizar o componente após operação assíncrona', async () => {
render(<MyComponent />);
// Aguarda até que o elemento desejado seja renderizado
await waitFor(() => {
expect(screen.getByText('Elemento Renderizado')).toBeInTheDocument();
});
});No exemplo acima, waitFor aguarda até que a função de retorno de chamada forneça uma condição verdadeira antes de prosseguir. Neste caso, estamos esperando que o elemento com o texto ‘Elemento Renderizado’ esteja na tela.
Utilizando waitForElementToBeRemoved
Para cenários em que desejamos esperar que um elemento seja removido, podemos usar a função waitForElementToBeRemoved. Este método é útil quando queremos garantir que um elemento específico seja retirado do DOM antes de continuar o teste.
import { render, waitForElementToBeRemoved } from '@testing-library/react';
import MyComponent from './MyComponent';
it('deve remover o elemento após operação assíncrona', async () => {
render(<MyComponent />);
// Aguarda até que o elemento seja removido
await waitForElementToBeRemoved(screen.getByText('Elemento Removido'));
});Neste exemplo, waitForElementToBeRemoved garante que o teste aguarde até que o elemento com o texto ‘Elemento Removido’ não esteja mais presente no DOM.