Testen
Testen hilft dir, funktionierenden Astro-Code zu schreiben und zu warten. Astro unterstützt viele beliebte Tools für Unit-Tests, Komponenten-Tests und End-to-End-Tests, darunter Jest, Mocha, Jasmine, Cypress und Playwright. Du kannst sogar Framework-spezifische Testbibliotheken wie React Testing Library installieren, um deine UI-Framework-Komponenten zu testen.
Test-Frameworks ermöglichen es dir, Aussagen oder Erwartungen über das Verhalten deines Codes in bestimmten Situationen zu formulieren und diese mit dem tatsächlichen Verhalten deines aktuellen Codes zu vergleichen.
Playwright
Abschnitt betitelt PlaywrightPlaywright ist ein End-to-End Test-Framework für moderne Web-Apps. Verwende die Playwright-API in JavaScript oder TypeScript, um deinen Astro-Code auf allen modernen Rendering-Engines, darunter Chromium, WebKit und Firefox, zu testen.
Installation
Abschnitt betitelt InstallationDu kannst mit der VS Code-Erweiterung beginnen und deine Tests ausführen.
Alternativ kannst du Playwright in deinem Astro-Projekt mit dem von dir gewählten Paketmanager installieren. Folge den CLI-Schritten, um JavaScript/TypeScript, den Namen deines Test-Ordners und einen optionalen GitHub Actions-Workflow auszuwählen.
npm init playwright@latestpnpm dlx create-playwrightyarn create playwrightErstelle deinen ersten Playwright-Test
Abschnitt betitelt Erstelle deinen ersten Playwright-Test- Wähle eine Seite zum Testen aus. Wir verwenden die unten stehende
index.astro-Seite als Beispiel.
------<html lang="de"> <head> <title>Astro ist fantastisch!</title> <meta name='description' content="Beziehe Inhalte von überall und stelle sie schnell mit Astros Insel-Architektur der nächsten Generation bereit." /> </head> <body></body></html>- Erstelle einen neuen Ordner und füge nachstehende Testdatei in
src/testhinzu. Kopiere und füge den nachfolgenden Test in deine Datei ein, um zu verifizieren, dass die Metainformationen der Seite korrekt sind. Aktualisiere den<title>-Wert entsprechend der Seite, die du testest.
test('Metadaten sind korrekt', async ({ page }) => { await page.goto("http://localhost:4321/");
await expect(page).toHaveTitle('Astro ist fantastisch!');});Deine Playwright-Tests ausführen
Abschnitt betitelt Deine Playwright-Tests ausführenDu kannst einen einzelnen oder mehrere Tests auf einmal ausführen und dabei einen oder mehrere Browser testen. Standardmäßig werden deine Testergebnisse im Terminal angezeigt. Optional kannst du den HTML-Test-Reporter öffnen, um einen vollständigen Bericht anzuzeigen und die Testergebnisse zu filtern.
- Um unseren Test aus dem vorherigen Beispiel mit der Kommandozeile auszuführen, nutze das
test-Kommando. Optional kannst du den Dateinamen angeben, um nur den einzelnen Test auszuführen.
npx playwright test index.spec.ts- Um den vollständigen HTML-Testbericht anzusehen, öffne ihn mit folgendem Befehl:
npx playwright show-reportFortgeschritten: Einen Entwicklungs-Webserver während deiner Tests starten
Abschnitt betitelt Fortgeschritten: Einen Entwicklungs-Webserver während deiner Tests startenDu kannst Playwright auch deinen Server starten lassen, wenn du dein Test-Skript mit der webServer-Option in der Playwright-Konfigurationsdatei ausführst.
Hier ist ein Beispiel der Konfiguration und Kommandos, wenn du Yarn verwendest:
-
Füge ein Test-Skript wie:
"test:e2e": "yarn playwright"in deinepackage.json-Datei im Projektstammverzeichnis ein. -
Füge in der
playwright.config.tsdaswebServer-Objekt hinzu und aktualisiere dencommand-Wert zuyarn preview.
import type { PlaywrightTestConfig } from '@playwright/test';const config: PlaywrightTestConfig = { webServer: { command: 'yarn preview', url: 'http://localhost:4321/app/', timeout: 120 * 1000, reuseExistingServer: !process.env.CI, }, use: { baseURL: 'http://localhost:4321/app/', },};export default config;- Führe
yarn buildund anschließendyarn test:e2eaus, um deine Playwright-Tests auszuführen.
Weiterführende Informationen über Playwright können mit den folgenden Links gefunden werden:
Learn