import { Steps } from '@astrojs/starlight/components'; import PackageManagerTabs from '/components/tabs/PackageManagerTabs.astro'; import Since from '/components/Since.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.

Tests unitaires et d'intégration

Vitest

Un framework de test unitaire natif de Vite avec prise en charge 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 :

js
// 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() :

js
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 des conteneurs

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

js
import { experimental_AstroContainer as AstroContainer } from 'astro/container';import { expect, test } from 'vitest';import Card from '../src/components/Card.astro';test('Carte avec des 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 de 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 de la CLI pour choisir JavaScript/TypeScript, nommer votre dossier de test et ajouter un flux de travail GitHub Actions facultatif.

Créer votre premier test Playwright

```html title="src/pages/index.astro" --- --- <html lang="fr"> <head> <title>Astro est génial !</title> <meta name="description" content="Extrayez 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 du titre de la page (<title>) pour qu'elle corresponde à la page que vous testez.

```jsx title="src/test/index.spec.ts" "Astro est génial !" import { test, expect } from '@playwright/test'; test('la méta est correcte', async ({ page }) => { await page.goto("http://localhost:4321/"); await expect(page).toHaveTitle('Astro est génial !'); }); ``` :::tip[Configurer `baseUrl`] Vous pouvez définir [`"baseURL": "http://localhost:4321"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url) 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.

```sh npx playwright test index.spec.ts ```

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

```sh npx playwright show-report ```

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

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. Dans playwright.config.ts, ajoutez l'objet webServer et mettez à jour la valeur de la commande à npm run preview.

    js
    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. Exécutez 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 front-end 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. Cela installera Cypress localement en tant que dépendance pour votre projet.

Configuration

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

js
import { defineConfig } from 'cypress'export default defineConfig({  e2e: {    supportFile: false  }})

Créer votre premier test Cypress

```html title="src/pages/index.astro" --- --- <html lang="fr"> <head> <title>Astro est génial !</title> <meta name="description" content="Extrayez 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 depuis 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.

```js title="cypress/e2e/index.cy.js" it('les titres sont corrects', () => { const page = cy.visit('http://localhost:4321'); page.get('title').should('have.text', 'Astro est génial !') page.get('h1').should('have.text', 'Bonjour au monde depuis Astro'); }); ``` :::tip[Configurer `baseUrl`] Vous pouvez définir [`"baseUrl": "http://localhost:4321"`](https://docs.cypress.io/guides/end-to-end-testing/testing-your-app#Step-3-Configure-Cypress) 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 :

shell
npx cypress run

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

shell
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 :

shell
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 :

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 une prise en charge intégrée 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 de la 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.

Créer votre premier test Nightwatch

```html title="src/pages/index.astro" --- --- <html lang="fr"> <head> <title>Astro est génial !</title> <meta name="description" content="Extrayez 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 est génial !') }); after(browser => browser.end()); }); ``` :::tip[Configurer `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.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 de la CLI ci-dessous :

```sh 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/) : ```sh npx nightwatch test/index.ts -e firefox ```

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

```sh npx nightwatch test/index.ts --open ```

:::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 :

Cours Astro