【Next.js】swrをReact Testing Libraryでmock化する

useSWRを使用しているコンポーネントのテストコードをReact Testing Libraryで書く際に、useSWRをmock化する必要がありました。

下記のようにしてuseSWRをmock化できました。

"use client";

import useSWR from "swr";

const fetcher = (url: string) => fetch(url).then((r) => r.json());

const Sample = () => {
  const { data, error } = useSWR("http://localhost:3100/api/users", fetcher);

  return <>{data.name}</>;
};

export default Sample;

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

import useSWR from "swr";

jest.mock("swr");

describe("Sample", () => {
  (useSWR as jest.Mock).mockReturnValue({
    data: {
      name: "test",
    },
  });
  test("test", () => {
    render(<Sample />);
    expect(screen.getByText("test")).toBeInTheDocument();
  });
});

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

にほんブログ村