Testowanie w Storybook i regresja wizualna
Uruchamianie funkcji play do testów interakcji oraz integracja z Chromatic w celu porównywania wizualnego.
Testowanie w Storybook i regresja wizualna to bezpłatna lekcja React Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.
Dlaczego testować w Storybook?
Storybook 7+ zawiera pakiet @storybook/test do testowania interakcji (funkcje play) i integruje się z Chromatic na potrzeby automatycznych testów regresji wizualnej — wszystko to bez opuszczania eksploratora komponentów.
Funkcje play
Funkcja play jest uruchamiana po wyrenderowaniu story i symuluje interakcje użytkownika za pomocą narzędzi z @storybook/test. Wyniki pojawiają się w panelu 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();
},
};Asercje w funkcjach play
W funkcjach play używaj expect z @storybook/test (reeksportowanego z Vitest/Jest), aby sprawdzać stan komponentu po interakcjach.
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();
},Uruchamianie testów story za pomocą Storybook Test Runner
Pakiet @storybook/test-runner przekształca każdą story zawierającą funkcję play w test Jest. Można uruchomić wszystkie testy w CI za pomocą jednego polecenia.
# Install
npm install @storybook/test-runner --save-dev
# package.json
"test-storybook": "test-storybook"
# Run (requires Storybook to be running)
npm run test-storybookCzym jest testowanie regresji wizualnej?
Testowanie regresji wizualnej tworzy migawki zrzutów ekranu komponentów i wykrywa różnice na poziomie pikseli między kolejnymi commitami. Popularnymi narzędziami są Chromatic, Playwright i Percy.
Konfigurowanie Chromatic
Chromatic to oficjalna usługa chmurowa Storybook do testów wizualnych. Wypchnij story, a Chromatic porówna zrzuty ekranu z poprzednią bazą odniesienia.
# 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 }}Przeglądanie zmian wizualnych
Chromatic wyświetla interfejs porównywania zmian, w którym osoby sprawdzające mogą zaakceptować lub odrzucić zmiany wizualne. Zaakceptowane zmiany stają się nową bazą odniesienia, a odrzucone blokują PR.
Testowanie migawek w Storybook
Test runner może także automatycznie uruchamiać w CI kontrole dostępności za pomocą @storybook/addon-a11y dla każdej story.
// .storybook/test-runner.ts
import { checkA11y } from 'axe-playwright';
export default {
async postVisit(page) {
await checkA11y(page, '#storybook-root', {
detailedReport: true,
});
},
};Kompozycja Storybooków
Połącz wiele Storybooków z różnych repozytoriów w jeden interfejs — jest to przydatne w przypadku systemów projektowych współdzielonych między projektami.
// .storybook/main.ts
refs: {
'design-system': {
title: 'Design System',
url: 'https://design-system.example.com',
},
},Testowanie responsywnych story
Użyj dodatku viewport, aby testować story w rozmiarach telefonu, tabletu i komputera. Ustaw viewport w parametrach story, aby przypisać ją do konkretnego rozmiaru.
export const Mobile: Story = {
parameters: {
viewport: { defaultViewport: 'mobile1' },
},
args: { label: 'Mobile Button' },
};Zapobieganie niestabilnym testom
Unikaj niestabilnych testów wizualnych, używając delay w funkcjach play do oczekiwania na zakończenie animacji albo globalnie wyłączając animacje w podglądzie Storybooka.
// .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; }Raporty pokrycia
Uruchom test-storybook --coverage, aby wygenerować raport pokrycia pokazujący, które wiersze kodu komponentów są wykonywane przez testy funkcji play.
Szybkie sprawdzenie
Gdzie funkcja play Storybooka uruchamia swoje interakcje?
Podsumowanie
Funkcje play testują interakcje komponentów wewnątrz Storybooka za pomocą @storybook/test. Test runner przekształca funkcje play w testy Jest na potrzeby CI. Chromatic dodaje migawki do testów regresji wizualnej i oznacza zmiany interfejsu na poziomie pikseli do sprawdzenia przed scaleniem.
Często zadawane pytania
Czy lekcja „Testowanie w Storybook i regresja wizualna” jest bezpłatna?
Tak — pełny tekst „Testowanie w Storybook i regresja wizualna” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Testowanie w Storybook i regresja wizualna”?
Uruchamianie funkcji play do testów interakcji oraz integracja z Chromatic w celu porównywania wizualnego. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć React Academy?
Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Testowanie w Storybook i regresja wizualna”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?
Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Konfiguracja Storybook w projekcie React
- Pisanie stories w CSF3
- Args, Controls i dodatek Actions
- Testowanie w Storybook i regresja wizualna