テスト実行時に"Error: Uncaught [Error: useNavigate() may be used only in the context of a <Router> component.]" が出る

はじめに

現在React学習の一環でアプリ作成を行っています。
一通り機能を実装し終えたので、テスト実行時に遭遇したエラーについて書きます。

問題

テストを実行したときに、Error: Uncaught [Error: useNavigate() may be used only in the context of a component.] と出力されました。
和訳すると useNavigate() フックを使用するときは コンポーネントの内側で使ってね。 ということです。

解決方法

ルーティング処理を実行しているファイルだけでなく、テストファイルも<Router>または<BrowserRouter>で囲んであげる

※<Router>と<BrowserRouter>の違いは下記に説明があります。

修正後のコード

Router.tsx

import { BrowserRouter, Route, Routes } from "react-router-dom";

import { UserCard } from "./UserCard";
import { RegisterCard } from "./RegisterCard";
import { memo } from "react";
import { SearchCard } from "./SearchCard";

export const Router = memo(() => {
  console.log("Router component is rendering");
  return (
    <BrowserRouter>
      <Routes>
        <Route path="*" element={<SearchCard />} />
        <Route path="/:loginID" element={<UserCard />} />
        <Route path="/cards/register" element={<RegisterCard />} />
      </Routes>
    </BrowserRouter>
  );
});

test.tsx

test("ユーザー名が表示されていること", async () => {
  //<BrowserRouter>で囲む
  render(
    <BrowserRouter>
      <SearchCard />
    </BrowserRouter>
  );
  await waitFor(() => {
    const userName = screen.getByTestId("userName");
    expect(userName).toBeInTheDocument();
  });
});