[TDD] 프론트엔드 테스팅 3편: React Testing Library(RTL) Mocking Spying 🧪

🎭 Mocking 및 Spying: 테스트에서 가짜 데이터와 동작을 조작하는 법

테스트에서 Mocking과 Spying은 필수적인 개념입니다. 특히, 외부 API 요청, 데이터베이스 호출, 의존성 있는 함수 등의 실제 동작을 대체하여 테스트를 수행할 수 있도록 도와줍니다.

---

📌 1. Mocking이란?

Mocking은 특정 함수나 모듈의 동작을 가짜(mock)로 대체하는 기술입니다.

• ✔️ 외부 API 호출 없이 테스트 가능
• ✔️ 실제 데이터베이스가 없어도 비즈니스 로직 테스트 가능
• ✔️ 실행 시간을 줄이고, 테스트의 신뢰성 향상

Mocking 예제: Jest를 활용한 API 요청 Mocking

import { render, screen } from "@testing-library/react";
import axios from "axios";
import UserList from "../UserList";  // 가정: 유저 목록을 불러오는 컴포넌트
import { act } from "react-dom/test-utils";

jest.mock("axios"); // axios 모듈을 Mock 처리

test("API에서 유저 데이터를 가져와야 한다", async () => {
  axios.get.mockResolvedValue({ data: [{ id: 1, name: "Alice" }] }); // 가짜 응답 설정

  await act(async () => {
    render(<UserList />);
  });

  expect(await screen.findByText("Alice")).toBeInTheDocument();
});

• ✅ jest.mock("axios"): axios 라이브러리를 Mock 처리하여 실제 요청을 보내지 않음
• ✅ mockResolvedValue(): axios.get()이 성공적으로 데이터를 반환하도록 설정
• ✅ await act(): 비동기 데이터 요청 후 UI가 업데이트되도록 처리
• ✅ screen.findByText(): 비동기 요소를 기다렸다가 검증

---

📌 2. Spying이란?

Spying은 특정 함수가 어떻게 호출되었는지 추적하는 기술입니다.

• ✔️ 특정 함수가 몇 번 호출되었는지 확인
• ✔️ 함수가 어떤 인자를 받았는지 검증
• ✔️ 특정 로직이 실행되었는지 확인

Spying 예제: Jest.spyOn()을 활용한 함수 감시

import { render, screen, fireEvent } from "@testing-library/react";
import LoginForm from "../LoginForm";

test("로그인 버튼을 클릭하면 handleSubmit이 호출되어야 한다", () => {
  const handleSubmit = jest.fn(); // 가짜 함수(Mock Function) 생성

  render(<LoginForm onSubmit={handleSubmit} />);

  const button = screen.getByRole("button", { name: "로그인" });
  fireEvent.click(button);

  expect(handleSubmit).toHaveBeenCalledTimes(1); // 함수가 1번 호출되었는지 확인
});

• ✅ jest.fn(): 가짜 함수 생성 (Mock Function)
• ✅ fireEvent.click(): 버튼 클릭 시 이벤트 발생
• ✅ expect(handleSubmit).toHaveBeenCalledTimes(1): handleSubmit이 1번 호출되었는지 확인

---

📌 3. Mocking과 Spying의 차이점

개념	설명	예제
Mocking	특정 모듈이나 함수를 가짜로 대체하여 테스트를 수행	jest.mock("axios")
Spying	함수의 호출 여부 및 인자를 추적하는 기법	jest.spyOn(console, "log")

---

📌 4. 다양한 Mocking 예제들

1️⃣ 특정 함수의 반환값을 변경하기 (Mock Implementation)

const mockFn = jest.fn(() => "Hello, Jest!");

console.log(mockFn()); // "Hello, Jest!"
expect(mockFn).toHaveBeenCalled(); // ✅ 호출되었는지 검증

 

• ✔️ jest.fn(() => "Hello, Jest!") → 함수가 호출될 때 "Hello, Jest!" 반환

2️⃣ 여러 번 호출될 경우 다른 값 반환하기

const mockFn = jest.fn()
  .mockReturnValueOnce(10)
  .mockReturnValueOnce(20)
  .mockReturnValue(30);

console.log(mockFn()); // 10
console.log(mockFn()); // 20
console.log(mockFn()); // 30
console.log(mockFn()); // 30

• ✔️ mockReturnValueOnce() → 첫 번째, 두 번째 호출에서 각각 10, 20 반환
• ✔️ 이후 호출에서는 mockReturnValue(30)의 값이 지속적으로 반환됨

3️⃣ 특정 모듈을 Mocking 하기

jest.mock("../utils", () => ({
  add: jest.fn(() => 42),
  subtract: jest.fn(() => 10),
}));

import { add, subtract } from "../utils";

test("Mock된 add 함수 테스트", () => {
  expect(add()).toBe(42); // ✅ add()가 항상 42 반환
});

test("Mock된 subtract 함수 테스트", () => {
  expect(subtract()).toBe(10); // ✅ subtract()가 항상 10 반환
});

• ✔️ 특정 모듈 내 함수들을 Mock 처리하여 고정된 값을 반환

---

📌 5. Spying 활용법

1️⃣ 특정 메서드가 호출되었는지 추적하기

const consoleSpy = jest.spyOn(console, "log");

console.log("테스트 메시지");

expect(consoleSpy).toHaveBeenCalledWith("테스트 메시지"); // ✅ console.log() 호출 확인

• ✔️ jest.spyOn(console, "log") → console.log()가 호출되었는지 추적

2️⃣ 원래 동작을 유지하면서 호출 여부 추적하기

const originalFn = jest.spyOn(Math, "random");

console.log(Math.random()); // 실제 Math.random() 호출
expect(originalFn).toHaveBeenCalled(); // ✅ 호출 여부 확인

• ✔️ jest.spyOn()을 사용하여 기존 동작을 유지하면서 함수의 호출 여부만 검증

3️⃣ 특정 메서드의 동작을 가로채기 (Mock Implementation 적용)

const spy = jest.spyOn(Math, "random").mockReturnValue(0.5);

console.log(Math.random()); // 항상 0.5 반환
expect(spy).toHaveBeenCalled();

• ✔️ 원래 Math.random()은 0~1 사이의 난수를 반환하지만, mockReturnValue(0.5)를 적용하여 항상 0.5 반환

---

📌 6. Mocking 및 Spying 모범 사례

✅ 불필요한 Mocking을 하지 말 것

• 예: 네이티브 함수(setTimeout, console.log)는 가능하면 Mocking하지 않기

✅ 의존성이 높은 외부 API는 반드시 Mocking

• API 호출 시 실제 네트워크 요청이 아니라 jest.mock()을 사용하여 테스트 환경에서 수행

✅ Spy는 원래 동작을 유지하는 경우에만 사용

• 예: console.log의 호출 여부를 확인하고 싶다면 Spy, 원하는 값을 반환하려면 Mocking

---

📌 7. 결론: Jest에서 Mocking & Spying을 잘 활용하자!

✔️ jest.mock()을 사용하면 특정 모듈을 Mock 처리하여 테스트할 수 있다.

✔️ jest.fn()을 활용하면 특정 함수의 반환값을 제어할 수 있다.

✔️ jest.spyOn()을 이용해 특정 함수의 호출 여부와 인자를 추적할 수 있다.

✔️ 외부 API 요청을 Mocking하면 네트워크 없이 테스트 가능하며, 더 신뢰성 있는 테스트가 가능하다.

 

🌷 전설의 개발자가 되어봅시당! 🌷 🚀