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

스토리북 테스트 실행기로 스토리 테스트 실행

# 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/test-runner.ts
import { checkA11y } from 'axe-playwright';

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

스토리북 조합

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

커버리지 보고서

빠른 확인

복습