storybook v8でnext/navigationをモックする

概要

next.js v13から導入されたapp routerのnext/navagitionのフックなどをstorybookでモークするやり方をメモする

詳細

next/navigationのusePathnameフックを利用するコンポーネントのstoryを作ることを例としてする

1. /.storybook/preview.tsにapp routerである設定を入れる

const preview: Preview = {
  parameters: {
    nextjs: {
      appDirectory: true,
    },
    ...,
  },
};

2. storybookファイル「/components/Hoge/index.stories.tsx」にnextjsのparameterを設定する

export const Default: Story = {
  parameters: {
    nextjs: {
      navigation: {
        pathname: '/hoge',
      },
    },
  },
};

参考記事

• storybookオフィシャルdocs