[Frontend] Mock이란

목차 (OPEN)

• 📦 Mock이란
• 💡 Mock을 사용하는 이유
• 🔧 Mock과 관련된 용어들

 

 

📦 Mock이란

Mock (모의 객체)란 테스트 환경에서

실제 객체의 동작을 흉내 낸 가짜 객체를 의미한다.

 

이는 테스트 대상이 아닌 외부 의존성을 제어하거나 대체함으로써

테스트를 더 쉽고 안정적으로 진행할 수 있도록 도와준다.

 

예를 들면, 아래와 같은 상황에서 Mock을 사용할 수 있다.

 

1️⃣ API 요청을 실제로 보내지 않고, 미리 정해둔 응답을 흉내내고 싶을 때

// userService.ts
export const fetchUser = async () => {
  const res = await fetch('/api/user');
  return res.json();
};

 

fetchUser() 라는 함수는 서버에 요청해서 사용자 정보를 받아오는 함수인데,

테스트를 할 때마다 실제 서버에 요청함녀 느리고, 서버가 없으면 에러가 날 것이다.

👉🏻 따라서 fetch를 가짜(mock)로 바꿔치기 해서 미리 정해둔 응답을 보내도록 해줘야 한다.

// userService.test.ts
import { fetchUser } from './userService';

global.fetch = vi.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve({ name: 'ssosso', age: 24 }),
  })
) as jest.Mock;

test('fetchUser가 사용자 데이터를 반환해야 한다', async () => {
  const user = await fetchUser();
  expect(user.name).toBe('ssosso');
});

 

global.fetch = ... 👉🏻 전역에 있는 fetch 함수를 덮어쓰기 해준다.

 

이렇게 해주고 fetchUser()를 실행하면,

우리가 위에서 mock으로 만든 가짜 응답이 돌아오는데,

그 값이 name: ssosso인지 확인해주면 테스트가 완료된다.

---

📌 참고: 왜 global.fetch를 해줘야 할까?

fetchUser() 같은 함수는 내부에서 fetch()를 호출하는데,

테스트 환경에서 실제 fetch를 써버리면,

진짜로 서버에 요청을 보내려고 한다.

 

그런데 서버가 없거나 응답이 느리면,

테스트는 실패하거나 느려지고, 불안정해진다.

 

따라서 우리는 global.fetch = vi.fn(() => Promise.resolve(...)); 를 해줌으로써

테스트 중에는 실제 fetch() 가 실행되지 않고,

우리가 지정한 응답을 즉시 반환하게 해주는 것이다.

 

이때, 브라우저에서는 window.fetch가 fetch 함수이지만,

Node 환경에서는 global.fetch이기 때문에

테스트는 Node 환경에서 돌아가니까 global.fetch를 덮어쓰는 것이다.

 

---

2️⃣ 특정 컴포넌트를 렌더링하지 않고, 단순한 형태로 대체하고 싶을 때

// App.tsx
import LoginPage from '@/pages/login/LoginPage';

export default function App() {
  return <LoginPage />;
}

 

App 컴포넌트는 로그인 페이지를 보여주도록 구성되어 있는데,

실제 LoginPage가 매우 복잡하거나 내부 API 요청, 라우팅 등이 포함되어 있더라도

우리는 내부 동작까지 다 테스트할 필요가 없기 때문에

mock을 활용해서 테스트를 하는 것이다.

// App.test.tsx
jest.mock('@/pages/login/LoginPage', () => {
  const Dummy = () => <div>Mocked Login Page</div>;
  return { __esModule: true, default: Dummy };
});

test('App에 LoginPage가 렌더링되는지 확인', () => {
  render(<App />);
  expect(screen.getByText('Mocked Login Page')).toBeInTheDocument();
});

 

jext.mock() 👉🏻 해당 모듈을 가짜로 대체하겠다는 선언

Dummy 👉🏻 실제 LoginPage 대신 사용할 가짜 컴포넌트

__esModule: true, default: Dummy 👉🏻 ES Module 방식의 default export를 흉내낸 것

 

이렇게 해줌으로써 우리가 테스트할 때는

실제 LoginPage가 렌더링되는 대신에

가짜로 바꾼 Dummy 컴포넌트가 렌더링 되고,

우리는 그 안의 텍스트 "Mocked Login Page"가 나타나는지만 확인하면 된다.

 

---

3️⃣ 복잡한 내부 로직을 생략하고, 예상되는 결과만 지정해서 테스트하고 싶을 때

// calculator.ts
export const complexOperation = (a: number, b: number) => {
  // 내부적으로 매우 복잡한 수학 연산을 수행함
  return a * b + Math.sqrt(a + b);
};

 

complexOperation이 내부적으로 매우 복잡한 수학 연산을 수행한다고 가정하면,

그 결과는 예측하기가 어렵기 때문에 테스트에 사용하기 적합하지 않을 것이다.

 

// component.tsx
import { complexOperation } from './calculator';

export function DisplayResult() {
  const result = complexOperation(2, 3);
  return <div>Result: {result}</div>;
}

 

이 컴포넌트는 실제로 매우 복잡하다고 가정한

complexOperation(2, 3)의 결과를 화면에 보여준다고 하자.

 

// component.test.tsx
jest.mock('./calculator', () => ({
  complexOperation: jest.fn(() => 42), // 결과만 지정
}));

test('결과가 지정된 값으로 표시되는지 확인', () => {
  render(<DisplayResult />);
  expect(screen.getByText('Result: 42')).toBeInTheDocument();
});

 

jest.mock('./calculator', ...) 👉🏻 calculator 모듈 전체를 mocking

complexOperation: jest.fn(() => 42) 👉🏻 실제 함수가 복잡하게 계산하는 걸 막고, 그냥 42라는 값만 반환하도록 바꿔치기 해줌

 

이렇게 변환해주면, 그냥 Result: 42 가 화면에 나타나는지만 확인하면 되기 때문에

실제 연산을 하는 것보다 빠른 테스트가 가능해진다.

---

💡 Mock을 사용하는 이유

✅ 테스트 속도 향상 👉🏻 실제 API 호출 등 느린 작업 없이 테스트 가능

✅ 안정성 확보 👉🏻 외부 시스템 장애나 불안정에 영향을 받지 않음

✅ 독립성 보장 👉🏻 테스트하려는 대상만 집중해서 검증 가능

✅ 실패 원인 추적 용이 👉🏻 진짜 구현과 관계 없이 예측 가능한 결과로 테스트 가능

 

---

🔧 Mock과 관련된 용어들

용어	설명
Stub	특정 함수가 호출되면 정해진 값을 반환하도록 만든 가짜
Spy	함수가 어떻게 호출되었는지를 기록할 수 있는 객체
Mock Function	호출 횟수, 인자, 반환값 등을 자유롭게 설정할 수 있는 가짜 함수
Fake	실제 동작은 하지만 구현이 단순화된 대체 객체