useParams()でidがundefinedになるテストエラーの解決法【React Router】

Posted at 2025-05-09

はじめに

React Router を使ったコンポーネントでよく出るエラーのひとつが、
useParams() で URL パラメータが取得できずにテストが落ちることでした。

ここでは、そのエラーの原因と解決方法を整理します。

React Router のフックのひとつです。

const { id } = useParams();

このように書くと、/user/abc123 のようなURLから id: "abc123" を取得できる。
ただしRouterコンテキストの中でしか使えないです。

今回は useParams を使って、URLの id に応じたユーザーの個人ページ（例：/taro → 太郎さんのページ）を表示するために使いました。

TypeError: Cannot read properties of undefined (reading 'id')

このエラーは useParams() で id を読み込もうとしているのに、
テスト中は id を持つ URL パラメータが渡っていない状態で起こりました。

const { id } = useParams();

上記のようなコードがあるコンポーネント（例：Card）を
テストでこう書いて失敗しました。

render(<Card />); // ← URL が無い

useParams() は React Router のコンテキストが無いと動きません。

テストでは MemoryRouter を使って、仮の URL を与えます。

React Router の Router の一種で、
テスト中に「仮のURL履歴」を作るためのラッパーです

MemoryRouter に渡す initialEntries は、仮のURL履歴を表す配列です。

このように書くと、最初にアクセスしているURLを「/taro」と仮定してくれます。
これにより、useParams() が正しく id: "taro" を返すようになります。

render(
  <MemoryRouter initialEntries={["/taro"]}>
    <Routes>
      <Route path="/:id" element={<Card />} />
    </Routes>
  </MemoryRouter>
);

これで useParams() が { id: "taro" } を返せるようになります。