React Academy · Pelajaran

Pengujian Storybook & Regresi Visual

Jalankan fungsi play untuk pengujian interaksi dan integrasikan Chromatic untuk membandingkan tampilan visual.

Pengujian Storybook & Regresi Visual adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.

Mengapa Melakukan Pengujian di Storybook?

Storybook 7+ menyediakan @storybook/test untuk pengujian interaksi (fungsi play) dan terintegrasi dengan Chromatic untuk pengujian regresi visual otomatis—semuanya tanpa meninggalkan penjelajah komponen.

Fungsi play

Fungsi play berjalan setelah cerita dirender dan menyimulasikan interaksi pengguna melalui utilitas @storybook/test. Hasilnya muncul di panel Interaksi.

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

Pernyataan dalam Fungsi play

Gunakan expect dari @storybook/test (diekspor ulang dari Vitest/Jest) di dalam fungsi play untuk membuat pernyataan tentang status komponen setelah interaksi.

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

Menjalankan Pengujian Cerita dengan Storybook Test Runner

Paket @storybook/test-runner mengubah setiap cerita yang memiliki fungsi play menjadi pengujian Jest. Jalankan pengujian tersebut di CI dengan satu perintah.

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

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

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

Apa Itu Pengujian Regresi Visual?

Pengujian regresi visual mengambil snapshot tangkapan layar komponen dan menandai perbedaan hingga tingkat piksel antarcommit. Chromatic, Playwright, dan Percy adalah alat yang populer.

Menyiapkan Chromatic

Chromatic adalah layanan cloud resmi Storybook untuk pengujian visual. Kirim cerita, lalu Chromatic membandingkan tangkapan layar dengan acuan sebelumnya.

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

Meninjau Perubahan Visual

Chromatic menampilkan antarmuka perbandingan tempat peninjau dapat menerima atau menolak perubahan visual. Perubahan yang diterima menjadi acuan baru, sedangkan perubahan yang ditolak memblokir PR.

Pengujian Snapshot dengan Storybook

Pelari pengujian juga dapat menjalankan pemeriksaan aksesibilitas melalui @storybook/addon-a11y pada setiap cerita secara otomatis di CI.

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

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

Komposisi Storybook

Gabungkan beberapa Storybook dari repositori berbeda ke dalam satu antarmuka—berguna untuk sistem desain yang digunakan bersama di berbagai proyek.

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

Menguji Cerita Responsif

Gunakan tambahan viewport untuk menguji cerita pada ukuran seluler, tablet, dan desktop. Tetapkan viewport dalam parameter cerita untuk mengunci cerita pada ukuran tertentu.

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

Mencegah Pengujian Tidak Stabil

Hindari pengujian visual yang tidak stabil dengan menggunakan delay dalam fungsi play untuk menunggu animasi, atau dengan menonaktifkan animasi secara global dalam pratinjau 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; }

Laporan Cakupan

Jalankan test-storybook --coverage untuk membuat laporan cakupan yang menunjukkan baris komponen mana yang dijalankan oleh pengujian fungsi play.

Pemeriksaan Singkat

Di mana fungsi play Storybook menjalankan interaksinya?

Rangkuman

Fungsi play menguji interaksi komponen di dalam Storybook menggunakan @storybook/test. Pelari pengujian mengubah fungsi play menjadi pengujian Jest untuk CI. Chromatic menambahkan snapshot regresi visual dan menandai perubahan UI hingga tingkat piksel untuk ditinjau sebelum penggabungan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pengujian Storybook & Regresi Visual” gratis?

Ya — teks lengkap “Pengujian Storybook & Regresi Visual” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Pengujian Storybook & Regresi Visual”?

Jalankan fungsi play untuk pengujian interaksi dan integrasikan Chromatic untuk membandingkan tampilan visual. Kamu berlatih React Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai React Academy?

Tidak diperlukan pengalaman sebelumnya. React Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Pengujian Storybook & Regresi Visual” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran React Academy ini?

Ya. Setiap pelajaran React Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke React Academy