Assurer la qualité du code

La visualisation des composants avec Storybook

Avoir un environnement séparé dans lequel tester le comportement et le style de ses composants est important, tant pour les développeurs que pour les éventuels UX/UI designers ou les chefs de projet qui travaillent sur le projet. Storybook est idéal pour cela. Il s’agit d’un environnement de développement dans lequel les composants sont isolés du reste de l’application pour pouvoir être testés indépendamment (à noter que Storybook peut être utilisé avec d’autres bibliothèques que React). Cet environnement isolé permet de démontrer l’état d’un composant dans une situation spécifique (une « story ») sans avoir à lancer l’application et à naviguer de page en page jusqu’à obtenir l’état voulu. Il s’agit en quelque sorte d’une documentation vivante des composants de l’application, qui, lorsqu’elle est bien maintenue, offre une vue d’ensemble des différentes briques de l’application.

Dans le dossier de notre application React, lançons le script d’initialisation de Storybook :

npm create storybook@latest 

Cette commande vaut quelle que soit la bibliothèque sur laquelle est basée l’application (ici, React). La bibliothèque est automatiquement détectée par Storybook et la configuration adaptée est téléchargée. Ce script crée un nouveau dossier à la racine du projet, nommé .storybook/, qui contient deux fichiers : main.ts et preview.ts. Ces deux fichiers permettent de configurer Storybook selon vos besoins. Les différentes options de configuration sont disponibles dans la documentation de Storybook.

Au sein du dossier src/, un autre dossier a été généré : src/stories/. Storybook remplit ce dossier avec des composants d’exemples. Selon les développeurs et les projets, les préférences varient, mais le plus souvent ce dossier est tout simplement supprimé. S’il est supposé stocker les stories des différents composants de l’application, selon l’architecture des fichiers et les préférences des développeurs, il arrive...

Les tests unitaires avec React Testing Library (RTL)

Comme dans n’importe quel langage, il est possible de développer en React via les méthodes de TDD (Test Driven Development - développement guidé par le test). Il ne sera pas question ici de démontrer à quoi servent des tests unitaires (un développeur, quel que soit son secteur, devrait être capable de connaître leur utilité), mais de démontrer comment implémenter des tests unitaires efficaces en React.

Dans un langage de programmation classique, les tests unitaires couvrent des briques logicielles isolées de leur contexte. En React, le plus souvent, ce seront les composants eux-mêmes qui seront testés. L’objectif, dans tous les cas, est de s’assurer qu’un morceau de code se comporte exactement comme attendu dans un maximum de scénarios possibles. Cela facilitera les éventuels refactoring (refactorisations) de composants ultérieurs, en particulier pour vérifier que ces refactorings ne brisent pas le comportement normal des composants.

Pour écrire des tests unitaires en React, trois outils principaux sont nécessaires : un runner (exécuteur) de test, chargé de lancer et de donner un rapport détaillé de l’exécution des tests ; une bibliothèque de matchers, qui fournissent les fonctions utilitaires pour faire des expectations (attendus) et des assertions ; et une bibliothèque de rendu, qui permet d’intégrer les composants dans un environnement de test. Les deux premiers outils sont déjà intégrés lors de la création d’un nouveau projet avec Vite. Il s’agit de la bibliothèque de tests Vitest. Il est toutefois possible de remplacer Vitest par Jest. Pour ce qui est de la bibliothèque de rendu, en React, la plus utilisée est de loin React Testing Library (souvent abrégée RTL). Cette bibliothèque fait elle-même partie d’une grande famille de bibliothèques : la Testing Library, qui fournit des bibliothèques de rendu pour un grand nombre de bibliothèques et frameworks front-end.

La RTL peut être installée via la commande :

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

Pour que les tests puissent être...

React Developer Tools

Pour faciliter le processus de développement, d’inspection, et de débogage des applications, React met à disposition une extension de navigateur. Elle est trouvable sur la plupart des navigateurs sous le nom React Developer Tools (souvent abrégée React DevTools). Cette extension s’avère être un outil indispensable pour le développement d’applications performantes. Elle offre une visibilité ample sur le fonctionnement interne des applications React.

Une fois l’extension installée, deux nouveaux onglets devraient apparaître dans l’outil d’inspection du navigateur (accessible via la combinaison de touches [Ctrl][Shift] I ou en effectuant un clic droit puis en cliquant sur Inspecter) : Components et Profiler. Ils n’apparaîtront, bien sûr, que sur les applications utilisant React dans un environnement de développement.

Les nouveaux onglets disponibles dans l’outil d’inspection du navigateur sont marqués du logo de React.