0Pricing
Vue Academy · Lezione

Mount e interrogazione dei componenti

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

Mount e interrogazione dei componenti è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Eseguire il rendering dei componenti nei test

Per testare un componente, deve eseguirne il rendering nel DOM jsdom e poi esaminare il risultato. @vue/test-utils fornisce mount e un oggetto wrapper con utility per le interrogazioni.

Rendering completo con mount

mount esegue il rendering del componente e di tutti i suoi componenti figli per davvero. Lo utilizzi quando il comportamento dipende dal rendering effettivo dei figli.

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

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

Stub dei componenti figli con shallowMount

shallowMount esegue il rendering del componente, ma sostituisce i componenti figli con stub leggeri. In questo modo l'unità sottoposta al test viene isolata dagli aspetti interni dei figli.

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

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

mount o shallowMount

Scelga in base all'obiettivo:

  • mount — in stile integrazione; interessa il rendering dei componenti figli.
  • shallowMount — in stile unitario; verifica soltanto la logica e il template di questo componente.

Il montaggio superficiale è più veloce ed evita errori a cascata causati da problemi nei componenti figli.

Corrispondenza facoltativa con find

wrapper.find(selector) accetta un selettore CSS e restituisce un wrapper. Se non trova corrispondenze, exists() del risultato è false invece di generare un'eccezione.

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

Corrispondenza obbligatoria con get

wrapper.get(selector) funziona come find, ma genera un'eccezione se l'elemento non è presente. Lo utilizzi quando l'elemento deve esistere: il messaggio di errore è più chiaro di un successivo accesso a null.

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

Scegliere find o get

Utilizzi get per gli elementi che devono esistere sempre, ad esempio per verificarne il contenuto. Utilizzi find quando sta testando la presenza o l'assenza di un elemento, come un banner di errore visualizzato solo in alcuni casi.

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

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

Più elementi con findAll

wrapper.findAll(selector) restituisce un array di wrapper per ogni corrispondenza. È perfetto per verificare la lunghezza delle liste e iterare sulle righe.

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

Leggere il testo con text()

wrapper.text() restituisce il contenuto testuale concatenato e senza spazi iniziali o finali dell'elemento e dei suoi figli. È utile per verificare il testo visibile senza preoccuparsi del markup esatto.

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

Ispezionare il markup con html()

wrapper.html() restituisce la stringa HTML renderizzata. È utile per eseguire il debug di un test non riuscito o per verificare attributi e struttura.

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

Trovare i componenti figli

Oltre ai selettori CSS, find e findComponent accettano un riferimento a un componente per individuare una specifica istanza del componente figlio.

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

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

Verifica rapida

Verifichi la comprensione delle interrogazioni con Test Utils.

Riepilogo

Ha imparato a eseguire il rendering e a interrogare i componenti:

  • mount esegue il rendering reale dei figli; shallowMount li sostituisce con stub per garantire l'isolamento.
  • find restituisce un wrapper che può essere vuoto; get genera un'eccezione se l'elemento non viene trovato.
  • findAll restituisce un array per le liste.
  • text() legge il testo visibile; html() restituisce il markup renderizzato.
  • findComponent individua uno specifico componente figlio.

Domande Frequenti

La lezione «Mount e interrogazione dei componenti» è gratuita?

Sì — il testo completo di «Mount e interrogazione dei componenti» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Mount e interrogazione dei componenti»?

mount(), shallowMount(), wrapper.find(), wrapper.findAll(), getByText(), data-testid. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Mount e interrogazione dei componenti»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Configurazione di Vitest per i progetti Vue
  2. Mount e interrogazione dei componenti
  3. Test delle interazioni utente e degli eventi
  4. Mock di composable, store e API
← Torna a Vue Academy