단위 테스트는 작은 동작을 다른 시스템과 가능한 한 분리해 검사합니다. 입력과 기대 결과를 명확히 적으면 어떤 규칙이 깨졌는지 빠르게 알 수 있습니다.
데모는 입력이 함수에 들어가 계산된 결과와 기대값을 비교하는 과정을 반복합니다. 구현 세부 사항만 검사하면 리팩터링 때 불필요하게 깨지므로 관찰 가능한 동작을 중심으로 작성합니다.
언제 쓰나
계산, 변환, 검증 규칙을 빠르고 반복 가능하게 확인할 때 사용합니다.
단위 테스트
Unit test
함수나 작은 모듈 하나에 입력을 주고 기대한 결과가 나오는지 확인합니다.
···
<div class="stage"><div class="title">UNIT TEST</div><div class="canvas"><div class="flow"><div class="box" id="input">input 2</div><span>→</span><div class="box">double()</div><span>→</span><div class="box" id="actual">actual 4</div></div><div class="expect" id="expect">expected 4 · PASS</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(12px,3vmin,22px)}.flow{display:flex;align-items:center;justify-content:center;gap:clamp(3px,1.5vmin,13px);width:100%}.flow .box{min-width:0;flex:1;max-width:145px}.flow span{color:var(--accent)}.expect{color:var(--accent);border-bottom:3px solid var(--accent);padding-bottom:4px;text-align:center}const cases=[[2,4],[5,10],[-1,-2]];let n=0;function run(){const [x,y]=cases[n++%cases.length];document.getElementById('input').textContent='input '+x;document.getElementById('actual').textContent='actual '+(x*2);document.getElementById('expect').textContent='expected '+y+' · PASS';document.getElementById('actual').classList.remove('active');setTimeout(()=>document.getElementById('actual').classList.add('active'),350)}run();setInterval(run,1700)