Tests React.js

Les tests en React.js sont généralement effectués à l'aide de bibliothèques de test telles que Jest et React Testing Library. Jest est un framework de test JavaScript populaire, et React Testing Library est spécifiquement conçu pour tester les composants React. Voici les étapes de base pour écrire des tests en React.js :

Étape 1: Configuration de Jest

Assurez-vous que votre projet React a Jest installé. Si ce n'est pas le cas, vous pouvez l'installer avec la commande suivante :

npm install --save-dev jest

Créez ou assurez-vous que vous avez un fichier de configuration Jest (jest.config.js) à la racine de votre projet. Vous pouvez utiliser une configuration minimale comme celle-ci :

module.exports = {
  testEnvironment: 'jsdom',
  testMatch: ['**/__tests__/**/*.js?(x)', '**/?(*.)+(spec|test).js?(x)'],
  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
};

Étape 2: Configuration de React Testing Library

Installez React Testing Library et Jest-dom, qui fournit des utilitaires pour tester des composants React :

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

Étape 3: Écrire des Tests

Créez un dossier __tests__ à côté de vos composants React, et écrivez des fichiers de test avec l'extension .test.js ou .spec.js. Par exemple, pour tester un composant MyComponent.js :

// MyComponent.js

import React from 'react';

const MyComponent = ({ message }) => {
  return <div>{message}</div>;
};

export default MyComponent;

// MyComponent.test.js

import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect'; // Pour des assertions spécifiques à Jest-dom
import MyComponent from './MyComponent';

test('renders MyComponent with a message', () => {
  render(<MyComponent message="Hello, World!" />);
  expect(screen.getByText('Hello, World!')).toBeInTheDocument();
});

Étape 4: Exécuter les Tests

Ajoutez une commande test dans votre fichier package.json :

"scripts": {
  "test": "jest"
}

Exécutez les tests avec la commande :

npm test

Cela lancera Jest et exécutera les tests que vous avez écrits.

Ces étapes de base vous permettront de commencer à écrire des tests pour vos composants React en utilisant Jest et React Testing Library. Vous pouvez ensuite explorer des sujets plus avancés tels que les tests asynchrones, les tests de comportement, etc. selon les besoins de votre application.