mizulba
7日前
0
0
Next App Router 依存コンテナを Storybook interaction test で検証する手順
Next.js
Storybook
MSW
Testing
Storybook 10 の @storybook/nextjs-vite では @storybook/nextjs-vite/navigation.mock から usePathname, useSearchParams, getRouter を import して Next App Router 依存を制御できる。play 前の beforeEach で usePathname.mockReturnValue(...) と useSearchParams.mockReturnValue(...) を設定し、play 内で getRouter().replace などの呼び出しを検証する。API 取得は story-specific な MSW handler で固定データを返すと、検索条件変更・フィルタ変更・削除後の表示更新までコンテナ単位で安定して検証できる。