통합 테스트는 각 부품이 따로 맞더라도 연결했을 때 생기는 오류를 찾습니다. API가 저장소에 값을 쓰고 다시 읽는 흐름처럼 계약과 설정을 함께 검사합니다.
데모는 요청이 API를 거쳐 저장소에 도달한 뒤 응답으로 돌아오는 흐름을 보여줍니다. 실제 의존성을 쓰는 범위를 정하고 테스트 데이터 격리와 정리를 준비해야 합니다.
언제 쓰나
API·데이터베이스·큐처럼 여러 구성요소의 연결이 중요한 흐름에 사용합니다.
통합 테스트
Integration test
서로 붙어 일하는 모듈의 경계에서 요청과 데이터가 실제로 오가는지 확인합니다.
···
<div class="stage"><div class="title">INTEGRATION TEST</div><div class="canvas"><div class="nodes"><div class="box" id="a">REQUEST</div><div class="wire"><i id="pulse"></i></div><div class="box" id="b">API</div><div class="wire"><i></i></div><div class="box" id="c">STORE</div></div><div class="receipt" id="receipt">201 · saved value read back</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,4vmin,30px)}.nodes{display:flex;align-items:center;width:100%;max-width:650px}.nodes .box{flex:1}.wire{position:relative;flex:.35;height:2px;background:var(--line)}.wire i{position:absolute;left:0;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--accent);animation:travel 2.4s infinite}.wire:nth-of-type(4) i{animation-delay:.6s}@keyframes travel{0%{left:0;opacity:0}20%{opacity:1}75%{left:100%;opacity:1}100%{left:100%;opacity:0}}.nodes .box{animation:glow 2.4s infinite}.nodes #b{animation-delay:.6s}.nodes #c{animation-delay:1.2s}@keyframes glow{0%,70%{border-color:var(--line)}20%,45%{border-color:var(--accent);color:var(--accent)}}.receipt{color:var(--accent);text-align:center}