Vue Academy · Lezione

Test delle interazioni utente e degli eventi

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

Lezione 3 di 413 passaggi

Test delle interazioni utente e degli eventi è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 3 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.

Simulare il comportamento dell'utente

Oltre al rendering, i test dovrebbero riprodurre ciò che fa un utente: fare clic sui pulsanti, digitare negli input e inviare i moduli. I wrapper di @vue/test-utils espongono metodi per generare eventi DOM e aggiornare Vue di conseguenza.

trigger per gli eventi click

wrapper.trigger("click") genera un clic sull'elemento. Poiché aggiorna il DOM, restituisce una promise: la attenda affinché le asserzioni possano vedere il risultato.

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

Perché i test sono asincroni

Vue aggiorna il DOM in modo asincrono. Dopo un'interazione, il nuovo stato non è visibile fino al tick successivo. Attenda la promise restituita da trigger, così il DOM si stabilizzerà prima dell'asserzione.

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

setValue per gli input

Per digitare in un campo, utilizzi wrapper.setValue(value) sul wrapper dell'input. Imposta il valore e genera un evento input, così v-model viene aggiornato.

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

Checkbox e select

setValue si adatta all'elemento: passi un booleano per le checkbox e il valore dell'opzione per una select.

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

Verificare gli eventi emessi

I componenti comunicano verso l'alto tramite eventi emessi. wrapper.emitted() restituisce un record di tutti gli eventi emessi dal componente, indicizzati per nome.

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

Ispezionare i payload emessi

wrapper.emitted("name") restituisce un array di array di argomenti delle emissioni. Il primo argomento della prima emissione è 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" })

Un test dell'invio di un modulo

Combini i vari elementi: compili un campo, invii il modulo e poi verifichi il payload emesso.

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" })
})

Operazioni asincrone nei componenti

Molti gestori chiamano API e aggiornano lo stato quando la promise si risolve. Il microtask potrebbe non essere stato eseguito quando viene eseguita l'asserzione, quindi deve attendere.

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

flushPromises

flushPromises di Test Utils risolve tutti i microtask in sospeso (callback di then). Lo attenda dopo aver avviato un'azione asincrona, così le promise risolte e i conseguenti aggiornamenti del DOM vengono applicati.

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

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

Riunire i test asincroni

Il modello è: montare, interagire, await flushPromises() e verificare. Contrassegni la funzione di test come async, così potrà usare await ovunque.

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)
})

Verifica rapida

Verifichi la comprensione dei test delle interazioni.

Rispondi nella lezione interattiva

Riepilogo

Ha imparato a testare interazioni ed eventi:

trigger("click") genera eventi; lo attenda perché Vue aggiorna il DOM in modo asincrono.
setValue imposta i valori di input, checkbox e select e genera eventi input per v-model.
wrapper.emitted() registra gli eventi emessi; emitted("name")[0][0] legge il primo payload.
Per i gestori asincroni, esegua await flushPromises() prima dell'asserzione.
Contrassegni i test come async per poter usare await.

Gratis per iniziare

Impara HTML con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 42
Lezioni: 156

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Test delle interazioni utente e degli eventi» è gratuita?

Sì — il testo completo di «Test delle interazioni utente e degli eventi» è 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 «Test delle interazioni utente e degli eventi»?

wrapper.trigger('click'), setValue(), wrapper.vm.$emit(), flushPromises() asincrono. 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 3 di 4.

Quanto tempo richiede la lezione «Test delle interazioni utente e degli eventi»?

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

Configurazione di Vitest per i progetti Vue
Mount e interrogazione dei componenti
Test delle interazioni utente e degli eventi
Mock di composable, store e API

← Torna a Vue Academy