Write Test

규칙: 테스트 이름(describe / test / it 문자열)은 반드시 영어로 작성합니다.

유틸리티 함수 테스트

import { theUtil } from "./theUtil";

describe("theUtil", () => {
  test("should return [expected behavior] given [normal input]", () => {
    expect(theUtil(normalInput)).toBe(expected);
  });

  test("should handle null/undefined input gracefully", () => {
    expect(theUtil(null)).toBe(fallback);
  });

  test("should handle edge cases", () => {
    expect(theUtil(edgeCase)).toBe(edgeExpected);
  });
});

Jotai 아톰 테스트

import { renderHook, act } from "@testing-library/react";
import { useAtom } from "jotai";
import { theAtom } from "./theAtom";

describe("theAtom", () => {
  test("should initialize with default value", () => {
    const { result } = renderHook(() => useAtom(theAtom));
    expect(result.current[0]).toEqual(defaultValue);
  });

  test("should update when setter is called", () => {
    const { result } = renderHook(() => useAtom(theAtom));
    act(() => {
      result.current[1](newValue);
    });
    expect(result.current[0]).toEqual(newValue);
  });
});

API 훅 테스트 (useGetXxx)

import { renderHook, waitFor } from "@testing-library/react";
import { createWrapper } from "../testUtils"; // QueryClient wrapper
import { useGetXxx } from "./useGetXxx";

describe("useGetXxx", () => {
  beforeEach(() => {
    global.fetch = jest.fn();
  });

  afterEach(() => {
    jest.resetAllMocks();
  });

  test("should fetch data with correct endpoint and params", async () => {
    (global.fetch as jest.Mock).mockResolvedValueOnce({
      ok: true,
      json: async () => ({ data: mockData }),
    });

    const { result } = renderHook(() => useGetXxx(params), {
      wrapper: createWrapper(),
    });
    await waitFor(() => expect(result.current.isSuccess).toBe(true));

    expect(global.fetch).toHaveBeenCalledWith(
      expect.stringContaining("/api/expected-endpoint"),
      expect.any(Object),
    );
    expect(result.current.data).toEqual(expectedData);
  });

  test("should not fetch when required params are missing", () => {
    const { result } = renderHook(() => useGetXxx(null), {
      wrapper: createWrapper(),
    });
    expect(result.current.isFetching).toBe(false);
    expect(global.fetch).not.toHaveBeenCalled();
  });

  test("should handle API error response", async () => {
    (global.fetch as jest.Mock).mockResolvedValueOnce({
      ok: false,
      status: 500,
      json: async () => ({ title: "Internal Server Error" }),
    });

    const { result } = renderHook(() => useGetXxx(params), {
      wrapper: createWrapper(),
    });
    await waitFor(() => expect(result.current.isError).toBe(true));
  });
});

라우트 로더 테스트

import { loader } from "./loader";

describe("loader", () => {
  test("should redirect with correct date format when from/to are invalid", async () => {
    const request = new Request(
      "http://localhost/page?from=invalid&to=invalid",
    );
    const response = await loader({ request, params: {} });
    expect(response).toBeInstanceOf(Response); // redirect
  });

  test("should return null for valid date params", async () => {
    const now = Date.now();
    const request = new Request(
      `http://localhost/page?from=${now - 3600000}&to=${now}`,
    );
    const response = await loader({ request, params: {} });
    expect(response).toBeNull();
  });
});

4단계: 커버리지 목표

각 파일에 대해 다음을 커버하는 것을 목표로 합니다:

• 정상 / 해피 패스
• 빈 / null / undefined 입력
• 오류 상태 (API 실패, 잘못된 데이터)
• 경계값 (빈 배열, 최대값)
• 훅의 enabled 조건 (파라미터 없을 때 페칭 안 함)

5단계: 배치 및 등록

• 테스트 파일은 소스와 함께 위치: myHook.ts → myHook.test.ts
• 테스트 통과 확인을 위해 실행: yarn workspace @pinpoint-fe/ui jest path/to/file.test.ts

작성된 테스트와 통과/실패 여부를 보고합니다.