Ajouter des tests de non régression visuelle (et plus encore !) sur Storybook avec Chromatic

Ajouter des tests de non régression visuelle (et plus encore !) sur Storybook avec Chromatic


Initialisation du projet (Vite + React + Storybook)

Comme il est probable que vous utilisiez React, nous allons faire un nouveau projet en React appelé "chromatic-tuto-elevenlabs" sur lequel nous allons installer Storybook et React. Storybook comprendra automatiquement qu’il est sur un projet React.

Sur un terminal, placez-vous dans le dossier dans lequel vous souhaitez créer le projet, puis lancez ces commandes :

npm create vite@latest chromatic-tuto-elevenlabs --template react-ts

Acceptez l’installation de create-vite puis sélectionnez en Framework React et en variant Typescript (ou Javascript si vous êtes plus à l’aise, ça ne change pas grand chose dans le cadre de ce tuto mais il faudra adapter les extraits de code en retirant les types). Installez le projet sans le lancer :

cd chromatic-tuto-elevenlabs npm install

Avant de lancer le projet nous allons installer Storybook. Comme dit précédemment, Storybook va automatiquement déterminer dans quel environnement il est installé.

Important

Une nouvelle version majeure de Storybook, la version 8, est sortie récement au moment où j'écris ce tuto. Pour être sûrs de ne pas se retrouver avec des bugs dûs à la nouveauté de cette version, je vous propose d'installer la dernière version 7 sur laquelle je suis sûre que tout fonctionne bien.

Lancez cette commande, puis acceptez l’installation du package storybook, puis un peu plus tard dans l’installation, installez le plugin ESLint recommandé si vous le souhaitez.

npx storybook@7 init

À la fin de l’installation un onglet s’ouvre par défaut à l’adresse localhost:6006. Si vous avez besoin de relancer Storybook plus tard, faites cette commande :

npm run storybook

Si vous n’avez pas l’habitude de Storybook je vous conseille de suivre le tour proposé par Storybook au premier lancement du projet (préparez-vous à recevoir une myriade de confettis colorés). Je vous suggère aussi de suivre cet article du blog qui présente les bases pour construire un Design System avec React et qui aborde donc Storybook.

Nous avons donc pour l’instant 3 stories : un bouton, un header et une page complète. Nous allons utiliser dans ce tuto le composant le plus simple : le bouton. Mais accrochez-vous parce qu’il va falloir faire un peu de CI...

Auteur(s)

Alice Fauquet

Frontend developer

Voir le profil

Vous souhaitez en savoir plus sur le sujet ?
Organisons un échange !

Notre équipe d'experts répond à toutes vos questions.

Nous contacter

Découvrez nos autres contenus dans le même thème

À la découverte de l'Anchor positioning API

La nouvelle Anchor positioning API en CSS

L'Anchor positioning API est arrivée en CSS depuis quelques mois. Expérimentale et uniquement disponible à ce jour pour les navigateurs basés sur Chromium, elle est tout de même très intéressante pour lier des éléments entre eux et répondre en CSS à des problématiques qui ne pouvaient se résoudre qu'en JavaScript.