GitHub Actions 워크플로우에 Cypress 테스트 추가하기

김선은·2024년 7월 15일

이번에 E2E 테스트 코드를 처음 적용해보면서, Cypress를 사용하여 자동화된 테스트를 GitHub Actions 워크플로우에 추가해봤습니다.
이를 통해 테스트 코드의 완성도 있는 과정을 체험하고, CI/CD 파이프라인에서의 자동화된 테스트 실행을 경험했습니다.

이전 게시물에서 Next.js 프로젝트에서 Cypress를 사용하여 업로드 페이지에 E2E 테스트를 적용했습니다.

이를 GitHub Actions 워크플로우에 통합하는 과정을 소개합니다.

파일 변경 사항

스크립트 추가하기

package.json 파일에 스크립트를 추가합니다.

test:ci 스크립트 추가 이유:

cypress open은 GUI 모드로 Cypress 테스트를 실행하지만, CI/CD 환경에서는 CLI 모드로 테스트를 실행하는 것이 더 적합합니다.
cypress run을 사용하는 test:ci 스크립트를 추가하여, 자동화된 환경에서 테스트를 실행할 수 있도록 했습니다.

{
  "scripts": {
    "test": "cypress open",
    "test:ci": "cypress run"
  }
}

GitHub Actions 워크플로우 파일 작성

.github/workflows/cypress.yml 파일을 생성합니다. 다음은 최종적으로 적용된 코드 입니다.

name: Cypress Tests

on: [pull_request]

jobs:
  cypress-run:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '18'

      - name: Install dependencies
        run: npm install

      - name: Build application
        run: npm run build
        env:
          NEXT_PUBLIC_FIREBASE_API_KEY: ${{ secrets.NEXT_PUBLIC_FIREBASE_API_KEY }}
          NEXT_PUBLIC_KAKAO_MAP_CLIENT: ${{ secrets.NEXT_PUBLIC_KAKAO_MAP_CLIENT }}

      - name: Start application
        run: |
          npm run start &> server.log &
          sleep 10  # 10초 대기 후
          cat server.log  # 로그 출력
        env:
          NEXT_PUBLIC_FIREBASE_API_KEY: ${{ secrets.NEXT_PUBLIC_FIREBASE_API_KEY }}
          NEXT_PUBLIC_KAKAO_MAP_CLIENT: ${{ secrets.NEXT_PUBLIC_KAKAO_MAP_CLIENT }}

      - name: Wait for application to be ready
        run: npx wait-on http://localhost:3000 --timeout 300000

      - name: Check application status
        run: curl -I http://localhost:3000

      - name: Run Cypress tests
        run: npm run test:ci
        env:
          NEXT_PUBLIC_FIREBASE_API_KEY: ${{ secrets.NEXT_PUBLIC_FIREBASE_API_KEY }}
          NEXT_PUBLIC_KAKAO_MAP_CLIENT: ${{ secrets.NEXT_PUBLIC_KAKAO_MAP_CLIENT }}

에러 사항

Node.js 버전 문제

처음에는 노드 버전을 14로 했어서 워크플로우 중 버전 에러가 있었습니다.

// 중략
- name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '18'

node-version을 18 버전으로 수정

Production Build 누락

next start 명령어가 production build를 필요로 했지만, next build가 실행되지 않았습니다.

// 중략
- name: Install dependencies
        run: npm install
        
- name: Build application
        run: npm run build

npm install 하단에 npm run build 명령어 추가

환경 변수 API 키 문제

CI/CD 환경에서 Firebase API 키가 설정되지 않아 auth/invalid-api-key 오류가 발생했습니다.

레포지토리 설정에서 GitHub Secrets에 환경 변수를 설정하여도 제대로 주입되지 않는 이슈가 있었습니다.

각 스텝에 env 설정을 추가하여 환경 변수를 명시적으로 설정했습니다.

// 일부 생략
- name: Build application
        run: npm run build
        env:
          NEXT_PUBLIC_FIREBASE_API_KEY: ${{ secrets.NEXT_PUBLIC_FIREBASE_API_KEY }}
          NEXT_PUBLIC_KAKAO_MAP_CLIENT: ${{ secrets.NEXT_PUBLIC_KAKAO_MAP_CLIENT }}

      - name: Start application
        run: |
          npm run start &> server.log &
          sleep 10  # 10초 대기 후
          cat server.log  # 로그 출력
        env:
          NEXT_PUBLIC_FIREBASE_API_KEY: ${{ secrets.NEXT_PUBLIC_FIREBASE_API_KEY }}
          NEXT_PUBLIC_KAKAO_MAP_CLIENT: ${{ secrets.NEXT_PUBLIC_KAKAO_MAP_CLIENT }}

- name: Run Cypress tests
        run: npm run test:ci
        env:
          NEXT_PUBLIC_FIREBASE_API_KEY: ${{ secrets.NEXT_PUBLIC_FIREBASE_API_KEY }}
          NEXT_PUBLIC_KAKAO_MAP_CLIENT: ${{ secrets.NEXT_PUBLIC_KAKAO_MAP_CLIENT }}