Storybookのテストとビジュアルリグレッション

Storybook でテストする理由

Play 関数

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 関数でのアサーション

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 Runner でのストーリーテストの実行

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

カバレッジレポート

クイックチェック

まとめ