프론트엔드 테스트 코드

테스트 주도 개발(TDD)이란?

실제코드를 작성하기 전에 테스트 코드를 먼저 작성하는 개발 프로세스이다.

1. 테스트 코드 작성
2. 테스트 실행
3. 코드 작성
4. 테스트 실행
5. 리팩터링

테스트 코드를 작성해야 이유

1. 버그를 미리 발견할 수 있다.
2. 리팩토링과 유지보수에 유리하다
3. 테스트 파일 자체를 문서로 활용 가능하다

테스트 코드 종류

유닛 테스트

• 가장 작은 단위(Unit)를 테스트
• 가장 작은 단위는 함수, custom hook, 컴포넌트 등

유닛테스트의 특징
1. 독립적으로 작동하며, 비동기를 사용하지 않아, 굉장히 빠르게 작동한다.
2. 모듈화가 되어 있다.
3. 유지보수와 확장성에 장점이 있다.

E2E 테스트

• End to End 테스트의 약자
• 하나의 시나리오를 처음부터 끝까지 테스트
• 실제 브라우저나 디바이스에서 실행 되어 실제 사용자가 상호 작용하는 것과 유사한 환경에서 테스트

E2E 테스트의 특징
1. 작동하는데 오랜 시간이 걸린다.
2. 유닛들이 하나의 시스템에서 잘 작동하는지 검증

테스트 툴 종류

• Jest

  • 페이스북에서 만든 JavaScript 테스트 프레임워크, 자바스크립트 외에도 타입스크립트도 지원
  • 테스트 코드의 실행, 결과보고, 환경 구성, 결과 리포팅을 하는 테스트 러너를 내장

• Mocha

  • NodeJs 테스트를 위해 나온 라이브러리이지만 현재는 JavaScript 전반적인 테스트를 위한 유연하고 확장 가능한 테스트 프레임워크
  • Set up 과정이 Jest에 비해 복잡하다는 단점이 있지만 추가 라이브러리에 대한 확장성과 테스트 과정은 Jest 보다 유연하다

• React Testing Library(RTL)

  • React 구성 요소를 테스트하기 위해 만들어진 제작된 JavaScript 테스트 라이브러리
  • 사용자 상호 작용을 시뮬레이션하고 해당 출력으로 UI가 올바르게 작동하는지 확인한다
  • 테스트 러너 위에서 동작하며 Jest 또는 Mocha와 같이 사용해야 한다

• Cypress

  • E2E 테스트를 위해 사용
  • 브라우저 내에서 테스트를 직접 실행하는 방식으로 진행
  • 웹 테스트 만을 위해 설계 되어 모바일 앱이나 데스크 탑 플로폼에 대한 지원이 제한적
  • mocha 기반의 테스트러너를 사용

• Playwright

  • 크로스 브라우징 테스트를 수행할 때 유리하다 유리하다
  • 웹, 앱, 데스크 탑 모두 지원하기 때문에 크로스 플랫폼 테스트에 유용
  • mocha, jest, jasmine 등의 테스트 러너를 사용할 수 있다
  • 아직 cypress 에 비해 커뮤니티가 적은 편