Apparition et disparition

[Traduction Bêta Non Officielle]

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Parfois, vous devez tester qu'un élément est présent puis disparaît, ou inversement.

Attendre une apparition

Si vous devez attendre qu'un élément apparaisse, les utilitaires d'attente asynchrone vous permettent d'attendre qu'une assertion soit satisfaite avant de continuer. Ces utilitaires réessayent jusqu'à ce que la requête réussisse ou que le délai expire. Les méthodes asynchrones renvoient une Promise, vous devez donc toujours utiliser await ou .then(done) lors de leur appel.

1. Utilisation des requêtes 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. Utilisation de 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()
  })
})

Attendre une disparition

La fonction utilitaire asynchrone waitForElementToBeRemoved utilise un callback pour rechercher l'élément à chaque mutation du DOM et se résout en true lorsque l'élément est supprimé.

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

L'utilisation de MutationObserver est plus efficace que d'interroger le DOM à intervalles réguliers avec waitFor.

La fonction utilitaire asynchrone waitFor réessaye jusqu'à ce que la fonction encapsulée cesse de générer une erreur. Cela permet de vérifier qu'un élément disparaît de la page.

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

Vérifier l'absence d'éléments

Les méthodes getBy standard génèrent une erreur lorsqu'elles ne trouvent pas un élément. Pour vérifier qu'un élément est absent du DOM, utilisez plutôt les API queryBy :

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

La version queryAll de ces API renvoie un tableau de nœuds correspondants. La longueur de ce tableau est utile pour les assertions après l'ajout ou la suppression d'éléments dans le DOM.

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

not.toBeInTheDocument

La bibliothèque utilitaire jest-dom fournit le matcher .toBeInTheDocument(), qui permet de vérifier si un élément est présent dans le corps du document. Cette approche est plus significative que de vérifier qu'un résultat de requête est null.

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