🚀 CI/CD에서 React Testing Library 워크플로우 살펴보기

🚀 CI/CD에서 React Testing Library 워크플로우 살펴보기

 

테스트 자동화를 적용한 CI/CD 파이프라인이 어떻게 돌아가는지, React Testing Library에서 이를 어떻게 활용하는지 제대로 파헤쳐보자! 🎯

📌 CI/CD에서 워크플로우란?

 

CI/CD에서 워크플로우(Workflow) 는 테스트, 빌드, 배포 등 자동화된 작업의 흐름을 의미해요.

✔️ CI(Continuous Integration, 지속적 통합): 코드 변경 시 자동으로 테스트 및 빌드를 수행

✔️ CD(Continuous Delivery/Deployment, 지속적 배포): CI 단계를 통과한 코드를 운영 환경에 배포

 

즉, 워크플로우를 설정하면, 코드가 변경될 때마다 자동으로 테스트를 실행하고, 문제가 없다면 배포까지 진행하는 과정이 자동화되는 거예요! 🎉

🌱 CI/CD에서 워크플로우의 기본 구조

 

워크플로우를 설정하는 가장 대표적인 도구는 GitHub Actions에요.

GitHub Actions에서 CI/CD 파이프라인을 설정하려면 .github/workflows/ci.yml 같은 YAML 파일을 작성하면 돼요.

 

✔️ 워크플로우의 기본 구조

name: React CI

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

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

      - name: Install dependencies
        run: npm install

      - name: Run tests
        run: npm test

위 코드를 보면 테스트 자동화를 위한 CI 워크플로우가 설정되어 있어요.

하나씩 뜯어보면서 이해해볼까요? 🔎

📌 주요 구성 요소와 문법 살펴보기

 

🔹 on: - 언제 실행될 것인가?

 

워크플로우가 트리거(trigger) 되는 조건을 설정해요.

✔️ push: → 특정 브랜치에 코드가 푸시될 때 실행

✔️ pull_request: → PR이 생성될 때 실행

✔️ schedule: → 특정 시간마다 실행

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
  schedule:
    - cron: "0 0 * * *" # 매일 자정 실행

🔹 jobs: - 어떤 작업을 수행할 것인가?

 

jobs:는 워크플로우에서 실행할 여러 개의 작업을 정의하는 부분이에요.

여러 개의 job을 병렬로 실행하거나, 순차적으로 실행할 수도 있어요.

jobs:
  test:   # "test"라는 작업을 정의
    runs-on: ubuntu-latest  # 실행할 환경 (OS)
    steps: 
      - name: Checkout repository  # GitHub 저장소 코드를 가져오기
      - name: Set up Node.js        # Node.js 설정
      - name: Install dependencies  # 의존성 설치
      - name: Run tests             # 테스트 실행

🔹 steps: - Job 내부에서 실행될 단계

 

각 job 안에는 여러 개의 steps가 들어가요.

✔️ name: → 각 단계의 이름을 정의

✔️ run: → 실행할 명령어

✔️ uses: → GitHub Actions에서 제공하는 플러그인 활용

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

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

  - name: Install dependencies
    run: npm install

  - name: Run tests
    run: npm test

👆 위 예제에서는 npm install로 패키지를 설치하고, npm test로 React Testing Library 테스트를 실행해요.

🔹 runs-on: - 어디서 실행할 것인가?

 

테스트를 실행할 환경(운영체제, OS) 을 선택하는 부분이에요.

runs-on: ubuntu-latest  # 최신 Ubuntu 환경에서 실행

• ubuntu-latest: 최신 우분투 버전에서 실행

• windows-latest: 최신 윈도우 환경에서 실행

• macos-latest: 최신 맥OS에서 실행

🔹 release: - 배포까지 자동화할 경우

 

만약 CI/CD에서 테스트를 통과한 코드가 자동 배포되도록 하려면, release 단계를 추가할 수 있어요.

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Deploy application
        run: npm run deploy

📌 이렇게 하면?

✅ main 브랜치에 코드가 머지될 때 자동으로 테스트 실행

✅ 테스트가 통과되면 npm run deploy 명령어로 배포 자동화! 🚀

📌 React Testing Library 워크플로우 적용하기 🎯

 

이제 CI/CD에서 React Testing Library를 활용하여 테스트 실행하는 방법을 살펴보자!

 

1️⃣ React Testing Library 설정

 

프로젝트에 React Testing Library를 설치해야 해요.

npm install --save-dev @testing-library/react @testing-library/jest-dom jest

2️⃣ 테스트 코드 작성 (예제)

 

아래는 React Testing Library로 작성된 간단한 테스트 예제예요.

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import App from "./App";

test("버튼 클릭 시 텍스트 변경", async () => {
  render(<App />);
  
  const button = screen.getByRole("button", { name: "클릭하세요" });
  userEvent.click(button);
  
  expect(screen.getByText("클릭됨!")).toBeInTheDocument();
});

👆 userEvent.click(button)으로 클릭 이벤트를 발생시키고, 화면이 업데이트되었는지 확인하는 테스트에요.

3️⃣ CI/CD에서 React Testing Library 실행하기

 

이제 CI/CD에서 테스트가 자동 실행되도록 설정해볼게요.

name: React CI with Testing Library

on:
  pull_request:
    branches:
      - main

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

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

      - name: Install dependencies
        run: npm install

      - name: Run React Testing Library tests
        run: npm test -- --coverage

✅ CI/CD 실행 시 자동으로 npm test -- --coverage를 실행하여 테스트 코드 커버리지까지 측정할 수 있어요.

📌 오류 발생 시 어떻게 해결할까?

 

CI/CD에서 테스트가 실패하면 GitHub Actions 로그를 확인해야 해요.

 

1️⃣ 터미널에서 로그 확인

 

테스트가 실패하면 GitHub Actions의 Actions 탭에서 로그를 확인할 수 있어요.

FAIL  src/App.test.js
  ● 버튼 클릭 시 텍스트 변경

    Unable to find an element with the text: 클릭됨!

➡️ 해결 방법:

✅ screen.debug()를 추가해서 현재 상태 확인

✅ waitFor()를 사용하여 비동기 테스트 처리

import { waitFor } from "@testing-library/react";

await waitFor(() => expect(screen.getByText("클릭됨!")).toBeInTheDocument());

🎯 결론: CI/CD에서 React Testing Library 자동화하기!

 

✔️ 워크플로우는 CI/CD에서 자동화된 작업의 흐름을 의미

✔️ GitHub Actions로 CI/CD 설정하고, push나 PR이 발생하면 자동으로 실행

✔️ on:, jobs:, steps:, runs-on: 같은 요소로 구성

✔️ React Testing Library를 활용한 테스트 자동화 가능

✔️ 테스트가 실패하면 GitHub Actions 로그에서 문제 확인 가능

 

이제 테스트 자동화로 버그 없는 프론트엔드를 만들어 보자! 🚀

 

🌷 전설의 개발자가 되어봅시당! 🌷