테스트Medium#247
Snapshot Test의 장점과 주의점을 설명해주세요.
#테스트#Snapshot#UI테스트#회귀
답변 포인트
출력 구조 회귀와 리뷰 가능성를 기준으로 정의, 장점, 한계, 예시를 함께 설명해보세요.
정답 및 해설
빠른 요약
Snapshot Test는 출력 구조 변경을 빠르게 감지하지만 큰 스냅샷은 리뷰가 어렵고 무비판적 업데이트 위험이 있습니다. 작고 의미 있는 단위에 제한하는 것이 좋습니다.
Snapshot Test는 렌더링 결과나 직렬화된 출력의 스냅샷을 저장해두고 다음 실행 결과와 비교하는 테스트입니다. UI 구조나 큰 객체 출력의 의도치 않은 변경을 빠르게 감지할 수 있습니다.
예시
TSX
const tree = render(<Profile name="Kim" />);
expect(tree.container).toMatchSnapshot();스냅샷 파일에는 DOM 구조가 저장되고, 이후 변경되면 테스트가 실패합니다.
장점
- 작성이 빠르고 넓은 출력 변화를 감지할 수 있습니다.
- 리뷰에서 UI 구조 변경을 확인하는 단서가 됩니다.
- serializer 출력, config 변환 결과에도 사용할 수 있습니다.
주의점
스냅샷이 너무 크면 아무도 리뷰하지 않고 -u로 갱신만 하게 됩니다. 그러면 테스트 가치가 거의 사라집니다. 랜덤 ID, 날짜, locale처럼 매번 바뀌는 값도 flaky 원인이 됩니다.
좋은 사용법
- 작고 의미 있는 컴포넌트에 제한합니다.
- 중요한 동작은 명시적 assertion으로 별도 검증합니다.
- 스냅샷 변경은 코드 리뷰에서 실제로 읽습니다.
- 동적 값은 serializer나 mock으로 안정화합니다.
면접 답변 포인트
Snapshot Test는 출력 변경 감지에 유용하지만 큰 스냅샷을 무비판적으로 갱신하면 위험합니다. 의미 있는 단위로 작게 쓰고 핵심 동작은 명시적 assertion으로 보완해야 합니다.