[프론트엔드 테스트] 테스트를 작성해야 하는 이유/테스트 범위/테스트 목적

책 참고

테스트를 작성해야 하는 이유

• 버그 해결 : 버그가 있는 서비스는 이미지를 추락한다. 한 번 추락한 이미지를 회복 시키는 것은 많은 시간과 비용이 필요하다. 이 때, 테스트 코드가 예상하지 못한 버그를 조기에 발견해 서비스 이미지를 지켜주는 역할을한다.
• 유지보수 : 작성한 테스트 코드가 있다면 기존 기능에 문제가 생겼는지 반복적으로 확인할 수 있어서 적극적으로 리팩터링을 진행할 수 있다.
  • 리팩터링 : 결과의 변경없이 코드의 구조를 재조정한다.
• 품질 향상 :어떤 구현 코드의 테스트 작성이 어렵다면 해당 코드가 너무 많은 역할을 한다는 신호이다. 일부 책임을 더 작은 부분으로 나눌 수 있는지 재검토해 더 좋은 코드를 작성할 수 있다.
• 웹 접근성 : 신체적, 정신적 특성에 따른 차이 없이 동등하게 정보에 접근할 수 있게 한다. 테스트 코드를 작성하면 자연스럽게 스크린 리더 등의 보조 기기를 사용하는 사용자들에게도 콘텐츠가 인식될 수 있는지 알 수 있다.
• 원활한 협업 :테스트 코드는 글로 작성된 문서보다 우수한 사양서이다. 각 테스트에는 제목이 있어 테스트할 구현 코드가 어떤 기능을 제공하고, 어떤 방식으로 작동하는지 파악할 수 있다.
• 회귀 테스트 줄이기 : 모듈을 더 작게 나누면 한 모듈이 가진 책임은 줄어들고 테스트도 쉬워진다.
  • 회귀 테스트 : 원시 코드의 결함을 수정한 후 제대로 수정되었는지 확인하는 확정테스트 다음, 또 한번의 테스트를 거쳐가야하는 것으르 회귀 테스트라고 한다.
  • 한 모듈의 수정이 다른 부분에 영향을 끼칠 수 있다고 생각하여 수정된 모듈 뿐만 아니라 관련된 모듈까지 문제 없는지 테스트 하는 것이다. 
  • 즉, 한 모듈의 수정이 다른 부분에 미치는 영향을 최소화하기 위해 필요하다.

 

테스트 범위

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

1. 라이브러리가 제공하는 함수
2. 로직을 담당하는 함수
3. UI 관련 함수
4. 웹 API 클라이언트
5. API 서버
6. 데이터베이스 서버

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

• 정적 분석
  • 타입스크립트나 ESLint가 제공하는 기능을 활용한다. 각 모듈 내부의 검증뿐만 아니라 로직을 담당하는 함수 -> UI 관련 함수 검증, UI 관련 함수 -> 웹 API 클라이언트 인접 모듈을 연계해 사용할 때의  문제점도 검증한다.
• 단위 테스트
  • 한 가지 모듈에 한정하여 해당 모듈이 제공하는 기능을 검증하는 테스트이다. 독립된 환경에서 검증하기 때문에 실제로 애플리케이션을 사용할 때는 거의 발생하지 않는 케이스 검증에 적합하다.
• 통합 테스트
  • 라이브러리가 제공하는 함수  -> 로직을 담당하는 함수  -> UI 관련 함수  -> 웹 API 클라이언트 / 로직을 담당하는 함수  -> UI 관련 함수 처럼 모듈 조합으로 제공되는 기능을 검증하는 테스트이다. 범위가 넓어질수록 효율적인 테스트가 가능하지만 상대적으로 대략적인 검증에 그치게 된다.
• E2E 테스트
  • 라이브러리가 제공하는 함수  -> 로직을 담당하는 함수  -> UI 관련 함수  -> 웹 API 클라이언트를 통틀어 헤드리스 브라우저와 UI 자동화 도구를 결합하여 검증하는 테스트이다. 가장 광범위한 통합 테스트이다. 실제로 애플리케이션을 사용할 때와 가장 유사한 테스트이기도 하다.

테스트 목적

• 기능 테스트(인터랙션 테스트)
  • 개발된 기능에 문제가 없는지 검증하는 테스트이다. 웹 프론트엔드의 대부분 기능은 UI 컴포넌트 조작에서 시작하기 때문에 인터랙션 테스트가 기능 테스트가 될 때가 많으며, 중요성 또한 높다. 실제 브라우저 API를 사용하는 것이 중요한 테스트라면 헤드리스 브라우저와 UI 자동화 도구를 사용하는 것이 좋다.
• 비기능 테스트(접근성 테스트)
  • 신체적, 정신적 특성에 따른 차이 없이 동등하게 제품을 사용할 수 있는지 검증하는 테스트다. 
• 회귀 테스트
  • 특정 시점을 기준으로 전 후 차이를 비교하여 문제가 있는지 검증하는 테스트다. 웹 프런트엔드는 시각적으로 보이는 UI 컴포넌트를 개발하기 때문에 시각적 회귀 테스트가 중요하다.