0Pricing
React Academy · Lektion

Storybook-Tests und visuelle Regression

Führen Sie Play-Funktionen für Interaktionstests aus und integrieren Sie Chromatic für visuelle Vergleiche.

Storybook-Tests und visuelle Regression ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum in Storybook testen?

Storybook 7+ wird mit @storybook/test für Interaktionstests (Play-Funktionen) ausgeliefert und lässt sich für automatisierte visuelle Regressionstests mit Chromatic integrieren – und das alles, ohne den Komponenten-Explorer zu verlassen.

Play-Funktionen

Eine play-Funktion wird ausgeführt, nachdem die Story gerendert wurde, und simuliert mithilfe der Dienstprogramme aus @storybook/test Benutzerinteraktionen. Die Ergebnisse werden im Interactions-Panel angezeigt.

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();
  },
};

Assertions in Play-Funktionen

Verwenden Sie expect aus @storybook/test (re-exportiert aus Vitest/Jest) innerhalb von Play-Funktionen, um den Komponentenstatus nach Interaktionen zu überprüfen.

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();
},

Story-Tests mit dem Storybook Test Runner ausführen

Das Paket @storybook/test-runner wandelt jede Story mit einer Play-Funktion in einen Jest-Test um. Führen Sie die Tests in der CI mit einem einzigen Befehl aus.

# Install
npm install @storybook/test-runner --save-dev

# package.json
"test-storybook": "test-storybook"

# Run (requires Storybook to be running)
npm run test-storybook

Was sind visuelle Regressionstests?

Bei visuellen Regressionstests werden Screenshots von Komponenten erstellt und Unterschiede auf Pixelebene zwischen Commits erkannt. Chromatic, Playwright und Percy sind beliebte Tools dafür.

Chromatic einrichten

Chromatic ist die offizielle Storybook-Cloud für visuelle Tests. Übertragen Sie Ihre Stories, und Chromatic vergleicht die Screenshots mit der vorherigen Basisreferenz.

# 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 }}

Visuelle Änderungen überprüfen

Chromatic zeigt eine Diff-Oberfläche, auf der Reviewer visuelle Änderungen akzeptieren oder ablehnen können. Akzeptierte Änderungen werden zur neuen Basisreferenz; abgelehnte Änderungen blockieren den PR.

Snapshot-Tests mit Storybook

Der Test Runner kann außerdem mithilfe von @storybook/addon-a11y automatisch in der CI für jede Story Barrierefreiheitsprüfungen ausführen.

// .storybook/test-runner.ts
import { checkA11y } from 'axe-playwright';

export default {
  async postVisit(page) {
    await checkA11y(page, '#storybook-root', {
      detailedReport: true,
    });
  },
};

Storybook-Komposition

Kombinieren Sie mehrere Storybooks aus verschiedenen Repositories in einer gemeinsamen Oberfläche – nützlich für Designsysteme, die über mehrere Projekte hinweg verwendet werden.

// .storybook/main.ts
refs: {
  'design-system': {
    title: 'Design System',
    url: 'https://design-system.example.com',
  },
},

Responsive Stories testen

Verwenden Sie das Viewport-Addon, um Stories in den Größen für Mobilgeräte, Tablets und Desktop zu testen. Legen Sie den Viewport in den Story-Parametern fest, um eine Story auf eine bestimmte Größe zu beschränken.

export const Mobile: Story = {
  parameters: {
    viewport: { defaultViewport: 'mobile1' },
  },
  args: { label: 'Mobile Button' },
};

Flaky Tests vermeiden

Vermeiden Sie instabile visuelle Tests, indem Sie in Play-Funktionen delay verwenden, um auf Animationen zu warten, oder Animationen global in der Storybook-Vorschau deaktivieren.

// .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; }

Coverage-Berichte

Führen Sie test-storybook --coverage aus, um einen Coverage-Bericht zu erstellen. Er zeigt, welche Komponenten-Zeilen durch Tests mit Play-Funktionen ausgeführt werden.

Kurztest

Wo führt die Play-Funktion von Storybook ihre Interaktionen aus?

Zusammenfassung

Mit Play-Funktionen testen Sie Komponenteninteraktionen innerhalb von Storybook mithilfe von @storybook/test. Der Test Runner wandelt Play-Funktionen für die CI in Jest-Tests um. Chromatic ergänzt visuelle Regressions-Snapshots und kennzeichnet Änderungen an der UI auf Pixelebene zur Überprüfung vor dem Zusammenführen.

Häufig gestellte Fragen

Ist die Lektion „Storybook-Tests und visuelle Regression“ kostenlos?

Ja — der vollständige Text von „Storybook-Tests und visuelle Regression“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Storybook-Tests und visuelle Regression“?

Führen Sie Play-Funktionen für Interaktionstests aus und integrieren Sie Chromatic für visuelle Vergleiche. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um React Academy zu starten?

Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Storybook-Tests und visuelle Regression“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?

Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Storybook in einem React-Projekt einrichten
  2. CSF3-Stories schreiben
  3. Args, Controls und das Actions-Addon
  4. Storybook-Tests und visuelle Regression
← Zurück zu React Academy