Unit-Tests mit Vue Test Utils
Schreiben Sie Unit-Tests für Komponenten mit Vue Test Utils.
Unit-Tests mit Vue Test Utils ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 3. 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 3 Lektionen.
Komponenten testen
Mit Vue Test Utils können Sie eine Komponente in einem Test rendern, ihre Ausgabe überprüfen und Benutzerinteraktionen simulieren. Anschließend prüfen Sie, ob sich die Komponente wie erwartet verhält.
mount
Die Funktion mount rendert eine Komponente vollständig, einschließlich aller untergeordneten Komponenten. Sie gibt ein wrapper-Objekt mit Hilfsfunktionen zurück, mit denen Sie die gerenderte Ausgabe abfragen und mit ihr interagieren können.
import { mount } from "@vue/test-utils"
import Counter from "./Counter.vue"
const wrapper = mount(Counter)shallowMount
shallowMount rendert die Komponente, ersetzt ihre untergeordneten Komponenten jedoch durch Stubs. Dadurch wird die getestete Komponente von ihren untergeordneten Komponenten isoliert, was ideal für echte Unit-Tests ist.
import { shallowMount } from "@vue/test-utils"
const wrapper = shallowMount(ParentComponent)
// child components are stubbed outmount vs. shallowMount
Verwenden Sie mount, wenn Sie eine Komponente zusammen mit ihren untergeordneten Komponenten testen möchten, und shallowMount, wenn Sie nur diese Komponente isolieren möchten. Flaches Mounten hält Tests fokussiert und schnell.
Elemente finden
Verwenden Sie wrapper.find mit einem CSS-Selektor, um ein Element zu finden. find gibt einen Wrapper für dieses Element zurück, den Sie überprüfen oder mit dem Sie interagieren können.
const button = wrapper.find("button")
const title = wrapper.find(".title")Gerenderte Ausgabe überprüfen
Überprüfen Sie den gerenderten Text oder das HTML, um sicherzustellen, dass die Komponente die erwarteten Inhalte anzeigt.
test("renders the message", () => {
const wrapper = mount(Greeting, {
props: { name: "Sam" }
})
expect(wrapper.text()).toContain("Hello, Sam")
})Props testen
Übergeben Sie Props über die Mount-Optionen und prüfen Sie, ob die Komponente sie korrekt rendert. So überprüfen Sie, ob die Komponente auf ihre Eingaben reagiert.
const wrapper = mount(UserCard, {
props: { user: { name: "Lin", role: "Admin" } }
})
expect(wrapper.text()).toContain("Lin")
expect(wrapper.text()).toContain("Admin")Ereignisse auslösen
Simulieren Sie Benutzeraktionen mit trigger. Die Funktion gibt ein Promise zurück. Warten Sie daher mit await darauf, damit Vue das DOM vor der Überprüfung aktualisieren kann.
test("increments on click", async () => {
const wrapper = mount(Counter)
await wrapper.find("button").trigger("click")
expect(wrapper.text()).toContain("1")
})Eingabewerte setzen
Verwenden Sie setValue für einen Input-Wrapper, um eine Eingabe zu simulieren, und überprüfen Sie anschließend das resultierende Verhalten.
const input = wrapper.find("input")
await input.setValue("hello@example.com")
expect(wrapper.vm.email).toBe("hello@example.com")Ausgelöste Ereignisse testen
Wenn eine Komponente ein Ereignis auslöst, zeichnet wrapper.emitted dieses auf. Prüfen Sie, ob das richtige Ereignis mit dem richtigen Payload ausgelöst wurde.
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: "" }])
})Einen Test zusammensetzen
Ein vollständiger Komponententest mountet die Komponente, interagiert mit ihr und überprüft die Ausgabe oder ausgelöste Ereignisse.
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"])
})Kurztest
Testen Sie Ihr Wissen über Vue Test Utils.
Zusammenfassung
Vue Test Utils rendert Komponenten mit mount (vollständiger Baum) oder shallowMount (untergeordnete Komponenten als Stubs). Fragen Sie Elemente mit find ab, simulieren Sie Aktionen mit trigger und setValue (und warten Sie jeweils darauf), und prüfen Sie text() oder emitted(). Übergeben Sie props über die Mount-Optionen. Als Nächstes testen Sie die gesamte Anwendung im End-to-End-Verfahren.
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 42
- Lektionen
- 156
Häufig gestellte Fragen
Ist die Lektion „Unit-Tests mit Vue Test Utils“ kostenlos?
Ja — der vollständige Text von „Unit-Tests mit Vue Test Utils“ 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 3 Lektionen.
Was lerne ich in „Unit-Tests mit Vue Test Utils“?
Schreiben Sie Unit-Tests für Komponenten mit Vue Test Utils. 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 2 von 3.
Wie lange dauert die Lektion „Unit-Tests mit Vue Test Utils“?
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
- Einführung in Test-Frameworks
- Unit-Tests mit Vue Test Utils
- End-to-End-Tests