테스트 전략 및 CI 설정

⚡️ 코드잽 프론트엔드 팀 테스트 전략

1. UI 컴포넌트 테스트

• 테스트 이유: 컴포넌트의 독립적인 UI 테스트를 위해서
• 테스트 도구: Storybook

2. 단위테스트

• 테스트 이유: 각 기능을 작은 단위로 테스트하여 명확하고 예측 가능한 동작 확인을 위해서
• 테스트 도구: jest + RTL

3. api mocking

• 테스트 이유: 개발 환경에서 mock data 사용하기 위해서, 서버 개발 정도에서 벗어나 독립적으로 테스트 하기 위해서
• 테스트 도구: MSW

⚡️ 코드잽 프론트엔드 팀 CI 전략

CI를 하는 이유

• 코드 품질 보장
  • 개발자가 작성한 코드가 의도대로 정확히 작동하며, 전체 소스 코드 베이스와 원활하게 통합되는지 확인합니다.
• 인적 오류 최소화
  • 수동으로 테스트를 실행하고 풀 리퀘스트를 생성하는 과정에서 발생할 수 있는 인적 오류를 방지합니다.

=> 코드 변경사항에 대한 자동화된 테스트 실행을 통해 견고한 '안전망'을 구축하기 위해 CI 설정

CI 전략

- 각 브랜치 간 통합되기 이전 Github Action으로 타입 체킹과 테스트를 자동으로 실행시킨다.
- 전체 소스 코드의 병합은 오로지 PR을 통해서만 이루어지기 때문에 Github Action으로도 충분하다고 판단

실제 구축된 Github Actions 파일

name: Frontend CI

on:
  pull_request:
    branches:
      - '**'

jobs:
  build-with-test:
    runs-on: ubuntu-latest
    env:
      frontend-directory: ./frontend
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Install Dependencies
        run: npm install
        working-directory: ${{ env.frontend-directory }}

      - name: Run Type Checking
        run: npm run tsc
        working-directory: ${{ env.frontend-directory }}

      - name: Run Tests
        run: npm run test
        working-directory: ${{ env.frontend-directory }}