Aller au contenu principal

API

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

Vue Testing Library réexporte tous les éléments de DOM Testing Library.

Elle expose également ces méthodes :

render(Component, options)​

La fonction render est la seule méthode de rendu des composants dans Vue Testing Library.

Elle prend jusqu'à 2 paramètres et retourne un objet contenant des méthodes utilitaires.

function render(Component, options) {
  return {
    ...DOMTestingLibraryQueries,
    container,
    baseElement,
    debug(element),
    unmount,
    html,
    emitted,
    rerender(props),
  }
}

Paramètres​

Component​

Le composant Vue valide à tester.

Options​

Un objet contenant des informations supplémentaires à passer à mount de @vue/test-utils.

De plus, les options suivantes peuvent être fournies :

store (Object | Store)​

La définition objet d'un store Vuex. Si un objet store est fourni, Vue Testing Library importera et configurera un store Vuex. Si un store Vuex instancié est passé, il sera utilisé.

routes (Array | VueRouter)​

Un ensemble de routes pour Vue Router. Si routes est fourni, la bibliothèque importera et configurera Vue Router. Si un Vue Router instancié est passé, il sera utilisé.

props (Object)​

Il sera fusionné avec propsData.

slots (Object)​

Utilisé pour fournir le contenu des slots lors du rendu du composant. Les clés correspondent aux noms des slots, et les valeurs peuvent être des chaînes de caractères, des extraits de template ou des composants, de manière similaire à la définition des slots dans Vue Test Utils.

Par exemple :

render(MyComponent, {
  slots: {
    default: 'Default',
    first: h('h1', {}, 'Named Slot'),
    second: Bar
  },
})
container (HTMLElement)​

Par défaut, Vue Testing Library crée un div et l'ajoute au baseElement. C'est ici que votre composant sera rendu. Si vous fournissez votre propre conteneur HTMLElement via cette option, il ne sera pas automatiquement ajouté au baseElement.

Par exemple : Si vous testez un élément tablebody, il ne peut pas être enfant d'un div. Dans ce cas, vous pouvez spécifier une table comme container de rendu.

const table = document.createElement('table')

const {container} = render(TableBody, {
  props,
  container: document.body.appendChild(table),
})
baseElement (HTMLElement)​

Si le container est spécifié, cela correspond par défaut à celui-ci, sinon à document.body. baseElement sert d'élément de base pour les requêtes et pour l'affichage lors de l'utilisation de debug().

Résultat de render​

La méthode render retourne un objet avec quelques propriétés :

...queries​

La caractéristique la plus importante de render est que les requêtes de DOM Testing Library sont automatiquement retournées avec leur premier argument lié au baseElement, qui correspond par défaut à document.body.

Voir Requêtes pour une liste complète.

const {getByLabelText, queryAllByTestId} = render(Component)

container​

Le nœud DOM contenant votre composant Vue rendu. Par défaut, il s'agit d'une div. C'est un nœud DOM standard, vous pouvez donc appeler container.querySelector etc. pour inspecter les éléments enfants.

Conseil : Pour obtenir l'élément racine de votre élément rendu, utilisez container.firstChild.

⚠️ Si vous vous surprenez à utiliser container pour interroger des éléments rendus, vous devriez reconsidérer votre approche ! Les autres requêtes sont conçues pour être plus résilientes aux modifications apportées au composant testé. Évitez d'utiliser container pour interroger des éléments !

baseElement​

Le nœud DOM contenant où votre composant Vue est rendu dans le container. Si vous ne spécifiez pas le baseElement dans les options de render, il sera par défaut document.body.

C'est utile lorsque le composant à tester rend des éléments en dehors du conteneur div (par exemple pour tester un composant de portail qui rend son HTML directement dans le body).

Note : les requêtes retournées par render examinent baseElement, vous pouvez donc utiliser les requêtes pour tester votre composant de portail sans spécifier baseElement.

debug(element)​

Méthode raccourcie pour console.log(prettyDOM(element)).

import {render} from '@testing-library/vue'

const HelloWorldComponent = {
  template: `<h1>Hello World</h1>`,
}

const {debug} = render(HelloWorldComponent)
debug()
// <div>
//   <h1>Hello World</h1>
// </div>

Simple encapsulation de prettyDOM (également exposée) provenant de DOM Testing Library.

unmount()​

Un alias pour unmount de @vue/test-utils.

html()​

Un alias pour html de @vue/test-utils.

emitted()​

Un alias pour emitted de @vue/test-utils.

rerender(props)​

Un alias pour setProps de @vue/test-utils.

Retourne une Promise pour permettre await rerender(...).

fireEvent​

Comme Vue applique les mises à jour DOM de manière asynchrone lors des rerender, les outils fireEvent sont réexportés comme fonctions async. Pour garantir la mise à jour correcte du DOM après un événement, il est recommandé de toujours utiliser await avec fireEvent.

await fireEvent.click(getByText('Click me'))

Deux méthodes supplémentaires sont exposées :

touch(elem)​

Déclenche les événements focus() et blur().

await fireEvent.touch(getByLabelText('username'))

// Same as:
await fireEvent.focus(getByLabelText('username'))
await fireEvent.blur(getByLabelText('username'))

update(elem, value)​

Gère correctement les inputs contrôlés par v-model. Met à jour la valeur interne des éléments input/select/textarea tout en émettant l'événement natif approprié.

Exemple d'utilisation de update dans le test d'exemple v-model.

cleanup​

Démonte les arbres Vue montés avec render.

Appelé automatiquement si votre framework de test (comme Mocha, Jest ou Jasmine) injecte une fonction globale afterEach(). Sinon, vous devez appeler cleanup() après chaque test.

Ne pas appeler cleanup après render peut causer des fuites mémoire et des tests non idempotents (entraînant des erreurs difficiles à déboguer).