[React] Vitest 테스트 커버리지 도입하기

개요

테스트를 작성하다 보면 “지금 우리 테스트가 코드의 얼마나 많은 부분을 커버하고 있는가?”라는 질문이 자연스럽게 생깁니다. 여러분이 Vitest를 사용하고 있다면, 테스트 커버리지를 통해 이 질문에 대한 답을 얻을 수 있습니다.

이 글에서는 Vitest 기반 React 프로젝트에 테스트 커버리지 측정 환경을 도입한 경험을 공유합니다.

Vitest 도입 배경이 궁금하시다면 Jest 프로젝트에 Vitest 도입하기 - View 테스트 분리 전략을 먼저 읽어보시는 것을 추천합니다.

테스트 커버리지란

테스트 커버리지(Test Coverage)는 테스트가 소스 코드를 얼마나 실행하는지를 수치로 나타낸 지표입니다. 주요 지표는 다음과 같습니다.

지표	설명
Statements	전체 구문 중 실행된 구문의 비율
Branches	조건문(if/else, switch 등)의 각 분기가 실행된 비율
Functions	정의된 함수 중 호출된 함수의 비율
Lines	전체 코드 라인 중 실행된 라인의 비율

커버리지 수치가 높다고 반드시 좋은 테스트라고 할 수는 없지만, 테스트가 부족한 영역을 발견하는 데 유용한 지표입니다.

환경 설정

Vitest에서 테스트 커버리지를 측정하기 위해서는 다음과 같은 설정이 필요합니다.

패키지 설치

Vitest의 커버리지 측정에는 @vitest/coverage-v8 패키지를 사용합니다. V8 엔진의 내장 커버리지 기능을 활용하므로 별도의 코드 변환(instrumentation) 없이 정확한 커버리지를 측정할 수 있습니다.

React 프로젝트 디렉토리에서 패키지를 설치합니다.

yarn add -D @vitest/coverage-v8

스크립트 추가

React 프로젝트의 package.json에 커버리지 실행 스크립트를 추가합니다.

{
  "scripts": {
    "test:view": "TZ=Asia/Tokyo vitest",
    "test:view:ci": "TZ=Asia/Tokyo vitest run",
    "test:view:coverage": "TZ=Asia/Tokyo vitest run --coverage"
  }
}

vitest run --coverage 명령어는 Vitest를 watch 모드 없이 한 번 실행하면서 커버리지 데이터를 수집합니다.

.gitignore 설정

커버리지 리포트는 로컬에서만 확인하면 되므로, 생성되는 coverage/ 디렉토리를 .gitignore에 추가합니다.

coverage/

커버리지 실행 및 확인

설정이 완료되면 아래 명령어로 커버리지를 생성할 수 있습니다.

yarn test:view:coverage

실행이 완료되면 ./coverage/index.html 파일이 생성됩니다. 이 파일을 브라우저(또는 VSCode의 Live Server)에서 열면 시각적인 커버리지 리포트를 확인할 수 있습니다.

커버리지 리포트 읽는 법

아래는 실제 커버리지 리포트의 예시입니다.

커버리지 리포트 예시

이 리포트에서 확인할 수 있는 핵심 정보는 다음과 같습니다.

전체 커버리지: Statements 80.39%, Branches 50%, Functions 75%, Lines 79.16%
컴포넌트별 상세 커버리지: 각 컴포넌트 파일의 커버리지를 개별적으로 확인 가능
색상으로 한눈에 파악: 초록색은 커버리지가 높은 영역, 노란색/빨간색은 개선이 필요한 영역

예를 들어 위 리포트에서 TargetDeviceAdditionDialog는 Statements 55%, Functions 42.85%로 다른 컴포넌트에 비해 커버리지가 낮은 것을 확인할 수 있습니다. 이처럼 테스트 커버리지를 활용하면 테스트 보강이 필요한 컴포넌트를 쉽게 식별할 수 있습니다.

반면 DeviceDeletionButton, DeviceNameLabel 등은 100% 커버리지를 달성하고 있어 충분한 테스트가 작성되어 있음을 알 수 있습니다.