프론트엔드와 API 통합 테스트 전략

Mock이냐, E2E냐? 당신의 테스트 전략을 점검하라

애플리케이션을 개발할 때, 프론트엔드와 백엔드가 잘 통신하고 있는지 테스트하는 건 아주 중요합니다.
그런데 테스트 방식에는 다양한 전략이 존재하죠.
그중 가장 대표적인 것이 Mock 기반 테스트와 E2E(End-to-End) 테스트입니다.

---

✅ Mock 테스트: 빠르고 단위별로 확인 가능

Mock은 실제 서버를 사용하지 않고, 가짜 데이터를 반환하는 서버나 객체를 통해 테스트하는 방식입니다.

장점

• 빠른 속도: 실제 서버 요청 없이 테스트 가능
• 안정성: 백엔드 변경에 영향받지 않음
• 다양한 예외 상황 쉽게 시뮬레이션 가능 (ex. 500 에러, 응답 지연)

단점

• 실제 API와의 연동은 보장되지 않음
• 프론트와 백엔드의 계약이 어긋나도 모를 수 있음
• 실제 운영 환경과 다른 환경에서 테스트됨

---

✅ E2E 테스트: 사용자 입장에서 진짜처럼 테스트

E2E는 실제 서버에 요청을 보내고, UI에서 결과를 확인하는 통합 테스트입니다.
Cypress, Playwright, Selenium 같은 도구가 대표적입니다.

장점

• 진짜 운영 환경과 가장 유사
• 프론트와 백엔드 연동을 실제처럼 확인
• 사용자의 행동 흐름 전체를 검증 가능

단점

• 느림 (브라우저 띄우고 실제 통신하므로)
• 불안정한 경우가 많아 flaky test로 이어질 수 있음
• 테스트 환경 설정이 복잡하고 유지보수가 어렵다

---

☝️ 어떤 전략을 선택할까?

상황	추천 테스트 방식
API 개발 전, 프론트 먼저 개발 중	✅ Mock 테스트
주요 사용자 시나리오 점검	✅ E2E 테스트
빠르게 UI 변화 확인	✅ Mock 테스트
배포 전 최종 통합 확인	✅ E2E 테스트

 

결론은 두 가지 테스트를 병행하는 것이 이상적입니다.

1. 개발 초기: Mock API로 빠르게 UI 개발
2. 통합 단계: E2E 테스트로 실제 API와의 흐름 확인
3. CI/CD: 핵심 시나리오만 최소한의 E2E 테스트 자동화

---

🛠 실전 예시

Mock 서버 구축 예시

npx json-server --watch mock-data.json --port 3001

E2E 테스트 예시 (Cypress)

describe('할 일 등록 테스트', () => {
  it('할 일을 입력하고 등록하면 목록에 보여야 한다', () => {
    cy.visit('/todos');
    cy.get('input[name="todo"]').type('블로그 포스팅');
    cy.contains('등록').click();
    cy.contains('블로그 포스팅').should('exist');
  });
});

---

🧠 마무리하며

모든 테스트는 비용과 시간이 듭니다.
따라서 ‘완벽한 테스트’보다는, 제품과 팀 상황에 맞는 현실적인 테스트 전략을 설계하는 것이 중요합니다.
Mock과 E2E는 대립하는 개념이 아니라, 서로를 보완하는 도구입니다.