Vue Academy · Leçon

Monter et interroger des composants

mount(), shallowMount(), wrapper.find(), wrapper.findAll(), getByText() et data-testid

Leçon 2 sur 413 étapes

Monter et interroger des composants est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 2 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.

Rendre des composants dans les tests

Pour tester un composant, vous devez le rendre dans le DOM de jsdom, puis examiner le résultat. @vue/test-utils fournit mount ainsi qu'un objet wrapper doté d'utilitaires de recherche.

Montage : rendu complet

mount rend réellement le composant ainsi que tous ses composants enfants. Utilisez-le lorsque le comportement dépend du rendu effectif des enfants.

import { mount } from "@vue/test-utils"
import Card from "./Card.vue"

const wrapper = mount(Card, {
  props: { title: "Hello" },
})

shallowMount : enfants simulés

shallowMount rend le composant, mais remplace ses composants enfants par des simulations légères. Cela isole l'unité testée des détails internes de ses enfants.

import { shallowMount } from "@vue/test-utils"
import Page from "./Page.vue"

const wrapper = shallowMount(Page)
// child components appear as <child-stub />

Montage complet ou superficiel

Choisissez selon votre objectif :

montage — style intégration ; vous vous intéressez au rendu des enfants.
shallowMount — style unitaire ; vous testez uniquement la logique et le modèle de ce composant.

Le montage superficiel est plus rapide et évite les échecs en cascade dus aux erreurs des composants enfants.

find : correspondance facultative

wrapper.find(selector) reçoit un sélecteur CSS et renvoie une enveloppe. Si aucun élément ne correspond, exists() du résultat vaut false au lieu de lever une erreur.

const title = wrapper.find("h1")
expect(title.exists()).toBe(true)
expect(title.text()).toBe("Hello")

get : correspondance obligatoire

wrapper.get(selector) fonctionne comme find, mais lève une erreur si l'élément est absent. Utilisez-le lorsque l'élément doit être présent : le message d'erreur est plus clair qu'un accès ultérieur à une valeur nulle.

const button = wrapper.get("button.submit")
// throws immediately with a helpful message if absent

Choisir entre find et get

Utilisez get pour les éléments qui doivent toujours exister, afin d'en vérifier le contenu. Utilisez find lorsque vous testez la présence ou l'absence d'un élément, par exemple une bannière d'erreur qui ne s'affiche que dans certains cas.

expect(wrapper.find(".error").exists()).toBe(false)

const label = wrapper.get("label")
expect(label.text()).toBe("Email")

findAll : plusieurs éléments

wrapper.findAll(selector) renvoie un tableau d'enveloppes pour chaque correspondance. C'est idéal pour vérifier la longueur d'une liste et parcourir ses lignes.

const items = wrapper.findAll("li")
expect(items).toHaveLength(3)
expect(items[0].text()).toBe("First")

Lire le texte avec text()

wrapper.text() renvoie le contenu textuel concaténé et nettoyé de l'élément et de ses enfants. C'est pratique pour vérifier le texte visible sans se soucier du balisage exact.

expect(wrapper.text()).toContain("3 results found")

Examiner le balisage avec html()

wrapper.html() renvoie la chaîne HTML rendue. C'est utile pour déboguer un test qui échoue ou vérifier les attributs et la structure.

console.log(wrapper.html())
// <div class="card"><h1>Hello</h1></div>
expect(wrapper.html()).toContain("class=\"card\"")

Rechercher des composants enfants

En plus des sélecteurs CSS, find et findComponent acceptent une référence de composant pour localiser une instance précise d'un composant enfant.

import { findComponent } from "@vue/test-utils"
import Avatar from "./Avatar.vue"

const avatar = wrapper.findComponent(Avatar)
expect(avatar.exists()).toBe(true)

Vérification rapide

Vérifiez votre compréhension des recherches avec les utilitaires de test.

Réponds-y dans la leçon interactive

Récapitulatif

Vous avez appris à rendre et à rechercher des composants :

mount rend réellement les enfants ; shallowMount les remplace par des simulations pour isoler le composant.
find renvoie une enveloppe qui peut être vide ; get lève une erreur lorsqu'un élément est absent.
findAll renvoie un tableau pour les listes.
text() lit le texte visible ; html() renvoie le balisage rendu.
findComponent localise un composant enfant précis.

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 « Monter et interroger des composants » est-elle gratuite ?

Oui — le texte complet de « Monter et interroger des composants » 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 « Monter et interroger des composants » ?

mount(), shallowMount(), wrapper.find(), wrapper.findAll(), getByText() et data-testid 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 2 sur 4.

Combien de temps prend la leçon « Monter et interroger des composants » ?

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