프런트엔드 개발을 위한 테스트 입문

 

 

프런트 화면 테스트를 위한 책입니다.

요즘은 FE 기술 영역이 분리되어 있어서, 별도 테스트 책들이 출간되고 있습니다.

 

 

 

 

• 테스트 코드는 주로 next.js로 작성되어 있습니다.
• FE에 대해서도 너무 다양한 테스트 방법이 있습니다. 
  • 정적분석 / 단위 테스트  / 통합 테스트 / E2E테스트
  • 스테이징 서버 : 실제로 배포할 환경에 가까운 형태로 구성된 테스트 환경을 구성하기 여려운 경우에 조치해야 하는 방법을 고민합니다.
• 책에서는 다양한 테스트 방법을 하나하나 절차대로 구성해보면서, 하나하나 적용해봅니다.
• 단위 테스트
  • Jest https://jestjs.io/ 를 통해서 환경구성을 합니다. Javascript에서 가장 인기 있고,
    목 객체와 코드 커버리지 수집 기능까지 갖춘 메타의 오픈소스 입니다.
  • node기반으로 구성되어 있으며, 그룹을 지어서 테스트 진행시 describe를 통해서 묶고
    expext(검증값), toBe(기댓값) 형태로 작성하면서 테스트 케이스를 작성합니다.

Jest

 

• 책에서는 typescript의 형태로 코드 작성이 되어 있습니다.
• Jest형태에서 다양한 기법이 대부분의 테스트 프레임워크와 비슷한 개념이 있습니다.

 

// 일반적인 테스트 코드 작성시 사용되는 개념이 그대로 있습니다.

.toThrow()
.toBeTruthy()
.toBeLessThan()
// 등등 테스트 케이스를 작성하기 위한 다양한 사용 기법을 사용해야 합니다.

 

 

 

 

 

• 테스트를 할때 목(Mock) 사용하기
  • 데이터를 다양하게 실제 환경과 연동을 하면서, 테스트를 용이하기 하기 위해서 데이터 객체를 활용한 방법이다.
  • jest.mock 의 구문을 통해서 mock객체 주입을 진행합니다.
  • Mock을 사용하는 방법에는 다양한 케이스가 있습니다.
  • 웹API를 통한 스텁 구현
  • 데이터 취득 성공을 재현한 테스트
  • 데이터 취득 실패를 재현한 테스트
• 화면 UI를 테스트 하는 방법
  • 예제에서는 React UI라이브러리를 사용합니다.
    • jest-environment-jsdom
    • @testing-library/react
    • @testing-library/jest-dom
    • @testing-library/user-event
  • 당연히 특정 dom의 정보를 화면에서 의도한 값으로 체크하는 방법
  • 특정 이베트가 정상적으로 호출되는지 여부
  • 화면에 인터랙티브가 많이 있는 경우 UI 컴포넌트 테스트
  • 특정 의도되지 않은 값에 대한 스냅숍 테스트 진행 및 이것을 활용한 회귀 테스트 진행
• 우리는 이러한 다양한 테스트를 커버리지라는 개념을 도입합니다.
  • 지속적으로 테스트가 잘 유지되는지 비율을 노출하고
  • 어느정도 작성한 코드에서 테스트가 진행되었는지 확인을 진행합니다.
  • jest-html-reporters를 통해서 테스트한 결과를 리포트형태로 제공합니다.
• 통합테스트 진행하기
  • Next.js로 작성된 예제 코드를 이용해서 실제 통합테스트기반으로 테스트의 전체 프로세스를 구성해봅니다.
  • 책의 설명은 Next.js와 리액트 기반으로 되어 있지만, 내용을 파악하는데는 크게 문제는 없습니다.
    • next-router-mock 설치를 진행
    • React hook Fom을 사용해서 제어컴포넌트등을 진행하고 폼 유효성을 검사 진행
    • MSW 목 Server 라이브러리를 이용해서 웹API를 객체화 합니다.
• 스토리북을 활용한 UI컴포넌트 탐색기 테스트
  • 스토리북은 https://storybook.js.org/  을 의미합니다.
  • 스토리북에 등록된 부분에 웹API를 등록하고 스토리북 기반으로 테스트를 진행할수 있게 구성해봅니다.

Storybook: Frontend workshop for UI development

 

 

 

• 시각적 회귀 테스트 해보기
  • 화면에 노출된 시각적인 부분이 달라지는 것을 테스트 하는 방법입니다.
  • reg-suit의 reg-cli를 사용해서 이미지를 비교해서 테스트를 진행해봅니다.
  • 스토리북의 Storycap을 통해서도 해당 테스팅이 가능하다
• E2E테스팅
  • playwright를 통해서 전체적인 e2e테스트 프레임워크를 활용해봅니다.
  •  

해당 모든 테스트 방식을 다 적용 할수는 없지만, 현재 적용가능한 범주에서 충분히 검토를 해보고

하나하나 테스트를 통해서 검증 할 수 있는 방식이 확산되는 계기가 되었으면 좋겠습니다.