Test di Storybook e regressione visiva
Esegua le funzioni play per i test di interazione e integri Chromatic per il confronto visivo.
Test di Storybook e regressione visiva è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.
Perché eseguire test in Storybook
Storybook 7+ include @storybook/test per i test delle interazioni (funzioni play) e si integra con Chromatic per i test automatizzati di regressione visiva, tutto senza uscire dall’esploratore dei componenti.
Funzioni play
Una funzione play viene eseguita dopo il rendering della story e simula le interazioni dell’utente tramite le utilità di @storybook/test. I risultati vengono visualizzati nel pannello 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();
},
};Asserzioni nelle funzioni play
Utilizzi expect di @storybook/test (riesportato da Vitest/Jest) all’interno delle funzioni play per verificare lo stato del componente dopo le interazioni.
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();
},Esecuzione dei test delle story con Storybook Test Runner
Il pacchetto @storybook/test-runner converte ogni story con una funzione play in un test Jest. Può eseguirli in CI con un solo comando.
# Install
npm install @storybook/test-runner --save-dev
# package.json
"test-storybook": "test-storybook"
# Run (requires Storybook to be running)
npm run test-storybookChe cos’è il test di regressione visiva
Il test di regressione visiva acquisisce snapshot delle schermate dei componenti e segnala le differenze a livello di pixel tra un commit e l’altro. Chromatic, Playwright e Percy sono strumenti molto diffusi.
Configurazione di Chromatic
Chromatic è il servizio cloud ufficiale di Storybook per i test visivi. Pubblichi le story e Chromatic confronta le schermate con la baseline precedente.
# 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 }}Revisione delle modifiche visive
Chromatic mostra un’interfaccia di confronto in cui i revisori possono accettare o rifiutare le modifiche visive. Le modifiche accettate diventano la nuova baseline; quelle rifiutate bloccano la PR.
Test degli snapshot con Storybook
Il test runner può anche eseguire automaticamente in CI i controlli di accessibilità tramite @storybook/addon-a11y su ogni story.
// .storybook/test-runner.ts
import { checkA11y } from 'axe-playwright';
export default {
async postVisit(page) {
await checkA11y(page, '#storybook-root', {
detailedReport: true,
});
},
};Composizione di Storybook
Componga più Storybook provenienti da repository diversi in un’unica interfaccia: è utile per i design system condivisi tra più progetti.
// .storybook/main.ts
refs: {
'design-system': {
title: 'Design System',
url: 'https://design-system.example.com',
},
},Test delle story responsive
Utilizzi l’addon viewport per testare le story alle dimensioni di dispositivi mobili, tablet e desktop. Imposti il viewport nei parametri della story per vincolarla a una dimensione specifica.
export const Mobile: Story = {
parameters: {
viewport: { defaultViewport: 'mobile1' },
},
args: { label: 'Mobile Button' },
};Prevenzione dei test instabili
Eviti test visivi instabili utilizzando delay nelle funzioni play per attendere le animazioni oppure disabilitando globalmente le animazioni nell’anteprima di 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; }Report di copertura
Esegua test-storybook --coverage per generare un report di copertura che mostri quali righe dei componenti vengono esercitate dai test delle funzioni play.
Verifica rapida
Dove esegue le proprie interazioni la funzione play di Storybook?
Riepilogo
Le funzioni play testano le interazioni dei componenti all’interno di Storybook utilizzando @storybook/test. Il test runner converte le funzioni play in test Jest per la CI. Chromatic aggiunge snapshot di regressione visiva e segnala le modifiche dell’interfaccia a livello di pixel affinché vengano esaminate prima del merge.
Domande Frequenti
La lezione «Test di Storybook e regressione visiva» è gratuita?
Sì — il testo completo di «Test di Storybook e regressione visiva» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.
Cosa imparerò in «Test di Storybook e regressione visiva»?
Esegua le funzioni play per i test di interazione e integri Chromatic per il confronto visivo. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare React Academy?
Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Test di Storybook e regressione visiva»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione React Academy?
Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Configurazione di Storybook in un progetto React
- Scrittura di storie CSF3
- Args, Controls e addon Actions
- Test di Storybook e regressione visiva