[Front Test] 스냅샷 테스트

✅ 스냅샷 테스트란?

스냅샷 테스트는 **특정 시점의 출력 결과(스냅샷)**를 저장해두고, 이후 테스트 실행 시 출력 결과가 바뀌지 않았는지 비교하여 변경 여부를 감지하는 테스트 방식입니다.

쉽게 말해:

📸 "지금 화면(또는 출력 결과)을 사진처럼 저장해두고, 나중에 다시 찍은 사진과 비교해서 변했는지 확인하는 것"입니다.

 

✅ Best Practices (권장 사항)

1. 스냅샷을 코드처럼 다뤄라
   • 스냅샷 파일도 커밋하고 코드 리뷰 대상에 포함시켜야 합니다.
2. 결정적인(deterministic) 테스트를 작성하라
   • 항상 같은 입력에 대해 같은 결과가 나오도록 Date, Math.random 등을 조작하세요.
3. 테스트 이름을 구체적으로 지어라
   • 예: <UserName /> should render Alan Turing

 

✅ 자주 묻는 질문

• CI 환경에서 자동으로 스냅샷을 생성하나요?
  → 아니요. CI에서는 --updateSnapshot 없이 자동 갱신되지 않습니다.
  모든 스냅샷은 커밋되어 있어야 합니다.
• 스냅샷은 React 전용인가요?
  → 아니요. React 외에도 API 응답, CLI 출력, 로그 등 직렬화 가능한 데이터는 모두 테스트 가능합니다.
• 스냅샷이 유닛 테스트를 대체하나요?
  → 아니요. 스냅샷은 보조 수단입니다. 함께 쓰는 것이 좋습니다.
• 시각적 회귀 테스트와의 차이는?
  → 시각적 회귀 테스트는 스크린샷을 픽셀 단위로 비교합니다.
  스냅샷 테스트는 문자열 또는 객체를 비교합니다. 각각 용도가 다릅니다.

 

✅ 언제 유용할까?

• 프론트엔드 컴포넌트의 UI 구조가 바뀌었는지 확인하고 싶을 때
• API 응답 형태나 필드가 의도치 않게 바뀌는 것을 막고 싶을 때
• 텍스트 기반 출력이 많은 CLI 도구에서 변경 감지할 때

 

✅ 마무리 요약

• 스냅샷 테스트는 "출력 결과가 바뀌었는지 자동으로 확인"하는 도구
• React뿐만 아니라 직렬화 가능한 모든 데이터에 적용 가능
• 유닛 테스트를 보완하는 용도로 사용해야 함
• 테스트가 실패했다면, "정말 변경이 의도된 것인지" 확인 후 갱신