Testumgebung einrichten

Das Schreiben von Tests für Ihren jQuery-Code ist entscheidend für robuste und wartbare Webanwendungen. Es hilft, Fehler frühzeitig zu erkennen, und stellt sicher, dass sich Ihr Code wie erwartet verhält.

• Verhindert Regressionen: Stellt sicher, dass neue Änderungen vorhandene Funktionen nicht beeinträchtigen.
• Verbessert die Codequalität: Zwingt Sie dazu, modularen und testbaren Code zu schreiben.
• Erleichtert die Zusammenarbeit: Bietet eine klare Dokumentation darüber, wie Komponenten funktionieren sollen.

Zum Testen von JavaScript, einschließlich jQuery, benötigen Sie einen Test-Runner. Dieses Tool führt Ihre Tests aus und meldet die Ergebnisse.

Zwei beliebte Optionen sind:

• Jest: Ein modernes, funktionsreiches Test-Framework von Facebook, das häufig für React verwendet wird, sich aber für jedes JS-Projekt eignet.
• QUnit: Ein speziell für jQuery entwickeltes Test-Framework, das einfacher, aber weniger funktionsreich als Jest ist.

In dieser Lektion konzentrieren wir uns aufgrund seiner umfassenden Funktionen und großen Verbreitung auf das Einrichten von Jest.

Bevor Sie Jest installieren, benötigen Sie ein Node.js-Projekt. Falls Sie noch keines haben, können Sie es problemlos erstellen.

Wechseln Sie im Terminal in das Verzeichnis Ihres Projekts und führen Sie Folgendes aus:

Dieser Befehl erstellt eine package.json-Datei, in der die Abhängigkeiten und Skripte Ihres Projekts verwaltet werden.

Installieren wir nun Jest. Da jQuery häufig mit dem DOM (Document Object Model) des Browsers interagiert, benötigen wir außerdem jest-environment-jsdom. JSDOM stellt in Node.js eine browserähnliche Umgebung bereit, sodass Ihr jQuery-Code ein virtuelles DOM bearbeiten kann.

Installieren Sie beide Pakete als Entwicklungsabhängigkeiten:

Dadurch werden Jest und JSDOM zu Ihrer package.json hinzugefügt.

Damit Jest JSDOM verwendet, müssen Sie es konfigurieren. Dazu können Sie entweder ein test-Skript zu Ihrer package.json hinzufügen oder eine Datei jest.config.js erstellen.

Option 1: In package.json

{
  "name": "my-jquery-app",
  "version": "1.0.0",
  "scripts": {
    "test": "jest --env=jsdom"
  },
  "devDependencies": {
    "jest": "^29.x.x",
    "jest-environment-jsdom": "^29.x.x"
  }
}

Das Flag --env=jsdom stellt sicher, dass Jest die Tests in einer JSDOM-Umgebung ausführt.

Jest sucht nach Testdateien in einem Verzeichnis __tests__ oder nach Dateien, die mit .test.js (oder .spec.js) enden. Erstellen wir eine einfache Testdatei.

Erstellen Sie im Stammverzeichnis Ihres Projekts ein Verzeichnis namens __tests__ und fügen Sie anschließend eine Datei wie __tests__/my-feature.test.js hinzu:

// __tests__/my-feature.test.js

describe('My Feature', () => {
  test('should do something basic', () => {
    // Test logic will go here
  });
});

describe gruppiert zusammengehörige Tests, und test (oder it) definiert einen einzelnen Testfall.

Um jQuery-Code zu testen, müssen Sie jQuery selbst in Ihre Testdatei importieren. Sie können jQuery über npm installieren: npm install jquery.

Anschließend können Sie es in Ihrer Testdatei importieren:

// __tests__/my-feature.test.js
const $ = require('jquery');

describe('My jQuery Feature', () => {
  // Setup for each test
  beforeEach(() => {
    // Create a fresh DOM element for each test
    document.body.innerHTML = '
Hello
';
  });

  test('should add a class to the element', () => {
    const element = $('#test-element');
    element.addClass('highlight');
    expect(element.hasClass('highlight')).toBe(true);
  });
});

Assertions dienen dazu zu überprüfen, ob sich Ihr Code korrekt verhält. Jest verwendet die Funktion expect() zusammen mit Matchern, um Assertions zu formulieren.

Hier ist ein einfaches JavaScript-Beispiel (nicht spezifisch für jQuery, veranschaulicht aber Assertions):

Jest bietet eine umfangreiche Auswahl an Matchern. Hier sind einige häufig verwendete:

• .toBe(value): Prüft auf exakte Gleichheit (wie ===).
• .toEqual(value): Prüft Objekte oder Arrays auf tiefe Gleichheit.
• .not.toBe(value): Prüft auf Ungleichheit.
• .toBeTruthy() / .toBeFalsy(): Prüft, ob ein Wert als wahr oder falsch ausgewertet wird.
• .toContain(item): Prüft, ob ein Array oder String ein Element bzw. einen Teilstring enthält.

Bei jQuery kombinieren Sie diese häufig mit jQuery-Methoden, etwa expect($element.text()).toBe('Expected Text');

Sobald Ihre Testdateien eingerichtet sind, ist ihre Ausführung ganz einfach. Verwenden Sie dazu das in package.json definierte Skript:

Jest findet alle Ihre Testdateien, führt sie in der JSDOM-Umgebung aus und meldet die Ergebnisse in Ihrem Terminal. Dabei sehen Sie, welche Tests bestanden wurden, welche fehlgeschlagen sind, sowie Details zu den Fehlern.

Sie haben gelernt, wie Sie mit Jest und JSDOM eine Testumgebung für jQuery einrichten. Welche der folgenden Befehle und Konfigurationen sind für eine grundlegende Jest-Einrichtung mit DOM-Unterstützung erforderlich?

In dieser Lektion haben Sie gelernt, wie Sie mit Jest eine robuste Testumgebung für Ihre jQuery-Anwendungen einrichten.

• Wir haben ein Node.js-Projekt mit npm init initialisiert.
• Wir haben Jest und jest-environment-jsdom installiert, um eine Browserumgebung zu simulieren.
• Wir haben Jest in der package.json so konfiguriert, dass JSDOM verwendet wird.
• Sie haben gelernt, wie Testdateien strukturiert, jQuery importiert und mithilfe der Jest-Matcher grundlegende Assertions geschrieben werden.

Diese Grundlage ermöglicht es Ihnen, effektive Tests zu schreiben und dadurch sicherzustellen, dass Ihr jQuery-Code zuverlässig und wartbar ist.