Jest 완벽 가이드 | JavaScript 테스팅·Mocking·Coverage·실전 활용
이 글의 핵심
Jest로 JavaScript 테스트를 구현하는 완벽 가이드. Test Suites, Matchers, Mocking, Coverage, Snapshot Testing까지 실전 예제로 정리. Start now.
이 글의 핵심
Jest로 JavaScript 테스트를 구현하는 완벽 가이드입니다. Test Suites, Matchers, Mocking, Coverage, Snapshot Testing까지 실전 예제로 정리했습니다.
실무 경험 공유: Jest를 도입하면서, 버그가 70% 감소하고 리팩토링이 안전해진 경험을 공유합니다.
들어가며: “테스트 작성이 어려워요”
실무 문제 시나리오
시나리오 1: 테스트 환경 설정이 복잡해요
Mocha, Chai, Sinon 등을 조합해야 합니다. Jest는 All-in-One입니다. 시나리오 2: Mocking이 어려워요
수동 Mock 작성이 번거롭습니다. Jest는 자동 Mocking을 제공합니다. 시나리오 3: 느린 테스트
순차 실행이 느립니다. Jest는 병렬 실행으로 빠릅니다.
1. Jest란?
핵심 특징
Jest는 JavaScript 테스팅 프레임워크입니다. 주요 장점:
- Zero Config: 즉시 사용 가능
- Fast: 병렬 실행
- Snapshot Testing: UI 회귀 테스트
- Mocking: 자동 Mock
- Coverage: 내장 커버리지
2. 설치 및 설정
설치
npm install -D jest @types/jest ts-jestjest.config.js
module.exports = {
preset: 'ts-jest',
testEnvironment: 'node',
roots: ['<rootDir>/src'],
testMatch: ['**/__tests__/**/*.ts', '**/?(*.)+(spec|test).ts'],
collectCoverageFrom: [
'src/**/*.ts',
'!src/**/*.d.ts',
'!src/**/*.test.ts',
],
coverageThreshold: {
global: {
branches: 80,
functions: 80,
lines: 80,
statements: 80,
},
},
};package.json
{
"scripts": {
"test": "jest",
"test:watch": "jest --watch",
"test:coverage": "jest --coverage"
}
}3. 기본 테스트
// src/utils/math.ts
export function add(a: number, b: number): number {
return a + b;
}
export function subtract(a: number, b: number): number {
return a - b;
}
// src/utils/math.test.ts
import { add, subtract } from './math';
describe('Math Utils', () => {
test('add', () => {
expect(add(1, 2)).toBe(3);
expect(add(-1, 1)).toBe(0);
});
test('subtract', () => {
expect(subtract(5, 3)).toBe(2);
expect(subtract(0, 5)).toBe(-5);
});
});4. Matchers
TypeScript/JavaScript 예제 코드입니다.
// 기본
expect(value).toBe(3);
expect(value).toEqual({ name: 'John' });
expect(value).not.toBe(5);
// Truthiness
expect(value).toBeTruthy();
expect(value).toBeFalsy();
expect(value).toBeNull();
expect(value).toBeUndefined();
expect(value).toBeDefined();
// Numbers
expect(value).toBeGreaterThan(3);
expect(value).toBeGreaterThanOrEqual(3);
expect(value).toBeLessThan(5);
expect(value).toBeCloseTo(0.3);
// Strings
expect(value).toMatch(/pattern/);
expect(value).toContain('substring');
// Arrays
expect(array).toContain('item');
expect(array).toHaveLength(3);
// Objects
expect(object).toHaveProperty('key');
expect(object).toMatchObject({ name: 'John' });
// Exceptions
expect(() => fn()).toThrow();
expect(() => fn()).toThrow('Error message');5. 비동기 테스트
Promises
test('async test', async () => {
const data = await fetchData();
expect(data).toEqual({ name: 'John' });
});Callbacks
test('callback test', (done) => {
fetchData((data) => {
expect(data).toEqual({ name: 'John' });
done();
});
});6. Mocking
함수 Mock
const mockFn = jest.fn();
mockFn('arg1', 'arg2');
expect(mockFn).toHaveBeenCalled();
expect(mockFn).toHaveBeenCalledWith('arg1', 'arg2');
expect(mockFn).toHaveBeenCalledTimes(1);
// 리턴값 설정
mockFn.mockReturnValue(42);
mockFn.mockResolvedValue({ name: 'John' });모듈 Mock
// src/services/api.ts
export async function fetchUsers() {
const response = await fetch('/api/users');
return response.json();
}
// src/services/api.test.ts
import { fetchUsers } from './api';
jest.mock('./api');
test('fetchUsers', async () => {
(fetchUsers as jest.Mock).mockResolvedValue([
{ id: 1, name: 'John' },
]);
const users = await fetchUsers();
expect(users).toHaveLength(1);
expect(users[0].name).toBe('John');
});7. Snapshot Testing
TypeScript/JavaScript 예제 코드입니다.
// src/components/Button.test.tsx
import { render } from '@testing-library/react';
import Button from './Button';
test('Button snapshot', () => {
const { container } = render(<Button label="Click me" />);
expect(container).toMatchSnapshot();
});8. Setup & Teardown
describe('Database', () => {
beforeAll(async () => {
await db.connect();
});
afterAll(async () => {
await db.disconnect();
});
beforeEach(async () => {
await db.clear();
});
test('create user', async () => {
const user = await db.user.create({ name: 'John' });
expect(user.name).toBe('John');
});
});9. React Testing Library 통합
npm install -D @testing-library/react @testing-library/jest-dom// src/components/Button.test.tsx
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import Button from './Button';
test('Button renders', () => {
render(<Button label="Click me" />);
expect(screen.getByText('Click me')).toBeInTheDocument();
});
test('Button click', () => {
const handleClick = jest.fn();
render(<Button label="Click me" onClick={handleClick} />);
fireEvent.click(screen.getByText('Click me'));
expect(handleClick).toHaveBeenCalledTimes(1);
});10. Coverage
npm test -- --coverage결과
----------------------|---------|----------|---------|---------|
File | % Stmts | % Branch | % Funcs | % Lines |
----------------------|---------|----------|---------|---------|
All files | 85.71 | 83.33 | 88.89 | 85.71 |
src/utils | 100 | 100 | 100 | 100 |
math.ts | 100 | 100 | 100 | 100 |
src/services | 75 | 66.67 | 80 | 75 |
api.ts | 75 | 66.67 | 80 | 75 |
----------------------|---------|----------|---------|---------|취업·면접과 연결하기
테스트·커버리지·모킹 경험은 품질 문화·TDD 질문으로 이어지기 쉽습니다. 코딩 테스트 완벽 대비 가이드의 학습 루틴과, 면접에서 말하는 법은 기술 면접 완벽 대비 가이드를 함께 보세요.
정리 및 체크리스트
핵심 요약
- Jest: JavaScript 테스팅 프레임워크
- Zero Config: 즉시 사용 가능
- Fast: 병렬 실행
- Mocking: 자동 Mock
- Snapshot Testing: UI 회귀 테스트
- Coverage: 내장 커버리지
구현 체크리스트
- Jest 설치
- 기본 테스트 작성
- Matchers 활용
- 비동기 테스트
- Mocking 구현
- Snapshot Testing
- Coverage 확인
- CI/CD 통합
같이 보면 좋은 글
- Vitest 완벽 가이드
- React Testing Library 가이드
- Cypress 완벽 가이드
이 글에서 다루는 키워드
Jest, Testing, JavaScript, TypeScript, Unit Test, Mocking, Coverage
내부 동작과 핵심 메커니즘
이 글의 주제는 「Jest 완벽 가이드 | JavaScript 테스팅·Mocking·Coverage·실전 활용」입니다. 앞선 튜토리얼을 구현·런타임 관점에서 다시 압축합니다. 시스템·런타임 경계(스케줄링, I/O, 메모리, 동시성)를 기준으로 “입력이 어디서 검증되고, 핵심 연산이 어디서 일어나며, 부작용(I/O·네트워크·디스크)·동시성이 어디서 터지는가”를 한 장면으로 그리면 장애 분석이 빨라집니다.
처리 파이프라인(개념도)
flowchart TD A[입력·요청·이벤트] --> B[파싱·검증·디코딩] B --> C[핵심 연산·상태 전이] C --> D[부작용: I/O·네트워크·동시성] D --> E[결과·관측·저장]
경계에서의 지연·실패(시퀀스 관점)
sequenceDiagram participant C as 클라이언트/호출자 participant B as 경계(프로세스·런타임·게이트웨이) participant D as 의존성(외부 API·DB·큐) C->>B: 요청/이벤트 B->>D: 조회·쓰기·RPC D-->>B: 지연·부분 실패·재시도 가능 B-->>C: 응답 또는 오류(코드·상관 ID)
알고리즘·프로토콜·리소스 관점 체크포인트
- 불변 조건(Invariant): 각 단계가 만족해야 하는 조건(버퍼 경계, 프로토콜 상태, 트랜잭션 격리, 파일 디스크립터 상한)을 문장으로 적어 두면 디버깅 비용이 줄어듭니다.
- 결정성: 동일 입력에 동일 출력이 보장되는 순수 층과, 시간·네트워크·스레드 스케줄에 의해 달라질 수 있는 층을 분리해야 테스트와 장애 분석이 쉬워집니다.
- 경계 비용: 직렬화/역직렬화, 문자 인코딩, syscall 횟수, 락 경합, GC·할당, 캐시 미스처럼 누적 비용을 의심 목록에 넣습니다.
- 백프레셔: 생산자가 소비자보다 빠를 때(소켓 버퍼, 큐 깊이, 스트림) 어디서 어떤 신호로 속도를 줄일지 정의합니다.
프로덕션 운영 패턴
실서비스에서는 기능과 함께 관측·배포·보안·비용·규제가 동시에 요구됩니다.
| 영역 | 운영 관점 질문 |
|---|---|
| 관측성 | 요청 단위 상관 ID, 에러율/지연 분위수(p95/p99), 의존성 타임아웃·재시도가 대시보드에 보이는가 |
| 안전성 | 입력 검증·권한·비밀·감사 로그가 코드 경로마다 일관적인가 |
| 신뢰성 | 재시도는 멱등 연산에만 적용되는가, 서킷 브레이커·백오프·DLQ가 있는가 |
| 성능 | 캐시 계층·배치 크기·커넥션 풀·인덱스·백프레셔가 데이터 규모에 맞는가 |
| 배포 | 롤백 룬북, 카나리/블루그린, 마이그레이션 호환성·플래그가 문서화되어 있는가 |
| 용량 | 피크 트래픽·디스크·파일 디스크립터·스레드 풀 상한을 주기적으로 검증하는가 |
스테이징은 데이터 양·네트워크 RTT·동시성을 가능한 한 프로덕션에 가깝게 맞추는 것이 재현율을 높입니다.
확장 예시: 엔드투엔드 미니 시나리오
「Jest 완벽 가이드 | JavaScript 테스팅·Mocking·Coverage·실전 활용」을 실제 배포·운영 흐름으로 옮긴 체크리스트형 시나리오입니다. 도메인에 맞게 단계 이름만 바꿔 적용할 수 있습니다.
- 입력 계약 고정: 스키마·버전·최대 페이로드·타임아웃·에러 코드 표를 API 또는 이벤트 경계에 둔다.
- 핵심 경로 계측: 요청 ID, 단계별 지연, 외부 호출 결과 코드를 한 화면(로그+메트릭+트레이스)에서 추적한다.
- 실패 주입: 의존성 타임아웃·5xx·부분 데이터·락 대기를 스테이징에서 재현한다.
- 호환·롤백: 설정/마이그레이션/클라이언트 버전을 되돌릴 수 있는지(또는 피처 플래그) 확인한다.
- 부하 후 검증: 피크 대비 p95/p99, 에러율, 리소스 상한, 알림 임계값이 기대 범위인지 본다.
의사코드 스케치(프레임워크 무관)
handle(request):
ctx = newCorrelationId()
validated = validateSchema(request) // 경계에서 거절
authorize(validated, ctx) // 권한·테넌트
result = domainCore(validated) // 순수에 가까운 규칙
persistOrEmit(result, idempotentKey) // I/O: 멱등·재시도 정책
recordMetrics(ctx, latency, outcome)
return result문제 해결(Troubleshooting)
| 증상 | 가능 원인 | 조치 |
|---|---|---|
| 간헐적 실패 | 레이스, 타임아웃, 외부 의존성 불안정, DNS | 최소 재현 스크립트, 분산 트레이스·로그 상관관계, 재시도·서킷 설정 점검 |
| 성능 저하 | N+1, 동기 I/O, 락 경합, 과도한 직렬화, 캐시 미스 | 프로파일러·APM으로 핫스팟 확인 후 한 가지씩 제거 |
| 메모리 증가 | 캐시 무제한, 구독/리스너 누수, 대용량 버퍼, 커넥션 미반납 | 상한·TTL·힙/FD 스냅샷 비교 |
| 빌드·배포만 실패 | 환경 변수, 권한, 플랫폼 차이, lockfile | CI 로그와 로컬 diff, 런타임·이미지 버전 핀 |
| 설정이 로컬과 다름 | 프로필·시크릿·기본값, 지역 리전 | 단일 소스(예: 스키마 검증된 설정)와 배포 매트릭스 표준화 |
| 데이터 불일치 | 비멱등 재시도, 부분 쓰기, 캐시 무효화 누락 | 멱등 키·아웃박스·트랜잭션 경계 재검토 |
권장 순서: (1) 최소 재현 (2) 최근 변경 범위 축소 (3) 환경·의존성 차이 (4) 관측으로 가설 검증 (5) 수정 후 회귀·부하 테스트.
자주 묻는 질문 (FAQ)
Q. Vitest와 비교하면 어떤가요?
A. Jest가 더 성숙하고 생태계가 큽니다. Vitest는 더 빠르고 Vite와 통합이 좋습니다.
Q. React만 지원하나요?
A. 아니요, Vue, Angular, Node.js 등 모든 JavaScript 프로젝트에서 사용할 수 있습니다.
Q. 느리지 않나요?
A. 병렬 실행과 캐싱으로 빠릅니다.
Q. 프로덕션에서 사용해도 되나요?
A. 네, Facebook, Airbnb 등 대기업에서 사용하고 있습니다.