🚀 Jest로 Next.js API 테스트하기 (query-string 삽질)

code-it 심화 과정에서 배운 테스트를 내 프로젝트에 적용 시켜보기로 했다!

핵심이 되는 API 호출에 관한 테스트 코드를 작성하면서 배운 점들을 기록하기로 했다.

📌 목차

1. Jest 테스트의 기본 구조
2. 모킹(Mocking)의 .. 예술
3. 환경 변수 다루기
4. 실전 테스트 코드 작성
5. 주의사항

🧪 Jest 테스트의 기본 구조

테스트 그룹화와 개별 테스트

describe("getProducts", () => {
  it("should fetch featured products, async () => {
     // 테스트 코드 작성
     })
  )}

describe 는 테스트 스위트를 정의하고, it은 개별 테스트 케이스를 나타냅니다.

테스트 생명주기 훅

beforeEach(() => {
  global.fetch = jest.fn();
});
afterEach(() => {
  jest.resetAllmocks();
});

beforeEach는 테스트 전 준비 작업
afterEach는 테스트 후 정리 작업 이다.

테스트 전에 fetch를 모킹하고 afterEach를 통해 모킹을 초기화한다.

이유는 다른 테스트에 영향을 주지 않기 위해서이다.

🎭 모킹(Mocking)의 .. 예술

외부 라이브러리 모킹하기

jest.mock("query-string", () => ({
  stringifyUrl: ({ url, query }: { url: string; query: any }) => {
    const urlObj = new URL(url);
    Object.entries(query).forEach(([key, value]) => {
      if (value !== undefined) {
        urlObj.searchParams.append(key, String(value));
      }
    });
    return urlObj.toString();
  },
}));

나는 query-string을 모킹했다. 처음엔 어떻게 하는지 몰라서 엄청 검색하고 돌아다녔다..
모킹을 해야하는 이유는 테스트 환경을 제어해야하고 외부 의존성을 제거해야 하기 때문이라고 한다.

fetch API 모킹하기

(global.fetch as jest.Mock).mockResolvedValue({
  json: () => Promise.resolve(mockProducts),
});

fetch를 모킹하는 이유는 실제 네트워크의 요청 없이 응답 데이터를 시뮬레이션하고 에러 상황을 테스트 하기 위함이다.

🌍 환경 변수 다루기

const STORE_ID = "필요한 환경 변수";
process.env.NEXT_PUBLIC_API_URL = `http://localhost:3000/api/${STORE_ID}`;

테스트 환경 변수를 설정하는 이유는 테스트 환경 분리와 실제 API와의 혼동을 방지하고 테스트 데이터를 관리하기 위함이다.

💻 실전 테스트 코드 작성

테스트 케이스 설계

it("should fetch featured products", async () => {
  // Given: 테스트 준비
  (global.fetch as jest.Mock).mockResolvedValue({
    json: () => Promise.resolve(mockProducts),
  });

  // When: 테스트 실행
  const result = await getProducts({ isFeatured: true });

  // Then: 결과 검증
  expect(result).toEqual(mockProducts);
  expect(fetch).toHaveBeenCalledWith(
    `http://localhost:3000/api/${STORE_ID}/products?isFeatured=true`,
    expect.any(Object)
  );
});

Given-When-Then 패턴

Given은 테스트 준비 단계
When은 테스트 대상 실행
Then은 결과 검증

주의사항 🍯

• 각 테스트는 독립적으로 실행되어야 한다.
• 상태 공유는 금지한다.
• 사이드 이펙트 주의
• 최소한의 모킹만 사용한다.
• 실제 동작과 유사하게 구현한다.
• 타입 안정성 유지
• 명확한 테스트 이름과 간결한 코드를 작성한다.
• 적절한 주석은 도움이 된다.