UI 없이 composable의 상태 전이를 경계값으로 검증합니다.
composable이 브라우저 생명주기에 의존하지 않으면 ref 반환값과 action 결과를 직접 테스트할 수 있습니다. 실제 프로젝트에서는 Vitest에서 자동 실행합니다.
초기값, 여러 호출의 독립성, reset과 최대값을 검사합니다.
시간과 네트워크는 주입하거나 가짜 구현으로 통제합니다.
컴포넌트 내부 구현 세부를 검사하면 리팩터링에 취약합니다.
로컬 프로젝트에서 확인해보세요최대값에서 더 증가하지 않는 테스트를 추가하세요.
<script setup>
import { ref } from "vue";
function useProgress(initial = 0) {
const value = ref(initial);
return {
value,
complete: () => (value.value = Math.min(100, value.value + 10)),
reset: () => (value.value = initial),
};
}
const progress = useProgress(20);
progress.complete();
const results = [{ name: "10 증가", passed: progress.value.value === 30 }];
progress.reset();
results.push({ name: "초기화", passed: progress.value.value === 20 });
</script>
<template>
<main>
<h1>Composable 테스트</h1>
<ul>
<li v-for="r in results" :key="r.name">
{{ r.passed ? "PASS" : "FAIL" }} {{ r.name }}
</li>
</ul>
</main>
</template>