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


Utilisation de Chromatic en CI

Nous allons commencer par initialiser notre projet et faire un premier commit.

Utilisez les commandes suivantes pour créer un premier commit sur une branche principale appelée main :

git init git add . git commit -m "init commit" git branch -M main

Ensuite nous allons créer un repo sur Github et y envoyer notre premier commit. Rendez-vous sur cette page https://github.com/new puis créez un repo "chromatic-tuto-elevenlabs". Sur votre terminal, lancez ces commandes (les commandes sont aussi indiquées préremplies sur Github) :

git remote add origin https://github.com/<votre username>/<nom sur repo>.git git push -u origin main

Votre premier commit est maintenant sur Github ! Nous allons désormais passer au moment que vous attendez tous : installer Chromatic !

Nous allons installer Chromatic en devDependency :

npm install -D chromatic

Ensuite, connectez-vous à Chromatic avec votre compte GitHub : https://www.chromatic.com/start. Choisissez l’option Choose from GitHub, choisissez le repo que nous utilisons pour ce tuto puis récupérez et utilisez la ligne de commande sous "Publish your Storybook", elle va nous permettre de faire le lien entre le projet et Chromatic.

À la fin du processus vous trouverez un lien qui vous donnera accès à une version publiée de votre Storybook. Pas mal, non ? Chromatic vous affichera également un token, gardez-le de côté car on va s'en servir dans quelques instants.

C’est très bien mais nous ce qu’on veut c’est utiliser Chromatic ! Il nous reste une dernière étape avant de rentrer dans le vif du sujet : créer une Github Action !

Tout d’abord on a besoin de créer un secret sur Github. Créez le secret CHROMATIC_PROJECT_TOKEN qui contient le token, que vous avez récupéré précédemment. Pour créer un secret vous pouvez suivre cette documentation.

Retournez sur votre IDE, créez un dossier .github/workflows puis un fichier chromatic.yml et collez-y ce template (qu'on peut également retrouver sur le documentation de Chromatic) :

# .github/workflows/chromatic.yml name: "Chromatic" on: push jobs: chromatic: runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v4 with: fetch-depth: 0 - name: Install dependencies run: yarn install --immutable --immutable-cache --check-cache - name: Publish to Chromatic uses: chromaui/action@latest with: projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

Créez un commit et poussez-le sur le repo :

git add . git commit -m "GitHub action setup" git push origin main

Vous pouvez trouver le build dans la pipeline après le push.

Nous allons maintenant voir comment fonctionne Chromatic !

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.