모듈과 API 호출 모킹
jest.mock()으로 ES 모듈을 모킹하고 MSW(Mock Service Worker)로 fetch를 대체하며, 실제 네트워크 호출 없이 외부 데이터에 의존하는 컴포넌트를 테스트합니다.
모듈과 API 호출 모킹은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
모의 처리하는 이유
단위 테스트는 격리되어야 합니다. 실제 API 호출은 느리고 신뢰하기 어려우며 비용이 많이 듭니다. 모의 처리는 의존성을 예측 가능한 응답을 반환하는 제어된 테스트 대역으로 바꿉니다.
jest.mock() — 전체 모듈 모의 처리
jest.mock('module-path')는 전체 모듈을 자동으로 모의 처리된 버전으로 바꿉니다. 모든 내보내기는 jest.fn() 스텁이 됩니다. 반환 값을 설정하려면 mockReturnValue 또는 mockResolvedValue를 호출하십시오.
jest.mock('./api');
import { fetchUser } from './api';
(fetchUser as jest.Mock).mockResolvedValue({ id: 1, name: 'Alice' });
test('renders user name', async () => {
render(<Profile userId="1" />);
await screen.findByText('Alice');
expect(fetchUser).toHaveBeenCalledWith('1');
});jest.fn() — 수동 스텁
jest.fn()은 추적하고 제어할 수 있는 모의 함수를 생성합니다. 콜백 props와 서비스 의존성에 유용합니다.
const onSubmit = jest.fn();
render(<Form onSubmit={onSubmit} />);
await user.click(screen.getByRole('button', { name: /submit/i }));
expect(onSubmit).toHaveBeenCalledOnce();
expect(onSubmit).toHaveBeenCalledWith({ email: 'alice@example.com' });beforeEach 모의 초기화
상태가 새어 나가는 것을 방지하려면 테스트 사이에 모의를 초기화하십시오. beforeEach에서 jest.clearAllMocks()를 사용하십시오.
beforeEach(() => {
jest.clearAllMocks(); // reset call counts and implementations
});
afterAll(() => {
jest.restoreAllMocks(); // restore original implementations
});MSW — Mock Service Worker
MSW는 Service Worker(브라우저) 또는 Node.js 가로채기 기능(테스트)을 사용하여 네트워크 수준에서 실제 fetch/XHR 호출을 가로챕니다. 가짜 응답을 반환하는 요청 처리기를 작성하십시오.
import { setupServer } from 'msw/node';
import { http, HttpResponse } from 'msw';
const server = setupServer(
http.get('/api/users', () => {
return HttpResponse.json([{ id: 1, name: 'Alice' }]);
})
);
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());테스트별 MSW 재정의
특정 테스트 시나리오에 대해 기본 처리기를 재정의하십시오.
test('handles server error', async () => {
server.use(
http.get('/api/users', () => new HttpResponse(null, { status: 500 }))
);
render(<UserList />);
await screen.findByText(/server error/i);
});localStorage 모의 처리
localStorage를 사용하는 테스트에서 Web Storage 메서드를 모의 처리하려면 jest.spyOn을 사용하십시오.
beforeEach(() => {
const store: Record<string, string> = {};
jest.spyOn(Storage.prototype, 'getItem').mockImplementation((key) => store[key] ?? null);
jest.spyOn(Storage.prototype, 'setItem').mockImplementation((key, val) => { store[key] = val; });
});타이머 모의 처리
jest.useFakeTimers()는 setTimeout/setInterval을 Jest가 제어하는 버전으로 바꿉니다. jest.runAllTimers()는 모든 타이머를 빠르게 실행합니다.
jest.useFakeTimers();
test('shows toast for 3 seconds', () => {
render(<Toast message="Saved!" />);
expect(screen.getByText('Saved!')).toBeInTheDocument();
jest.advanceTimersByTime(3000);
expect(screen.queryByText('Saved!')).not.toBeInTheDocument();
});
afterEach(() => jest.useRealTimers());모듈 팩토리 패턴
TypeScript에서는 모의 모듈 팩토리가 올바른 타입을 반환하도록 합니다.
jest.mock('./services/auth', () => ({
login: jest.fn().mockResolvedValue({ token: 'test-token' }),
logout: jest.fn()
}));스냅샷 테스트 — 신중하게 사용하기
스냅샷 테스트는 컴포넌트 출력의 직렬화된 표현을 저장하고, 변경되면 실패합니다. 만들기 쉽지만 불필요한 오탐을 만들 수 있습니다. 안정적인 순수 프레젠테이션 컴포넌트에만 사용하십시오.
빠른 확인
API 모의 처리에서 jest.mock('fetch')보다 MSW가 주는 가장 큰 장점은 무엇입니까?
요약: 모의 처리
jest.mock()은 모듈을 교체합니다. jest.fn()은 추적할 수 있는 스텁을 만듭니다. beforeEach에서 모의 객체를 재설정하십시오. MSW는 네트워크 수준에서 HTTP를 가로채므로 가장 실제에 가까운 모의 처리 방식입니다. 오류 상황에는 테스트마다 server.use() 재정의를 사용하십시오. 시간에 의존하는 코드에는 가짜 타이머를 사용하십시오. 컴포넌트 통합 테스트에는 MSW를 우선 사용하십시오.
AI 튜터와 함께 HTML을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 41
- 레슨
- 163
자주 묻는 질문
“모듈과 API 호출 모킹” 강의는 무료인가요?
네 — “모듈과 API 호출 모킹” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“모듈과 API 호출 모킹”에서 뭘 배우나요?
jest.mock()으로 ES 모듈을 모킹하고 MSW(Mock Service Worker)로 fetch를 대체하며, 실제 네트워크 호출 없이 외부 데이터에 의존하는 컴포넌트를 테스트합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Frontend Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“모듈과 API 호출 모킹” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.