[Test] 프론트엔드 테스트

프론트엔드 테스트

 💡 애플리케이션이 기대한 결과대로 동작하는지 검증하는 일련의 모든 행위

 

• 목표
  • 애플리케이션의 안정성과 유지 보수성 향상이 목표
• 내부 코드의 다양한 연산뿐만 아니라 클라이언트 영역에 대한 사용자의 인터렉션(마우스 클릭, 키보드 입력 등)도 고려해 올바른 결과 검증
• DOM 요소들이 원하는 위치에 지정한 크기나 여백을 가지고 적절하게 배치되어 있는지 검증해야 함
• 이 모든 과정은 개발 과정부터 QA까지 자동화된 회귀 테스트를 통해 지속적으로 검증

 

좋은 테스트란?

모든 테스트는 독립적으로 실행

• 다른 테스트의 결과나 실행 여부와는 무관하게 독립적으로 실행

테스트의 결과는 일관성이 있어야 함

• 테스트는 외부 환경에 상관없이 일관성 있는 검증을 수행
• 적절한 모킹을 통해 테스트 환경 OS, 네트워크 또는 다른 시스템과의 인터페이스 등 외부 의존성을 최소화
  • 모든 것에 대해 모킹할 필요는 없음

내부 구현에 종속된 테스트는 지양

• 내부 구현에 종속된 테스트는 깨지기 쉬움
• 내부 구현에 종속된 테스트 코드는 아주 작은 구현의 변경에도 테스트가 깨지기 쉽고, 유지 보수 비용이 많이 들어강ㅁ
• 내부 구현보다는 인터페이스를 기준으로 테스트

테스트는 단순하고 이해하기 쉬워야 함

• 가독성이 중요
• 테스트의 설명을 구체적으로 작성하고 ,하나의 테스트에서 너무 많은 테스트를 수행하지 않는 것이 좋음
• 테스트를 위한 사전 설정이나 결과를 검증하는 코드가 복잡하다면, 별도의 함수로 추상화하여 사용

유지 보수가 가능한 테스트를 작성

• 필요 이상으로 너무 작은 단위의 테스트는 변경 사항에 취약해 유지 보수 어렵게 만들게 됨
• 모든 것을 테스트 코드를 작성하기 보다는 테스트 하려는 대상의 문맥 안에서 적절한 범위로 나누어 작성

 

TDD(Test Driven Development)

; 테스트 주도의 개발

개발 코드를 작성하기 전에 깨지는 테스트 코드를 먼저 작성하고, 지속적인 리팩토리을 통해 테스트가 검증되는 과정을 반복하며 개발하는 방법론

TDD Cycle

• 적색
  • 추가하려는 기능을 개발하기 전에 테스트를 먼저 작성
  • 당연히 테스트 실패
• 녹색
  • 코드를 구현하여 테스트를 통과
• 리팩토링
  • 작성한 코드를 살펴보고 이해하기 쉬우며 잘 설계되었는지 확인해 리팩토링 수행
  • 리팩토링 과정 속에서 문제가 발생하여도 이를 알려주는 테스트가 있기 때문에 문제의 원인을 금방 찾아 해결
• 반복
  • 모든 구현이 완료될 때까지 과정 반복

 

테스트의 유형

정적(Static) 테스트, 단위(Unit) 테스트, 통합(Integration) 테스트, E2E(End to End) 테스트

Static Test ; 코드를 실행시키지 않고 테스트를 하는 것

• Type 에러나 Reference 에러와 같은 개발자의 실수로 인해 발생하는 에러를 미연에 방지
• 많은 개발자의 노하우에 의해 만들어진 규칙에 따라 코드를 분석하는 것은 더 좋은 코드를 작성할 수 있는 습관을 기르도록 도와줌
• 프론트엔드의 경우 ESLint 를 활용하여 사용하지 않는 변수를 찾거나 Typescript 로 함수의 인자로 받는 파라미터의 타입 검사를 하는 것이 정적 테스트에 포함

Unit Test ; 단위 테스트는 각 모듈을 단독 실행 환경에서 독립적으로 테스트하는 것

• 의존성이 있는 코드와 함께 테스트하는 Sociable 테스트 & 모듈에 의해 실행되는 코드를 테스트 더블로 대체하는 Solitary 테스트
• ex) 프론트엔드에서 단위 테스트는 특정 컴포넌트를 렌더링해서 깨지지 않는지 확인하는 것
  • Sociable 테스트는 자식(child) 컴포넌트까지 포함해서 렌더링하는 것
  • Solitary 테스트는 자식 컴포넌트를 모킹해서 렌더링 하는 것

Integration test ; 두 개 이상의 모듈이 실제로 연결된 상태를 테스트하는 것

• 모듈 간의 연결에서 발생하는 에러를 검증할 수 있으며, 단위테스트보다 비교적 넓은 범위에서 테스트하기 때문에 리팩토링에 쉽게 깨지지 않는 장점
• 테스트 더블의 사용 여부에 따라 broad test와 narrow test로 구분
  • broad test는 의존성이 있는 모든 모듈이 연결된 상태를 테스트하는 것
  • narrow test는 연결된 모듈을 테스트 더블로 대체하여 테스트하는 것
• ex) 프론트엔드에서 통합 테스트는 UI와 API 간의 상호작용이 올바르게 일어나는지, 또는 state에 따른 UI의 변경이 올바르게 동작하는지를 확인하는 것
  • 실제 API를 호출하여 broad test를 하거나 API client를 모킹(mocking) 하거나 가상 API 서버를 이용함으로써 narrow test를 수행

E2E Test ; 실제 사용자의 입장 및 환경에서 테스트하는 것

• 프론트엔드에서 E2E 테스트는 실제 브라우저를 실행해서 테스트하는 것
• 커버리지가 높고 실제 상황에서 발생할 수 있는 에러를 검출할 수 있단 장점
• 브라우저를 띄우기 때문에 Web API를 활용할 수 있고 테스트 코드가 내부 구조에 영향을 받지 않기 때문에 코드의 변경에도 비교적 잘 깨지지 않는 장점
• 브라우저를 띄우기 때문에 단위, 통합 테스트보다 실행 속도가 느림
• 테스트의 실행 환경에서 발생하는 문제들(네트워크 에러 등)로 인해 테스트가 실패할 수 있어서 E2E 테스트의 결과를 신뢰하기 어려움

 

 

테스트 대상

시각적 요소, 사용자 이벤트 처리, API 통신

시각적 요소

• 스냅샷 테스트
  • HTML 구조가 의도한 대로 나타나는지를 테스트
  • Jest
• 시각적 회귀 테스트(Visual Regression Test)
  • HTML에 CSS를 더해 컴포넌트가 실제로 브라우저에서 렌더링 되는 모습이 의도한 대로 나타나는지를 테스트
  • Storybook에서 만든 Chromatic

사용자 이벤트 처리

• 자바스크립트 API 또는 React와 같은 라이브러리에서 제공하는 테스트 유틸리티를 활용 or E2E 테스트를 통해서 실제로 브라우저상에서 이벤트를 발생
  • 사용자의 마우스, 키보드 등의 입력 이벤트를 적절한 이벤트 핸들러로 처리하는 작업 테스트
• Node.js 환경에서 테스트
  • React 팀이 권장하는 테스트 도구인 testing-library에서 제공하는 패키지를 활용

API 서버 통신

• 실제 API 서버
  • E2E 테스트에서 주로 사용
• 테스트 API 서버를 구축하거나 API client를 모킹
  • API client를 모킹하면 API 요청에 대한 응답을 원하는 대로 수정할 수 있기 때문에 다양한 상황을 테스트할 수 있다는 장점
  • Jest를 활용하면 모듈을 간단한 방법으로 모킹할 수 있기 때문에 testing-library와 마찬가지로 Jest를 테스트 도구로 활용할 것을 React 팀에서 권장

테스트 환경

테스트 코드가 어디에서 실행되는지에 따라서 브라우저 환경과 Node.js 환경으로 구분

브라우저 환경

• 브라우저 환경에서 테스트 코드를 실행하면 모든 Web API에 접근 가능
• 서로 다른 브라우저에서 테스트 할 수 있기 때문에 브라우저 호환성 및 기기 호환성 테스트도 진행 가능
• 브라우저의 프로세스가 Node.js 프로세스보다 무겁기 때문에 실행 속도가 느림
• 브라우저를 실행해야 하므로 대부분의 경우 브라우저 런처를 별도로 설치해야 한다는 제약
• 속도 문제를 해결하기 위해 UI 인터페이스를 제외한 Headless 브라우저를 사용
• 개발이 완료되어 배포할 때 CI와 연동해서 테스트하는 방식이 권장

Node.js 환경

• 라우저 환경보다 속도가 빠르다는 장점
• Node.js 환경은 브라우저에서 제공하는 Web API, DOM 접근 API를 사용할 수 없다는 단점이 존재
• 이러한 문제를 극복하기 위해 Jest와 같은 테스트 도구들은 jsdom처럼 DOM을 가상으로 구현하는 라이브러리를 활용
  • 페이지 내비게이션이나 레이아웃과 같은 것들은 테스트할 수 없다는 제약
• 크로스 브라우징과 같은 다양한 환경에서의 테스트도 할 수 없음

Trade off

React 공식 문서에서는 브라우저 환경과 Node.js 환경에서 테스트하는 것에 대한 트레이드 오프가 존재한다고 설명

TOAST UI팀(참고)

---

브라우저 환경; 크로스 브라우징 또는 렌더링, 내비게이션 등 브라우저의 실제 동작을 테스트

Node.js 환경; 그 외의 경우

Testing Tools

브라우저 환경

Testcafe 크로스 브라우징, 크로스 플랫폼 환경에서 테스트하는 데에 특화된 E2E 테스트 도구

Node.js 환경

Jest 자바스크립트 테스트 도구들이 테스트를 실행하는 환경을 제공하는 테스트 러너와 테스트에 필요한 유틸리티 함수를 제공

Testing library UI를 사용자 관점에서 테스트할 수 있도록 도와주는 라이브러리

 

 

Reference

이재성 저, 「기초부터 완성까지, 프런트엔드」, 비제이퍼블릭(2021)

모던 프론트엔드 테스트 전략 - 1편