스냅샷 테스트는 컴포넌트나 데이터 구조의 출력을 파일로 저장한 뒤 다음 실행과 비교합니다. 변경된 줄을 빠르게 찾을 수 있지만 스냅샷 자체가 올바른지는 사람이 판단해야 합니다.
데모는 이전 구조에 새 필드가 추가되자 차이 줄을 강조합니다. 큰 스냅샷을 무심코 갱신하면 결함을 승인할 수 있으므로 작고 의미 있는 출력에 적용합니다.
언제 쓰나
작고 안정적인 출력 구조의 의도치 않은 변경을 검토할 때 사용합니다.
스냅샷 테스트
Snapshot testing
직렬화한 출력의 이전 모습과 현재 모습을 비교해 변경을 발견합니다.
···
<div class="stage"><div class="title">SNAPSHOT DIFF</div><div class="canvas"><div class="snapshot"><div><b>BEFORE</b><span>{ id: 4 }</span><span>{ role: user }</span><span class="empty"> </span></div><div><b>AFTER</b><span>{ id: 4 }</span><span>{ role: user }</span><span class="added" id="snapshotAdded">+ active: true</span></div></div><div class="snapshotNote" id="snapshotNote">new line requires review</div></div></div>.stage{width:min(94vw,820px);height:min(88vh,330px);box-sizing:border-box;padding:clamp(9px,2.4vmin,18px);border:1px solid var(--line);border-radius:13px;background:var(--surface);display:flex;flex-direction:column;gap:clamp(7px,2vmin,14px);font:600 clamp(12px,2.5vmin,16px)/1.28 "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;color:var(--fg);overflow:hidden}.title{color:var(--accent);letter-spacing:.035em;flex:none}.canvas{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}.muted{color:var(--muted)}.mono{font-family:ui-monospace,SFMono-Regular,monospace}.box{border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:clamp(5px,1.4vmin,12px);text-align:center}.active{border-color:var(--accent)!important;color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 12%,var(--surface))!important}.canvas{flex-direction:column;gap:clamp(7px,2vmin,14px)}.snapshot{display:flex;gap:clamp(4px,2vmin,13px);width:min(96%,580px)}.snapshot>div{flex:1;min-width:0;border:1px solid var(--line);border-radius:6px;padding:clamp(5px,1.8vmin,11px);display:flex;flex-direction:column;gap:5px;font-family:ui-monospace,monospace}.snapshot b{color:var(--accent);font-family:var(--font-sans)}.snapshot span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.snapshot .added{color:var(--accent-3);border-left:3px solid var(--accent-3);padding-left:4px}.snapshot .reviewed{color:var(--accent);border-color:var(--accent)}.snapshotNote{color:var(--accent-3)}let reviewed=false;function review(){reviewed=!reviewed;document.getElementById('snapshotAdded').classList.toggle('reviewed',reviewed);document.getElementById('snapshotNote').textContent=reviewed?'reviewed: intentional field':'new line requires review'}review();setInterval(review,1400)