TDD와 프론트엔드 테스트
모던 프론트엔드 테스트 전략
드림 코딩 엘리 - 테스트와 TDD
테스트란?
소프트웨어가 원하는 대로 동작하는 지 확인하는 것.
확인하는 요소는 함수, 특정 기능, ui, 성능, api스펙 등등이 있다.
목적
효과
- 실제 변경 시에 테스트 코드를 이용해 이전 답과 같은지 비교해볼 수 있으므로 안전하게 리팩토링할 수 있다.
- 실제 서비스가 오류 없이 안전하게 작동할 수 있다.
하는 방법
- 테스트하려는 기능이나 모듈과 예상하는 결과를 테스트 파일에 등록한다.
- 테스트 파일이 실행되면 해당 모듈이 실행되고, 등록해놓은 결과와 같을 시 통과, 다를 시 실패하게 된다.
종류
- Static Test: 타입이나 래퍼런스 문법 오류를 체크
- Unit Test: 모듈 단위의 테스트
- Integration test: 2개 이상의 모듈이 연결된 상태를 테스트
- E2E Test: 실제 서비스 환경에서 테스트 (프론트엔드는 브라우저)
프론트엔드의 테스트 종류와 방법
테스트 대상
-
시각적 요소
- 스냅샷 테스트: html 확인 -> jest이용.
- 시각적 회귀 테스트: html+css확인 -> storybook이용.
-
사용자 이벤트 처리
- js API나 React 라이브러리에서 제공하는 테스트 유틸리티 이용.
- 실제 브라우저 이용.
-
API 통신
- API client를 모킹 -> jest이용.
- 테스트 API 서버 구축.
- 실제 API 서버 이용.
테스트 환경
실제 브라우저가 필요한 상황이 아니면 되도록 node js환경을 권장.
- 브라우저 환경.
- 모든 web API 사용 가능, 브라우저 호환성 테스트 가능.
- 속도 느림.
- Testcafe툴 사용.
- node js환경.
- 속도 빠름.
- 모든 web API 사용 불가능 -> jest로 가상 돔 이용할 수 있음.
- Jest, Testing library사용.
Jest란?
자바스크립트 테스팅 프레임워크로 테스트에 필요한 구성 요소들을 하나로 통합된 형태로 제공함.
- 테스트 러너
- 테스트에 필요한 유틸리티 함수를 제공해주는 테스트 프레임워크
- assertion 라이브러리
- 모의 객체를 만드는 데 사용하는 테스트 더블 라이브러리
Testing library란?
UI를 사용자 관점에서 테스트할 수 있도록 도와주는 라이브러리
TDD란?
기존 방식으로 개발을 마친 후 테스트 코드를 짜는 것이 아닌,
테스트를 먼저 만들고 테스트를 통과하기 위한 것을 짜는 것.
Point
- 실패하는 테스트 코드를 작성할 때까지 실제 코드를 작성하지 않는 것.
- 실패하는 테스트를 통과할 정도의 최소 실제 코드를 작성하는 것.
효과
- 실제 코드에 대해 기대되는 바를 보다 명확하게 정의 함으로써 불필요한 설계를 피할 수 있다.
- 정확한 요구 사항에 집중할 수 있다.
- 구현보다 인터페이스에 집중할 수 있으므로 사용자 입장에서 코드를 작성할 수 있게 된다.
기능의 인터페이스와 결과를 미리 정해두고 그에 맞게 구현하는 것.
커밋 시 커밋 메세지를 먼저 적어두고 코딩하는 이유와 비슷한 것 같다.