Tests Storybook et régression visuelle
Exécutez des fonctions play pour les tests d’interaction et intégrez Chromatic pour comparer les différences visuelles.
Tests Storybook et régression visuelle est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.
Pourquoi effectuer des vérifications dans Storybook ?
Storybook 7+ fournit @storybook/test pour la vérification des interactions (fonctions play) et s’intègre à Chromatic pour la vérification automatisée des régressions visuelles, le tout sans quitter l’explorateur de composants.
Fonctions play
Une fonction play s’exécute après le rendu du récit et simule les interactions utilisateur à l’aide des utilitaires de @storybook/test. Les résultats apparaissent dans le panneau Interactions.
import { within, userEvent, expect } from '@storybook/test';
export const FilledForm: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await userEvent.type(canvas.getByLabelText('Email'), 'test@example.com');
await userEvent.click(canvas.getByRole('button', { name: /submit/i }));
await expect(canvas.getByText('Success!')).toBeInTheDocument();
},
};Vérifications dans les fonctions play
Utilisez expect de @storybook/test (réexporté depuis Vitest/Jest) dans les fonctions play pour vérifier l’état du composant après les interactions.
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const button = canvas.getByRole('button', { name: /add/i });
await userEvent.click(button);
await expect(canvas.getByText('1 item')).toBeInTheDocument();
await userEvent.click(button);
await expect(canvas.getByText('2 items')).toBeInTheDocument();
},Exécuter les vérifications des récits avec l’exécuteur Storybook
Le paquet @storybook/test-runner transforme chaque récit doté d’une fonction play en vérification Jest. Exécutez-les dans CI avec une seule commande.
# Install
npm install @storybook/test-runner --save-dev
# package.json
"test-storybook": "test-storybook"
# Run (requires Storybook to be running)
npm run test-storybookQu’est-ce que la vérification des régressions visuelles ?
La vérification des régressions visuelles crée des instantanés des captures d’écran des composants et signale les différences au niveau des pixels entre les validations. Chromatic, Playwright et Percy sont des outils populaires.
Configurer Chromatic
Chromatic est le service cloud officiel de Storybook pour la vérification visuelle. Envoyez vos récits, et Chromatic compare les captures d’écran à la référence précédente.
# Install
npm install chromatic --save-dev
# Run (get project token from chromatic.com)
npx chromatic --project-token=<YOUR_TOKEN>
# CI: add to GitHub Actions
- name: Chromatic
run: npx chromatic --project-token=${{ secrets.CHROMATIC_TOKEN }}Examiner les changements visuels
Chromatic affiche une interface de comparaison dans laquelle les personnes chargées de la revue acceptent ou refusent les changements visuels. Les changements acceptés deviennent la nouvelle référence ; les changements refusés bloquent la PR.
Vérification par instantanés avec Storybook
L’exécuteur de vérifications peut également effectuer automatiquement des contrôles d’accessibilité via @storybook/addon-a11y sur chaque récit dans CI.
// .storybook/test-runner.ts
import { checkA11y } from 'axe-playwright';
export default {
async postVisit(page) {
await checkA11y(page, '#storybook-root', {
detailedReport: true,
});
},
};Composition de Storybook
Composez plusieurs Storybooks provenant de dépôts différents en une seule interface — une approche utile pour les systèmes de conception partagés entre plusieurs projets.
// .storybook/main.ts
refs: {
'design-system': {
title: 'Design System',
url: 'https://design-system.example.com',
},
},Vérifier les récits adaptatifs
Utilisez le module de fenêtre d’affichage pour vérifier les récits sur des formats mobile, tablette et bureau. Définissez la fenêtre d’affichage dans les paramètres du récit pour le verrouiller à une taille précise.
export const Mobile: Story = {
parameters: {
viewport: { defaultViewport: 'mobile1' },
},
args: { label: 'Mobile Button' },
};Prévenir les vérifications instables
Évitez les vérifications visuelles instables en utilisant delay dans les fonctions play pour attendre la fin des animations, ou en désactivant globalement les animations dans l’aperçu de Storybook.
// .storybook/preview.ts
export const parameters = {
chromatic: { disableSnapshot: false },
// Disable CSS animations for consistent screenshots
};
// Global CSS for tests:
// * { animation: none !important; transition: none !important; }Rapports de couverture
Exécutez test-storybook --coverage pour générer un rapport de couverture indiquant quelles lignes des composants sont couvertes par les vérifications des fonctions play.
Vérification rapide
Où la fonction play de Storybook exécute-t-elle ses interactions ?
Récapitulatif
Les fonctions play vérifient les interactions des composants dans Storybook à l’aide de @storybook/test. L’exécuteur de vérifications transforme les fonctions play en vérifications Jest pour CI. Chromatic ajoute des instantanés de régression visuelle et signale les changements d’interface au niveau des pixels afin qu’ils soient examinés avant la fusion.
Questions Fréquemment Posées
La leçon « Tests Storybook et régression visuelle » est-elle gratuite ?
Oui — le texte complet de « Tests Storybook et régression visuelle » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Tests Storybook et régression visuelle » ?
Exécutez des fonctions play pour les tests d’interaction et intégrez Chromatic pour comparer les différences visuelles. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer React Academy ?
Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Tests Storybook et régression visuelle » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon React Academy ?
Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Configurer Storybook dans un projet React
- Écrire des stories CSF3
- Arguments, contrôles et module complémentaire Actions
- Tests Storybook et régression visuelle