JavaScript-Testen: Wo Anfänger im Jahr 2024 beginnen

Warum JavaScript-Testen nicht beängstigend, sondern nützlich ist?

Als ich anfing, in JavaScript zu programmieren, dachte ich, Testen sei etwas aus der Kategorie der höheren Magie. "Warum? Ich sehe doch, dass der Code funktioniert!" – dachte ich. Und dann kam der Montag, ich fügte eine kleine Funktion hinzu, und alles ging kaputt. Kommt Ihnen das bekannt vor?

JavaScript-Testen ist wie eine Versicherung für Ihren Code. Sie schreiben ihn einmal, aber überprüfen seine Funktionsweise hunderte Male automatisch. Und glauben Sie mir, wenn Ihr Projekt auf 10.000 Codezeilen anwächst, werden Sie demjenigen danken, der Sie gezwungen hat, den ersten Test zu schreiben.

In diesem Artikel erkläre ich, wo ein Anfänger mit dem JavaScript-Testen beginnen sollte, zeige reale Beispiele und gebe fertige Vorlagen. Sie werden überrascht sein, aber die ersten Tests können Sie bereits in 15 Minuten schreiben.

Testarten: Was ein Anfänger wissen muss

Bevor wir Code schreiben, lassen Sie uns die Theorie klären. Es gibt insgesamt drei Hauptebenen des Testens, aber für den Start benötigen wir nur eine.

Unit-Tests

Dies sind Tests für die kleinsten Code-Stücke – Funktionen, Methoden, Klassen. Sie prüfen: "Funktioniert diese bestimmte Funktion so, wie ich es beabsichtigt habe?". JavaScript-Unit-Tests sind die Basis, mit der alle beginnen.

Integrationstests

Sie prüfen, wie verschiedene Teile des Systems miteinander harmonieren. Zum Beispiel, ob die Verkettung "Formular → Datensendung → Serverantwort" funktioniert.

E2E-Tests (Ende-zu-Ende)

Die komplexesten. Sie simulieren Aktionen eines echten Benutzers: Klicks, Ausfüllen von Formularen, Seitennavigation. Für einen Anfänger ist das bereits die nächste Stufe.

Für den Start reicht es aus, sich mit Unit-Tests vertraut zu machen. Alles andere kommt mit der Erfahrung.

Werkzeuge: Was soll ein Anfänger wählen?

Der Markt für JavaScript-Testwerkzeuge ist riesig. Aber ich hebe drei Kombinationen hervor, die Anfänger tatsächlich nutzen können:

• Jest – das beliebteste Framework. Funktioniert "out of the box", erfordert keine komplexe Einrichtung. Ideal für den Start.
• Mocha + Chai – der Klassiker. Mocha führt Tests aus, Chai bietet praktische Funktionen für Überprüfungen (Assertions).
• Vitest – modern und schnell, fast wie Jest, aber für Projekte mit Vite.

Ich empfehle, mit Jest zu beginnen. Es ist intuitiv verständlich, hat eine hervorragende Dokumentation und eine riesige Community. Wenn Sie Jest beherrschen, wird der Wechsel zu anderen Werkzeugen leicht fallen.

Den ersten Test schreiben: Schritt-für-Schritt-Anleitung

Lassen Sie uns echten Code schreiben. Angenommen, wir haben eine einfache Funktion, die zwei Zahlen addiert:

// math.jsfunction add(a, b) {  return a + b;}

module.exports = add;

Jetzt installieren wir Jest. Öffnen Sie das Terminal im Projektordner und führen Sie aus:

npm init -ynpm install --save-dev jest

Fügen Sie in der package.json ein Skript zum Ausführen der Tests hinzu:

"scripts": {  "test": "jest"}

Erstellen Sie eine Datei math.test.js im selben Ordner. Schreiben wir den Test:

// math.test.jsconst add = require('./math');

test('addiert 2 + 3 und erhält 5', () => {  expect(add(2, 3)).toBe(5);});

test('addiert negative Zahlen', () => {  expect(add(-1, -1)).toBe(-2);});

test('addiert Null', () => {  expect(add(0, 0)).toBe(0);});

Führen Sie die Tests mit dem Befehl npm test aus. Wenn alles richtig gemacht ist, sehen Sie grüne Häkchen. Herzlichen Glückwunsch, Sie haben gerade Ihren ersten JavaScript-Test geschrieben!

Wie testet man komplexere Funktionen?

Gut, Zahlen addieren haben wir gelernt. Aber was ist, wenn die Funktion mit Arrays oder Objekten arbeitet? Lassen Sie uns ein komplexeres Beispiel durchgehen.

Eine Funktion zum Filtern von Benutzern nach Alter:

// users.jsfunction filterAdults(users) {  return users.filter(user => user.age >= 18)