테스트 타입 선택하기 — 엔드투엔드와 컴포넌트 테스트

테스트 타입 선택하기 — 엔드투엔드와 컴포넌트 테스트

테스트를 시작하면서 가장 먼저 내리는 결정 중 하나가 '어떤 종류의 테스트를 만들지'예요. Cypress는 **엔드투엔드(end-to-end)**와 컴포넌트(component) 두 종류를 제공하는데, 각각 장점과 고려할 점이 달라요. 결국 좋은 앱은 두 종류를 함께 쓰게 되지만, 지금 상황에서는 어느 쪽부터 시작해야 할지 헷갈릴 수 있죠. 이 글에서는 각 테스트 타입이 무엇을 검증하고, 언제 적합한지 정리해 볼게요.

출처: Cypress 공식 문서 — End-to-end and component testing in Cypress (Testing Types) 원본 URL: https://docs.cypress.io/app/core-concepts/testing-types

엔드투엔드(E2E) 테스팅

엔드투엔드 테스팅은 웹 브라우저부터 애플리케이션의 백엔드까지, 그리고 서드파티 API·서비스와의 통합까지 테스트하는 기법이에요. 앱 전체가 하나의 조화로운 덩어리로 동작하는지 확인하기에 아주 좋습니다.

Cypress는 엔드투엔드 테스트를 실제 브라우저에서 사용자가 앱과 상호작용하는 방식 그대로 실행해요. URL을 방문하고, 콘텐츠를 보고, 링크와 버튼을 클릭하는 식이죠. 이렇게 하면 테스트와 사용자 경험이 동일해지도록 보장할 수 있어요.

엔드투엔드 테스트는 앱을 개발하는 개발자뿐 아니라, 전문 테스트 엔지니어나 출시 준비를 검증하는 QA 팀이 작성할 수 있습니다. 테스트는 실제 사용자가 취할 단계를 흉내 내는 API로 코드에 작성돼요.

장점으로는 앱이 통합적으로 동작하는지 확인하고, 테스트가 사용자 경험과 일치하며, 통합 테스트로도 쓰일 수 있다는 점이 있어요. 다만 단점도 분명합니다. 설정·실행·유지보수가 더 어렵고, CI에 테스트 인프라를 준비해야 하며, 특정 시나리오는 준비에 더 많은 작업이 필요하죠. 특히 인증이나 구매 같은 핵심 워크플로 검증, 여러 화면을 거쳐 데이터가 저장되고 표시되는지 확인, 배포 전 스모크 테스트·시스템 체크 같은 곳에 주로 쓰입니다.

컴포넌트 테스팅

현대 웹 프레임워크는 앱을 컴포넌트라는 작은 논리 단위로 쪼개서 만들게 해줘요. 컴포넌트는 버튼처럼 아주 작을 수도, 회원가입 폼처럼 더 복잡할 수도 있어요. 이런 컴포넌트는 본질적으로 테스트하기 쉽기 때문에, 여기에 Cypress 컴포넌트 테스팅이 들어옵니다.

컴포넌트 테스트는 엔드투엔드와 달리 URL로 전체 앱을 불러오는 대신, 컴포넌트 하나를 '마운트'해서 그 자체로 테스트해요. 이렇게 하면 컴포넌트의 기능만 집중해서, 더 큰 앱의 일부로 테스트할 때의 여러 잡음에서 벗어날 수 있죠.

보통 컴포넌트 테스트는 그 컴포넌트를 만드는 개발자가 작성합니다. 테스트 코드가 컴포넌트 코드 옆에 함께 살고, 컴포넌트를 만들면서 동시에 테스트하는 경우가 흔해요. 다만 한 가지 꼭 기억해야 할 점은, 컴포넌트 테스트가 모두 통과한다고 해서 앱이 제대로 동작한다는 뜻은 아니라는 거예요. 컴포넌트 테스트는 앱의 각 계층이 서로 잘 맞물려 있는지는 보장하지 못합니다. 그래서 잘 테스트된 앱은 두 종류를 조합해, 각 테스트가 가장 잘하는 일을 맡게 하는 거예요.

컴포넌트 테스트는 격리된 상태에서 테스트하기 쉽고, 빠르고 안정적이며, 특정 시나리오를 만들기 쉽고, 외부 시스템에 의존하지 않는다는 장점이 있어요. 반면 전체 앱 품질을 보장하지 못하고, 외부 API·서비스로의 호출을 다루지 않으며, 보통 컴포넌트를 만드는 개발자가 작성하게 됩니다. 날짜 피커가 여러 시나리오에서 잘 동작하는지, 폼이 입력에 따라 특정 섹션을 보였다 숨겼다 하는지, 디자인 시스템에서 나온 컴포넌트를 테스트하거나 컴포넌트에 묶이지 않은 로직(유닛 테스트처럼)을 테스트할 때 잘 어울려요.

테스트 타입 비교

더 알아보기

• Cypress 공식 문서 — Testing Types (원문)
• Writing Your First End-to-end Test
• Testing Your Components with Cypress