【Next.js】React Testing Libraryでrouter.push()でエラーになる

Next.jsでnext/navigationをインポートしているコンポーネントをReact Testing Libraryでテストを実行したらエラーになりました。

コンポーネント

"use client";

import { useRouter } from "next/navigation";

const Button = () => {
  const router = useRouter();

  return <button onClick={() => router.push("/")}>テスト</button>;
};

export default Button;

テストコード

import "@testing-library/jest-dom";
import Button from "@/components/Button";
import { render, screen } from "@testing-library/react";

describe("Button", () => {
  it("test", () => {
    const button = render(<Button />);
    expect(button).toMatchSnapshot();

    expect(screen.getByText("テスト")).toBeInTheDocument();
  });
});

エラー内容

Error: Uncaught [Error: invariant expected app router to be mounted]

Jestはサーバーサイドで実行されるので、フロント側の機能のuseRouterを使用していたのが原因でした。

エラーを回避するためには、useRouterをモック化する必要があります。

テストコードを下記のように修正するとテストが通るようになりました！

import "@testing-library/jest-dom";
import Button from "@/components/Button";
import { render, screen } from "@testing-library/react";

jest.mock("next/navigation", () => ({
  useRouter() {
    return {
      push: () => {
        return;
      },
    };
  },
}));

describe("Button", () => {
  it("test", () => {
    const button = render(<Button />);
    expect(button).toMatchSnapshot();

    expect(screen.getByText("テスト")).toBeInTheDocument();
  });
});

IT技術ブログ
↓↓「にほんブログ村」のランキングに参加しています。少しでも面白い、参考になったとか思われたらポチッとしていただけると嬉しいです！

にほんブログ村