Heim >Web-Frontend >js-Tutorial >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.
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 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.
Die Datei playwright.config.ts sollte wie folgt konfiguriert sein:
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:
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"
Jetzt können Sie einen E2E-Test für einen Flow in Ihrer App schreiben. Hier ist ein Beispiel für einen Dramatiker-Test:
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!