E2E 테스트

E2E 테스트란?

• End-to-End 끝에서 끝까지 테스트라는 뜻
• 시스템의 시작부터 끝까지 실제 사용자 시나리오처럼 전체 흐름을 테스트
• 유닛 테스트(Unit Test)가 함수 단위, 통합 테스트가(Integration Test)가 모듈 단위라면 E2E 테스트는 사용자 관점에서 앱이 진짜로 동작하는지 확인

예시

로그인 기능이라면
1. 사용자가 로그인 페이지를 연다.
2. 이메일과 비밀번호를 입력한다.
3. 로그인 버튼을 클릭한다.
4. 로그인 후 마이페이지로 이동한다.
5. 마이페이지의 사용자 정보가 올바른지 확인한다.

=> 전체 플로우를 자동화된 스크립트로 테스트

E2E 테스트의 목적

• 실제 사용자의 행동과 최대한 가깝게 시뮬레이션하여 배포 전에 큰 오류를 잡아내는 것이 목적
• 백엔드, 프론트엔드, DB, 외부 API까지 전체 시스템이 유기적으로 잘 동작하는지 확인

대표적인 E2E 테스트 도구

• 웹 : Cypress, Playwright, Selenium
• 모바일 : Appium
• React 기반 프로젝트라면 Cypress나 Playwright가 많이 쓰임

E2E 테스트의 장단점

장점

• 사용자 경험 관점에서 신뢰성 있는 테스트 가능
• 통합된 시스템 문제를 발견하기 유리
• 실제 브라우저에서 동작을 검증

단점

• 실행 속도가 느림(전체 흐름을 돌려야해서)
• 테스트 유지보수가 번거로움
• flaky test(가끔 실패하는 불안정한 테스트) 가능성

테스트의 종류와 역할

1. 유닛 테스트 (Unit Test)

• 가장 작은 단위(함수, 메서드, 클래스)를 독립적으로 테스트
• 외부 의존성(DB, 네트워크 등)은 모킹(mock)하거나 분리
• 로직이 예상대로 동작하는지 빠르게 확인
• 개발 초기부터 버그를 쉽게 잡을 수 있음
• 대표 도구 : Jest, Vitest

ex) add(1,2)함수가 3을 반환하는지 확인, React 컴포넌트의 props 변화에 따른 출력 확인

2. 통합 테스트 (Integration Test)

• 여러 모듈/컴포넌트가 함께 동작할 때의 연결 상태를 테스트
• DB, API, 외부 서비스와 실제로 통신 가능
• 모듈 간 인터페이스가 잘 연결되어 있는지 확인
• 단위는 맞아도 연결이 깨지면 전체 기능이 깨질 수 있어서 꼭 필요
• 대표 도구 : Jest, Supertest

ex) 회원가입 API 호출 시 DB에 유저가 잘 저장되는지 확인, 프론트엔드가 백엔드로부터 받은 데이터를 올바르게 화면에 뿌려주는지 확인

3. E2E 테스트 (End-to-End Test)

• 시스템의 처음부터 끝까지 실제 사용자가 이용하는 시나리오를 통째로 테스트
• 진짜 브라우저나 앱을 띄워서 사용자와 똑같은 행동을 재현
• 실제 배포 환경과 가장 유사하게 검증 -> 사용자 관점에서 큰 오류 방지
• 시스템 전반의 흐름 보장
• 대표 도구 : Cypress, Playwright

ex) 로그인 -> 게시물 작성 -> 게시물 목록에서 작성한 글 확인 -> 로그아웃까지 한 번에 자동으로 돌리기 , 장바구니 담기 -> 결제 완료 -> 주문 내역 확인

테스트 피라미드란?

• 어떤 테스트를 얼마나 작성해야 하는지 알려주는 베스트 프랙티스
• 아래로 갈 수록 빠르고 작성 비용이 낮음
• 위로 갈수록 느리고 유지보수가 어려움

▲ E2E 테스트
▲▲ 통합 테스트
▲▲▲ 유닛 테스트

=> 유닛 테스트는 자주, E2E는 적게 하는것이 효율