14. 스냅숏 테스트와 시각적 테스트
14.1 스냅숏(snapshot) 테스트
직렬화 결과를 스냅숏으로 기록해 이전의 스냅숏과 차이가 있는 지 테스트하는 방법
14.1.2 스냅숏 테스트의 장점과 단점
| 장점 | 단점 |
|
|
14.1.3 그럼 어떻게 작성해야 할까?
- 스냅숏 테스트 단위를 작게 잡는다.
- 스냅숏 테스트가 실패했을 때, 무조건 업데이트하지 말고 올바른 변경 사항인지 꼭 확인 후에 업데이트한다.
14.2 시각적 회귀(visual regression) 테스트
엘리먼트의 레이아웃이 틀어지거나 스타일이 달라진 것을 확인할 수 있는 테스트
장점은 여러 UI 변경을 쉽게 파악할 수 있고, 크로스 브라우징 테스트를 하기 편리하다.
단점은 유로 서비스가 많고, TDD를 적용하기 어렵다.
때문에 매번 변경점을 확인하기보다는 중간 커밋 또는 PR 단위로 시각적 테스트를 수행하는 것이 적합하다.
14.2.1 스토리북(Storybook)
스토리북은 렌더링 결과를 보여주는 도구이다. 시각적 회귀 테스트뿐만 아니라 디자인 시스템 문서화 도구로서 활용된다.
스토리북에는 테스트를 돕는 AddOn 기능이 있다. AddOn을 테스트하려는 경우의 수를 표현하고, 테스트와 관련된 이벤트의 실행 등 을 확인할 수 있다.
14.2.2 Percy를 이용한 시각적 테스트 작성하기
이미지 기반의 테스트의 한계점(육안으로 식별하기 어려운 변경은 검출하기 어렵다. 스냅숏 이미지에 대한 관리 이슈)을 극복한 테스트 도구
여러 테스트 도구(Percy, Cypress 등등)의 실행결과를 스냅숏으로 저장하여 테스트를 실행할 수 있다.
출처
- 이재성, 한정. 『기초부터 완성까지, 프런트엔드』. 서울: 비제이퍼블릭, 2021
'프론트엔드' 카테고리의 다른 글
| CRA에 Lint와 pre-commit hook 설정하기 (0) | 2022.09.13 |
|---|---|
| 『기초부터 완성까지, 프런트엔드』 15. 성능 (1) | 2022.02.02 |
| 『기초부터 완성까지, 프런트엔드』 13장. 14장 테스트 코드 예제 리뷰 (0) | 2022.02.02 |
| 『기초부터 완성까지, 프런트엔드』 13. 프런트엔드 테스트 (0) | 2022.01.19 |
| 『기초부터 완성까지, 프런트엔드』 8. 브라우저 렌더링 과정 (0) | 2022.01.18 |