TypeScript CI 도입기 (ft. Jest, CodeCov(v3), Github Actions)

도입 배경

그룹 프로젝트에서 TDD를 적용했고, 애자일 방법론을 채택했기 때문에 앞으로 release가 최소 2회 남아있었다. 그래서 테스트 코드 coverage에 대한 검증을 하고 싶었다.

codecov는 PR Review를 진행할 때마다 해당 PR이 code coverage를 얼마나 만족했는지 시각적으로 확인할 수 있다는 점이 가장 매력적이었던 것 같다.

TDD를 적용하는 우리 팀의 test code coverage를 PR마다 시각적으로 확인함으로써, 유효한 테스트 코드를 작성했는지, 목표하는 만큼 테스트 코드를 적절한 범위로 잘 적용했는지 점검하려고 했다.

다만, 현재 인터넷에 나와 있는 많은 정보들이 v1에 맞추어있지만, v3과는 조금 차이가 있는 것 같아 혼란을 겪긴 했었다..

현재는 v1이 deprecated되어, v3을 사용하였다.

Jest Testcode 작성: ts-jest

단순한 fizzBuzz 문제에 대한 함수 및 test code를 작성했다.

index.ts

const fizzBuzz = (item: number): number | string => {
  const result = (!(item % 3) ? "Fizz" : "").concat(!(item % 5) ? "Buzz" : "");
  return result ? result : item;
};

export default fizzBuzz;

index.test.ts

import fizzBuzz from './index';

test("Fizz", () => {
  expect(fizzBuzz(3)).toBe("Fizz");
  expect(fizzBuzz(9)).toBe("Fizz");
});

test("Buzz", () => {
  expect(fizzBuzz(5)).toBe("Buzz");
  expect(fizzBuzz(50)).toBe("Buzz");
});

test("FizzBuzz", () => {
  expect(fizzBuzz(15)).toBe("FizzBuzz");
  expect(fizzBuzz(30)).toBe("FizzBuzz");
});

test("number", () => {
  expect(fizzBuzz(1)).toBe(1);
  expect(fizzBuzz(2)).toBe(2);
  expect(fizzBuzz(49)).toBe(49);
});

codecov 라이브러리 추가

yarn add codecov

codecov uploader 설치 (linux 기준)

curl -Os https://uploader.codecov.io/latest/linux/codecov chmod +x codecov ./codecov

워크 디렉토리 터미널에서 codecov uploader를 위와 같이 설치하고, 해당 여기서 생성된 codecov 파일을 git에 올려야 정상 작동된다!

Package.json 파일 수정

"test": "jest --coverage && codecov"

jest로만 하게 되면 당연하게도 coverage report가 적용되지 않는다!

github workflow 추가

code_coverage.yml 파일 추가

• main, release branch에 PR이 올라가면 coverage test를 하도록 추가
• 사실, yarn test를 실행하는 것이지만, package.json script를 수정했으니 codecov가 실행될 것이다.

name: test
on:
  pull_request:
    branches:
      - main
      - release
  
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: "18.x"
      - name: Install & Test
        run: |
          yarn
          yarn test
      - name: Code Coverage
        uses: codecov/codecov-action@v3
        with: 
          flags: unittests # optional

토큰 오류 발생

{'detail': ErrorDetail(string='Unable to locate build via Github Actions API. Please upload with the Codecov repository upload token to resolve issue.', code='not_found')}

토큰 오류는 private repository에 대해서만 적용되고, 이 경우 target branch 등록 시 발행해주는 토큰을 github workflow yml 파일에 추가해야 한다.

codeCov 토큰 발급

Sign Up - Codecov

1. 회원가입
2. target repo 등록
3. Github Secret에 CODE_COV 토큰 등록
4. github actions yml 파일에 아래와 같이 토큰 추가 (private repo인 경우 필수)

with: 
          token: ${{ secrets.CODECOV_TOKEN }}

github application 설치

github marketplace(codecov)

결과

아래와 같이 coverage report를 해준다!

아래 github에서 테스트 코드 및 환경 설정을 확인할 수 있다.
https://github.com/kumsil1006/practice-ci-cd/tree/ci-test-coverage

부족한 점 있다면 댓글로 알려주세요!!