2020-12-05

테스팅 전략 #

HTML 구조 테스트 #

전략 #

• HTML을 문자열로 직접 비교

• diff가 용이하도록 HTML 구조를 만들어주는 라이브러리를 사용함

• ex) https://github.com/rayrutjes/diffable-html

단점 #

• 실제 UI 결과물 화면과 HTML이 정확히 일치하는 것은 아니다.

• HTML이 달라도 결과물이 동일할수도 있고, 그 반대도 가능

• 테스트 코드만 보고 의도를 파악하기 어렵다

스냅샷 테스트 #

전략 #

• 현재의 HTML 구조를 그대로 파일로 저장, 변경될 때마다 테스트 실패

• 실제 결과는 파일 내부를 확인해야 한다

• HTML을 직접 비교하는 것보다 간편하다

• 회귀 테스트의 역할

단점 #

• 테스트의 의도가 없다

• 스냅샷 데이터의 Diff를 봐도 의도를 파악하기 어렵다

• 습관적으로 업데이트 되면서 테스트의 신뢰성이 감소

시각적 테스트 #

시각적 테스트의 어려움 #

• 자동화가 어렵다

• 스크린샷을 찍어내는 것이 가장 테스트의 목적에 부합

스토리북 #

• 애플리케이션과 분리된 환경에서 UI만 개발할 수 있도록 도와준다

• 컴포넌트 방식의 개발에 어울린다

시각적 회귀 테스트 #

• AI 기술 활용

• 스토리북 / Cypress / 셀레니움과 연동해서 사용 가능

• Percy, applitools, Chromatic

시각적 요소와 기능적 요소 분리 #

dom-testing-library #

Introduction | Testing Library

• CSS 셀렉터를 지양하고 사용자가 볼 수 있는 텍스트 위주의 셀렉터를 사용

  • getByText , getByLabelText , getByAltText , getByTitle , getByValue

• 텍스트를 사용할 수 없는 경우에는 data-test-id 속성을 사용

  • getByTestId

• 이벤트 시뮬레이션

  • fireEvent

• DOM이 변경되거나 특정 단언(Assertion)이 성공할 때까지 기다릴 수 있는 함수 - 비동기 로직 테스트

  • wait , waitForElement , waitForDomChange

jest-dom #

testing-library/jest-dom

• DOM과 관련된 다양한 형식의 매쳐를 제공

  • toBeDisable

  • toBeVisible

  • toHaveTextContent

  • toHaveStyle

  • toHaveClass

  • ...

AJAX Mocking #

• https://github.com/ctimmerm/axios-mock-adapter

• https://github.com/wheresrhys/fetch-mock

• https://github.com/ijpiantanida/talkback