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