Jest로 시작하는 React 테스팅 - 실전 가이드

1. Jest란?

Jest는 Facebook에서 개발한 JavaScript 테스팅 프레임워크입니다. 특히 React 애플리케이션 테스트에 최적화되어 있으며, 다음과 같은 특징을 가지고 있습니다:

1.1 Jest의 주요 특징

• Zero configuration으로 빠른 설정
• Snapshot testing 지원
• 격리된 테스트 환경
• 강력한 Mocking 시스템
• 병렬 테스트 실행

2. 테스트 환경 구축하기

2.1 기본 설정

npm install -D jest @testing-library/react @testing-library/jest-dom

2.2 Jest 설정 파일

// jest.config.cjs
module.exports = {
  preset: "ts-jest",
  testEnvironment: "jest-environment-jsdom",
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1"
  }
};

3. 컴포넌트 테스트 작성하기

3.1 기본적인 렌더링 테스트

describe('Component', () => {
  it('renders correctly', () => {
    render(<Component />);
    expect(screen.getByText('Hello')).toBeInTheDocument();
  });
});

3.2 사용자 상호작용 테스트

it('handles user interaction', () => {
  render(<Button>Click me</Button>);
  fireEvent.click(screen.getByText('Click me'));
  expect(screen.getByText('Clicked!')).toBeInTheDocument();
});

4. 비동기 작업 테스트