Vue Academy · Leçon

Tester les interactions et événements utilisateur

wrapper.trigger('click'), setValue(), wrapper.vm.$emit() et flushPromises() asynchrone

Leçon 3 sur 413 étapes

Tester les interactions et événements utilisateur est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

Simuler le comportement de l'utilisateur

Au-delà du rendu, les tests doivent reproduire les actions de l'utilisateur : cliquer sur des boutons, saisir du texte dans des champs et envoyer des formulaires. Les enveloppes de @vue/test-utils fournissent des méthodes pour envoyer des événements DOM et mettre Vue à jour ensuite.

trigger pour les clics

wrapper.trigger("click") déclenche un clic sur l'élément. Comme cette action met à jour le DOM, elle renvoie une promesse : attendez-la avec await afin que les vérifications voient le résultat.

const button = wrapper.get("button")
await button.trigger("click")
expect(wrapper.text()).toContain("Clicked once")

Pourquoi les tests sont asynchrones

Vue met à jour le DOM de manière asynchrone. Après une interaction, le nouvel état n'est visible qu'au cycle suivant. Attendre la promesse de trigger permet au DOM de se stabiliser avant la vérification.

it("increments on click", async () => {
  const wrapper = mount(Counter)
  await wrapper.get("button").trigger("click")
  expect(wrapper.get(".count").text()).toBe("1")
})

setValue pour les champs

Pour saisir du texte dans un champ, utilisez wrapper.setValue(value) sur l'enveloppe du champ. Cette méthode définit la valeur et déclenche un événement input afin que v-model soit mis à jour.

const input = wrapper.get("input")
await input.setValue("hello@example.com")
expect(input.element.value).toBe("hello@example.com")

Cases à cocher et listes de sélection

setValue s'adapte à l'élément : transmettez une valeur booléenne pour une case à cocher et la valeur de l'option pour une liste de sélection.

await wrapper.get("input[type=checkbox]").setValue(true)
await wrapper.get("select").setValue("tr")

Vérifier les événements émis

Les composants communiquent vers leurs parents au moyen d'événements émis. wrapper.emitted() renvoie un relevé de tous les événements émis par le composant, regroupés par nom.

await wrapper.get("button").trigger("click")
expect(wrapper.emitted()).toHaveProperty("submit")

Examiner les données des événements émis

wrapper.emitted("name") renvoie un tableau de tableaux contenant les arguments de chaque émission. Le premier argument de la première émission est emitted("name")[0][0].

await wrapper.get("button").trigger("click")
const events = wrapper.emitted("submit")
expect(events).toHaveLength(1)
expect(events[0][0]).toEqual({ email: "a@b.com" })

Tester l'envoi d'un formulaire

Assemblez les différentes étapes : remplissez un champ, envoyez le formulaire, puis vérifiez les données émises.

it("emits submit with the email", async () => {
  const wrapper = mount(LoginForm)
  await wrapper.get("input").setValue("a@b.com")
  await wrapper.get("form").trigger("submit.prevent")
  expect(wrapper.emitted("submit")[0][0]).toEqual({ email: "a@b.com" })
})

Opérations asynchrones dans les composants

De nombreux gestionnaires appellent des interfaces de programmation et mettent à jour l'état lorsque la promesse se résout. La microtâche n'est peut-être pas terminée au moment où votre vérification s'exécute : vous devez donc attendre.

async function load() {
  loading.value = true
  data.value = await fetchData()
  loading.value = false
}

flushPromises

flushPromises, fourni par les utilitaires de test, résout toutes les microtâches en attente, c'est-à-dire les fonctions de rappel then. Attendez-le après avoir déclenché une action asynchrone afin que les promesses résolues et les mises à jour du DOM qui en résultent soient appliquées.

import { flushPromises } from "@vue/test-utils"

await wrapper.get("button").trigger("click")
await flushPromises()
expect(wrapper.text()).toContain("Loaded")

Assembler des tests asynchrones

Le schéma est le suivant : monter, interagir, await flushPromises(), puis vérifier. Marquez la fonction de test avec async afin de pouvoir utiliser await partout.

it("shows results after fetch", async () => {
  const wrapper = mount(SearchBox)
  await wrapper.get("input").setValue("vue")
  await wrapper.get("form").trigger("submit.prevent")
  await flushPromises()
  expect(wrapper.findAll("li")).toHaveLength(2)
})

Vérification rapide

Vérifiez votre compréhension des tests d'interaction.

Réponds-y dans la leçon interactive

Récapitulatif

Vous avez appris à tester les interactions et les événements :

trigger("click") déclenche des événements ; attendez-le, car Vue effectue ses mises à jour de manière asynchrone.
setValue définit les valeurs des champs, cases à cocher et listes de sélection, et déclenche des événements input pour v-model.
wrapper.emitted() consigne les événements émis ; emitted("name")[0][0] lit les premières données émises.
Pour les gestionnaires asynchrones, utilisez await flushPromises() avant de vérifier le résultat.
Marquez les tests avec async pour pouvoir utiliser await.

Gratuit pour commencer

Apprends HTML avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 42
Leçons: 156

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Tester les interactions et événements utilisateur » est-elle gratuite ?

Oui — le texte complet de « Tester les interactions et événements utilisateur » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Tester les interactions et événements utilisateur » ?

wrapper.trigger('click'), setValue(), wrapper.vm.$emit() et flushPromises() asynchrone Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vue Academy ?

Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Tester les interactions et événements utilisateur » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?

Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Configurer Vitest pour les projets Vue
Monter et interroger des composants
Tester les interactions et événements utilisateur
Simuler les composables, stores et API

← Retour à Vue Academy