Tests mit Vitest
Tests sind dein Sicherheitsnetz: Sie sagen dir sofort, ob eine Änderung altes Verhalten kaputt gemacht hat.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
Warum testen?
Ein Test beschreibt eine Erwartung an das Verhalten deines Codes.
Er läuft automatisch und wiederholt sich bei jeder Änderung.
Teste öffentliches Verhalten, nicht interne Implementierung. Dann bleiben Tests gültig, auch wenn du die Funktion intern umschreibst.
// summe.test.js
import { summe } from "./summe.js";
test("summiert zwei Zahlen", () => {
expect(summe(2, 3)).toBe(5);
});Erster Test mit Vitest
Vitest findet Dateien wie *.test.js automatisch.
describe gruppiert Tests, it beschreibt einen Fall, expect formuliert die Prüfung.
Starte die Tests mit npx vitest oder dem Test-Skript deines Projekts. Ein roter Test zeigt genau, welche Erwartung nicht mehr stimmt.
import { describe, expect, it } from "vitest";
import { istGerade } from "./zahlen.js";
describe("istGerade", () => {
it("erkennt gerade Zahlen", () => {
expect(istGerade(4)).toBe(true);
});
it("erkennt ungerade Zahlen", () => {
expect(istGerade(5)).toBe(false);
});
});Grenzfälle und Mocks
Grenzfälle sind oft wichtiger als der Normalfall: leere Listen, null, sehr große Werte oder ein Fehlerpfad.
Mit vi.fn() erzeugst du eine Mock-Funktion. Für asynchrone Tests nutzt du await und prüfst das Ergebnis nach dem Promise.
import { expect, it, vi } from "vitest";
it("ruft den Callback einmal auf", () => {
const callback = vi.fn();
einmalAusfuehren(callback);
expect(callback).toHaveBeenCalledTimes(1);
});Vertiefung
Tests als Sicherheitsnetz
Ein Test beschreibt eine Erwartung an das Verhalten. Er läuft bei jeder Änderung erneut und zeigt sofort, ob etwas Altes kaputtgegangen ist.
Vitest findet Testdateien automatisch. Gute Tests prüfen öffentliches Verhalten, nicht interne Variablen. Grenzfälle wie leere Listen oder Fehlerpfade sind oft wichtiger als der Normalfall.
import { describe, expect, it } from "vitest";
import { durchschnitt } from "./noten.js";
describe("durchschnitt", () => {
it("berechnet den Mittelwert", () => {
expect(durchschnitt([1, 2, 3])).toBe(2);
});
it("lehnt eine leere Liste ab", () => {
expect(() => durchschnitt([])).toThrow();
});
});Merksatz: Ein Test ist eine ausführbare Erwartung. Prüfe Normalfall, Grenzfall und Fehlerfall.
Übungsaufgabe
Notenrechner testen
Schreibe drei Vitest-Tests für einen Notenrechner: Durchschnitt, Einzelwert und leere Liste.
Das soll dein Programm können
- Datei noten.test.js
- describe und it verwenden
- Durchschnitt prüfen
- Grenzfall mit einem Wert
- Fehlerfall mit leerer Liste
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
Für den Fehlerfall kannst du expect(() => durchschnitt([])).toThrow() nutzen.
Lösung anzeigen
import { describe, expect, it } from "vitest";
import { durchschnitt } from "./noten.js";
describe("durchschnitt", () => {
it("berechnet den Mittelwert", () => {
expect(durchschnitt([1, 2, 3])).toBe(2);
});
it("gibt einen Einzelwert zurück", () => {
expect(durchschnitt([4])).toBe(4);
});
it("wirft bei leerer Liste", () => {
expect(() => durchschnitt([])).toThrow();
});
});Warum funktioniert das?
Die drei Tests decken den Normalfall, einen Grenzfall und den Fehlerpfad ab. Damit ist die Funktion nicht nur für glückliche Eingaben abgesichert.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Sichere Datenkarte
Lade Daten mit fetch, zeige sie sicher mit textContent an und fange Fehler mit einem Fallback ab.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.