Pengujian Storybook & Regresi Visual
Jalankan fungsi play untuk ujian interaksi dan integrasikan Chromatic bagi perbandingan visual.
Pengujian Storybook & Regresi Visual ialah pelajaran React Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran React Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Academy merangkumi sejumlah 4 pelajaran.
Mengapakah Membuat Ujian dalam Storybook
Storybook 7+ disertakan dengan @storybook/test untuk ujian interaksi (fungsi main) dan disepadukan dengan Chromatic untuk ujian regresi visual automatik — semuanya tanpa meninggalkan peneroka komponen.
Fungsi Main
Fungsi play dijalankan selepas cerita dipaparkan, dengan mensimulasikan interaksi pengguna melalui utiliti @storybook/test. Hasilnya dipaparkan dalam 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();
},
};Penegasan dalam Fungsi Main
Gunakan expect daripada @storybook/test (dieksport semula daripada Vitest/Jest) dalam fungsi main untuk membuat penegasan terhadap keadaan komponen selepas 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 Ujian Cerita dengan Pelaksana Ujian Storybook
Pakej @storybook/test-runner menukar setiap cerita yang mempunyai fungsi main menjadi ujian Jest. Jalankannya dalam CI dengan satu arahan sahaja.
# Install
npm install @storybook/test-runner --save-dev
# package.json
"test-storybook": "test-storybook"
# Run (requires Storybook to be running)
npm run test-storybookApakah Itu Ujian Regresi Visual
Ujian regresi visual mengambil syot layar komponen dan menandai perbezaan pada aras piksel antara komit. Chromatic, Playwright dan Percy ialah alat yang popular.
Menyediakan Chromatic
Chromatic ialah perkhidmatan awan rasmi Storybook untuk ujian visual. Hantar cerita dan Chromatic akan membandingkan syot layar dengan garis dasar 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 }}Menyemak Perubahan Visual
Chromatic memaparkan antara muka perbandingan yang membolehkan penyemak menerima atau menolak perubahan visual. Perubahan yang diterima menjadi garis dasar baharu; perubahan yang ditolak akan menyekat PR.
Ujian Syot Layar dengan Storybook
Pelaksana ujian juga boleh menjalankan semakan kebolehcapaian melalui @storybook/addon-a11y pada setiap cerita secara automatik dalam 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 daripada repositori yang berbeza ke dalam satu antara muka — berguna untuk sistem reka bentuk yang dikongsi merentas projek.
// .storybook/main.ts
refs: {
'design-system': {
title: 'Design System',
url: 'https://design-system.example.com',
},
},Menguji Cerita Responsif
Gunakan tambahan paparan untuk menguji cerita pada saiz mudah alih, tablet dan komputer meja. Tetapkan paparan dalam parameter cerita untuk mengunci cerita pada saiz tertentu.
export const Mobile: Story = {
parameters: {
viewport: { defaultViewport: 'mobile1' },
},
args: { label: 'Mobile Button' },
};Pencegahan Ujian Tidak Stabil
Elakkan ujian visual yang tidak stabil dengan menggunakan delay dalam fungsi main untuk menunggu animasi, atau dengan menyahaktifkan animasi secara global dalam pratonton 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 Liputan
Jalankan test-storybook --coverage untuk menjana laporan liputan yang menunjukkan baris komponen yang diliputi oleh ujian fungsi main.
Semakan Pantas
Di manakah fungsi main Storybook menjalankan interaksinya?
Imbas Kembali
Fungsi main menguji interaksi komponen dalam Storybook menggunakan @storybook/test. Pelaksana ujian menukar fungsi main menjadi ujian Jest untuk CI. Chromatic menambah syot layar regresi visual dan menandai perubahan antara muka pada aras piksel untuk disemak sebelum penggabungan.
Pelajari React dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 88
- Pelajaran
- 324
Soalan Lazim
Adakah pelajaran “Pengujian Storybook & Regresi Visual” percuma?
Ya — teks penuh “Pengujian Storybook & Regresi Visual” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus React Academy, tingkat taraf kepada CoddyKit PRO. Kursus React Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Pengujian Storybook & Regresi Visual”?
Jalankan fungsi play untuk ujian interaksi dan integrasikan Chromatic bagi perbandingan visual. Anda berlatih React Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan React Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran React Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.
Berapa lamakah pelajaran “Pengujian Storybook & Regresi Visual” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran React Academy ini?
Ya. Setiap pelajaran React Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Menyediakan Storybook dalam Projek React
- Menulis Cerita CSF3
- Args, Kawalan & Tambahan Actions
- Pengujian Storybook & Regresi Visual