【next-router-mock】Storybookでnext/routerをモックする方法

前提条件

• 手段としては、storybook-addon-next-routerというstorybookのアドオンも提供されているようですが、今回は、next-router-mockを利用したやり方を紹介しています。

依存関係

• next: v14
• react: v18
• @storybook/nextjs: v8
• next-router-mock: ^0.9.7

結論

next-router-mockを使って、next/routerをモックする
https://www.npmjs.com/package/next-router-mock#usage-with-storybook

main.ts

// ... 省略 ...
webpackFinal: async (config) => {
  config.resolve!.alias = {
    // ... 省略 ...
    'next/router': 'next-router-mock', // ここにライブラリのモックを追加
  }
  return config
},
// ... 省略 ...

以上、すごく簡単です！

今回next/routerをモックした背景

storybookのPlay functionでインタラクションテストを行っていました。
そこで、URLパラメータを扱うコンポーネントを持っており、パラメータのステータス監視を行っていました。

sample.tsx

import { useRouter } from 'next/router'

// ... 省略 ...

const router = useRouter()

// ... 省略 ...

useEffect(() => {
    if (router.isReady) {
      // パラメータ保持された時の処理
    }
  }, [router.isReady])

// ... 省略 ...

上記のようなコンポーネントをStorybookのPlay functionでテストするときに、以下のようなエラーが発生したため、モックを行う必要があります。

発生したエラーメッセージ

Cannot read properties of undefined (reading 'isReady')

さいごに

今回はnext-router-mockを用いてStorybookで扱うnext/routerをモックする方法を紹介しました。
利用バージョンや環境によって最適なモック方法は異なるかと思いますが、私が開発を進めていた環境ではテストでjestを使っており、そこでのモックにも利用していたnext-router-mockをstorybookでも利用する形で採用しました。

参考にした記事

https://storybook.js.org/addons/storybook-addon-next-router
https://panda-program.com/posts/nextjs-storybook-typescript-errors