Test

Les tests vous aident à écrire et à maintenir un code Astro fonctionnel. Astro prend en charge de nombreux outils populaires pour les tests unitaires, les tests de composants et les tests de bout en bout, notamment Jest, Mocha, Jasmine, Cypress et Playwright. Vous pouvez même installer des bibliothèques de test spécifiques au framework, telles que React Testing Library, pour tester les composants de votre framework d’interface utilisateur.

Les frameworks de test vous permettent d’énoncer des assertions ou des attentes sur la manière dont votre code devrait se comporter dans des situations spécifiques, puis de les comparer au comportement réel de votre code actuel.

Tests unitaires et d’intégration

Vitest

Un framework de test unitaire natif Vite avec support ESM, TypeScript et JSX propulsé par esbuild.

Utilisez l’aide Astro getViteConfig() dans votre fichier de configuration vitest.config.ts pour configurer Vitest avec les paramètres de votre projet Astro :

/// <reference types="vitest" />
import { getViteConfig } from 'astro/config';

export default getViteConfig({
  test: {
    // Options de configuration Vitest
  },
});

Par défaut, getViteConfig() essaiera de charger un fichier de configuration Astro dans votre projet et de l’appliquer à l’environnement de test. À partir d’Astro 4.8, si vous avez besoin de personnaliser la configuration Astro pour vos tests, passez un second argument à getViteConfig() :

export default getViteConfig(
  { test: { /* Options de configuration de Vitest */ } },
  {
    site: 'https://example.com/',
    trailingSlash: 'always',
  },
);

Voir le modèle de démarrage Astro + Vitest sur GitHub.

Vitest et l’API Conteneur

Ajouté à la version : astro@4.9.0

Vous pouvez tester nativement les composants Astro en utilisant l’API container. Tout d’abord, configurez vitest comme expliqué ci-dessus, puis créez un fichier .test.js pour tester votre composant :

import { experimental_AstroContainer as AstroContainer } from 'astro/container';
import { expect, test } from 'vitest';
import Card from '../src/components/Card.astro';

test('Card with slots', async () => {
  const container = await AstroContainer.create();
  const result = await container.renderToString(Card, {
    slots: {
      default: 'Contenu de la carte',
    },
  });

  expect(result).toContain('Ceci est une carte');
  expect(result).toContain('Contenu de la carte');
});

Tests de bout en bout

Playwright

Playwright est un outil de test de bout en bout pour les applications web modernes. Utilisez l’API Playwright en JavaScript ou TypeScript pour tester votre code Astro sur tous les moteurs de rendu modernes, notamment Chromium, WebKit et Firefox.

Installation

Vous pouvez démarrer et exécuter vos tests à l’aide de l’extension VS Code.

Vous pouvez également installer Playwright dans votre projet Astro à l’aide du gestionnaire de paquets de votre choix. Suivez les étapes CLI pour choisir JavaScript/TypeScript, nommer votre dossier de test et ajoutez un flux de travail GitHub Actions (facultatif).

npm init playwright@latest

pnpm dlx create-playwright

yarn create playwright

Créez votre premier test Playwright

Choisissez une page à tester. Cet exemple testera la page d’exemple index.astro ci-dessous.

---
---
<html lang="en">
  <head>
    <title>Astro est génial !</title>
    <meta name="description" content="Tirez du contenu de n'importe où et diffusez-le rapidement grâce à l'architecture d'îles de nouvelle génération d'Astro." />
  </head>
  <body></body>
</html>

Créez un nouveau dossier et ajoutez le fichier de test suivant dans src/test. Copiez et collez le test suivant dans le fichier pour vérifier que les méta-informations de la page sont correctes. Mettez à jour la valeur de la page <title> pour qu’elle corresponde à la page que vous testez.
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 est génial !');
});
```
Vous pouvez définir "baseURL": "http://localhost:4321" dans le fichier de configuration playwright.config.ts pour utiliser page.goto("/") au lieu de page.goto("http://localhost:4321/") pour une URL plus pratique.

Exécution des tests Playwright

Vous pouvez exécuter un seul test ou plusieurs tests à la fois, en testant un ou plusieurs navigateurs. Par défaut, les résultats de vos tests s’affichent dans le terminal. En option, vous pouvez ouvrir le rapporteur de test HTML pour afficher un rapport complet et filtrer les résultats des tests.

Pour exécuter le test de l’exemple précédent en ligne de commande, utilisez la commande test. Si vous le souhaitez, vous pouvez inclure le nom du fichier pour n’exécuter qu’un seul test :
Fenêtre de terminal
```
npx playwright test index.spec.ts
```
Pour voir le rapport de test HTML complet, ouvrez-le à l’aide de la commande suivante :
Fenêtre de terminal
```
npx playwright show-report
```

Avancé : Lancement d’un serveur web de développement pendant les tests

Vous pouvez également demander à Playwright de démarrer votre serveur lorsque vous exécutez votre script de test en utilisant l’option webServer dans le fichier de configuration de Playwright.

Voici un exemple de la configuration et des commandes nécessaires à l’utilisation de npm :

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

Dans playwright.config.ts, ajoutez l’objet webServer et mettez à jour la valeur de la commande à npm run preview.

import { defineConfig } from '@playwright/test';

export default defineConfig({
  webServer: {
    command: 'npm run preview',
    url: 'http://localhost:4321/',
    timeout: 120 * 1000,
    reuseExistingServer: !process.env.CI,
  },
  use: {
    baseURL: 'http://localhost:4321/',
  },
});

Lancez npm run build, puis npm run test:e2e pour lancer les tests Playwright.

Vous trouverez plus d’informations sur Playwright dans les liens ci-dessous :

Cypress

Cypress est un outil de test frontal conçu pour le web moderne. Cypress vous permet d’écrire des tests de bout en bout pour votre site Astro.

Installation

Vous pouvez installer Cypress en utilisant le gestionnaire de paquets de votre choix.

npm install -D cypress

Cela installera Cypress localement en tant que dépendance pour votre projet.

pnpm add cypress --save-dev

yarn add cypress --dev

Configuration

À la racine de votre projet, créez un fichier cypress.config.js avec le contenu suivant :

import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    supportFile: false
  }
})

Créer votre premier test Cypress

Choisissez une page à tester. Cet exemple testera la page d’exemple index.astro ci-dessous.

---
---
<html lang="fr">
  <head>
    <title>Astro is awesome!</title>
    <meta name="description" content="Tirez du contenu de n'importe où et diffusez-le rapidement grâce à l'architecture en îlots de nouvelle génération d'Astro." />
  </head>
  <body>
  <h1>Bonjour au monde de la part d'Astro</h1>
  </body>
</html>

Créez un fichier index.cy.js dans le dossier cypress/e2e. Utilisez le test suivant dans le fichier pour vérifier que le titre et l’en-tête de la page sont corrects.
cypress/e2e/index.cy.js
```
it('titles are correct', () => {
  const page = cy.visit('http://localhost:4321');

  page.get('title').should('have.text', 'Astro is awesome!')
  page.get('h1').should('have.text', 'Hello world from Astro');
});
```
Vous pouvez définir "baseUrl": "http://localhost:4321" dans le fichier de configuration cypress.config.js pour utiliser cy.visit("/") au lieu de cy.visit("http://localhost:4321/") pour une URL plus pratique.

Exécuter vos tests Cypress

Cypress peut être exécuté à partir de la ligne de commande ou de l’application Cypress. L’application fournit une interface visuelle pour l’exécution et le débogage de vos tests.

Tout d’abord, démarrez le serveur de développement afin que Cypress puisse accéder à votre site en ligne.

Pour exécuter notre test de l’exemple précédent en utilisant la ligne de commande, exécutez la commande suivante :

npx cypress run

Pour exécuter le test à l’aide de l’application Cypress, vous pouvez également exécuter la commande suivante :

npx cypress open

Une fois l’application Cypress lancée, choisissez E2E Testing, puis sélectionnez le navigateur à utiliser pour exécuter les tests.

Une fois l’exécution du test terminée, vous devriez voir des coches vertes dans la sortie confirmant que votre test a réussi :

Running:  index.cy.js                                                                     (1 of 1)

✓ titles are correct (107ms)

1 passing (1s)

Pour vérifier que votre test fonctionne vraiment, vous pouvez modifier la ligne suivante dans le fichier index.astro :

 <body>
   <h1>Bonjour le monde depuis Astro</h1>
   <h1>Bonjour depuis Astro</h1>
 </body>

Exécutez à nouveau le test. Vous devriez voir un “x” rouge dans la sortie confirmant que votre test a échoué.

Prochaines étapes

Vous trouverez plus d’informations sur Cypress dans les liens ci-dessous :

NightwatchJS

Nightwatch.js est un framework d’automatisation des tests avec un ensemble puissant d’outils pour écrire, exécuter et déboguer vos tests sur le web avec un support intégré pour tous les principaux navigateurs et leurs équivalents mobiles, ainsi que pour les applications mobiles natives.

Installation

Vous pouvez installer NightwatchJS dans votre projet Astro en utilisant le gestionnaire de paquets de votre choix. Suivez les étapes CLI pour choisir JavaScript/TypeScript, nommer votre dossier de test et choisir d’inclure ou non les tests de composants et les tests sur les navigateurs mobiles.

npm init nightwatch@latest

pnpm dlx create-nightwatch

yarn create nightwatch

Créez votre premier test Nightwatch

Choisissez une page à tester. Cet exemple testera la page d’exemple index.astro ci-dessous.

---
---
<html lang="fr">
  <head>
    <title>Astro est formidable !</title>
    <meta name="description" content="Tirez du contenu de n'importe où et diffusez-le rapidement grâce à l'architecture en îlots de nouvelle génération d'Astro." />
  </head>
  <body></body>
</html>

Créez un nouveau dossier src/test/ et ajoutez le fichier de test suivant :
src/test/index.js
```
describe('Astro testing with Nightwatch', function () {
    before(browser => browser.navigateTo('http://localhost:4321/'));

    it("check that the title is correct", function (browser) {
        browser.assert.titleEquals('Astro is awesome!')
    });

    after(browser => browser.end());
});
```
Vous pouvez définir "baseURL": "http://localhost:4321" dans le fichier de configuration nightwatch.conf.js pour utiliser browser.navigateTo("/") au lieu de browser.navigateTo("http://localhost:4321/") pour une URL plus pratique..

Exécution des tests NightwatchJS

Vous pouvez exécuter un seul test ou plusieurs tests à la fois, en testant un ou plusieurs navigateurs. Par défaut, les résultats de vos tests seront affichés dans le terminal. En option, vous pouvez ouvrir le HTML Test Reporter pour afficher un rapport complet et filtrer les résultats des tests.

Vous pouvez exécuter les tests avec l’extension VSCode NightwatchJS ou en utilisant les étapes CLI ci-dessous :

Pour exécuter tous les tests, entrez la commande suivante dans le terminal. Si vous le souhaitez, vous pouvez inclure le nom du fichier pour n’exécuter qu’un seul test :
Fenêtre de terminal
```
npx nightwatch test/index.js
```
De plus, vous pouvez exécuter les tests avec un navigateur spécifique en utilisant l’argument CLI --environment ou -e. Si vous n’avez pas installé le navigateur approprié, Nightwatch essaiera de le configurer pour vous en utilisant [Selenium Manager] (https://www.selenium.dev/blog/2022/introducing-selenium-manager/) :
Fenêtre de terminal
```
npx nightwatch test/index.ts -e firefox
```
Pour voir le rapport de test HTML complet, ouvrez-le à l’aide de la commande suivante :
Fenêtre de terminal
```
npx nightwatch test/index.ts --open
```

Vous trouverez plus d’informations sur NightwatchJS dans les liens ci-dessous :

Créer une issue GitHub

Envoyez-nous un commentaire

Test

Tests unitaires et d’intégration

Vitest

Vitest et l’API Conteneur

Tests de bout en bout

Playwright

Installation

Créez votre premier test Playwright

Exécution des tests Playwright

Avancé : Lancement d’un serveur web de développement pendant les tests

Cypress

Installation

Configuration

Créer votre premier test Cypress

Exécuter vos tests Cypress

Prochaines étapes

NightwatchJS

Installation

Créez votre premier test Nightwatch

Exécution des tests NightwatchJS