生成AI時代のフロントエンドテスト戦略：なぜStorybook 10 + Vitest 4 を選ぶのか

// Button.stories.tsx
// Button コンポーネントの Story 定義ファイル

import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

// play 関数内で使用するテストユーティリティ群
// - userEvent: ユーザー操作（クリック等）のシミュレーション
import { userEvent, within, expect } from '@storybook/test';

// Storybook のメタ情報定義
const meta: Meta = {
  // 対象となるコンポーネント
  component: Button,

  // 全 Story に共通で適用されるデフォルト args
  args: {
    children: 'Click me', // ボタンの表示テキスト
  },

  // Decorator: Story を ThemeProvider でラップする
  // → 実際のアプリケーションと同じテーマコンテキストで描画するため
  decorators: [
    (Story) => (
      
        
      
    ),
  ],
};

export default meta;

// Story 型を Button にバインド
type Story = StoryObj;

/**
 * Primary ボタンの Story
 * - 通常状態の primary variant を表す
 * - play 関数で「クリックでき、フォーカスされ、aria 属性が変化する」ことを検証
 */
export const Primary: Story = {
  args: {
    variant: 'primary', // primary スタイルを指定
  },

  // play: Story 描画後に自動実行されるインタラクションテスト
  play: async ({ canvasElement }) => {
    // Storybook の描画領域（iframe）をクエリスコープとして取得
    const canvas = within(canvasElement);

    // role="button" を持つ要素を取得
    const button = canvas.getByRole('button');

    // ユーザー操作としてクリックを実行
    await userEvent.click(button);

    // クリック後、ボタンがフォーカスされていることを確認
    await expect(button).toHaveFocus();

    // aria-pressed が true になっていることを確認
    // → トグルボタン等のアクセシビリティ要件検証
    await expect(button).toHaveAttribute('aria-pressed', 'true');
  },
};

/**
 * Loading 状態の Story
 * - ボタンが loading 中で操作不可になるケースを表す
 * - progressbar の表示と disabled 状態を検証
 */
export const Loading: Story = {
  args: {
    variant: 'primary',
    loading: true, // ローディング状態を有効化
  },

  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);

    // loading 中はボタンが無効化されていることを確認
    await expect(canvas.getByRole('button')).toBeDisabled();

    // ローディングインジケータ（role="progressbar"）が表示されていることを確認
    await expect(canvas.getByRole('progressbar')).toBeVisible();
  },
};

// Button.test.tsx
import { composeStories } from '@storybook/react';
import { render } from '@testing-library/react';
import * as stories from './Button.stories';

// Storiesから全ての設定（args, decorators, play）が継承される
const { Primary, Loading, Disabled } = composeStories(stories);

describe('Button', () => {
  it('handles click interaction correctly', async () => {
    const { container } = render();

    // play関数がそのまま実行される
    await Primary.play?.({ canvasElement: container });
  });

  it('displays loading state', async () => {
    const { container } = render();
    await Loading.play?.({ canvasElement: container });
  });

  it('can extend with additional assertions', () => {
    const { getByRole } = render();

    // Story定義にない追加の検証も可能
    expect(getByRole('button')).toHaveAttribute('aria-busy', 'true');
  });
});