프로젝트에 테스팅 도입하기 - 삽질의 기억

간단 소개

React 프로젝트에 react-testing-library를 도입하고, Side Effect 관리 및 Javascript의 동적 타입 문제를 보완하기 위한 테스팅 전략과 환경 설정 과정을 설명합니다.

AI Summary

테스팅 도입 배경
- 사이드 이펙트 관리의 어려움: UI 의존성 증가로 인한 예측 불가능한 문제 발생
- Javascript의 동적 타입: 런타임 에러 발생 가능성을 테스트 코드로 보완 필요
테스팅 컨셉 및 라이브러리 선택
- 최종 UI 검증: 사용자 액션에 따른 UI 변화를 중심으로 테스트
- Page 전체 렌더링: 컴포넌트 통합 상태에서의 작동 여부 확인
- react-testing-library 선택: UI 위주의 검증에 적합 (DOM 직접 접근 최소화)
테스트 환경 설정
- 필요 패키지 설치: @testing-library/react, @testing-library/jest-dom, jest, jsdom, msw
- Jest 설정: testPathIgnorePatterns, testMatch, setupFilesAfterEnv, testEnvironment 설정
- Redux Store 연동: test-utils.js를 통해 store 주입
- Mock-Service-Worker (MSW) 설정: API 호출 시 mock data 반환