2019-11-27

실용적인 프런트엔드 테스트 전략

(NHN 김동우)

테스트는 리팩터링 등 코드 수정을 할 때 개발자에게 자신감을 준다.

테스트를 위해서는 입력과 출력을 만들어야 한다. 프론트의 출력은 화면이고 시각 정보이기 때문에 까다로운 면이 있다.

• diffableHTML - 문자열 비교
• jest의 스냅샷 테스트

HTML비교는 개발자에게 충분한 자신감을 주지 못함. 겉보기가 똑같은데 코드는 다를수있고, 코드는 같은데 겉보기가 다를 수 있기 때문.

Visual Regression Testing

시각적 회귀 테스트

• 픽셀변화를 개발자가 보고, 의도된 변화인지 아닌지 직접 판단해야 함
• 문제점: 캡쳐한 이미지의 신뢰성이 떨어지며, 결과확인과 이력관리가 불편하다.

Visual Testing as a Service

위에 언급한 신뢰성 등의 문제를 해결한 시각적 테스트 도구들이 나와있다

• applitools
• percy ← 발표자는 이것 사용중. (귀여운 로고)
• chromatic

시각적 테스트의 한계

1. 테스트 환경 / 속도
2. 테스트 자체를 문서로서 활용할 수 없고, TDD 할 수 없음
3. 테스트 하나에 영향을 주는 요소가 너무 많고, 테스트 실패의 원인 파악이 어렵다

기능적 테스트

값이 제대로 나오는가 / 버튼이 제대로 눌리는가 / 눌렀을 때 제대로 변경되는가. ..

시각적 요소 수정을 해도 기능 테스트가 무너지지 않도록, 셀렉터 사용을 자제하고, 테스틀 위한 클래스네임이나 커스텀 attribute를 이용하도록 한다.

시각적 테스트와 기능적 테스트는 서로 분리시켜야 한다.

storybook

UI 컴포넌트 개발환경이다.

컴포넌트 단위로 여러 use case에 따른 테스트들을 묶어둘 수 있고, 독립적으로 테스트할 수 있다.

storybook은 테스트 도구는 아니지만, 테스트에 큰 도움을 준다.

• 시각적 테스트 도구들이 스토리북을 지원하기 때문에 연동해서 사용하기 좋다
• 결제실패등 엣지케이스 디자인을 넣어두고 여러 환경(브라우저, 모바일기기) 변경하면서 확인가능. 애드온?을 이용해 버튼 클릭만으로 다국어 확인 등 변경 테스트 가능 (우리는 큰글씨사용자 케이스 확인할수있을듯)

테스트는 비용이다

• 비용을 절약하자. 불필요한 테스트는 하지 않아야 한다
• 복잡한 로직이 없는 코드의 단위테스트는 동어반복적이다
• 시스템테스트나 통합테스트와 겹치는 단위테스트는 제거하자
• 핵심 알고리즘 코드의 단위테스트는 중요하다

딘위/통합 차이는 테스트 단위의 문제.

컴포넌트단위의 통합테스트가 효율적.

cypress

통합/E2E 테스트 도구

디버깅 하기 엄청 좋음. 개발도구로도 사용할 수 있을 정도. 이력이 상세히 다 남는다. 심지어 서버 응답이 뭐였는지도. redux extension도 사용가능.

마지막으로 강조하고싶은거

더 적은 비용과 많은 효과를 주는 방법을 각자 맞게 선택해야 한다.

컴포넌트 단위의 통합테스트를 우선 고려하자.

7줄 요약

스토리북을 도입했을 때 가장 즐거웠고, 그 다음 즐거웠던게 사이프레스 도입이었다고 함.

툴에게 충실히 서포트 받는 느낌이 즐거웠다고.