시각적 테스트 (Visual tests)
시각적 테스트는 컴포넌트를 테스트하는 가장 효율적인 방법입니다. 버튼 클릭 한 번이면 스토리북에 있는 모든 스토리의 스냅샷(snapshot)을 찍어, 가장 마지막으로 정상 작동했던 상태인 '베이스라인(baselines)'과 비교할 수 있어요. 이 테스트를 통해 컴포넌트의 겉모습을 확인하는 것은 물론, 단 한 줄의 테스트 코드를 짜거나 유지보수하지 않고도 컴포넌트 기능의 상당 부분을 점검할 수 있답니다!
스토리북은 스토리북 팀이 직접 만든 클라우드 서비스인 Chromatic을 이용해, 여러 브라우저 환경(cross-browser)에서의 시각적 테스트를 기본으로 지원합니다. 시각적 테스트를 활성화하면 모든 스토리가 자동으로 하나의 테스트 케이스로 변신합니다. 덕분에 UI 버그가 생기면 스토리북 안에서 즉각적으로 피드백을 받을 수 있죠.
애드온 설치하기 (Install the addon)
스토리북 메인테이너(maintainers)가 공식으로 만든 @chromatic-com/storybook 애드온을 설치해서 프로젝트에 시각적 테스트를 추가해 보세요:
npx storybook@latest add @chromatic-com/storybook시각적 테스트 활성화하기 (Enable visual tests)
스토리북을 시작하면, 'Visual Tests'라는 새로운 애드온 패널이 생긴 걸 보실 수 있을 거예요. 여기서 테스트를 실행하고 결과를 확인할 수 있습니다.
ℹ️ 혹시 이미 Vitest 애드온을 사용 중이신가요? 그렇다면 사이드바의 테스팅 위젯을 펼쳤을 때 'Visual tests' 섹션이 새로 추가된 것을 확인하실 수 있습니다:
위젯 하단의 'Run tests' 버튼을 누르면, 컴포넌트 테스트와 시각적 테스트가 모두 한 번에 실행됩니다.
우선, Chromatic 계정으로 로그인해 주세요. 만약 계정이 없다면 로그인 과정에서 바로 만드실 수 있습니다.
로그인을 마치면 여러분의 Chromatic 계정(들)과 그 안에 있는 프로젝트들이 보일 거예요. 목록에서 기존 프로젝트를 선택하거나, 새로운 프로젝트를 하나 만들어 주세요.
이제 프로젝트와 애드온이 성공적으로 연결되었습니다! "Catch a UI change" 버튼을 눌러 시각적 테스트의 첫 번째 빌드를 신나게 돌려보세요.
이 첫 번째 빌드를 통해 여러분 스토리들의 '베이스라인 스냅샷(baseline snapshots)'이 생성됩니다. 이 스냅샷들은 나중에 시각적 테스트를 다시 실행할 때 비교의 기준점이 되어줄 거예요.
시각적 테스트 실행하기 (Run visual tests)
코드를 수정한 뒤에 스토리북에서 시각적 테스트를 실행하는 방법은 두 가지가 있습니다.
첫 번째, 사이드바의 테스팅 위젯을 펼친 뒤 'Visual tests' 섹션에 있는 재생(run) 버튼을 누릅니다.
두 번째, 화면 하단의 Visual tests 애드온 패널을 열고 우측 상단에 있는 재생(run) 버튼을 누릅니다.
어느 방법을 쓰든, 여러분의 스토리들은 클라우드로 전송되어 스냅샷을 찍고 변경된 시각적 요소를 찾아내는 과정을 거치게 됩니다.
변경 사항 리뷰하기 (Review changes)
만약 스토리에 시각적인 변화가 감지되었다면, 사이드바에 🟡 노란색으로 강조 표시(highlight)가 됩니다. 해당 스토리를 클릭하고 Visual Tests 애드온 패널로 가서 정확히 어떤 픽셀들이 달라졌는지 확인해 보세요.
만약 그 변경 사항이 의도한 것이라면, ✅ 버튼을 눌러 로컬의 새로운 베이스라인으로 승인(accept)하세요. 반대로 의도치 않은 버그라면, 스토리를 수정한 뒤 재생(rerun) 버튼을 눌러 테스트를 다시 돌려보시면 됩니다.
애드온에서 변경 사항을 베이스라인으로 승인하는 작업을 모두 마쳤다면, 이제 코드를 원격 저장소(remote repository)에 푸시(push)할 준비가 된 겁니다. 코드를 푸시하면 베이스라인도 클라우드와 동기화되어서, 여러분의 브랜치를 체크아웃(check out)하는 팀원 모두가 동일한 베이스라인을 공유하게 됩니다.
CI에서 자동화하기 (Automate with CI)
이 애드온은 CI(지속적 통합) 환경과 함께 쓰이도록 설계되었습니다. 로컬에서 개발하는 동안에는 이 애드온을 통해 변경 사항을 수시로 체크하고, 코드를 병합(merge)할 준비가 되면 CI 환경에서 한 번 더 시각적 테스트를 돌리는 워크플로우를 추천합니다.
여러분이 로컬 애드온에서 베이스라인으로 승인(accept)해둔 변경 사항들은 CI 환경에서도 자동으로 승인 처리되므로, 번거롭게 두 번씩 리뷰할 필요가 없어요.
- 사용 중인 CI 워크플로우에 Chromatic을 실행하는 단계를 추가해 주세요.
- CI 설정에 Chromatic 인증을 위한 환경 변수(project token)를 추가해 줍니다.
PR(Pull Request) 체크 (PR checks)
CI에 Chromatic 설정을 무사히 마치면, 앞으로 올리는 Pull/Merge Request에 'UI Tests'라는 체크 배지(badge)가 달릴 겁니다. 이 배지는 팀원들에게 테스트 에러가 있는지, 아니면 리뷰가 필요한 UI 변경 사항이 있는지 알려주는 역할을 해요. 실수로 UI 버그가 병합(merge)되는 대참사를 막기 위해, Git 서비스 설정에서 이 체크를 '필수(required)' 항목으로 지정해 두는 것을 권장합니다.
설정하기 (Configure)
이 애드온은 대부분의 사용 사례를 커버하는 아주 훌륭한 기본 설정 옵션들을 갖추고 있습니다. 하지만 프로젝트의 특별한 요구사항이 있다면, ./chromatic.config.json 파일을 통해 설정을 아주 섬세하게 다듬을 수도 있어요. 아래는 애드온 전용으로 많이 쓰이는 주요 옵션과 사용 예시들입니다. (모든 옵션의 전체 목록은 여기서 확인해 보세요!)
| 옵션 (Option) | 설명 (Description) |
|---|---|
projectId | 자동 설정됨. 프로젝트 식별자 값을 지정합니다."projectId": "Project:64cbcde96f99841e8b007d75" |
buildScriptName | 선택 사항. 스토리북 빌드 스크립트의 커스텀 이름을 정의합니다."buildScriptName": "deploy-storybook" |
debug | 선택 사항. 콘솔에 훨씬 더 자세한 디버깅 정보를 출력합니다."debug": true |
zip | 선택 사항. 대규모 프로젝트에 추천합니다! 스토리북을 zip 파일로 압축해서 Chromatic에 배포하도록 애드온을 설정합니다."zip": true |
// ./chromatic.config.json
{
"buildScriptName": "deploy-storybook",
"debug": true,
"projectId": "Project:64cbcde96f99841e8b007d75",
"zip": true
}자주 묻는 질문 (FAQs)
시각적 테스트(visual tests)와 스냅샷 테스트(snapshot tests)의 차이점이 무엇인가요?
스냅샷 테스트(Snapshot tests)는 모든 스토리의 '렌더링된 마크업(HTML)'을 베이스라인 마크업과 글자 그대로 비교합니다. 즉, 사용자의 눈에 실제로 어떻게 보이는지가 아니라 HTML 코드 덩어리(blobs)를 비교하는 거죠. 이 방식은 코드가 조금 바뀌었더라도 실제 화면(visual)에는 아무런 변화가 없는 경우에도 무조건 실패를 띄워버리는 '거짓 양성(false positives)'을 자주 유발합니다.
반면, 시각적 테스트(Visual tests)는 모든 스토리의 '렌더링된 픽셀(화면)'을 베이스라인 이미지와 비교합니다. 사용자가 실제로 경험하는 화면 그 자체를 테스트하기 때문에, 테스트 결과의 신뢰도(richer)가 훨씬 높고 유지보수하기도 훨씬 수월합니다.
더 유용한 테스팅 관련 자료들
- Vitest 애드온(Vitest addon): 스토리북 안에서 테스트 돌리기
- 인터랙션 테스트(Interaction testing): 유저 행동 시뮬레이션 해보기
- 접근성 테스트(Accessibility testing): 모두를 위한 접근성 확인하기
- 스냅샷 테스트(Snapshot testing): 렌더링 시 발생하는 에러나 경고 잡아내기
- 테스트 커버리지(Test coverage): 코드 커버리지 측정하기
- CI: CI/CD 파이프라인 안에서 테스트 씽씽 돌리기
- E2E 테스트(End-to-end testing): 진짜 유저가 쓰는 것처럼 실제 시나리오 시뮬레이션 하기
- 유닛 테스트(Unit testing): 기능 하나하나 확실하게 검증하기
- 테스트 러너(Test runner): 테스트 실행 완벽하게 자동화하기
