Konfigurieren Sie Vitest, MSW und Playwright in einem React-Projekt mit Vite und TS – Teil 3

Playwright ist ein Framework-unabhängiges End-to-End-Testtool (auch bekannt als E2E oder Integrationstest) für Web-Apps. Playwright verfügt über großartige Entwicklererfahrung und sorgt dafür, dass das Schreiben gut und die Prüfung auf Änderungsresistenz unkompliziert ist.

---

1. Installieren Sie Playwright

Um Playwright einzurichten, führen Sie den folgenden Befehl aus:

npm init playwright@latest

Sie werden durch einen Einrichtungsassistenten in Ihrem Terminal geführt. Wenn Sie mit der Aufforderung „Wo sollen Ihre End-to-End-Tests abgelegt werden?“ gefragt werden, können Sie sie auf src/tests setzen (wie in früheren Tutorials empfohlen).

Fügen Sie Skripte zu package.json hinzu

Fügen Sie in Ihrer package.json die folgenden zwei Skripte zum Ausführen von Playwright-Tests hinzu:

Dadurch können Sie die Tests sowohl in Entwicklungs- als auch in CI-Umgebungen ausführen.

Dramatikerkonfiguration

Die Datei playwright.config.ts sollte wie folgt konfiguriert sein:

Wichtige Änderungen in der Konfiguration:

• use.baseURL: Dies legt die Basis-URL Ihres Entwicklungsservers fest, sodass Sie sie nicht in jedem Test schreiben müssen.
• webServer: Dieser Block beschreibt, wie Sie Ihren Entwicklungsserver starten. Es wird einen bereits laufenden Server wiederverwenden, es sei denn, Sie befinden sich in einer CI-Umgebung.
• testDir: Das Verzeichnis, in dem Playwright nach Ihren E2E-Tests suchen soll (in diesem Fall src/tests/e2e).

2. Konfigurieren Sie MSW für Browsertests

Bisher wurde MSW zum Verspotten von API-Antworten in einer Node.js-Umgebung eingerichtet. Da Playwright jedoch zum Testen einen echten Browser verwendet, müssen Sie MSW so konfigurieren, dass es in der Browserumgebung funktioniert.

Erstellen Sie ein neues JavaScript-Modul, das den MSW-Servicemitarbeiter für browserbasierte Tests registriert:

3. Registrieren Sie den Worker im Entwicklungsmodus

Um den MSW-Worker zu starten, wenn die App im Entwicklungsmodus ausgeführt wird, fügen Sie Folgendes zum Stammmodul Ihrer App hinzu (z. B. src/main.tsx):

Stellen Sie sicher, dass Sie die Umgebungsvariable VITE_API_MOCK in Ihrer .env-Datei festlegen:

VITE_API_MOCK="true"

4. Schreiben Sie einen E2E-Test

Jetzt können Sie einen E2E-Test für einen Flow in Ihrer App schreiben. Hier ist ein Beispiel für einen Dramatiker-Test:

5. Ausführen des Tests

Um den E2E-Test auszuführen, verwenden Sie den folgenden Befehl:

npm run test:e2e:ci

Dadurch wird der Test im CI-Modus ausgeführt, was für automatisierte Pipelines nützlich ist.

Das obige ist der detaillierte Inhalt vonKonfigurieren Sie Vitest, MSW und Playwright in einem React-Projekt mit Vite und TS – Teil 3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!