Vitest로 테스트 커버리지 확인하고 챙기기 🆙

테스트 코드를 어느 정도 작성하다 보면 이런 생각이 든다.

“그래서… 이 테스트가 충분한 걸까?”

 

분명 테스트는 있는데, 정작 중요한 로직은 안 건드리고 있을 수도 있다.

이럴 때 필요한 게 바로 테스트 커버리지(Coverage)다.

 

커버리지란 뭘까 ?

간단하게 말하면,

👉 “내 코드가 테스트에 얼마나 실행됐는가”

 

예>

export const isAdult = (age: number) => {
  if (age >= 20) return true;
  return false;
};

테스트가 이렇게 있으면,,,

it('성인은 true를 반환한다', () => {
  expect(isAdult(25)).toBe(true);
});

겉보기엔 괜찮아 보인다.

 

근데 실제로는?

👉 age < 20 케이스는 테스트 안 됨

이걸 숫자로 보여주는 게 커버리지다.

 

Vitest에서 커버리지 켜기

Vitest는 기본적으로 커버리지 기능을 제공한다.

1. 설치

npm install -D vitest @vitest/coverage-v8

---

2. 설정 추가

// vitest.config.ts
import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    coverage: {
      provider: 'v8',
      reporter: ['text', 'html'],
    },
  },
});

여기서 provider는 ??

• provider: 'v8' → 빠르고 기본 추천
• html → 브라우저에서 보기 좋음

 

3. 실행

npx vitest run --coverage

그러면 콘솔에 이런 게 뜬다:

Statements   : 80%
Branches     : 50%
Functions    : 100%
Lines        : 80%

---

여기서 중요한 포인트 (많이 헷갈림)

커버리지는 4가지로 나뉜다.

1. Statements

코드 줄이 실행됐냐

2. Branches ⭐

if / else / switch 같은 분기

👉 이게 제일 중요하다

3. Functions

함수가 호출됐냐

4. Lines

라인 기준 실행 여부

왜 Branch가 중요하냐 ??

아까 예제 다시 보면 다음과 같다.

if (age >= 20) return true;
return false;

테스트 1개만 있으면:

isAdult(25);

👉 결과로 보면 다음과 같다.

• Statements: OK
• Functions: OK
• ❌ Branches: 50%

즉,

“코드는 실행됐는데, 절반만 검증됨”

이게 커버리지가 필요한 이유다.

 

HTML 리포트 👑

coverage/index.html 열어보면 이렇게 나온다.

• 초록색 → 테스트됨
• 빨간색 → 테스트 안 됨

👉 어디 빠졌는지 바로 확인할 수 있다.

 

실무에서 커버리지 챙기는 방법

1. 기준 정하기

coverage: {
  lines: 80,
  branches: 70,
}

👉 CI에서 실패하게 만들 수 있음

 

2. 중요한 로직만 집중

• utils
• 비즈니스 로직
• 계산 함수

👉 UI 컴포넌트는 과하게 집착 안 해도 됨

 

3. “숫자”에 집착하지 않기

이거 진짜 중요하다.

커버리지 100% 만들려고 하면 이런 코드 나온다:

// 의미 없는 테스트
it('else도 타게 만든다', () => {
  isAdult(10);
});

이건 커버리지는 올라가지만
👉 테스트의 “가치”는 없음

 

그래서 어떻게 쓰는 게 맞을까 ?

👉 “커버리지는 목표가 아니라, 힌트다”

• 빠진 테스트 찾는 용도 ✔
• 안정성 체크 ✔
• QA 느낌 ✔

❌ 숫자 채우기용 X

 

> 한 번에 이해되는 패턴

❌ 잘못된 흐름

커버리지 낮음 → 억지 테스트 추가 → 100% 달성 → 끝

---

✅ 좋은 흐름

커버리지 확인 → 빠진 로직 발견 → 의미 있는 테스트 추가

---

정리하자면....

Vitest 커버리지는 단순한 기능이 아니라, 테스트의 “빈 구멍”을 보여주는 도구다.

 

요약하자면,

1. 커버리지는 “얼마나 실행됐는지”를 보여준다
2. 특히 Branch를 꼭 봐야 한다
3. HTML 리포트는 거의 필수
4. 숫자보다 “의미 있는 테스트”가 더 중요하다

⭐ 참고자료

• https://vitest.dev/guide/coverage.html
• https://istanbul.js.org/
• https://kentcdodds.com/blog/write-tests

 

 

+ 실제 작성한 코드

https://github.com/citron03/frontend-stack-playground/pull/18

test(tanstack): vitest coverage test by citron03 · Pull Request #18 · citron03/frontend-stack-playground