Exécuter des tests React.js dans un conteneur

Table des matières

Prérequis

Terminez toutes les sections précédentes de ce guide, en commençant par Conteneuriser une application React.js.

Aperçu

Les tests sont une partie essentielle du processus de développement. Dans cette section, vous apprendrez à :

Exécuter des tests unitaires en utilisant Vitest à l'intérieur d'un conteneur Docker.
Utiliser Docker Compose pour exécuter des tests dans un environnement isolé et reproductible.

Vous utiliserez Vitest — un exécuteur de tests ultra-rapide conçu pour Vite — ainsi que Testing Library pour les assertions.

Exécuter des tests pendant le développement

L'application docker-reactjs-sample inclut un exemple de fichier de test à l'emplacement :

$ src/App.test.tsx

Ce fichier utilise Vitest et React Testing Library pour vérifier le comportement du composant App.

Étape 1 : Installer Vitest et React Testing Library

Si vous n'avez pas encore ajouté les outils de test nécessaires, installez-les en exécutant :

$ npm install --save-dev vitest @testing-library/react @testing-library/jest-dom jsdom

Ensuite, mettez à jour la section des scripts de votre fichier package.json pour inclure ce qui suit :

"scripts": {
  "test": "vitest run"
}

Étape 2 : Configurer Vitest

Mettez à jour le fichier vitest.config.ts à la racine de votre projet avec la configuration suivante :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


/// <reference types="vitest" />

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  base: "/",
  plugins: [react()],
  server: {
    host: true,
    port: 5173,
    strictPort: true,
  },
  test: {
    environment: "jsdom",
    setupFiles: "./src/setupTests.ts",
    globals: true,
  },
});

Note

Les options test dans vitest.config.ts sont essentielles pour des tests fiables à l'intérieur de Docker :

environment: "jsdom" simule un environnement de type navigateur pour le rendu et les interactions DOM.

setupFiles: "./src/setupTests.ts" charge la configuration globale ou les mocks avant chaque fichier de test (facultatif mais recommandé).

globals: true active les fonctions de test globales comme describe, it, et expect sans les importer.

Pour plus de détails, consultez la documentation de configuration officielle de Vitest.

Étape 3 : Mettre à jour compose.yaml

Ajoutez un nouveau service nommé react-test à votre fichier compose.yaml. Ce service vous permet d'exécuter votre suite de tests dans un environnement conteneurisé isolé.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


services:
  react-dev:
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "5173:5173"
    develop:
      watch:
        - action: sync
          path: .
          target: /app

  react-prod:
    build:
      context: .
      dockerfile: Dockerfile
    image: docker-reactjs-sample
    ports:
      - "8080:8080"

  react-test:
    build:
      context: .
      dockerfile: Dockerfile.dev
    command: ["npm", "run", "test"]

Le service react-test réutilise le même Dockerfile.dev que celui utilisé pour le développement et surcharge la commande par défaut pour exécuter les tests avec npm run test. Cette configuration garantit un environnement de test cohérent qui correspond à votre configuration de développement locale.

Après avoir terminé les étapes précédentes, votre répertoire de projet devrait contenir les fichiers suivants :

├── docker-reactjs-sample/
│ ├── Dockerfile
│ ├── Dockerfile.dev
│ ├── .dockerignore
│ ├── compose.yaml
│ ├── nginx.conf
│ └── README.Docker.md

Étape 4 : Exécuter les tests

Pour exécuter votre suite de tests à l'intérieur du conteneur, exécutez la commande suivante depuis la racine de votre projet :

$ docker compose run --rm react-test

Cette commande va :

Démarrer le service react-test défini dans votre fichier compose.yaml.
Exécuter le script npm run test en utilisant le même environnement que le développement.
Supprimer automatiquement le conteneur après la fin des tests (commande docker compose run --rm).

Note

Pour plus d'informations sur les commandes Compose, consultez la référence CLI de Compose.

Résumé

Dans cette section, vous avez appris à exécuter des tests unitaires pour votre application React.js à l'intérieur d'un conteneur Docker en utilisant Vitest et Docker Compose.

Ce que vous avez accompli :

Installé et configuré Vitest et React Testing Library pour tester les composants React.
Créé un service react-test dans compose.yaml pour isoler l'exécution des tests.
Réutilisé le Dockerfile.dev de développement pour garantir la cohérence entre les environnements de développement et de test.
Exécuté des tests à l'intérieur du conteneur en utilisant docker compose run --rm react-test.
Assuré des tests fiables et reproductibles dans tous les environnements sans dépendre de la configuration de la machine locale.

Ressources associées

Explorez les références officielles et les meilleures pratiques pour affiner votre flux de travail de test Docker :

Référence Dockerfile – Comprenez toutes les instructions et la syntaxe Dockerfile.
Meilleures pratiques pour la rédaction de Dockerfiles – Rédigez des Dockerfiles efficaces, maintenables et sécurisés.
Référence du fichier Compose – Apprenez la syntaxe complète et les options disponibles pour configurer les services dans compose.yaml.
Référence CLI docker compose run – Exécutez des commandes ponctuelles dans un conteneur de service.

Prochaines étapes

Ensuite, vous apprendrez à mettre en place un pipeline CI/CD en utilisant GitHub Actions pour construire et tester automatiquement votre application React.js dans un environnement conteneurisé. Cela garantit que votre code est validé à chaque push ou pull request, maintenant la cohérence et la fiabilité tout au long de votre flux de travail de développement.