Skip to content

Latest commit

 

History

History
375 lines (273 loc) · 14.5 KB

testing.mdx

File metadata and controls

375 lines (273 loc) · 14.5 KB
Raw
title description i18nReady
Test
Une introduction aux tests dans Astro
true

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

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.

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.

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.

```shell npm install -D cypress ```

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

pnpm add cypress --save-dev
```shell 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

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

  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.

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

    :::tip[Configurez un baseUrl] 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)

:::note[Échec du test] 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.

```shell npm init nightwatch@latest ``` ```shell pnpm dlx create-nightwatch ``` ```shell yarn create nightwatch ```

Créez votre premier test Nightwatch

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

  2. Créez un nouveau dossier src/test/ et ajoutez le fichier de test suivant :

     ```js title="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());
 });
 ```

    :::tip[Configurez un baseUrl] Vous pouvez définir ["baseURL" : "http://localhost:4321"](https://nightwatchjs.org/guide/reference/settings.html#setting-the-baseurl-property) dans le fichier de configuration nightwatch.conf.jspour utiliserbrowser.navigateTo("/")au lieu debrowser.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 NightwatchJS VSCode Extension ou en utilisant les étapes CLI ci-dessous :

  1. Pour exécuter tous les tests, entrez la commande suivante dans le terminal. Vous pouvez également inclure le nom du fichier pour n'exécuter qu'un seul test :

    npx nightwatch test/index.js

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

    npx nightwatch test/index.ts --open

  3. Pour exécuter les tests avec un navigateur spécifique, utilisez 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

    npx nightwatch test/index.ts -e firefox

:::tip Exécutez vos tests par rapport à votre code de production pour qu'ils ressemblent davantage à votre site réel, déployé. :::

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

Playwright

Playwright est un cadre 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, y compris Chromium, WebKit et Firefox.

Installation

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

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 ajouter un flux de travail GitHub Actions facultatif.

```shell npm init playwright@latest ``` ```shell pnpm dlx create-playwright ``` ```shell yarn create playwright ```

Créez votre premier test Playwright

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

  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.

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

    :::tip[Configurez un baseUrl] 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.

  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 :

    npx playwright test index.spec.ts

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

    npx playwright show-report

:::tip Exécutez vos tests par rapport à votre code de production pour qu'ils ressemblent davantage à votre site réel, déployé. :::

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

Vous pouvez également demander à Playwright de lancer 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". 1.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/',
  },
});

  2. Lancez npm run build, puis npm run test:e2e pour exécuter les tests Playwright.

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