Jest를 활용하여 테스트를 적용하면서 테스트 범위를 직관적으로 확인하고 부족한 부분을 파악하기 위해 테스트 커버리지 도구 codecov를 적용했습니다. 물론 다른 커버리지 도구 coveralls, istanbul 등 여러 도구들이 있지만 처음 시작으로 codecov 공식문서 Docs를 보면 Quick Start가 나옵니다. quick start 문서를 보면 설명에 대한 이미지 첨부가 되어있어서 빠르게 설정할 수 있기 때문에 codecov를 활용했습니다.
-
테스트 커버리지 도구를 사용하는 이유
- 많은 코드가 실제로 테스트되고 있는지 확인하여 테스트의 효율성을 점검합니다.
- 코드가 예상대로 동작하는지 검증하여 버그 발생 가능성을 줄입니다.
- 자동화된 리포트를 통해 테스트되지 않은 코드 영역을 쉽게 찾아낼 수 있습니다.
- 테스트가 누락된 부분을 빠르게 검토하여 코드 품질을 개선합니다.
- 코드 변경 시 기존 기능이 손상되지 않았는지 빠르게 확인할 수 있습니다.
- 테스트된 코드는 리팩토링과 유지보수가 더 쉬워집니다.
핵심적으로는 테스트 커버리지 도구와 테스트 결과적인 목적이 코드의 품질과 안정성을 높이는 데 있다는 점에서 비슷합니다.
하지만 테스트와 테스트 커버지리의 정확한 역할 및 목적을 아래와 같이 살펴볼 수 있습니다.
테스트는 작성한 코드가 예상대로 동작하는지 직접 검증
테스트 커버리지는 많은 코드가 실제로 테스트되고 있는지 측정
다시 말하면
테스트 = 코드가 의도한대로 동작하는지 확인하는 작업
테스트 커버리지 도구 = 테스트가 얼마나 충분히 잘 커버 되었는지 측정하는 도구테스트만으로는 테스트되지 않은 코드를 놓칠 수 있지만 테스트 커버리지 도구를 사용하면 누락된 테스트 부분을 파악할 수 있습니다.
Codecov 시작
Codecov Quick Start 참고
Building and testing Node.js 참고
react testing library의 GHA 참고
1. codecov 가입 및 연동
codecov에 가입하고 진행하면 아래와 같이 개인 레포의 목록이 나옵니다. 또한 organization와 연동을 하기위해서 GitHub 리포지토리에 Codecov GitHub Action을 public 저장소에 제공되는 무료 옵션으로 추가해 줍니다.
- 예시로 일부분의 개인 레포 목록
2. token 설정
codecov.io에서 저장소에 업로드할 token을 가져와야합니다.
해당 레포 커버리지에 들어가서 상단 Configuration 탭 -> General 항목 -> tokens에 가져올 token이 있습니다. 이 token을 가지고 해당 github 레포의 설정에 들어가 secrets and variables -> Actions에 secrets을 생성합니다.
3. test yml 작성
시작부분에 언급했던 문서링크들을 참고해서 아래 yml 코드와 같이 secret 등록한 token 변수명을 입력하고 작성할 수 있습니다.
name: build-testing
on:
push:
branches:
- main
pull_request:
branches:
- main
jobs:
main:
strategy:
fail-fast: false // 하나의 버전에서 실패해도 다른 버전의 테스트는 계속 진행
matrix:
node: [18, 20]
runs-on: ubuntu-latest
steps:
- name: ⬇️ Checkout repo
uses: actions/checkout@v4
- name: ⎔ Setup node
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node }}
- name: Install dependencies
run: npm ci
- name: ▶️ Run build
run: npm run build
- name: ▶️ Run test
run: npm run test
- name: Upload coverage reports to Codecov
uses: codecov/codecov-action@v4.0.1
with:
token: ${{ secrets.CODECOV_TOKEN }}- codecov.io 연동 테스트 커버리지 뷰
개인 레포에서 codecov 연동 설정을 테스트로 적용해봤습니다.
그래서 간단한 테스트로 진행하여 main 브랜치로 직접 push 하거나 pr될때 설정한 워크플로우가 실행됩니다.
pr시 아래와 같이 codecov 연결을 확인할 수 있는 봇이 나옵니다.
테스트 코드를 작성하고 pr을 진행하면 워크플로우가 실행하고 커버리지 리포트의 결과가 아래와 같이 나옵니다. 그런데 커버리지 리포트가 나오긴하지만 참고할때 봤던 구체적인 리포트의 형식으로 나오지 않았습니다.
공식문서 quick start 문서의 팁 항목을 보면 codecov.yml에 스니펫 설정하는 부분이 있었고 스니펫 옵션을 설정해줘야 구체적인 범위의 커버리지 리포트가 표시됩니다.
// codecov.yml 파일
comment:
layout: "diff, flags, files" # PR 리포트에 diff, flags, files 섹션 포함
behavior: default # 기본적인 PR 리포트 생성
require_changes: false # 커버리지 변화가 없어도 리포트 생성
require_base: false # base 리포트 없이도 PR 리포트 생성
require_head: true # head 리포트(현재 커밋의 커버리지)가 있어야 PR 리포트 생성
hide_project_coverage: false # 전체 프로젝트 커버리지도 PR 리포트에 포함위처럼 스니펫 설정을 해주면 커버리지 리포트를 구체적으로 표시하여 가독성을 높일 수 있습니다.
위에서 설정한 codecov 테스트를 바탕으로 프로젝트에 적용하기 위해서 pr시 main과 dev 브랜치에 대한 워크플로우를 설정했습니다. 그리고 스니펫을 설정해서 처음 테스트했던 pr 리포트와 다르게 아래와 같이 codecov 리포트가 좀 더 구체적인 범위의 리포트 봇이 표시됩니다.
// test-coverage.yml
name: Upload coverage reports to Codecov
on:
pull_request:
branches: [main, dev]
jobs:
test-coverage:
runs-on: ubuntu-latest
steps:
- name: Checkout repo
uses: actions/checkout@v4
- name: Setup node
uses: actions/setup-node@v4
with:
node-version: "18"
- name: Install dependencies
run: npm ci
- name: Run build
run: npm run build
- name: Run test
run: npm run test
- name: Upload coverage reports to Codecov
uses: codecov/codecov-action@v4.0.1
with:
token: ${{ secrets.CODECOV_TOKEN }}
