Aparecimento e Desaparecimento

[Tradução Beta Não Oficial]

Esta página foi traduzida por PageTurner AI (beta). Não é oficialmente endossada pelo projeto. Encontrou um erro? Reportar problema →

Às vezes você precisa testar que um elemento está presente e depois desaparece, ou vice-versa.

Aguardando aparecimento

Se você precisa aguardar o aparecimento de um elemento, os utilitários assíncronos de espera permitem que você espere uma asserção ser satisfeita antes de prosseguir. Esses utilitários repetem a tentativa até a consulta ser bem-sucedida ou atingir o tempo limite. Os métodos assíncronos retornam uma Promise, então você sempre deve usar await ou .then(done) ao chamá-los.

1. Usando consultas findBy

test('movie title appears', async () => {
  // element is initially not present...
  // wait for appearance and return the element
  const movie = await findByText('the lion king')
})

2. Usando waitFor

test('movie title appears', async () => {
  // element is initially not present...

  // wait for appearance inside an assertion
  await waitFor(() => {
    expect(getByText('the lion king')).toBeInTheDocument()
  })
})

Aguardando desaparecimento

A função auxiliar assíncrona waitForElementToBeRemoved usa um callback para consultar o elemento em cada mutação do DOM e resolve para true quando o elemento é removido.

test('movie title no longer present in DOM', async () => {
  // element is removed
  await waitForElementToBeRemoved(() => queryByText('the mummy'))
})

Usar MutationObserver é mais eficiente do que verificar o DOM periodicamente com waitFor.

A função auxiliar assíncrona waitFor repete a tentativa até que a função encapsulada pare de lançar um erro. Isso pode ser usado para afirmar que um elemento desaparece da página.

test('movie title goes away', async () => {
  // element is initially present...
  // note use of queryBy instead of getBy to return null
  // instead of throwing in the query itself
  await waitFor(() => {
    expect(queryByText('i, robot')).not.toBeInTheDocument()
  })
})

Afirmando que elementos não estão presentes

Os métodos padrão getBy lançam um erro quando não encontram um elemento. Portanto, se você quiser afirmar que um elemento não está presente no DOM, pode usar as APIs queryBy:

const submitButton = screen.queryByText('submit')
expect(submitButton).toBeNull() // it doesn't exist

As versões das APIs queryAll retornam um array de nós correspondentes. O tamanho do array pode ser útil para asserções após elementos serem adicionados ou removidos do DOM.

const submitButtons = screen.queryAllByText('submit')
expect(submitButtons).toHaveLength(0) // expect no elements

not.toBeInTheDocument

A biblioteca de utilitários jest-dom fornece o matcher .toBeInTheDocument(), que pode ser usado para afirmar se um elemento está ou não no corpo do documento. Isso geralmente é mais significativo do que afirmar que um resultado de consulta é null.

import '@testing-library/jest-dom'
// use `queryBy` to avoid throwing an error with `getBy`
const submitButton = screen.queryByText('submit')
expect(submitButton).not.toBeInTheDocument()