Aparecimento e Desaparecimento

Algumas vezes precisas de testar se um elemento está presente e depois desaparece ou vice-versa.

Aguardar pelo aparecimento

Se precisares de esperar por um elemento aparecer, os utilitários de async/await permite-te esperar por uma afirmação ser satisfeita antes de prosseguir. Os utilitários de espera voltam a entrar até a consulta passar ou pausar. Os métodos assíncronos retornam uma promessa, então deves sempre usar await ou .then(done) quando estiveres a chamá-los.

1. Usando Consultas de findBy

test('movie title appears', async () => {
  // o elemento não está inicialmente presente...
  // esperar pelo aparecimento e retornar o elemento
  const movie = await findByText('the lion king')
})

2. Usando waitFor

test('movie title appears', async () => {
  // // o elemento não está inicialmente presente...

  // esperar pelo aparecimento dentro de uma afirmação
  await waitFor(() => {
    expect(getByText('the lion king')).toBeInTheDocument()
  })
})

Aguardar pelo desaparecimento

A função auxiliar assíncrona waitForElementToBeRemoved usa uma função de resposta para consultar pelo elemento em cada mutação do DOM e resolver para true quando o elemento for removido:

test('movie title no longer present in DOM', async () => {
  // o elemento é removido
  await waitForElementToBeRemoved(() => queryByText('the mummy'))
})

Usar a MutationObserver é mais eficiente do que sondar o DOM em intervalos regulares com waitFor.

A função auxiliar assíncrona waitFor volta a tentar até a função envolvida parar de lançar um erro. Isto pode ser usado para afirmar que um elemento desaparece da página:

test('movie title goes away', async () => {
  // o elemento está inicialmente presente...
  // notar o uso da queryBy ao invés de getBy para retornar nulo
  // ao invés de oferecer a própria consulta
  await waitFor(() => {
    expect(queryByText('i, robot')).not.toBeInTheDocument()
  })
})

Afirmar que os elementos não estão presentes

Os métodos getBy padrão lançam um erro quando não poderem encontrar um elemento, então se quiseres fazer uma afirmação de que um elemento não está presente no DOM, podes usar as APIs de queryBy:

const submitButton = screen.queryByText('submit')
expect(submitButton).toBeNull() // este não existe

A versão das APIs de queryAll retorna um arranjo de nós correspondentes. O tamanho do arranjo pode ser útil para afirmações depois dos elementos serem adicionados ou removidos do DOM:

const submitButtons = screen.queryAllByText('submit')
expect(submitButtons).toHaveLength(0) // não espera nenhum elemento

not.toBeInTheDocument

A biblioteca de utilitário jest-dom fornece o correspondente .toBeInTheDocument(), o qual pode ser usado para afirmar que um elemento está no corpo do documento, ou não. Isto pode ser mais importante do que afirmar que resultado de uma consulta é null:

import '@testing-library/jest-dom'
// usar `queryBy` para evitar lançar um erro com `getBy`
const submitButton = screen.queryByText('submit')
expect(submitButton).not.toBeInTheDocument()