Aller au contenu principal

Aide-mémoire

[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 →

Guide rapide des fonctions exportées dans DOM Testing Library

Requêtes​

Voir Quelle requête utiliser ?

No Match1 Match1+ MatchAwait?
getBythrowreturnthrowNo
findBythrowreturnthrowYes
queryBynullreturnthrowNo
getAllBythrowarrayarrayNo
findAllBythrowarrayarrayYes
queryAllBy[]arrayarrayNo

  • ByLabelText trouver par texte de label ou aria-label

    • getByLabelText
    • queryByLabelText
    • getAllByLabelText
    • queryAllByLabelText
    • findByLabelText
    • findAllByLabelText

  • ByPlaceholderText trouver par valeur de placeholder d'input

    • getByPlaceholderText
    • queryByPlaceholderText
    • getAllByPlaceholderText
    • queryAllByPlaceholderText
    • findByPlaceholderText
    • findAllByPlaceholderText

  • ByText trouver par contenu textuel d'élément

    • getByText
    • queryByText
    • getAllByText
    • queryAllByText
    • findByText
    • findAllByText

  • ByDisplayValue trouver par valeur courante d'élément de formulaire

    • getByDisplayValue
    • queryByDisplayValue
    • getAllByDisplayValue
    • queryAllByDisplayValue
    • findByDisplayValue
    • findAllByDisplayValue

  • ByAltText trouver par attribut alt d'image

    • getByAltText
    • queryByAltText
    • getAllByAltText
    • queryAllByAltText
    • findByAltText
    • findAllByAltText

  • ByTitle trouver par attribut title ou balise title SVG

    • getByTitle
    • queryByTitle
    • getAllByTitle
    • queryAllByTitle
    • findByTitle
    • findAllByTitle

  • ByRole trouver par rôle ARIA

    • getByRole
    • queryByRole
    • getAllByRole
    • queryAllByRole
    • findByRole
    • findAllByRole

  • ByTestId trouver par attribut data-testid

    • getByTestId
    • queryByTestId
    • getAllByTestId
    • queryAllByTestId
    • findByTestId
    • findAllByTestId

Asynchrone​

Voir API asynchrone. Pensez à utiliser await ou .then() pour les résultats des fonctions asynchrones dans vos tests !

  • waitFor (Promise) réexécute la fonction jusqu'à ce qu'elle ne lance plus d'erreur ou que le délai expire

  • waitForElementToBeRemoved (Promise) réexécute la fonction jusqu'à ce qu'elle ne retourne plus de nœud DOM

Déprécié depuis la v7.0.0 :

  • wait (Promise) réexécute la fonction jusqu'à ce qu'elle ne lance plus d'erreur ou que le délai expire
  • waitForElement (Promise) réexécute la fonction jusqu'à ce qu'elle retourne un élément ou un tableau d'éléments. Les requêtes findBy et findAllBy sont asynchrones et réexécutent jusqu'à ce que la requête retourne un résultat, ou que le délai expire ; elles encapsulent waitForElement
  • waitForDomChange (Promise) réexécute la fonction à chaque fois que le DOM est modifié

Événements​

Voir Considérations sur fireEvent, API des événements

  • fireEvent déclenche un événement DOM : fireEvent(node, event)

  • fireEvent.* helpers pour les types d'événements par défaut

Autres​

Voir Interroger dans des éléments, API de configuration

  • within prend un nœud et retourne un objet avec toutes les requêtes liées au nœud (utilisé pour retourner les requêtes de la méthode render de React Testing Library) : within(node).getByText("hello")

  • configure modifier les options globales : configure({testIdAttribute: 'my-data-test-id'})

Options de correspondance de texte​

Étant donné le HTML suivant :

<div>Hello World</div>

Trouvera le div :

// Matching a string:
getByText(container, 'Hello World') // full string match
getByText(container, 'llo Worl', {exact: false}) // substring match
getByText(container, 'hello world', {exact: false}) // ignore case

// Matching a regex:
getByText(container, /World/) // substring match
getByText(container, /world/i) // substring match, ignore case
getByText(container, /^hello world$/i) // full string match, ignore case
getByText(container, /Hello W?oRlD/i) // advanced regex

// Matching with a custom function:
getByText(container, (content, element) => content.startsWith('Hello'))

Étant donné un bouton qui met à jour la page après un certain temps :

test('loads items eventually', async () => {
  // Click button
  fireEvent.click(getByText(node, 'Load'))

  // Wait for page to update with query text
  const items = await findAllByText(node, /Item #[0-9]: /)
  expect(items).toHaveLength(10)
})