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

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