Jest

🎯 Jest의 핵심 특징
✅ 장점:
Zero Config: 설정 없이 바로 사용 가능
Snapshot Testing: UI 변경사항 자동 감지
Mocking: 외부 의존성 쉽게 모킹
Coverage: 코드 커버리지 자동 측정
Parallel: 테스트 병렬 실행
Watch Mode: 파일 변경 시 자동 재테스트
❌ 단점:
느린 실행: 대규모 테스트 시 속도 저하
메모리 사용량: 많은 테스트 시 메모리 부족
복잡한 설정: Next.js 등과 연동 시 설정 복잡

 

 

🎯 Mock 파일 모킹이란?
1️⃣ 정의
실제 파일을 가짜 파일로 대체하는 테스트 기법
Jest 환경에서 브라우저 파일 처리를 위한 방법
테스트 속도 향상과 오류 방지를 위한 기법

 

모킹의 기본값은 undefined

// 모킹하지 않은 함수의 기본값
const mockFn = jest.fn();
console.log(mockFn()); // undefined

// 모킹하지 않은 객체의 기본값
const mockObj = {};
console.log(mockObj.someMethod); // undefined

 

📊 Mock 파일 모킹의 효과

✅ 오류 방지

✅ 테스트 속도 향상:
실제 파일 로딩 없음: 빠른 실행
메모리 사용량 감소: 파일 크기만큼 절약

✅ 모든 파일 타입 지원

 

테스트 내용:

성능 테스트
- 이미지 슬라이드 성능 (2000ms 이내)
- 반응형 렌더링 성능 (1500ms 이내)  
- 컴포넌트 마운트/언마운트 성능 (1000ms 이내)
- 이미지 로딩 성능 (3000ms 이내)

기능 테스트
- 컴포넌트 렌더링 확인
- 사용자 인터랙션 테스트

 

package.json 스크립트

{
  "test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest",
  "test:watch": "cross-env NODE_OPTIONS=--experimental-vm-modules jest --watch",
  "test:coverage": "cross-env NODE_OPTIONS=--experimental-vm-modules jest --coverage"
}

cross-env: 크로스 플랫폼 환경 변수 설정
NODE_OPTIONS=--experimental-vm-modules: ES 모듈 지원

 

Jest의 역할과 기능

✅ 1. 단위 테스트 (Unit Testing)

// 컴포넌트 개별 테스트
test('컴포넌트가 올바르게 렌더링된다', () => {
  render(<Home />);
  expect(screen.getByText('Welcome')).toBeInTheDocument();
});

 

✅ 2. 통합 테스트 (Integration Testing)

// 여러 컴포넌트 간 상호작용 테스트
test('사용자 인터랙션이 올바르게 작동한다', async () => {
  render(<Home />);
  fireEvent.click(screen.getByRole('button'));
  await waitFor(() => {
    expect(screen.getByText('결과')).toBeInTheDocument();
  });
});

 

✅ 3. 성능 테스트 (Performance Testing)

// 렌더링 시간 측정
const measurePerformance = (fn) => {
  const start = performance.now();
  fn();
  const end = performance.now();
  return end - start;
};

 

✅ 4. 모킹 (Mocking)

// 외부 의존성 모킹
jest.mock('@/utils/supabase/client', () => ({
  createClient: jest.fn(() => ({
    from: jest.fn(() => ({
      select: jest.fn(() => ({
        order: jest.fn(() => ({
          limit: jest.fn(() => ({
            range: jest.fn(() => ({
              then: jest.fn((callback) => {
                // 가짜 데이터 반환
                return Promise.resolve({ data: mockPosts, error: null });
              })
            }))
          }))
        }))
      }))
    }))
  }))
}));