React 테스트 커버리지 효율적으로 올리는 방법

소개

테스트 커버리지는 코드 품질을 가늠하는 지표다. 단순 숫자 올리기보다 의미 있는 커버리지를 만드는 것이 중요하다. 이 글은 초보자도 따라할 수 있도록 설정 방법부터 테스트 전략까지 실무 관점에서 설명한다. 키워드는 자연스럽게 녹여 설명한다: react 테스트 커버리지 늘리기, jest 커버리지 설정, react 테스트 전략.

왜 커버리지가 중요한가

신뢰성 확보

테스트가 많을수록 변경 시 리그레션 발생 가능성을 빠르게 잡을 수 있다. 특히 핵심 비즈니스 로직과 경계 조건을 테스트하면 배포 안정성이 높아진다.

유지보수 비용 절감

테스트는 리팩터링의 안전망이다. 테스트가 없으면 작은 변경도 큰 위험으로 이어진다. 커버리지 수치로 보완점도 찾기 쉽다.

환경 준비와 Jest 커버리지 설정

Jest를 이용한 커버리지 설정은 간단하다. 프로젝트 루트에 jest.config.js를 두고 수집 대상을 지정한다. 아래는 권장 설정 예시다.

module.exports = {
  collectCoverage: true,
  collectCoverageFrom: ["src/**/*.{js,jsx,ts,tsx}", "!src/index.{js,jsx,ts,tsx}", "!src/**/stories.{js,jsx,ts,tsx}"],
  coverageThreshold: {
    global: {
      branches: 80,
      functions: 85,
      lines: 85,
      statements: 85
    }
  },
  testEnvironment: 'jsdom'
};

위 설정은 전체 기준을 걸어 팀 기준을 유지하게 한다. 필요 시 파일별 threshold를 추가해 핵심 모듈을 엄격히 관리할 수 있다.

테스트 작성 전략

1. 작은 단위부터 시작

각 함수와 유틸리티는 단위 테스트로 커버한다. 비즈니스 로직이 집중된 부분을 먼저 작성하면 커버리지 증가 효과가 크다.

2. 컴포넌트는 역할 기준으로 분리

UI 컴포넌트는 프레젠테이션과 로직을 분리하면 테스트가 쉬워진다. hooks와 상태 관리는 별도의 단위로 테스트한다.

3. 인수 테스트와 통합 테스트 균형

단위 테스트만으로는 충분하지 않다. 중요한 플로우는 통합 테스트로 검증한다. react-testing-library로 사용자 관점의 상호작용을 테스트하면 안정성이 높아진다.

실전 예제: React 컴포넌트 테스트

아래는 react-testing-library와 Jest를 이용한 간단한 컴포넌트 테스트다. JSX의 < > 문자는 이스케이프 처리했다.

import React from 'react';
import { render, screen } from '@testing-library/react';
import Button from './Button';

test('버튼 클릭 시 콜백 호출', () => {
  const handleClick = jest.fn();
  render(<Button onClick={handleClick}>클릭</Button>);
  screen.getByText('클릭').click();
  expect(handleClick).toHaveBeenCalled();
});

이처럼 사용자 이벤트를 중심으로 테스트하면 구현 세부사항 변경에 덜 민감한 테스트를 유지할 수 있다.

커버리지 늘리기 실무 팁

• 비즈니스 로직 집중: 핵심 로직부터 테스트를 작성해 빠르게 커버리지를 높인다.
• 테스트 가능한 설계: 순수 함수로 분리하거나 의존성을 주입해 테스트를 쉽게 한다.
• 모듈화된 테스트: 큰 테스트는 쪼개서 유지보수성을 높인다.
• 목과 스텁의 적절한 사용: 외부 API는 목으로 대체하되 과도한 목킹은 피한다.
• snapshot 남용 금지: UI 변화가 잦다면 스냅샷은 통제해서 사용한다.

자동화와 CI 연동

로컬에서 커버리지를 올리는 것만으로 끝나지 않는다. CI 파이프라인에 커버리지 리포트를 추가해 기준 미달 시 빌드를 실패 처리한다. GitHub Actions, GitLab CI 등에서 jest --coverage 명령을 실행하면 리포트가 생성된다.

커버리지 해석 시 주의점

높은 수치가 곧 품질을 의미하지는 않는다. 의미 있는 테스트인지, 핵심 흐름을 검증하는지 살펴야 한다. 특히 테스트가 구현 세부 사항을 검증하면 리팩터링에 취약하다.

체크리스트

• Jest 설정으로 collectCoverage 설정 여부 확인
• 핵심 로직의 단위 테스트 우선 작성
• 컴포넌트는 사용자 관점 테스트 유지
• CI에 커버리지 리포트 포함 및 임계치 설정
• 정기적으로 테스트 리팩터링 수행

맺음말

react 테스트 커버리지 늘리기는 단기간의 수치 올리기가 아니라 안정적인 테스트 문화 구축이 목표다. jest 커버리지 설정으로 기본을 다지고, react 테스트 전략을 통해 우선순위를 정하면 점진적이고 의미 있게 커버리지를 개선할 수 있다. 처음엔 작은 모듈부터 시작해 점차 범위를 넓히는 접근을 권장한다.