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 babel-jest @babel/preset-env @babel/preset-react react-test-renderer

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',
    transform: {
        '^.+\\.jsx?$': 'babel-jest',
        '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
            '<rootDir>/fileTransformer.js',
    },
    moduleNameMapper: {
        "\\.(css|less|scss|sass)$": "identity-obj-proxy"
    },
    //testMatch: ['**/__tests__/**/*.js?(x)', '**/?(*.)+(spec|test).js?(x)'],
    setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
};

Créer un fichier babel.config.js à la racine du projet également:

module.exports = {
    presets: [
        '@babel/preset-env',
        ['@babel/preset-react', {runtime: 'automatic'}],
    ],
};

Étape 2: Créer le transformer des fichiers spéciaux

Nous aurons besoin d'un transformer pour gérer les fichiers spéciaux comme les images, vidéos, fonts etc. Pour cela créer un fichier fileTransformer.js à la racine du projet :

const path = require('path');

module.exports = {
    process(sourceText, sourcePath, options) {
        return {
            code: `module.exports = ${JSON.stringify(path.basename(sourcePath))};`,
        };
    },
};

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