10.1 E2E 테스트란

프런트렌드에서 E2E 테스트는 브라우저를 사용할 수 있기 때문에 실제 애플리케이션에 가까운 테스트가 가능하다. 브라우저 고유의 API를 사용하는 상황이나 화면을 이동하며 테스트해야 하는 상황에 안성맞춤이다. 일반적으로 E2E 테스트 프레임워크로 테스트를 실시할 때는 다음 상황을 구분하지 않고 E2E 테스트라고 한다.

• 브라우저 고유 기능과 연동된 UI 테스트
• 데이터베이스 및 하위 시스템과 연동된 E2E 테스트

E2E 테스트는 무엇을 테스트할지 목적을 명확히 세우는 것이 중요하다. 실제 애플리케이션은 DB 서버나 외부 저장소 서비스와 연결된다. E2E 테스트에서는 이 시스템들을 포함한 전체 구조에서 얼마나 실제와 유사한 상황을 재현할 것인지가 중요한 기준점이 된다.

10.1.1 브라우저 고유 기능과 연동한 UI 테스트

웹 애플리케이션은 브라우저 고유 기능을 사용한다. 다음과 같은 상황들은 jsdom에서 제대로 테스트를 할 수 없다.

• 화면 간의 이동
• 화면 크기를 측정해서 실행되는 로직
• CSS의 미디어 쿼리를 사용한 반응형 처리
• 스크롤 위치에 따른 이벤트 발생
• 쿠키나 로컬 저장소 등에 데이터를 저장

jest와 jsdom으로 목 객체를 만들어서 테스트 할 수 있지만 브라우저로 실제 상황과 최대한 유사하게 테스트하고 싶다면 UI 테스트를 하자.

10.1.2 데이터베이스 및 서브 시스템과 연동한 E2E 테스트

일반적으로 웹 애플리케이션은 DB 서버나 외부 시스템과 연동하여 다음과 같은 기능을 제공한다. 최대한 실제와 유사하게 재현해 검증하는 테스트를 E2E 테스트라고 한다. E2E 테스트 프레임워크는 UI 자동화 기능으로 실제 애플리케이션을 브라우저 너머에서 조작한다.

• 데이터베이스 서버와 연동하여 데이터를 불러오거나 저장한다.
• 외부 저장소 서비스와 연동하여 이미지 등을 업로드한다.