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 →

Un guide rapide des fonctions exportées dans Vue Testing Library.

Requêtes

Différence avec DOM Testing Library

Les requêtes retournées par render dans Vue Testing Library sont identiques à celles de DOM Testing Library. Cependant, leur premier argument est lié au document. Ainsi, au lieu de getByText(node, 'text'), vous écrivez getByText('text').

Variantes de recherche

	Return if no match	Return if 1 match	Return if 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

Types de recherche

	finds by...	DOM example
...ByLabelText	label or aria-label content	<label for="element" />
...ByPlaceholderText	input placeholder value	<input placeholder="name" />
...ByText	element text content	<p>Lorem ipsum</p>
...ByDisplayValue	form element current value	Current value of input element
...ByAltText	img alt attribute	<img alt="movie poster" />
...ByTitle	title attribute or svg title tag	<span title="Add" /> or <title />
...ByRole	ARIA role	<div role="dialog" />
...ByTestId	data-testid attribute	<div data-testid="some-message" />

Vous pouvez écrire toute combinaison de variantes et types de recherche.

Un exemple

getByLabelText('Username') recherchera un élément <label> contenant la chaîne "Username", et retournera l'input associé. S'il n'en trouve aucun, ou plusieurs, il lèvera une erreur.

queryAllByRole('nav') recherchera de manière synchrone tous les éléments avec un attribut role="nav", et retournera un tableau de résultats (ou un tableau vide si aucun résultat n'est trouvé).

Pour plus d'informations, consultez Quelle requête utiliser ?.

Utilitaires asynchrones

• waitFor (Promise) réexécute la fonction jusqu'à ce qu'elle ne lève plus d'erreur ou que le délai d'attente soit dépassé.

• waitForElement (Promise) réexécute une fonction ou un tableau de fonctions et retourne le résultat.

• Les requêtes findBy et findAllBy sont asynchrones et réessayent jusqu'à un délai d'attente ou jusqu'au succès de la requête ; elles encapsulent waitForElement.

Pour plus d'informations, consultez API asynchrone de DOM Testing Library.

N'oubliez pas d'utiliser await ou .then() sur les résultats des fonctions asynchrones dans vos tests !

Déclenchement d'événements

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

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

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

Pour plus d'informations, voir API des événements

Différence avec DOM Testing Library

Les événements retournés par Vue Testing Library sont tous asynchrones, vous devez donc utiliser await ou then() sur le résultat.

VTL expose aussi fireEvent.update(node, value) pour gérer v-model. Voir l'API pour plus de détails.

Autres

• within(node) prend un nœud et retourne un objet avec toutes les requêtes liées à celui-ci : within(getByTestId("global-header")).getByText("hello").

• configure(config) modifie les options globales : configure({testIdAttribute: 'my-test-id'}).

Pour plus d'informations, consultez Requêtes dans des éléments et API de configuration.

Options de correspondance de texte

Étant donné le HTML suivant :

<div>Hello World</div>

Tous ces matchers trouveront l'élément :

// 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'))