Aller au contenu
Astro Astro

Test

Le test vous aide à écrire et à maintenir fonctionnel du code Astro. Astro supporte une variété d’outils populaires pour les tests unitaires, tests des Composants, et test de bout en bout tel que Jest, Mocha, Jasmine, Cypress et Playwright. Vous pouvez même installer des librairies de test spécifique au framework de votre choix, par exemple, React Testing Library pour tester les Composants UI de vos frameworks.

Tester vos frameworks vous permet de déclarer des assertions ou des attentes sur le comportement de votre code dans un cas spécifique et de les comparer vis-à-vis du comportement actuel de votre code.

Vittest

C’est un framework de test unitaires pour Vite qui supporte ESM, TypeScript et JSX via esbuild.

Veuillez voir Astro + Vitest starter template sur GitHub.

Playwright

Playwright est un framework de test de bout en bout pour des applications webs modernes. Utilisez les API de Playwright en JavaScript ou TypeScript pour tester votre code Astro sur tous les moteurs de rendu tel que Chromium, WebKit et Firefox.

Installation

Vous pouvez commencer par exécuter vos tests en utilisant l’extension VS Code

Alternativement, vous pouvez aussi installer Playwright dans votre projet Astro via votre gestionnaire de packages préféré. Suivez les instructions CLI pour choisir entre JavaScript et TypeScript, nommer votre dossier, et optionellement ajoutez un workflow falcutatifs de GitHub Actions.

Terminal window
npm init playwright@latest

Créer votre premier test Playwright

  1. Choisissez une page à tester. Dans l’exemple ci-dessous, on utilisera la page index.astro.
src/pages/index.astro
---
---
<html lang="en">
  <head>
    <title>Astro is awesome!</title>
    <meta name="description" content="Pull content from anywhere and serve it fast with Astro's next-gen island architecture." />
  </head>
  <body></body>
</html>
  1. Créez un nouveau dossier et ajoutez le fichier suivant src/test. Copiez le test suivant dans le fichier pour verifier que la méta de la page soit correcte. Changez le contenu <title> de la page pour correspondre avec la page à tester.
src/test/index.spec.ts
import { test, expect } from '@playwright/test';


test('meta is correct', async ({ page }) => {
  await page.goto("http://localhost:4321/");


  await expect(page).toHaveTitle('Astro is awesome!');
});

Exécuter vos tests Playwright

Vous pouvez exécuter un ou plusieurs tests à la fois sur un ou plusieurs navigateurs. Par défaut, les resultats de vos tests seront montrés sur votre terminal. Si vous voulez le bilan complet et filtrer les resultats, ouvrez le HTML Test Reporter.

  1. Pour exécuter nos tests sur l’exemple précedant par commande de ligne, utilisez la commande test. Incluez le nom du fichier à tester si vous voulez exécuter un test singulier:
Terminal window
npx playwright test index.spec.ts
  1. Pour voir le bilan HTML complet, tapez la commande suivante:
Terminal window
npx playwright show-report

Avancé: Lancer un serveur de dévelopment pendant les tests

Quand vous exécutez vos scripts de test, vous pouvez aussi avoir Playwright lancer votre serveur en utilisant l’option webServer dans le fichier de configuration Playwright.

Voici un exemple des configurations et commandes via Yarn:

  1. Ajoutez un script de test à votre fichier package.json dans la racine du projet, tel que "test:e2e:" "playwright test".

  2. Dans playwright.config.ts, ajoutez l’objet webServer et changez la valeur de command en yarn preview.

playwright.config.ts
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;
  1. Exécutez yarn build, ensuite exécutez yarn test:e2e pour lancer les tests Playwright.

Pour plus d’information, veuillez voir les liens ci-dessous: