React Academy · Ders

Storybook Testleri ve Görsel Gerileme

Etkileşim testleri için play işlevlerini çalıştırın ve görsel farkları karşılaştırmak üzere Chromatic'i entegre edin.

Storybook Testleri ve Görsel Gerileme, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.

Storybook'ta Neden Test Yapılır?

Storybook 7 ve sonraki sürümleri, etkileşim testleri (oynatma işlevleri) için @storybook/test paketini içerir ve bileşen gezgininden çıkmadan otomatik görsel regresyon testleri için Chromatic ile bütünleşir.

Oynatma İşlevleri

Bir play işlevi, öykü oluşturulduktan sonra çalışır ve @storybook/test yardımcı programları aracılığıyla kullanıcı etkileşimlerini taklit eder. Sonuçlar Interactions panelinde görünür.

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

Oynatma İşlevlerindeki Doğrulamalar

Etkileşimlerden sonra bileşen durumunu doğrulamak için oynatma işlevlerinin içinde Vitest/Jest'ten yeniden dışa aktarılan @storybook/test paketindeki expect işlevini kullanın.

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

Storybook Test Çalıştırıcısıyla Öykü Testlerini Çalıştırma

@storybook/test-runner paketi, oynatma işlevi içeren her öyküyü bir Jest testine dönüştürür. Bunları CI ortamında tek bir komutla çalıştırın.

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

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

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

Görsel Regresyon Testi Nedir?

Görsel regresyon testi, bileşen ekran görüntülerini anlık görüntü olarak kaydeder ve gönderimler arasındaki piksel düzeyindeki farklılıkları işaretler. Chromatic, Playwright ve Percy popüler araçlardır.

Chromatic'i Ayarlama

Chromatic, görsel testler için resmi Storybook bulut hizmetidir. Öyküleri gönderdiğinizde Chromatic, ekran görüntülerini önceki temel görüntüyle karşılaştırır.

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

Görsel Değişiklikleri İnceleme

Chromatic, inceleyenlerin görsel değişiklikleri kabul ettiği veya reddettiği bir fark arayüzü gösterir. Kabul edilen değişiklikler yeni temel görüntü olur; reddedilenler PR'yi engeller.

Storybook ile Anlık Görüntü Testi

Test çalıştırıcısı, her öyküde CI ortamında otomatik olarak @storybook/addon-a11y aracılığıyla erişilebilirlik denetimleri de çalıştırabilir.

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

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

Storybook Birleştirme

Farklı depolardaki birden çok Storybook'u tek bir arayüzde birleştirin; bu, projeler arasında paylaşılan tasarım sistemleri için kullanışlıdır.

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

Duyarlı Öyküleri Test Etme

Öyküleri mobil, tablet ve masaüstü boyutlarında test etmek için görünüm alanı eklentisini kullanın. Bir öyküyü belirli bir boyuta sabitlemek için görünüm alanını öykü parametrelerinde ayarlayın.

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

Kararsız Testleri Önleme

Animasyonların tamamlanmasını beklemek için oynatma işlevlerinde delay kullanarak veya Storybook önizlemesinde animasyonları genel olarak devre dışı bırakarak kararsız görsel testlerden kaçının.

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

Kapsam Raporları

Bileşen satırlarından hangilerinin oynatma işlevi testleri tarafından çalıştırıldığını gösteren bir kapsam raporu oluşturmak için test-storybook --coverage komutunu çalıştırın.

Hızlı Kontrol

Storybook'un oynatma işlevi etkileşimlerini nerede çalıştırır?

Özet

Oynatma işlevleri, @storybook/test kullanarak Storybook içindeki bileşen etkileşimlerini test eder. Test çalıştırıcısı, CI için oynatma işlevlerini Jest testlerine dönüştürür. Chromatic, görsel regresyon anlık görüntüleri ekleyerek birleştirme öncesinde incelenmesi gereken piksel düzeyindeki arayüz değişikliklerini işaretler.

Sıkça Sorulan Sorular

“Storybook Testleri ve Görsel Gerileme” dersi ücretsiz mi?

Evet — “Storybook Testleri ve Görsel Gerileme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.

“Storybook Testleri ve Görsel Gerileme” dersinde ne öğreneceğim?

Etkileşim testleri için play işlevlerini çalıştırın ve görsel farkları karşılaştırmak üzere Chromatic'i entegre edin. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

React Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Storybook Testleri ve Görsel Gerileme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu React Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← React Academy Sayfasına Dön