프런트엔드 개발의 테스트 범위 (테스트 레벨)

프론트엔드 개발의 테스트 범위는 크게 4가지로 분류한다.

테스트 범위와 목적

테스트 작성법부터 배우면 상황에 맞는 테스트를 작성하는 것이 어렵다. 이런 혼란을 피하려면 먼저 프런트엔드 테스트의 범위와 목적을 이해해야 한다. 범위와 목적을 이해해야 테스트 자동화의 장점까지 누릴 수 있다.

이번 포스팅은 정리하는 차원에서 읽는 것을 권한다. 테스트 작성법을 익히고 다시 읽으면 프런트엔드의 테스트의 전체적인 흐름을 더 잘 이해할 수 있을 것이다.

---

테스트 범위

웹 애플리케이션은 여러 모듈을 조합해 만든다. 한 가지 기능을 구현할 때도 다음과 같이 많은 모듈을 활용한다.

1. 라이브러리가 제공하는 함수

2. 로직을 담당하는 함수

3. UI 관련 함수

4. 웹 API 클라이언트

5. API 서버

6. 데이터베이스 서버

테스트를 작성할 때는 어디부터 어디까지 커버하는 테스트인지 주의해야 한다. 프런트엔드 개발의 테스트 범위(테스트 레벨)는 크게 4개로 분류한다.

1. 정적 분석

타입스크립트나 ESLint 가 제공하는 기능을 활용한다. 각 모듈 내부의 검증 뿐 아니라, 2-3 검증, 3-4 검증 처럼 인접 모듈을 연계해 사용할 때의 문제점도 검증한다.

2. 단위 테스트

한 가지 모듈에 한정하여 해당 모듈이 제공하는 기능을 검증하는 테스트다. 독립된 환경에서 검증하기 때문에 실제로 애플리케이션을 사용할 때는 거의 발생하지 않는 케이스(코너 케이스 corner case) 검증에 적합하다.

3. 통합 테스트

1~4, 2~3 처럼 모듈 조합으로 제공되는 기능을 검증하는 테스트다. 범위가 넓어질수록 효율적인 테스트가 가능하지만 상대적으로 대략적인 검증에 그치게 된다.

4. E2E 테스트

1~4 를 통틀어 헤드리스 브라우저와 UI 자동화 도구를 결합하여 검증하는 테스트다. 가장 광범위한 통합 테스트다. 실제로 애플리케이션을 사용할 때와 가장 유사한 테스트이기도 하다.

---

테스트의 목적

테스트 타입은 테스트 목적에 따라 분류된다. 소프트웨어 테스트 분야에서 많이 알려진 테스트 타입에는 기능 테스트, 비기능 테스트, 화이트박스 테스트, 회귀 테스트가 있다.

테스트 타입은 검증 목적에 맞게 설정해야 하며, 테스트 타입마다 적절한 테스트 도구가 있다. 한 가지 도구 혹은 여러 도구를 조합해 검증하는 경우도 있다. 웹 프런트엔드의 대표적인 테스트 타입을 살펴보자.

1. 기능 테스트 (인터랙션 테스트)

개발된 기능에 문제가 없는지 검증하는 테스트다. 웹 프런트엔드의 대부분 기능은 UI 컴포넌트 조작(인터랙션)에서 시작하기 때문에 인터랙션 테스트가 기능 테스트가 될 때가 많으며, 중요성 또한 높다. 실제 브라우저 API 를 사용하는 것이 중요한 테스트라면 헤드리스 브라우저와 UI 자동화 도구를 사용하는 것이 좋다.

2. 비 기능 테스트(접근성 테스트)

신체적, 정신적 특성에 따른 차이 없이 동등하게 제품을 사용할 수 있는지 검증하는 테스트다. 최근에는 전 세계적으로 웹 접근성 관련 API 가 여러 플랫폼에 추가돼 테스트 자동화를 할 때 객관적으로 검증할 수 있는 환경이 갖춰지고 있다.

3. 회귀 테스트

특정 시점을 기준으로 전후 차이를 비교하여 문제가 있는지 검증하는 테스트다. 웹 프런트엔드는 시각적으로 보이는 UI 컴포넌트를 개발하기 때문에 시각적 회귀 테스트가 중요하다.