jestでReact Routerを使っているテストでuseNavigate() may be used only in the context of a <Router> componentエラーがでる

はじめに

React Router v6を使っているテストで困ったのでまとめます

問題

以下のテストを実行したところエラーが出ました

import { BrowserRouter } from "react-router-dom";
import App from "../App";
import { render, screen } from "@testing-library/react";

describe("title", () => {
  it("should render title", () => {
    render(<App />)
    expect(screen.getByText("デジタル名刺アプリ")).toBeInTheDocument();
  });
});

jest  useNavigate() may be used only in the context of a <Router> component.

解決方法

renderのときにBrowserRouterで囲んであげました

import { BrowserRouter } from "react-router-dom";
import App from "../App";
import { render, screen } from "@testing-library/react";

describe("title", () => {
  it("should render title", () => {
    render(
      <BrowserRouter>
        <App />
      </BrowserRouter>
    );
    expect(screen.getByText("デジタル名刺アプリ")).toBeInTheDocument();
  });
});

おわりに

久しぶりに書くと忘れるものですね