0Pricing
Vue Academy · Lektion

Benutzerinteraktionen und Ereignisse testen

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

Benutzerinteraktionen und Ereignisse testen ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Benutzerverhalten simulieren

Neben dem Rendern sollten Tests auch nachahmen, was Benutzerinnen und Benutzer tun: auf Schaltflächen klicken, Text in Eingabefelder eingeben und Formulare absenden. Wrapper von @vue/test-utils stellen Methoden bereit, die DOM-Ereignisse auslösen und Vue anschließend aktualisieren.

trigger für Klickereignisse

wrapper.trigger("click") löst einen Klick auf dem Element aus. Da dadurch das DOM aktualisiert wird, gibt die Methode ein Promise zurück – warten Sie mit await darauf, damit die Assertions das Ergebnis sehen.

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

Warum Tests asynchron sind

Vue aktualisiert das DOM asynchron. Nach einer Interaktion ist der neue Zustand erst im nächsten Tick sichtbar. Wenn Sie auf das Promise von trigger warten, kann sich das DOM aktualisieren, bevor Sie Ihre Assertion ausführen.

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

setValue für Eingabefelder

Um Text in ein Feld einzugeben, verwenden Sie wrapper.setValue(value) auf dem Input-Wrapper. Die Methode setzt den Wert und löst ein input-Ereignis aus, sodass v-model aktualisiert wird.

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

Checkboxen und Selects

setValue passt sich an das Element an: Übergeben Sie bei Checkboxen einen booleschen Wert und bei einem Select den Wert der Option.

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

Ausgelöste Ereignisse überprüfen

Komponenten kommunizieren über ausgelöste Ereignisse nach oben. wrapper.emitted() gibt eine Aufzeichnung aller von der Komponente ausgelösten Ereignisse zurück, sortiert nach Namen.

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

Payloads ausgelöster Ereignisse untersuchen

wrapper.emitted("name") gibt ein Array mit Arrays der Argumente jeder Auslösung zurück. Das erste Argument der ersten Auslösung ist 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" })

Ein Test für das Absenden eines Formulars

Fügen Sie die einzelnen Schritte zusammen: Füllen Sie ein Feld aus, senden Sie das Formular ab und überprüfen Sie anschließend das ausgelöste Payload.

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

Asynchrone Operationen in Komponenten

Viele Handler rufen APIs auf und aktualisieren den Zustand, sobald das Promise aufgelöst wird. Der Microtask wurde möglicherweise noch nicht ausgeführt, wenn Ihre Assertion läuft, daher müssen Sie warten.

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

flushPromises

flushPromises aus den Test Utils löst alle ausstehenden Microtasks (then-Callbacks) auf. Warten Sie nach dem Auslösen einer asynchronen Aktion darauf, damit aufgelöste Promises und die daraus resultierenden DOM-Aktualisierungen angewendet werden.

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

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

Asynchrone Tests zusammenfügen

Das Muster lautet: mounten, interagieren, await flushPromises() und überprüfen. Markieren Sie die Testfunktion mit async, damit Sie durchgehend await verwenden können.

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

Schnelltest

Überprüfen Sie Ihr Verständnis des Testens von Interaktionen.

Zusammenfassung

Sie haben gelernt, wie Sie Interaktionen und Ereignisse testen:

  • trigger("click") löst Ereignisse aus; warten Sie darauf, da Vue Aktualisierungen asynchron durchführt.
  • setValue setzt die Werte von Eingabefeldern, Checkboxen und Selects und löst für v-model Input-Ereignisse aus.
  • wrapper.emitted() zeichnet ausgelöste Ereignisse auf; emitted("name")[0][0] liest das erste Payload.
  • Warten Sie bei asynchronen Handlern mit await flushPromises(), bevor Sie eine Assertion ausführen.
  • Markieren Sie Tests mit async, um await verwenden zu können.

Häufig gestellte Fragen

Ist die Lektion „Benutzerinteraktionen und Ereignisse testen“ kostenlos?

Ja — der vollständige Text von „Benutzerinteraktionen und Ereignisse testen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Benutzerinteraktionen und Ereignisse testen“?

wrapper.trigger('click'), setValue(), wrapper.vm.$emit() und asynchrones flushPromises() Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Benutzerinteraktionen und Ereignisse testen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Vitest-Einrichtung für Vue-Projekte
  2. Komponenten mounten und abfragen
  3. Benutzerinteraktionen und Ereignisse testen
  4. Composables, Stores und APIs mocken
← Zurück zu Vue Academy