Vue 앱에서 단위 테스트할 항목 (그리고 건드리지 말아야 할 것)

발행: 10시간 전 (2026년 1월 19일 오후 04:51 GMT+9)

7 min read

Source: Dev.to

Unit testing은 종종 프로젝트 체크리스트의 체크박스로 취급됩니다. 팀은 모든 것을 테스트하려고 하거나, 테스트가 느리고, 부서지기 쉽고, 유지보수가 어렵다고 느껴서 아예 테스트를 피하기도 합니다.
Vue 애플리케이션에서 실제 도전 과제는 어떻게 단위 테스트를 작성하느냐가 아니라, 무엇을 테스트할 가치가 있는가 입니다.

잘못된 대상을 테스트하면 깨지기 쉬운 테스트, 지속적인 리팩터링 고통, 그리고 잘못된 자신감만 생깁니다. 올바른 대상을 테스트하면 리팩터링을 가능하게 하고, 개발 속도를 높이며, 장기적인 유지보수를 보장하는 안전망을 만들 수 있습니다.

Vue 앱에서 단위 테스트 해야 할 것

비즈니스 로직 및 순수 함수

결정 로직을 포함하는 모든 코드는 단위 테스트의 주요 후보입니다.

가격 계산
검증 규칙
권한 체크
데이터 변환
포맷팅 로직

입력과 출력만 있는 순수 함수라면 거의 항상 테스트해야 합니다.

function calculateDiscount(price: number, isPremium: boolean) {
  return isPremium ? price * 0.8 : price
}

Composables

단순히 상태를 재내보내는 것이 아니라 로직을 캡슐화하는 composable은 테스트하기에 아주 좋은 대상입니다.

import { computed } from 'vue'

export function useUserAccess(user) {
  return computed(() => user.role === 'admin')
}

좋은 후보로는 데이터‑fetching composable, 상태 머신, 피처‑플래그 로직, 복잡한 반응형 흐름 등이 있습니다.

Stores

스토어는 종종 비즈니스 규칙을 담고 있기 때문에 다음을 테스트해야 합니다.

상태를 변경하는 액션
로직이 포함된 getter
오류 처리 경로
부수 효과 오케스트레이션

단순히 값을 할당하거나, 값을 그대로 반환하는 사소한 getter는 테스트할 필요가 없습니다.

구현 세부 사항이 아닌 동작을 테스트

관찰 가능한 결과에 집중합니다.

오류 상태
빈 데이터
잘못된 입력
경계 조건

이러한 시나리오는 프로덕션에서 조용히 깨질 수 있으며, 테스트 없이는 파악하기 가장 어렵습니다.

단위 테스트 하지 말아야 할 것

Vue 내부 및 프레임워크 동작

다음은 테스트할 필요가 없습니다.

v‑if가 동작한다는 것
v‑model이 올바르게 업데이트된다는 것
반응성이 DOM을 업데이트한다는 것
라이프사이클 훅이 호출된다는 것

Vue가 이미 이러한 동작을 보장합니다. 테스트하면 가치 없는 잡음만 늘어납니다.

과도하게 구체적인 UI 어설션 피하기

다음과 같은 어설션은 하지 마세요.

정확한 HTML 구조
로직에 영향을 주지 않는 CSS 클래스
픽셀‑단위 렌더링

이러한 테스트는 부서지기 쉽고 사소한 리팩터링에도 깨집니다. 시각적 정확성이 필요하다면 시각 테스트, 스냅샷 테스트(필요 최소한만), 혹은 E2E 테스트를 고려하세요.

로직이 없는 컴포넌트

컴포넌트가 다음 중 하나라도 해당한다면 보통 단위 테스트가 필요 없습니다.

props를 자식에게 단순히 전달만 함
분기 로직이 없음
내부 로직이 없음

통합 테스트나 E2E 테스트가 이러한 경우를 더 효과적으로 커버합니다.

내부 구현에 결합되지 않도록

다음에 의존하지 마세요.

내부 변수 이름
특정 반응형 구조
내부 ref 혹은 watcher

좋은 테스트는 관찰 가능한 동작을 검증할 뿐, 그 동작이 어떻게 구현됐는지는 확인하지 않습니다.

균형 잡힌 Vue 테스트 전략

단위 테스트는 비즈니스 로직과 엣지 케이스를 보호합니다.
통합 테스트는 컴포넌트 간 협업을 검증합니다.
E2E 테스트는 사용자 흐름을 안전하게 지킵니다.

각 테스트를 만들 때 스스로에게 물어보세요.

동작이 깨졌을 때 이 테스트가 실패할까?
리팩터링 후에도 이 테스트가 살아남을까?
이 테스트가 자신감을 높이는가, 아니면 단지 커버리지만 늘리는가?

가치 높은 테스트는 집중적이고, 안정적이며, 의도적입니다.
가치 낮은 테스트는 부서지기 쉽고, 중복되며, 프레임워크에 의존합니다.

목표는 최대 커버리지가 아니라 작성한 테스트당 최대 자신감을 얻는 것입니다.

Vue에서 단위 테스트는 모든 것을 테스트하는 것이 아니라, 올바른 것을 테스트하는 것입니다. 잘 선택된 테스트는 자신감과 속도를 제공합니다. 의도적으로 테스트하세요 — 미래의 당신이 고마워할 것입니다.

Happy coding! 🖥️