Aparición y Desaparición

[Traducción Beta No Oficial]

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

A veces necesitas probar que un elemento está presente y luego desaparece, o viceversa.

Esperando la aparición

Si necesitas esperar a que aparezca un elemento, las utilidades de espera asíncrona te permiten esperar hasta que se cumpla una aserción antes de continuar. Estas utilidades reintentan hasta que la consulta tiene éxito o se agota el tiempo. Los métodos asíncronos devuelven una Promise, por lo que siempre debes usar await o .then(done) al llamarlos.

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()
  })
})

Esperando la desaparición

La función utilidad asíncrona waitForElementToBeRemoved usa un callback para consultar el elemento en cada mutación del DOM y se resuelve a true cuando el elemento es eliminado.

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

Usar MutationObserver es más eficiente que sondear el DOM periódicamente con waitFor.

La función utilidad asíncrona waitFor reintenta hasta que la función envuelta deja de lanzar un error. Esto puede usarse para verificar que un elemento desaparece de la 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()
  })
})

Verificando elementos ausentes

Los métodos estándar getBy lanzan un error cuando no encuentran un elemento, así que si quieres verificar que un elemento no está presente en el DOM, puedes usar las APIs queryBy:

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

La versión queryAll devuelve un arreglo de nodos coincidentes. La longitud del arreglo puede ser útil para verificaciones después de añadir o eliminar elementos del DOM.

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

not.toBeInTheDocument

La biblioteca de utilidades jest-dom proporciona el matcher .toBeInTheDocument(), que puede usarse para verificar si un elemento está en el cuerpo del documento. Esto es más significativo que verificar si el resultado de una consulta es null.

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