"use client";

import React, { useState } from "react";

export const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <>
      <div>Count: {count}</div>
      <button onClick={() => setCount(count + 1)}>+</button>
    </>
  );
};

簡単なコンポーネントを作成

対応するテストを作成

ボタンを押したら1増えるかどうか

import React from "react";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { Counter } from "./Counter";

describe("Counter", () => {
  test("increments count by 1 on button click", async () => {
    render(<Counter />);
    expect(screen.queryByText(/Count: 0/)).toBeInTheDocument();
    const button = screen.getByText("+");
    await userEvent.click(button);
    expect(screen.queryByText(/Count: 1/)).toBeInTheDocument();
  });
});

npm run test

toBeInTheDocumentがないよ！」と怒られる

jest.setup.jsを作成してimportする

import "@testing-library/jest-dom";

// Jestのカスタム設定
/** @type {import('jest').Config} */
const config = {
  // jestがテストを実行する前に読み込むセットアップファイルを指定
  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],  // 追加する
  // Jestがテストを実行する環境を指定
  testEnvironment: "jest-environment-jsdom",
};

フェッチを兼ねたテスト

"use client";

import React, { useState } from "react";

type User = {
  username: string;
  email: string;
};

export const FetchUser = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [user, setUser] = useState<User | undefined>(undefined);

  const fetchUser = async () => {
    setIsLoading(true);
    try {
      const res = await fetch("https://jsonplaceholder.typicode.com/users/1");
      const data = await res.json();
      const user: User = {
        username: data.username,
        email: data.email,
      };
      setUser(user);
    } catch (error) {
      console.error(error);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div>
      <button onClick={fetchUser} disabled={isLoading}>
        get user
      </button>
      {user && (
        <div>
          <p>username: {user.username}</p>
          <p>email: {user.email}</p>
        </div>
      )}
    </div>
  );
};

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { FetchUser } from "./FetchUser";

describe("FetchUser", () => {
  test("fetch user on button click", async () => {
    render(<FetchUser />);
    expect(screen.queryByText("username")).toBeNull();
    const button = screen.getByText("get user");
    await userEvent.click(button);
    // データが表示されるのを待機する
    const username = await screen.findByText("username: dummy user");
    const email = await screen.findByText("email: dummy@example.com");

    expect(username).toBeInTheDocument();
    expect(email).toBeInTheDocument();
  });
});

ReferenceError: fetch is not definedと出る

jest-environment-jsdomにはfetchが含まれていないらしい

import { FetchUser } from "@/components/FetchUser";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";

// fetchのモック関数を定義
const dataMock = () => {
  return new Promise((resolve) => {
    resolve({
      json: async () => ({
        username: "dummy user",
        email: "dummy@example.com",
      }),
    });
  });
};

describe("FetchUser", () => {
  afterAll(() => {
    (global.fetch as jest.Mock).mockClear();
  });
  test("fetch user on button click", async () => {
    global.fetch = jest.fn().mockImplementation(dataMock);
    render(<FetchUser />);
    expect(screen.queryByText("username")).toBeNull();
    const button = screen.getByText("get user");
    await userEvent.click(button);
    // データが表示されるのを待機する
    const username = await screen.findByText("username: dummy user");
    const email = await screen.findByText("email: dummy@example.com");

    expect(username).toBeInTheDocument();
    expect(email).toBeInTheDocument();
  });
});

npm run test

テストが通る

Next.js AppRouterでテストする