TWD Setup revolutioniert: Jetzt nur noch zwei Vite-Plugins – ohne Code im App-Einstieg

Die Einrichtung von TWD (Test-Workflow-Development) war bisher mit manuellem Code im Anwendungs-Einstiegsfile verbunden. Doch mit den jüngsten Updates der Pakete twd-js@1.8 und twd-relay@1.2 ändert sich das grundlegend: Statt eines Blocks mit dynamischen Importen, Glob-Pfaden und Service-Worker-Konfiguration reichen nun zwei Einträge in der Vite-Konfiguration aus – ohne eine Zeile Code in main.tsx.

Eine radikale Vereinfachung der Entwicklerumgebung

Das neue Setup nutzt zwei Vite-Plugins, die die gesamte Test- und Entwicklerlogik übernehmen. Die Konfiguration erfolgt ausschließlich in der Datei vite.config.ts, während die Hauptanwendung in main.tsx unberührt bleibt.

Hier ein Beispiel für die Konfiguration:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { twd } from "twd-js/vite-plugin";
import { twdRemote } from "twd-relay/vite";

export default defineConfig({
  plugins: [
    react(),
    twd({
      testFilePattern: "/**/*.twd.test.ts",
      open: false,
      position: "right",
      search: true,
    }),
    twdRemote(),
  ],
});

In dieser Konfiguration übernimmt das Plugin twd() die Verwaltung der Testdatei-Erkennung, der Sidebar-Position und der Suche. Das Plugin twdRemote() verbindet den Relay-Client mit dem Vite-Entwicklungsserver und fügt die notwendigen Skripte automatisch in die index.html ein. Beide Plugins werden nur im Entwicklungsmodus (apply: 'serve') aktiviert, sodass Produktionsbuilds unbeeinflusst bleiben.

Was bisher nötig war – und warum es problematisch war

Bislang sah die Einrichtung in main.tsx etwa so aus:

if (import.meta.env.DEV) {
  const { initTWD } = await import("twd-js/bundled");
  const tests = import.meta.glob("./**/*.twd.test.ts");
  initTWD(tests, {
    open: false,
    position: "right",
    serviceWorker: true,
    serviceWorkerUrl: "/mock-sw.js",
    search: true,
  });
  const { createBrowserClient } = await import("twd-relay/browser");
  const client = createBrowserClient({
    url: `${window.location.origin}/__twd/ws`,
  });
  client.connect();
}

Diese Lösung erforderte mehrere dynamische Importe, die Definition redundanter Pfade und die manuelle Synchronisation von Konfigurationen. Zudem belastete der Code den Einstiegspunkt der Anwendung, obwohl er ausschließlich für die Entwicklerumgebung relevant war. Mit der neuen Plugin-basierten Lösung entfällt diese Komplexität vollständig.

Drei Gründe, warum das Update sinnvoll ist

Erstens: Eine einzige Quelle der Wahrheit. Bisher mussten Entwickler sicherstellen, dass Pfade für Service-Worker, WebSocket-Verbindungen und Testdateien konsistent waren. Jetzt werden diese Einstellungen zentral in den Plugins verwaltet, sodass Inkonsistenzen ausgeschlossen sind.

Zweitens: Keine Blockierung des Anwendungsstarts. Der Einsatz von await import() für die Entwicklerumgebung verzögerte den Start der Anwendung, da React erst nach dem Laden der Testumgebung initialisiert werden konnte. Mit den Plugins entfällt dieser Schritt.

Drittens: Klare Trennung von Anwendung und Tooling. Entwickler, die neu zum Projekt hinzukommen, finden in main.tsx keine versteckten Entwicklerfeatures mehr. Die Konfiguration der Testumgebung ist nun dort platziert, wo sie hingehört: in der Build-Tool-Konfiguration.

Flexibilität für Nicht-Vite-Projekte

Nicht alle Projekte nutzen Vite als Build-Tool. Für solche Fälle bleiben die manuellen APIs weiterhin verfügbar. Entwickler können nach wie vor initTWD und createBrowserClient direkt verwenden. Zudem bietet das Plugin twdRemote die Option autoConnect: false, um die Verbindung manuell zu steuern.

Die neuen Versionen der Pakete sind kompatibel mit einer Vielzahl von Build-Tools wie Webpack, Angular CLI, Rollup, esbuild und Rspack. Wer bereits mit TWD arbeitet, kann die Migration schrittweise durchführen.

Fazit: Ein Meilenstein für die Testentwicklung

Mit der Integration von Vite-Plugins setzt TWD einen neuen Standard für die Integration von Test- und Entwicklerumgebungen. Die Vereinfachung des Setups reduziert nicht nur den Wartungsaufwand, sondern verbessert auch die Lesbarkeit und Konsistenz des Codes. Entwickler profitieren von einer klaren Trennung zwischen Anwendung und Tooling – und können sich auf das Wesentliche konzentrieren: die Erstellung robuster Software.