GitHub Actions를 통한 Vitest 자동화

개요

깃허브 액션을 통한 CI/CD를 공부하던 중 내가 작성한 테스트 코드를 PR 했을때 실행시켜주고 PR에 결과가 Test Coverage가 출력되면 좋겠다고 생각되어 작업하게 되었다.

---

테스트 자동화하기

테스트를 자동화하기 위해서 처음 생각한 workflow는 다음과 같았다.

1. PR 생성
2. 깃허브 액션 실행
3. 워크플로우에서 npm run test 실행
4. 결과에 따라 pass 및 fail 나누기
5. git PR에 결과 코멘트 추가하기

하지만 몇번의 시행착오를 거치면서 생성된 workflow는 몇가지 추가된 부분이 있었다.

# .github/workflows/test_coverage.yml

name: '테스트 코드 실행'

# PR 생성시에만 해당 워크플로우 실행 
on: pull_request

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: 코드 체크아웃
        uses: actions/checkout@v3
      - name: 노드 설치
        uses: actions/setup-node@v3
        with:
          node-version: '20.x'
      - run: npm ci
      - run: npx vitest --coverage
      - name: 테스트 커버리지 결과 PR에 코멘트 추가하기
        if: always()
        uses: davelosert/vitest-coverage-report-action@v2
        with:
          github-token: ${{ secrets.PR_WRITE_TOKEN }}

1. PR 생성
2. 깃허브 액션 실행
3. 우분투 환경에서 실행
4. 저장소에 있는 코드를 워크플로우 환경에 복사하기
5. Node.js 선택한 버전 설치하기
6. npm ci를 통해 package.lock.json 기준으로 종속성 설치하기
7. npx vitest --coverage를 통해 테스트 실행하기
8. 테스트가 종료되고 coverage 디렉토리에 결과가 생성됨
9. 테스트의 실패여부에 상관없이 이미 작성된davelosert/vitest-coverage-report-action@v2 action을 실행
10. 미리 추가한 PR_WRITE_TOKEN 토큰으로 인하여 PR 코멘트 작성 권한 획득 및 coverage 코멘트 추가

---

트러블 슈팅

Error: Failed to parse the json-summary at path "coverage/coverage-summary.json."

해당 워크플로우가 실행했을때 vitest-coverage-report-action에서 에러를 뿜어냈다.

원인

vitest-coverage-report-action에 필수로 필요한 coverage-summary.json 파일이 없어서 발생한 에러였다.

해결

vite.config.ts 에 test/coverage/reporter 옵션을 추가하였다. json-summary 값은 필수였다.

import { defineConfig } from 'vite';

export default defineConfig({
  test: {
    coverage: {
      // you can include other reporters, but 'json-summary' is required, json is recommended
      reporter: ['text', 'json-summary', 'json'],
    }
  }
});

---

Warning: Couldn't write a comment to the pull-request. Please make sure your job has the permission 'pull-request: write'.

원인

vitest-coverage-report-action에서 미리 추가한 토큰의 권한으로 PR을 작성해야하는데 권한이 부족할때 발생되는 에러이다.
ps. Organization Settings / Personal access tokens 의 설정에서 개인 토큰 사용을 막을때도 해당 에러가 나올 수 있을거라 추정된다.

해결

Github Profle / Settings / Developer Settings에서 Fine-grained personal access tokens 토큰을 새로 발급받아서 Github actions secrets에 추가하였다. 권한은 해당 레포의 PR 작성 권한만 주입하였다.

맺음말

막연하게 알았던 GitHub Actions가 조금 씩 명확해지는 기분이다. 아직 많은 속성들에 대해서는 알 수 없지만 꾸준히 공식문서를 참고하여 더 복잡한 워크플로우도 구현 가능하도록 해야할 것 같다.

Reference
https://docs.github.com/actions