0Pricing
Vue Academy · Lektion

Komponenten mounten und abfragen

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

Komponenten mounten und abfragen ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.

Komponenten in Tests rendern

Um eine Komponente zu testen, müssen Sie sie in das jsdom-DOM rendern und anschließend das Ergebnis untersuchen. @vue/test-utils stellt Ihnen mount sowie ein wrapper-Objekt mit Abfrage-Hilfsfunktionen bereit.

mount: Vollständiges Rendern

mount rendert die Komponente und alle untergeordneten Komponenten tatsächlich. Verwenden Sie es, wenn das Verhalten davon abhängt, dass untergeordnete Komponenten eine echte Ausgabe rendern.

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

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

shallowMount: Untergeordnete Komponenten stubben

shallowMount rendert die Komponente, ersetzt untergeordnete Komponenten jedoch durch leichtgewichtige Stubs. Dadurch wird die zu testende Einheit von der internen Implementierung ihrer untergeordneten Komponenten isoliert.

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

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

mount oder shallowMount

Wählen Sie je nach Ziel:

  • mount – im Stil eines Integrationstests; Sie möchten überprüfen, wie untergeordnete Komponenten rendern.
  • shallowMount – im Stil eines Unit-Tests; Sie testen nur die Logik und das Template dieser Komponente.

Shallow Mounting ist schneller und verhindert kaskadierende Fehler durch Fehler in untergeordneten Komponenten.

find: Optionale Übereinstimmung

wrapper.find(selector) nimmt einen CSS-Selektor entgegen und gibt einen Wrapper zurück. Wenn nichts übereinstimmt, ist exists() des Ergebnisses false, anstatt einen Fehler auszulösen.

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

get: Erforderliche Übereinstimmung

wrapper.get(selector) funktioniert ähnlich wie find, löst aber einen Fehler aus, wenn das Element fehlt. Verwenden Sie es, wenn das Element vorhanden sein muss – die Fehlermeldung ist aussagekräftiger als ein späterer Zugriff auf null.

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

find oder get auswählen

Verwenden Sie get für Elemente, die immer vorhanden sein sollten, etwa um ihren Inhalt zu überprüfen. Verwenden Sie find, wenn Sie das Vorhandensein oder Fehlen testen, zum Beispiel bei einem Fehlerbanner, das nur manchmal gerendert wird.

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

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

findAll: Mehrere Elemente

wrapper.findAll(selector) gibt ein Array mit Wrappers für jede Übereinstimmung zurück. Das eignet sich hervorragend, um die Länge von Listen zu überprüfen und Zeilen zu durchlaufen.

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

Text mit text() lesen

wrapper.text() gibt den bereinigten, zusammengefügten Textinhalt des Elements und seiner untergeordneten Elemente zurück. Damit können Sie sichtbaren Text überprüfen, ohne sich um das genaue Markup kümmern zu müssen.

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

Markup mit html() untersuchen

wrapper.html() gibt den gerenderten HTML-String zurück. Das ist nützlich, um einen fehlgeschlagenen Test zu debuggen oder Attribute und Struktur zu überprüfen.

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

Untergeordnete Komponenten finden

Neben CSS-Selektoren akzeptieren find und findComponent auch eine Komponentenreferenz, um eine bestimmte Instanz einer untergeordneten Komponente zu finden.

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

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

Schnelltest

Überprüfen Sie Ihr Verständnis von Abfragen mit Test Utils.

Zusammenfassung

Sie haben gelernt, wie Sie Komponenten rendern und abfragen:

  • mount rendert untergeordnete Komponenten tatsächlich; shallowMount ersetzt sie durch Stubs, um eine Isolation zu erreichen.
  • find gibt einen möglicherweise leeren Wrapper zurück; get löst einen Fehler aus, wenn das Element fehlt.
  • findAll gibt für Listen ein Array zurück.
  • text() liest sichtbaren Text; html() gibt das gerenderte Markup zurück.
  • findComponent findet eine bestimmte untergeordnete Komponente.

Häufig gestellte Fragen

Ist die Lektion „Komponenten mounten und abfragen“ kostenlos?

Ja — der vollständige Text von „Komponenten mounten und abfragen“ 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 „Komponenten mounten und abfragen“?

mount(), shallowMount(), wrapper.find(), wrapper.findAll(), getByText() und data-testid 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 4.

Wie lange dauert die Lektion „Komponenten mounten und abfragen“?

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