Storybook v9.1.2でインタラクションテストを実装する際、@storybook/testパッケージはv8系しか存在しないため、代わりにstorybook/testモジュールを使用する。

正しいインポート方法:

// ✅ 正しい
import { expect, within, userEvent, waitFor } from 'storybook/test'

// ❌ 間違い（v8系のパッケージ）
import { expect, within, userEvent, waitFor } from '@storybook/test'

MSWとの統合設定:

// .storybook/preview.ts
import { initialize, mswLoader } from 'msw-storybook-addon'
import { handlers } from '../src/mocks/handlers'

initialize({
  onUnhandledRequest: 'bypass',
  serviceWorker: {
    url: '/mockServiceWorker.js'
  }
})

const preview: Preview = {
  parameters: {
    msw: {
      handlers: handlers
    }
  },
  loaders: [mswLoader],
}

Play関数でのインタラクションテスト例:

play: async ({ canvasElement }) => {
  const canvas = within(canvasElement)
  
  // ユーザー操作のシミュレーション
  const button = await canvas.findByRole('button')
  await userEvent.click(button)
  
  // アサーション
  await waitFor(() => {
    expect(canvas.getByText('Success')).toBeInTheDocument()
  })
}

Storybook v9.1.2には@vitest/spy、@testing-library/jest-dom、@testing-library/user-eventが組み込まれており、追加パッケージのインストールは不要。これにより、--legacy-peer-depsを使用せずにクリーンな依存関係を維持できる。