테스트 코드

결론부터 말하자면, 저는 현재 프로젝트에 Jest부터 도입할 예정입니다. 
이유는 먼저 간단한 유틸 함수와 컴포넌트 테스트부터 시작해 점차 복잡한 UI와 사용자 플로우, 그리고 Vitest, Cypress 등 최신 도구까지 확장해나갈 계획입니다.


목차

테스트 코드의 필요성

테스트의 종류와 도구

프론트엔드 단위 테스트 주요 도구와 방식

 

테스트 코드의 필요성 

테스트 코드는 단순히 "잘 돌아가는지 확인"하는 것 이상의 의미를 가진다.

• 코드 품질 보장: 버그를 미리 발견하고, 코드가 의도대로 동작하는지 검증
• 유지보수 용이성: 코드 변경 시 기존 기능이 깨지지 않았는지 빠르게 확인
• 자동화와 빠른 피드백: 반복적인 검증을 자동화해 실수 감소
• 협업과 문서화: 테스트 케이스는 코드의 의도와 사용법을 명확하게 해줘 팀원과의 협업에 큰 도움
  
  

테스트의 종류와 도구

테스트 종류	설명	대표 도구
유닛 테스트	함수, 컴포넌트 등 작은 단위가 올바르게 동작하는지 검증	Jest, React Testing Library
통합 테스트	여러 컴포넌트/모듈이 함께 동작하는지 검증	Jest, React Testing Library
E2E(종단간) 테스트	실제 사용자처럼 앱 전체 흐름을 시뮬레이션하며 검증	Cypress, Playwright
시각적 테스트	UI가 의도대로 보이는지 확인	Storybook
접근성/브라우저 테스트	다양한 환경에서 정상 동작/접근성 보장 확인	Storybook Addons 등

 

 

프론트엔드 단위 테스트 주요 도구와 방식

1. Jest + React Testing Library

• 설명: React 애플리케이션에서 표준처럼 사용되는 조합
• Jest는 테스트 러너 및 환경을 제공하고, React Testing Library(RTL)는 실제 사용자의 시각에서 컴포넌트를 테스트하게 도와줌
• 대상: 개별 React 컴포넌트, 유틸리티 함수
• 장점
  • React 컴포넌트 테스트에 최적화
  • DOM 기반 테스트로 사용자 관점의 검증 가능
  • 간결한 API와 풍부한 커뮤니티 지원
  • 빠른 실행 속도(밀리초 단위)
  • props/state 변화에 따른 UI 반응 테스트 용이
• 단점
  • 초기 설정이 다소 복잡할 수 있음
  • 복잡한 사용자 상호작용 시뮬레이션에는 한계
  • OpenLayers 등 복잡한 라이브러리 사용 시 모킹 필요

 

2. Cypress Component Testing

• 설명: 실제 브라우저 환경에서 컴포넌트를 렌더링하고 동작을 검증하는 방식
• 장점
  • 실제 브라우저에서 테스트해 정확성 높음
  • 시각적 디버깅이 용이
  • 지도 렌더링 등 복잡한 UI 테스트에 적합
• 단점
  • Jest보다 실행 속도가 느림
  • 설정이 상대적으로 복잡함

3. Storybook + Loki/Chromatic (시각적 테스트)

• 설명: Storybook에서 컴포넌트의 UI를 캡처하고, 이전 스냅샷과 비교해 시각적 변화(레이아웃, 색상, 폰트 등)를 자동으로 검증
• 대상: CSS/레이아웃, 지도 레이어 스타일링, 시설물 표시 방식 등
• 장점
  • UI 변경 감지에 탁월
  • 캔버스 기반 지도 요소의 시각적 검증 가능
• 단점
  • 환경 구성 복잡
  • false positive(의도치 않은 경고) 발생 가능

 

4. Storybook + Interactions

• 설명: Storybook에서 컴포넌트 문서화와 동작 테스트를 동시에 진행 가능
• 장점
  • 문서화와 테스트를 한 번에
  • 다양한 상태와 동작 시나리오 테스트에 유용
• 단점
  • 순수 테스트 도구보다 설정이 복잡
  • 학습 곡선 존재

5. Vitest

• 설명: Vite 기반의 초고속 테스트 러너로, Jest와 유사한 API를 제공
• 장점
  • 실행 속도가 매우 빠름
  • HMR(Hot Module Replacement) 지원
  • Jest와 호환되는 API
• 단점
  • 비교적 최신 도구라 레퍼런스가 적음