การทดสอบ Storybook และการถดถอยด้านภาพ

เหตุใดจึงต้องทดสอบใน Storybook

ฟังก์ชันจำลองการโต้ตอบ

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

การตรวจยืนยันในฟังก์ชันจำลองการโต้ตอบ

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

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

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

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

การทดสอบการถดถอยทางภาพคืออะไร

การตั้งค่า Chromatic

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

การตรวจสอบการเปลี่ยนแปลงทางภาพ

การทดสอบด้วยสแนปช็อตใน Storybook

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

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

การประกอบ Storybook

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

การทดสอบสตอรีแบบตอบสนอง

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

การป้องกันการทดสอบไม่เสถียร

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

รายงานความครอบคลุม

ตรวจสอบอย่างรวดเร็ว

สรุปทบทวน