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 →

Obtenez l'aide-mémoire imprimable

Guide rapide de toutes les fonctions exportées dans React Testing Library

• render const {/* */} = render(Component) retourne :
  • fonction unmount pour démonter le composant
  • référence container au nœud DOM où le composant est monté
  • toutes les requêtes de DOM Testing Library, liées au document donc il n'est pas nécessaire de passer un nœud comme premier argument (généralement, vous pouvez utiliser l'import screen à la place)

import {render, fireEvent, screen} from '@testing-library/react'

test('loads items eventually', async () => {
  render(<Page />)

  // Click button
  fireEvent.click(screen.getByText('Load'))

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

Requêtes

Différence avec DOM Testing Library

Les requêtes retournées par render dans React Testing Library sont identiques à celles de DOM Testing Library sauf que leur premier argument est lié au document, donc au lieu de getByText(node, 'text') vous utilisez getByText('text')

Voir Quelle requête utiliser ?

	No Match	1 Match	1+ Match	Await?
getBy	throw	return	throw	No
findBy	throw	return	throw	Yes
queryBy	null	return	throw	No
getAllBy	throw	array	array	No
findAllBy	throw	array	array	Yes
queryAllBy	[]	array	array	No

• 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

L'API asynchrone de dom-testing-library est réexportée par React Testing Library.

• 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

Événements

Voir l'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

  • click fireEvent.click(node)
  • Voir tous les événements supportés

• act wrapper autour de react act ; React Testing Library englobe déjà render et fireEvent dans un appel à act, donc la plupart des cas ne nécessitent pas de l'utiliser manuellement

Autres

Voir Interroger des éléments spécifiques, API de configuration, Nettoyage,

• 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'})

• cleanup nettoie le DOM (à utiliser avec afterEach pour réinitialiser le DOM entre les tests)

Options de correspondance de texte

Étant donné le HTML suivant :

<div>Hello World</div>

Trouvera le div :

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

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

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

Obtenez l'aide-mémoire imprimable