Accueil/Notions/React-testing-library

React-testing-library

React Testing Library est un outil conçu pour tester les composants (components, React) React de manière intuitive et efficace. Plutôt que de se concentrer sur les détails d'implémentation, il encourage à écrire des tests qui simulent les interactions de l'utilisateur avec l'application, rendant ainsi les tests plus fiables et maintenables.

Principes de base

  1. Accessibilité : React Testing Library pousse à écrire des tests qui interagissent avec l'interface de la même manière que le ferait un utilisateur. Par exemple, au lieu de sélectionner un élément par son id, on le sélectionnera par son texte visible ou par son rôle.

  2. Tests basés sur l'utilisateur : Les tests sont écrits pour simuler des actions de l'utilisateur, comme cliquer sur des boutons, taper dans des champs de texte, etc. Cela permet de s'assurer que l'application fonctionne correctement du point de vue de l'utilisateur final.

  3. Moins de Mocks (testing), plus de réalité : Il encourage à éviter de mocker des éléments internes de React ou des composants enfants autant que possible, favorisant ainsi des tests plus réalistes et moins fragiles.

Exemple de test avec React Testing Library

Imaginons que tu aies un composant simple, Counter, qui affiche un compteur et un bouton pour l'incrémenter :

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

Pour tester ce composant avec React Testing Library, voici comment tu pourrais t'y prendre :

  1. Installer les dépendances :

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

  2. Écrire le test :

    import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import Counter from './Counter';

test('it increments the counter', () => {
  // Render le composant
  render(<Counter />);

  // Sélectionne les éléments
  const countElement = screen.getByText(/count:/i);
  const buttonElement = screen.getByText(/increment/i);

  // Vérifie l'état initial
  expect(countElement).toHaveTextContent('Count: 0');

  // Simule un clic sur le bouton
  fireEvent.click(buttonElement);

  // Vérifie que le compteur a été incrémenté
  expect(countElement).toHaveTextContent('Count: 1');
});

Détails des méthodes utilisées

  1. render : Cette fonction rend le composant dans un conteneur DOM. C'est l'équivalent de ReactDOM.render mais adapté pour les tests.

  2. screen : C'est un objet global fourni par React Testing Library qui facilite la recherche d'éléments dans le DOM rendu. Il contient des méthodes comme getByText, getByRole, getByLabelText, etc.

  3. fireEvent : Cette méthode simule des événements utilisateur tels que des clics, des saisies clavier, etc. C'est une manière d'interagir avec le DOM comme le ferait un utilisateur.

  4. expect : C'est une fonction fournie par Jest (le framework de test généralement utilisé avec React Testing Library) pour faire des assertions sur l'état du DOM.

Meilleures pratiques

  • Préférer les requêtes basées sur l'accessibilité : Utilise des méthodes comme getByRole, getByLabelText pour s'assurer que les tests sont accessibles et robustes.
  • Éviter les tests trop couplés aux détails d'implémentation : Par exemple, ne teste pas les états internes d'un composant mais plutôt son rendu et ses interactions visibles.
  • Écrire des tests qui reflètent les scénarios utilisateurs réels : Se concentrer sur ce que l'utilisateur voit et fait plutôt que sur la structure du code.

En résumé, React Testing Library t'aide à écrire des tests plus proches de l'expérience utilisateur réelle, rendant ton code plus fiable et tes tests plus robustes.

Voici une liste de notions et de concepts que tu peux explorer pour approfondir tes connaissances et compétences en utilisant React Testing Library et en testant les applications React en général :

1. Techniques Avancées de Sélection

  • getByRole, getByLabelText, getByPlaceholderText
  • Utilisation des options de filtrage (par exemple, { name: /submit/i })

2. Async Testing

  • Utiliser waitFor pour attendre des mises à jour asynchrones
  • findBy queries pour des éléments asynchrones

mocks-(testing)-et-spies">3. Mocks (testing) et Spies

  • Utiliser jest.fn() pour créer des fonctions factices
  • Mocks |Mocking de modules avec jest.mock()

4. User Events

  • Utiliser @testing-library/user-event pour simuler des interactions utilisateur plus complexes et plus proches de la réalité que fireEvent

react-router">5. Testing React Router

  • Tester des composants qui utilisent react-router-dom
  • Mocks |Mocking de routes et navigation

redux">6. Testing Redux

  • Tester des composants connectés à un store Redux
  • Mocks |Mocking de stores Redux pour les tests

7. Snapshot Testing

  • Créer et mettre à jour des snapshots avec @testing-library/react
  • Utilisation de jest pour la comparaison des snapshots

8. Custom Render Functions

  • Créer des fonctions de rendu personnalisées pour fournir des contextes ou des configurations spécifiques
  • Utiliser des wrappers pour le rendu avec des Providers (par exemple, Redux, Theme)

9. Code Coverage et Reporting

  • Utiliser jest pour générer des rapports de couverture de code
  • Intégration avec des outils de CI/CD pour la couverture de code

10. Mocks |Mocking des APIs

  • Utiliser msw (Mock Service Worker) pour mocker des appels API dans les tests
  • Création de handlers et de scénarios de test pour les API

11. Performance Testing

  • Tester les performances des composants
  • Analyser et optimiser les temps de rendu

12. tests end-to-end

  • Utilisation de Cypress ou Puppeteer pour des tests bout-en-bout
  • Intégration des tests E2E avec React Testing Library

13. Accessibilité (a11y)

  • Utiliser axe-core avec React Testing Library pour vérifier l'accessibilité des composants
  • Automatiser les tests d'accessibilité

intégration-continue-(continuous-integration,-ci)">14. Intégration continue (Continuous Integration, CI)

  • Configurer des pipelines CI pour exécuter des tests automatiquement
  • Utilisation de services comme GitHub Actions, Travis CI, CircleCI

15. Testing Library Ecosystem

  • Exploration des autres bibliothèques de Testing Library (DOM Testing Library, Vue Testing Library, etc.)
  • Contribuer et se tenir à jour avec les nouvelles versions et fonctionnalités

En explorant ces notions, tu pourras non seulement améliorer tes compétences en matière de tests, mais aussi écrire des tests plus robustes et maintenables, tout en contribuant à la qualité globale de tes applications React.