오늘은 프론트엔드 개발자라면 누구나 한 번쯤 고민해봤을 테스트 자동화에 대해 이야기해볼게. 코드 한 줄 고칠 때마다 "혹시 다른 데 깨진 거 아니야?" 하면서 온갖 페이지를 손으로 직접 클릭하며 테스트하던 시절, 다들 있잖아? 이제 그 비효율에서 벗어나 실무에서 진짜 쓰이는 테스트 전략을 세워보자고.
1. 빠르고 확실한 로직 검증, Vitest와 RTL
우선 가장 기본이 되는 건 **단위 테스트(Unit Test)**야. 요즘은 Vitest와 React Testing Library(RTL) 조합을 정말 많이 쓰거든. 이 조합의 가장 큰 장점은 압도적인 속도야.
가상 돔(jsdom) 위에서 컴포넌트를 렌더링하고 유저 이벤트를 시뮬레이션하기 때문에, 몇 초 만에 수백 개의 테스트를 돌릴 수 있지. 비즈니스 로직이 복잡한 유틸 함수나, UI의 개별 상태 변화를 검증할 때 아주 유용해. 하지만 진짜 브라우저 환경이 아니라서 레이아웃이 깨지거나 브라우저 특유의 버그는 잡아내지 못한다는 한계가 있어.
2. 진짜 유저의 흐름을 쫓는 Playwright E2E 테스트
단위 테스트의 한계를 보완해 주는 게 바로 E2E(End-to-End) 테스트야. 여기선 요즘 대세인 Playwright를 강력하게 추천해. Chromium, Firefox, WebKit 등 실제 브라우저를 직접 띄워서 로그인부터 결제까지의 핵심 유저 시나리오를 그대로 실행해보거든.
network mocking이나 세션 재사용 기능을 활용하면, 로그인 단계를 매번 거치지 않고도 빠르게 테스트를 수행할 수 있어. 진짜 유저가 겪는 환경과 100% 일치하기 때문에 배포 전 최종 안전장치로 이만한 게 없지. 다만, 실행 속도가 느리고 테스트 코드가 깨지기 쉽다는 단점이 있으니 핵심 비즈니스 흐름에만 집중해서 작성하는 게 좋아.
3. 9년 차가 제안하는 현실적인 멀티 레이어 전략
내가 9년 차 프론트엔드 개발자로 일하면서 수많은 프로젝트를 거쳤지만, 모든 코드에 테스트를 짜는 건 불가능에 가깝더라고. 일정은 늘 촉박하니까. 그래서 나는 멀티 레이어(Multi-layered) 전략을 추천해.
- 복잡한 계산이나 비즈니스 로직은
Vitest로 빠르게 유닛 테스트를 작성해봐. - 핵심적인 사용자 경험(예: 회원가입, 장바구니 담기)은
Playwright로 E2E 테스트를 촘촘하게 짜두는 거지. - 최근에는 실제 브라우저에서 개별 컴포넌트를 렌더링해 테스트하는
Playwright Component Testing이나Vitest Browser Mode도 실무에서 유용하게 쓰이고 있으니 참고해두면 좋아.
💡 핵심 정리
- 유닛 테스트(
Vitest+RTL)는 속도가 빠르고 로직 검증에 완벽해.- E2E 테스트(
Playwright)는 실제 브라우저에서 핵심 사용자 시나리오를 검증할 때 필수야.- 멀티 레이어 전략을 세워 리소스 대비 효율이 가장 극대화되는 지점을 찾아봐. 처음부터 완벽한 테스트 코드를 짜려고 하면 금방 지치거든. 가장 자주 깨지는 버그나 가장 중요한 페이지 하나를 정해서 E2E 테스트 딱 한 개부터 시작해봐. 그 작은 시작이 배포 날 너의 퇴근 시간을 앞당겨줄 테니까!