Blog ENI : Toute la veille numérique !
-25€ dès 75€ sur les livres en ligne, vidéos... avec le code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. React
  3. Tester une application React
Extrait - React Développez le Front End de vos applications web et mobiles avec JavaScript (nouvelle édition)
Extraits du livre
React Développez le Front End de vos applications web et mobiles avec JavaScript (nouvelle édition) Revenir à la page d'achat du livre

Tester une application React

Utiliser Jest et React Testing Library

Le test est une étape essentielle du développement d’applications pour s’assurer que le code fonctionne correctement, maintenir la qualité du logiciel et prévenir les régressions. Jest et React Testing Library sont deux outils populaires utilisés pour tester les applications React. Bien évidemment, d’autres solutions existent telles que Cypress ou Playwright, qui s’imposent de plus en plus dans le monde du développement d’applications web.

1. Introduction à Jest

Jest est un framework de test développé par Facebook pour les applications JavaScript, y compris React. Il a l’avantage de fonctionner simplement avec pas ou peu de configuration et rapidement grâce à sa capacité à exécuter les tests en parallèle.

2. Installation de Jest

 Pour utiliser Jest dans votre projet React, vous devez l’installer via npm ou yarn :

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

 Créez ensuite un fichier de configuration babel.config.js afin de permettre à Jest de comprendre le JSX :

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

Écrire son premier test

Lorsque vous commencez à tester une application React, il faut commencer par des tests simples pour vous familiariser avec le processus.

1. Configuration de base

 Assurez-vous d’avoir Jest et React Testing Library installés dans votre projet, comme expliqué dans la section précédente.

Il est aussi possible de créer une configuration automatiquement via la commande suivante :

npx jest —-init 

Vous aurez ensuite le choix de configurer Jest relativement à votre environnement et vous obtiendrez un fichier de configuration. Vous pouvez choisir les valeurs par défaut proposées, sauf pour l’environnement, sélectionnez jsdom quand vous testez le front-end d’une application web.

2. Écriture de votre premier test

Supposons que vous ayez un composant simple appelé HelloWorld que vous souhaitez tester. Voici comment écrire votre premier test pour ce composant.

HelloWorld.js :

import React from 'react'; 
 
const HelloWorld = () => { 
  return <div>Hello, World!</div>; 
}; 
 
export default HelloWorld; 

HelloWorld.test.js :

import React from 'react'; 
import { render, screen } from '@testing-library/react'; 
import '@testing-library/jest-dom'; 
 
import HelloWorld from './HelloWorld'; ...

Tester les composants avec Cypress

Cypress est un outil de test souvent utilisé pour faire du end-to-end (scénario de bout en bout). Il permet de tester vos applications web à travers différents scénarios et interactions utilisateur. Contrairement à Jest et React Testing Library, qui se concentrent sur les tests unitaires, Cypress est plus axé sur les tests d’intégration et end-to-end.

1. Configuration de base

Assurez-vous d’avoir Node.js installé et votre projet React prêt à être testé. Vous devez également avoir créé et démarré une application React, car Cypress exécute les tests dans un navigateur réel.

2. Installation de Cypress

 Installez Cypress en tant que dépendance de développement dans votre projet :

npm install --save-dev cypress 

3. Écriture de tests avec Cypress

Cypress utilise une syntaxe fluide pour écrire des tests.

 Créez un dossier nommé cypress/integration dans la racine de votre projet pour stocker vos fichiers de test.

cypress/integration/MyComponent.spec.js :

describe('Test du composant MyComponent', () => { 
  it('affiche le texte "Hello, Cypress"', () => { 
    cy.visit('http://localhost:3000'); // Assurez-vous que l'URL 
est correcte 
    cy.contains('Hello...

Conclusion

Les tests jouent un rôle crucial dans le développement d’applications React de haute qualité. Ils garantissent que votre code fonctionne comme prévu, réduisent les erreurs et facilitent la maintenance continue.

1. L’importance des tests

Les tests garantissent la stabilité et la fiabilité de votre application, même lorsque vous apportez des modifications. Ils identifient les erreurs et les bogues potentiels avant qu’ils ne deviennent des problèmes majeurs. Ils servent en plus de documentation vivante pour votre code, en expliquant comment il doit fonctionner. On dit parfois qu’un autre développeur doit pouvoir comprendre votre application rien qu’en lisant les tests.

2. Choix de la méthode de test

Les tests unitaires avec Jest et React Testing Library sont excellents pour valider le comportement individuel des composants.

Les tests d’acceptation avec Cypress ou Playwright vous permettent de tester les interactions utilisateur et les scénarios complets de votre application.

3. Bonnes pratiques de test

  • Écrivez des tests clairs, concis et indépendants les uns des autres.

  • Concentrez-vous sur les comportements et les scénarios essentiels de votre application.

  • Utilisez des noms descriptifs pour vos tests afin de mieux comprendre leur objectif.

  • Assurez-vous que vos tests sont maintenables et facilement extensibles.

4. Intégration...