Configuration de l'environnement de test

Les bases : Que faut-il pour tester du React ?

Avant de pouvoir écrire et exécuter des tests pour vos composants React, vous devez mettre en place un environnement approprié. Heureusement, les outils modernes comme Create React App (CRA) ou Vite (avec le template React) font une grande partie de ce travail pour vous, en préconfigurant Jest et React Testing Library dès la création du projet. Cependant, comprendre les pièces maîtresses de cette configuration reste essentiel, que vous utilisiez un starter kit ou que vous configuriez votre projet manuellement.

L'objectif est de disposer d'un système capable de :

• Découvrir et exécuter vos fichiers de test (le rôle du Test Runner, comme Jest).
• Comprendre la syntaxe JSX et les fonctionnalités JavaScript modernes (transpilation via Babel ou TypeScript).
• Simuler un environnement de navigateur, notamment le DOM, pour pouvoir "rendre" vos composants (souvent via jsdom).
• Fournir des utilitaires pour interagir avec vos composants rendus et vérifier leur comportement (le rôle de React Testing Library).
• Offrir un moyen d'écrire des assertions pour valider les résultats (fourni par Jest ou une bibliothèque externe).
• Permettre de simuler des dépendances (Mocking, géré par Jest).

Les dépendances clés

Un environnement de test typique pour React inclut généralement les dépendances de développement (`devDependencies`) suivantes :

• `jest` : Le framework de test principal, incluant le runner, les assertions de base et les capacités de mocking.
• `@testing-library/react` : Le coeur de React Testing Library, fournissant la fonction `render` et les principales requêtes pour interagir avec les composants.
• `@testing-library/jest-dom` : Ajoute des matchers d'assertion spécifiques au DOM à Jest (ex: `toBeInTheDocument()`, `toHaveClass()`, `toBeVisible()`). Rend les assertions plus lisibles et expressives.
• `@testing-library/user-event` : Une bibliothèque complémentaire à RTL, fortement recommandée pour simuler les interactions utilisateur (clics, saisie, etc.) de manière plus réaliste que le `fireEvent` de base de RTL.
• `jest-environment-jsdom` : Fournit l'environnement basé sur jsdom pour que Jest puisse simuler un navigateur.
• Outils de transpilation : Selon votre projet, vous aurez besoin de `babel-jest` et des configurations Babel associées (`@babel/preset-env`, `@babel/preset-react`) ou de `ts-jest` si vous utilisez TypeScript, pour que Jest puisse comprendre votre code source.
• `identity-obj-proxy` (optionnel mais courant) : Utilisé pour mocker les importations de fichiers CSS (ou d'autres assets statiques) qui ne sont pas pertinents pour la logique du test unitaire/intégration.

L'installation se fait généralement via npm ou yarn :

npm install --save-dev jest @testing-library/react @testing-library/jest-dom @testing-library/user-event jest-environment-jsdom babel-jest @babel/preset-env @babel/preset-react identity-obj-proxy
# Ou pour TypeScript:
# npm install --save-dev jest @testing-library/react @testing-library/jest-dom @testing-library/user-event jest-environment-jsdom ts-jest @types/jest typescript

Fichiers et options de configuration Jest

Jest peut être configuré via un fichier `jest.config.js` (ou `.ts`) à la racine de votre projet, ou directement dans votre `package.json` sous une clé `"jest"`. Voici quelques options de configuration courantes et importantes :

• `testEnvironment`: Définit l'environnement d'exécution. Pour React, on utilise presque toujours `'jsdom'`.
• `setupFilesAfterEnv`: Un tableau de chemins vers des scripts à exécuter après la mise en place de l'environnement de test, mais avant l'exécution des tests eux-mêmes. C'est l'endroit idéal pour importer `@testing-library/jest-dom` afin que ses matchers soient disponibles globalement dans tous vos tests. Exemple : `setupFilesAfterEnv: ['/src/setupTests.js']` où `setupTests.js` contiendrait `import '@testing-library/jest-dom';`.
• `moduleNameMapper`: Permet de définir des alias ou de mocker certains types de fichiers. Très utile pour les modules CSS : `{'\\.(css|less|scss|sass)$': 'identity-obj-proxy'}`. Cela évite que Jest ne plante en essayant d'interpréter du CSS.
• `transform`: Indique à Jest comment transformer vos fichiers source avant de les exécuter. C'est ici qu'on configure `babel-jest` ou `ts-jest` pour gérer le JSX, les fonctionnalités ES modernes ou TypeScript. Exemple : `transform: {'^.+\\.jsx?$': 'babel-jest', '^.+\\.tsx?$': 'ts-jest'}`.
• `testPathIgnorePatterns`: Pour ignorer certains dossiers comme `/node_modules/`.
• `collectCoverageFrom`: Définit les fichiers sur lesquels calculer la couverture de code.

Un exemple de fichier `jest.config.js` minimal :

module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['/src/setupTests.js'],
  moduleNameMapper: {
    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
    // Ajoutez d'autres mappings si nécessaire (ex: alias de chemin)
  },
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }], // Exemple avec Next.js Babel preset
    // Ou configuration manuelle Babel/ts-jest
    // '^.+\\.jsx?$': 'babel-jest',
    // '^.+\\.tsx?$': 'ts-jest',
  },
  // Autres options...
};

Intégration avec Babel/TypeScript

Comme mentionné, Jest a besoin de comprendre votre code source. Si vous utilisez Babel, assurez-vous d'avoir un fichier `babel.config.js` (ou `.babelrc`) configuré avec les presets nécessaires, notamment `@babel/preset-env` (pour les fonctionnalités JavaScript modernes) et `@babel/preset-react` (pour le JSX).

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' } }], // Cible Node.js pour Jest
    ['@babel/preset-react', { runtime: 'automatic' }] // Support du JSX moderne
  ]
};

Si vous utilisez TypeScript, vous configurerez `ts-jest` dans votre `jest.config.js` et vous assurerez que votre `tsconfig.json` est correctement configuré (notamment les options `jsx` et `esModuleInterop`). `ts-jest` utilisera votre `tsconfig.json` pour la transpilation.

Lancer les tests

Une fois la configuration en place, vous ajoutez généralement un script dans votre `package.json` pour lancer les tests :

{
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage"
  }
}

Vous pouvez ensuite exécuter vos tests avec `npm test`, `npm run test:watch` (pour relancer les tests automatiquement lors des modifications de fichiers), ou `npm run test:coverage` (pour générer un rapport de couverture de code).

Bien que les outils comme CRA et Vite masquent une grande partie de cette complexité initiale, comprendre ces différentes briques vous aidera à dépanner les problèmes de configuration, à personnaliser votre environnement de test si nécessaire, et à mieux appréhender le fonctionnement global du processus de test dans vos projets React.