Aller au contenu
v5-beta

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

Titre de la section Tests unitaires et d’intégration

Vitest

Titre de la section 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 :

vitest.config.ts
/// <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

Titre de la section 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 :

example.test.js
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

Titre de la section Tests de bout en bout

Playwright

Titre de la section 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

Titre de la section 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).

Fenêtre du terminal
npm init playwright@latest

Créez votre premier test Playwright

Titre de la section Créez votre premier test Playwright

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

    src/pages/index.astro
    ---
    ---
    <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>

  2. 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 !');
    });

Exécution des tests Playwright

Titre de la section 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.

  1. 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 du terminal
    npx playwright test index.spec.ts

  2. Pour voir le rapport de test HTML complet, ouvrez-le à l’aide de la commande suivante :

    Fenêtre du terminal
    npx playwright show-report
Avancé : Lancement d’un serveur web de développement pendant les tests
Titre de la section 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 :

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

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

    playwright.config.ts
    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/',
      },
    });

  3. 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

Titre de la section 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

Titre de la section Installation

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

Fenêtre du terminal
npm install -D cypress

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

Configuration

Titre de la section Configuration

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

cypress.config.js
import { defineConfig } from 'cypress'


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

Créer votre premier test Cypress

Titre de la section Créer votre premier test Cypress

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

    src/pages/index.astro
    ---
    ---
    <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>

  2. 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');
    });

Exécuter vos tests Cypress

Titre de la section 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 :

Fenêtre du terminal
npx cypress run

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

Fenêtre du terminal
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 :

Output from npx cypress run
Running:  index.cy.js                                                                     (1 of 1)


✓ titles are correct (107ms)


1 passing (1s)

Prochaines étapes

Titre de la section Prochaines étapes

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

NightwatchJS

Titre de la section 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

Titre de la section 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.

Fenêtre du terminal
npm init nightwatch@latest

Créez votre premier test Nightwatch

Titre de la section Créez votre premier test Nightwatch

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

    src/pages/index.astro
    ---
    ---
    <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>

  2. 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());
    });

Exécution des tests NightwatchJS

Titre de la section 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 :

  1. 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 du 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 du terminal
    npx nightwatch test/index.ts -e firefox

  2. Pour voir le rapport de test HTML complet, ouvrez-le à l’aide de la commande suivante :

    Fenêtre du terminal
    npx nightwatch test/index.ts --open

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

Contribuer

Comment pouvons-nous vous aider ?

Créer une issue GitHub

Le moyen le plus rapide d'alerter notre équipe d'un problème.

Communauté