프론트엔드 테스트

yoon Y·2022년 8월 25일
0

TDD와 프론트엔드 테스트

모던 프론트엔드 테스트 전략
드림 코딩 엘리 - 테스트와 TDD

테스트란?

소프트웨어가 원하는 대로 동작하는 지 확인하는 것.
확인하는 요소는 함수, 특정 기능, ui, 성능, api스펙 등등이 있다.

목적

  • 소프트웨어 품질 확인
  • 버그 찾기

효과

  • 실제 변경 시에 테스트 코드를 이용해 이전 답과 같은지 비교해볼 수 있으므로 안전하게 리팩토링할 수 있다.
  • 실제 서비스가 오류 없이 안전하게 작동할 수 있다.

하는 방법

  • 테스트하려는 기능이나 모듈과 예상하는 결과를 테스트 파일에 등록한다.
  • 테스트 파일이 실행되면 해당 모듈이 실행되고, 등록해놓은 결과와 같을 시 통과, 다를 시 실패하게 된다.

종류

  • Static Test: 타입이나 래퍼런스 문법 오류를 체크
  • Unit Test: 모듈 단위의 테스트
  • Integration test: 2개 이상의 모듈이 연결된 상태를 테스트
  • E2E Test: 실제 서비스 환경에서 테스트 (프론트엔드는 브라우저)

프론트엔드의 테스트 종류와 방법

테스트 대상

  1. 시각적 요소

    • 스냅샷 테스트: html 확인 -> jest이용.
    • 시각적 회귀 테스트: html+css확인 -> storybook이용.
  2. 사용자 이벤트 처리

    • js API나 React 라이브러리에서 제공하는 테스트 유틸리티 이용.
    • 실제 브라우저 이용.
  3. API 통신

    • API client를 모킹 -> jest이용.
    • 테스트 API 서버 구축.
    • 실제 API 서버 이용.

테스트 환경
실제 브라우저가 필요한 상황이 아니면 되도록 node js환경을 권장.

  1. 브라우저 환경.
    • 모든 web API 사용 가능, 브라우저 호환성 테스트 가능.
    • 속도 느림.
    • Testcafe툴 사용.
  2. node js환경.
    • 속도 빠름.
    • 모든 web API 사용 불가능 -> jest로 가상 돔 이용할 수 있음.
    • Jest, Testing library사용.

Jest란?
자바스크립트 테스팅 프레임워크로 테스트에 필요한 구성 요소들을 하나로 통합된 형태로 제공함.

  • 테스트 러너
  • 테스트에 필요한 유틸리티 함수를 제공해주는 테스트 프레임워크
  • assertion 라이브러리
  • 모의 객체를 만드는 데 사용하는 테스트 더블 라이브러리

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


TDD란?

기존 방식으로 개발을 마친 후 테스트 코드를 짜는 것이 아닌,
테스트를 먼저 만들고 테스트를 통과하기 위한 것을 짜는 것.

Point

  • 실패하는 테스트 코드를 작성할 때까지 실제 코드를 작성하지 않는 것.
  • 실패하는 테스트를 통과할 정도의 최소 실제 코드를 작성하는 것.

효과

  • 실제 코드에 대해 기대되는 바를 보다 명확하게 정의 함으로써 불필요한 설계를 피할 수 있다.
  • 정확한 요구 사항에 집중할 수 있다.
  • 구현보다 인터페이스에 집중할 수 있으므로 사용자 입장에서 코드를 작성할 수 있게 된다.

기능의 인터페이스와 결과를 미리 정해두고 그에 맞게 구현하는 것.
커밋 시 커밋 메세지를 먼저 적어두고 코딩하는 이유와 비슷한 것 같다.

profile
#프론트엔드

0개의 댓글