React에서 Test Coverage 확인하기

 

React 애플리케이션을 개발하면서 코드의 품질을 유지하고, 잠재적인 버그를 사전에 방지하기 위해 테스트를 작성하는 것은 매우 중요합니다. 하지만, 단순히 테스트를 작성하는 것만으로는 충분하지 않습니다. **작성한 테스트가 얼마나 철저하게 애플리케이션의 코드를 검증하고 있는지 확인하기 위해 Test Coverage(테스트 커버리지)**를 확인하는 과정이 필요합니다. 이 글에서는 React에서 테스트 커버리지를 확인하는 방법과 이를 최적화하는 전략에 대해 알아보겠습니다.

테스트 커버리지란?

테스트 커버리지는 애플리케이션의 코드 중 테스트가 수행된 코드의 비율을 나타내는 지표입니다. 일반적으로 다음과 같은 항목에 대해 커버리지를 측정합니다:

1. 라인(Line Coverage): 실행된 코드 라인의 비율
2. 브랜치(Branch Coverage): 조건문(if/else 등)의 모든 분기(branch)가 테스트된 비율
3. 함수(Function Coverage): 테스트된 함수의 비율
4. 문장(Statement Coverage): 실행된 코드 문장의 비율

테스트 커버리지가 높을수록 코드가 테스트로 잘 검증되었다는 것을 의미합니다. 하지만 100% 커버리지가 반드시 완벽한 테스트를 의미하지는 않으므로, 품질을 보장하기 위해서는 테스트의 적절성과 효율성도 고려해야 합니다.

React에서 테스트 커버리지 확인하기

React 애플리케이션에서 테스트 커버리지를 확인하려면, 일반적으로 Jest와 React Testing Library 같은 도구를 사용합니다. Jest는 Facebook에서 개발한 테스트 프레임워크로, React 프로젝트와 자연스럽게 통합됩니다. Jest를 사용하면 테스트 커버리지 리포트를 손쉽게 생성할 수 있습니다.

1. Jest 설정 및 실행

Jest는 대부분의 React 프로젝트(특히 Create React App)에서 기본적으로 설정되어 있습니다. Jest를 통해 테스트 커버리지를 확인하려면 다음 단계를 따르면 됩니다:

1-1. Jest 설치

만약 Jest가 프로젝트에 설치되어 있지 않다면, 아래 명령어를 통해 설치할 수 있습니다:

npm install --save-dev jest

1-2. 테스트 커버리지 실행

Jest에서 테스트 커버리지를 실행하려면 아래 명령어를 사용합니다:

npm test -- --coverage

이 명령어를 실행하면 coverage라는 폴더가 생성되며, 커버리지 리포트가 HTML, JSON 등의 형식으로 저장됩니다.

1-3. HTML 리포트 확인

coverage 폴더 안의 index.html 파일을 브라우저에서 열면, 시각화된 커버리지 리포트를 확인할 수 있습니다. 각 파일별로 테스트 커버리지 비율이 표시되며, 상세 정보(라인별 테스트 여부)도 확인 가능합니다.

2. Create React App에서 Jest로 커버리지 확인하기

Create React App(CRA)으로 생성된 프로젝트에서는 Jest가 이미 설치 및 설정되어 있습니다. 따라서, 별도의 설정 없이 다음 명령어로 커버리지를 확인할 수 있습니다:

npm test -- --coverage

CRA의 커버리지 리포트 예시

File             | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
-----------------|---------|----------|---------|---------|-------------------
src/App.js       |   85.71 |       75 |      80 |   85.71 | 15, 19-21
src/components/  |     100 |      100 |     100 |     100 |
-----------------|---------|----------|---------|---------|-------------------
All files        |   90.32 |    83.33 |      90 |   90.32 |

• % Stmts: 전체 문장 커버리지 비율
• % Branch: 조건 분기 커버리지 비율
• % Funcs: 함수 커버리지 비율
• % Lines: 라인 커버리지 비율

위 데이터를 통해 테스트가 충분히 이루어지지 않은 부분을 쉽게 식별할 수 있습니다.

3. 커스터마이징: Jest 설정 파일 수정

프로젝트의 요구사항에 따라 커버리지 설정을 세부적으로 조정하려면, jest.config.js 또는 package.json 파일의 Jest 설정을 수정할 수 있습니다. 예를 들어, 특정 디렉터리만 포함하거나 제외하려면 다음과 같은 설정을 추가합니다:

module.exports = {
  collectCoverage: true,
  collectCoverageFrom: [
    "src/**/*.{js,jsx}",
    "!src/index.js",       // 제외할 파일
    "!src/serviceWorker.js" // 제외할 파일
  ],
  coverageDirectory: "coverage",
  coverageReporters: ["html", "text"],
};

4. React Testing Library로 테스트 작성

React Testing Library는 사용자 인터페이스(UI)가 예상대로 작동하는지 테스트하기 위해 자주 사용됩니다. 간단한 테스트 사례를 작성하고, 이를 기반으로 커버리지를 확인할 수 있습니다.

간단한 테스트 사례

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

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

위와 같은 테스트를 작성하면, 해당 테스트의 수행 여부가 커버리지 리포트에 반영됩니다.

테스트 커버리지 최적화 전략

테스트 커버리지를 단순히 높이는 것이 목표가 되어서는 안 됩니다. 테스트의 품질과 효율성을 고려하며 최적화를 진행해야 합니다. 아래는 몇 가지 전략입니다:

1. 중요한 기능부터 테스트하기: 핵심 비즈니스 로직과 사용자 인터페이스를 우선적으로 테스트합니다.
2. 테스트 간 중복 제거: 동일한 코드를 반복적으로 테스트하지 않도록 중복을 제거합니다.
3. Mocking 활용: 외부 API 호출이나 복잡한 종속성을 Mocking하여 테스트 효율성을 높입니다.
4. Code Review: 테스트 코드에 대한 코드 리뷰를 통해 품질을 보장합니다.
5. 정적 분석 도구와 병행: ESLint, Prettier 같은 정적 분석 도구를 사용해 코드 품질을 유지합니다.

마무리

React에서 테스트 커버리지를 확인하는 것은 애플리케이션의 품질을 유지하고, 예기치 않은 문제를 방지하는 데 중요한 역할을 합니다. Jest와 React Testing Library를 활용하면 쉽게 테스트 커버리지를 측정하고 개선할 수 있습니다. 하지만, 커버리지 수치만을 목표로 삼기보다는 테스트의 효율성과 적절성을 지속적으로 검토하며, 높은 품질의 코드를 유지하는 데 초점을 맞추어야 합니다.