Test용 설정을 마무리 하고 이제 테스팅 코드를 적을 시간입니다.
그전에 프론트엔드에 있어 테스트 종류를 알아보고 가겠습니다.
테스트의 유형
테스트는 여러 기준이 있는데, 요즘 가이드에서는 아래와 같이 구분하고 있습니다.
- 정적 테스트 (static)
- 단위 테스트 (unit)
- 통합 테스트 (intergration)
- E2E 테스트 (End to End)
정적 테스트
코드를 실행시키지 않는 테스트로,
type 에러를 잡거나 eslint를 이용해 사용하지 않는 변수를 찾는 것에 해당합니다.
유닛 테스트
각 모듈을 단독 실행 환경에서 독립적으로 테스트합니다.
- Sociable 테스트 : 의존성이 있는 코드와 함께 테스트
- Solitary 테스트 : 모듈에 의해 실행되는 코드를 모의 코드로 대체
통합 테스트
두개 이상의 모듈이 연결된 상태를 테스트합니다.
모듈간의 연결에서 발생하는 에러를 검증할 수 있습니다.
-
broad 테스트 : 의존성이 있는 모듈을 연결된 상태로 테스트
-
narrow 테스트 : 연결된 모듈을 모의 코드로 대체
-
UI와 API 간의 상호작용이 올바르게 일어나는지 확인할 수 있습니다.
- 실제 API를 사용하여 broad 테스트 를 하거나- 모킹 API를 이용해 narrow 테스트를 수행합니다.
-
state 에 따른 UI의 변경이 동작하는지 확인합니다.
E2E 테스트
실제 사용자의 입장에서 테스트하는 것을 말합니다.
프론트엔드에서 E2E 테스트란 실제 브라우저를 실행해서 테스트를 하는 것을 말하며,
커버리지가 높고 실제 상황에서 발생할 수 있는 에러를 검출할 수 있다는 장점이 있습니다.
(브라우저를 띄운다??)
테스트 환경
테스트 환경은 크게 두가지로 나뉩니다.
위에서 언급한 브라우저 환경이랑, Node.js 환경입니다.
브라우저 환경
Web API에 접근할 수 있습니다.
브라우저 호환성 및 기기 테스트도 가능합니다.
개발이 완료되어 배포할 때 CI와 연동해서 테스트하는 방식 권장
Node.js 환경
브라우저 환경보다 속도가 빠르다는 장점이 있습니다.
Web API, DOM API를 사용할 수 없습니다.
=> jest는 jsdom처럼 dom을 가상으로 구현하였지만, 페이지 네비게이션이나 레이아웃은 테스트할 수 없습니다.
각 환경 별로 테스트의 역할이 다릅니다.
브라우저 환경에서는 크로스 브라우징과 렌더링, 네비게이션 등 브라우저의 동작을 테스트합니다. 그 이외는 Node.js 환경에서 하는 것을 권장합니다.
테스트 대상
프론트엔드 입장에서 봤을 때, 테스트 대상은 아래의 종류가 있을 수 있습니다.
1. 시각적 요소 (스냅샷 테스트)
2. 사용자 이벤트 처리
3. api 통신
스냅샷 테스트
시각적 요소를 테스트하기 위해 사용합니다.
HTML 구조가 의도한 대로 나타나는지를 테스트 하기 위해서 테스트를 수행합니다.
Visual Regression Test(출처: https://www.chromatic.com/)
이벤트 처리
마우스,키보드 등의 이벤트 핸들러를 처리하는 작업을 테스트 합니다.
testing-library 를 이용해 이벤트를 시뮬레이션할 수 있습니다.
API 서버 통신
- 실제 API 서버를 이용하는 방법 = E2E 테스트에서 주로 사용됩니다.
- 테스트 API 서버 구축, API client 모킹
- API 요청에 대한 응답을 원하는 대로 수정할 수 있기 때문에 다양한 상황을 테스트할 수 있습니다.
