Einführung in Test-Frameworks
Verschaffen Sie sich einen Überblick über die Vue-Testlandschaft und die verfügbaren Tools.
Einführung in Test-Frameworks ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.
Warum testen?
Automatisierte Tests erkennen Fehler, bevor Benutzer sie bemerken, dokumentieren, wie sich Ihr Code verhalten soll, und ermöglichen Ihnen ein sicheres Refactoring. Wenn eine Anwendung wächst, werden Tests unverzichtbar, um die Qualität ohne manuelle Überprüfungen zu erhalten.
Drei Testarten
Es gibt drei wichtige Teststufen: Unit-Tests prüfen kleine Teile isoliert, Integrations-Tests prüfen, ob mehrere Teile zusammenspielen, und End-to-End-Tests (e2e) bedienen die gesamte Anwendung wie ein echter Benutzer.
Unit-Tests
Ein Unit-Test überprüft eine einzelne Funktion oder Komponente isoliert, wobei Abhängigkeiten gemockt werden. Unit-Tests sind schnell und zeigen genau, was kaputtgegangen ist. Die meisten Ihrer Tests sollten Unit-Tests sein.
function add(a, b) {
return a + b
}
test("add sums two numbers", () => {
expect(add(2, 3)).toBe(5)
})Integrationstests
Integrationstests prüfen, ob mehrere Einheiten korrekt zusammenspielen, zum Beispiel eine Komponente mit ihrem Store oder ein Formular, das einen API-Wrapper aufruft. Sie erkennen Verbindungsprobleme, die reine Unit-Tests übersehen.
End-to-End-Tests
E2E-Tests starten einen echten Browser und klicken sich genau wie ein Benutzer durch Ihre Anwendung. Sie sind am realistischsten, aber auch am langsamsten und fragilsten, daher schreiben Sie weniger davon.
Die Testpyramide
Die Testpyramide empfiehlt viele schnelle Unit-Tests an der Basis, weniger Integrationstests in der Mitte und eine kleine Anzahl von E2E-Tests an der Spitze. So werden Vertrauen in die Software und Geschwindigkeit ausgewogen.
Vitest
Vitest ist ein schneller, moderner Test-Runner für Vite-basierte Projekte. Er verfügt über eine mit Jest kompatible API und funktioniert nahtlos mit Vue-3-Anwendungen, die mit Vite erstellt wurden.
npm install -D vitestJest
Jest ist ein etablierter Test-Runner, der im JavaScript-Ökosystem weit verbreitet ist. Vitest bildet seine API nach (describe, test, expect), sodass sich Wissen zwischen beiden übertragen lässt.
describe("math", () => {
test("adds", () => {
expect(1 + 1).toBe(2)
})
})Vue Test Utils
Vue Test Utils ist die offizielle Bibliothek zum Testen von Vue-Komponenten. Sie mountet eine Komponente in einer Testumgebung, sodass Sie mit ihr interagieren und ihre Ausgabe überprüfen können.
npm install -D @vue/test-utilsCypress und Playwright
Für E2E-Tests sind Cypress und Playwright beliebte Optionen. Sie automatisieren einen echten Browser, sodass Sie Klicks, Eingaben und Navigationen als Skript festlegen und anschließend überprüfen können, was der Benutzer sieht.
Den Tech-Stack auswählen
Ein typisches Vue-3-Setup verwendet Vitest zusammen mit Vue Test Utils für Unit- und Komponententests sowie Cypress oder Playwright für E2E-Tests. Diese Kombination deckt die gesamte Testpyramide mit modernen, gut unterstützten Werkzeugen ab.
Kurztest
Testen Sie Ihr Wissen über Test-Frameworks.
Zusammenfassung
Tests gibt es auf drei Ebenen: Unit-, Integrations- und E2E-Tests, ausgewogen durch die Testpyramide (viele Unit-Tests, wenige E2E-Tests). Ein moderner Vue-Stack verwendet Vitest oder Jest zusammen mit Vue Test Utils für Unit-Tests sowie Cypress oder Playwright für E2E-Tests. Als Nächstes schreiben Sie echte Unit-Tests mit Vue Test Utils.
Häufig gestellte Fragen
Ist die Lektion „Einführung in Test-Frameworks“ kostenlos?
Ja — der vollständige Text von „Einführung in Test-Frameworks“ 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 „Einführung in Test-Frameworks“?
Verschaffen Sie sich einen Überblick über die Vue-Testlandschaft und die verfügbaren Tools. 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 1 von 3.
Wie lange dauert die Lektion „Einführung in Test-Frameworks“?
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