Vue Academy · Lezione

Unit test con Vue Test Utils

Scriva unit test per i componenti con Vue Test Utils.

Unit test con Vue Test Utils è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 2 di 3. 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 3 lezioni in totale.

Testare i componenti

Vue Test Utils consente di eseguire il rendering di un componente in un test, ispezionarne l'output e simulare l'interazione dell'utente. In seguito può verificare che il componente si comporti come previsto.

mount

La funzione mount esegue il rendering completo di un componente, inclusi tutti i componenti figlio. Restituisce un oggetto wrapper con funzioni di supporto per interrogare e gestire l'output renderizzato.

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

const wrapper = mount(Counter)

shallowMount

shallowMount esegue il rendering del componente, ma sostituisce i componenti figlio con degli stub. In questo modo il componente sottoposto al test viene isolato dai propri figli, caratteristica ideale per veri test di unità.

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

const wrapper = shallowMount(ParentComponent)
// child components are stubbed out

mount e shallowMount

Utilizzi mount quando desidera testare un componente insieme ai suoi figli e shallowMount quando desidera isolare solo quel componente. Il mounting superficiale mantiene i test focalizzati e veloci.

Individuare gli elementi

Utilizzi wrapper.find con un selettore CSS per individuare un elemento. find restituisce un wrapper per quell'elemento, che può ispezionare o utilizzare per interagire con esso.

const button = wrapper.find("button")
const title = wrapper.find(".title")

Verificare l'output renderizzato

Controlli il testo o l'HTML renderizzato per verificare che il componente mostri ciò che si aspetta.

test("renders the message", () => {
  const wrapper = mount(Greeting, {
    props: { name: "Sam" }
  })
  expect(wrapper.text()).toContain("Hello, Sam")
})

Testare le props

Passi le props attraverso le opzioni di mount e verifichi che il componente le renderizzi correttamente. In questo modo controlla che il componente reagisca ai propri input.

const wrapper = mount(UserCard, {
  props: { user: { name: "Lin", role: "Admin" } }
})
expect(wrapper.text()).toContain("Lin")
expect(wrapper.text()).toContain("Admin")

Attivare gli eventi

Simuli le azioni dell'utente con trigger. La funzione restituisce una promise, quindi la attenda per consentire a Vue di aggiornare il DOM prima di eseguire le verifiche.

test("increments on click", async () => {
  const wrapper = mount(Counter)
  await wrapper.find("button").trigger("click")
  expect(wrapper.text()).toContain("1")
})

Impostare i valori degli input

Utilizzi setValue su un wrapper di input per simulare la digitazione, quindi verifichi il comportamento risultante.

const input = wrapper.find("input")
await input.setValue("hello@example.com")
expect(wrapper.vm.email).toBe("hello@example.com")

Testare gli eventi emessi

Quando un componente emette un evento, wrapper.emitted lo registra. Verifichi che sia stato emesso l'evento corretto con il payload corretto.

test("emits submit with form data", async () => {
  const wrapper = mount(LoginForm)
  await wrapper.find("form").trigger("submit")
  expect(wrapper.emitted("submit")).toBeTruthy()
  expect(wrapper.emitted("submit")[0]).toEqual([{ user: "" }])
})

Comporre un test

Un test completo di un componente monta il componente, interagisce con esso e verifica l'output o gli eventi emessi.

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

test("adds a todo", async () => {
  const wrapper = mount(TodoInput)
  await wrapper.find("input").setValue("Buy milk")
  await wrapper.find("button").trigger("click")
  expect(wrapper.emitted("add")[0]).toEqual(["Buy milk"])
})

Verifica rapida

Verifichi la Sua conoscenza di Vue Test Utils.

Riepilogo

Vue Test Utils esegue il rendering dei componenti con mount (albero completo) o shallowMount (figli sostituiti da stub). Interroghi il DOM con find, simuli le azioni con trigger e setValue (attendendone il completamento) e verifichi text() o emitted(). Passi le props tramite le opzioni di mount. Ora testerà l'intera applicazione end-to-end.

Domande Frequenti

La lezione «Unit test con Vue Test Utils» è gratuita?

Sì — il testo completo di «Unit test con Vue Test Utils» è 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 3 lezioni in totale.

Cosa imparerò in «Unit test con Vue Test Utils»?

Scriva unit test per i componenti con Vue Test Utils. 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 3.

Quanto tempo richiede la lezione «Unit test con Vue Test Utils»?

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

← Torna a Vue Academy