🚀 Testing Library 계열 워크플로우 완전 정복

🚀 Testing Library 계열 워크플로우 완전 정복

 

Testing Library를 활용한 CI/CD 최적화 방법, 코드 품질 보장 전략, 그리고 Codecov 연동까지!

🛠️ CI 시간 단축 | 린트 & 타입 체크 자동화 | 유닛 테스트 검증 | 크로스 플랫폼 테스트

📌 Testing Library 계열 워크플로우란?

 

Testing Library는 DOM 테스트를 중심으로 한 JavaScript 테스트 프레임워크예요.

✅ UI 컴포넌트를 마치 사용자가 조작하는 것처럼 테스트

✅ Jest, React Testing Library, DOM Testing Library 등의 도구와 함께 사용

✅ 렌더링된 요소를 직접 검증하여 코드의 신뢰도를 높이는 데 활용

 

CI/CD 환경에서는 이걸 활용해서

✔️ 자동으로 코드 품질을 검증하고

✔️ 다양한 플랫폼에서 UI가 정상 작동하는지 확인할 수 있어요.

 

오늘은 Testing Library 계열의 CI/CD 자동화 최적화와 함께

✅ 린트 & 타입 체크

✅ 유닛 테스트 자동화

✅ 크로스 플랫폼 검증

✅ Codecov 연동으로 커버리지 측정

까지 한방에 해결해볼게요! 🚀

🔹 Testing Library 계열의 워크플로우 최적화

 

1️⃣ CI 시간 단축: 리소스 최적화 🚀

 

CI/CD에서 테스트 속도를 높이는 건 아주 중요해요.

테스트가 오래 걸리면 개발 속도가 떨어지고, 배포까지 지연되니까요.

 

👉 CI 시간을 줄이는 핵심 전략!

✔️ 캐시 활용 (cache: npm)

✔️ 병렬 실행 (matrix 설정)

✔️ 필요할 때만 실행 (filtering by branch)

 

✔️ 예제: 캐시 & 병렬 실행으로 CI 속도 최적화

name: CI Optimization with Testing Library

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

jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [16, 18]  # 다중 Node.js 버전 병렬 실행
    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Cache dependencies  # 캐시 활용으로 npm install 속도 향상
        uses: actions/cache@v3
        with:
          path: ~/.npm
          key: npm-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
          restore-keys: npm-${{ runner.os }}-

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}

      - name: Install dependencies
        run: npm ci

      - name: Run Lint
        run: npm run lint

      - name: Run TypeScript Check
        run: npm run type-check

      - name: Run Tests
        run: npm test -- --coverage

📌 이렇게 하면?

✅ cache를 활용해서 npm install 속도를 단축

✅ 여러 Node.js 버전에서 테스트 병렬 실행 (16 & 18)

✅ 테스트만 실행하는 게 아니라, 린트 & 타입체크도 포함!

2️⃣ 코드 품질 보장: 린트 & 타입 체크 & 유닛 테스트 자동화

 

CI/CD에서 코드 품질을 유지하려면 자동 검증 프로세스가 필요해요.

✅ ESLint → 코드 스타일 & 버그 탐지

✅ TypeScript 체크 → 타입 안전성 보장

✅ Jest & React Testing Library → 컴포넌트 단위 테스트

 

✔️ 패키지 설치

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
npm install --save-dev jest @testing-library/react @testing-library/jest-dom

✔️ ESLint 설정 (.eslintrc.js)

module.exports = {
  parser: "@typescript-eslint/parser",
  extends: ["plugin:@typescript-eslint/recommended", "plugin:react/recommended"],
  rules: {
    "react/prop-types": "off"
  }
};

✔️ TypeScript 설정 (tsconfig.json)

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true
  }
}

✔️ 유닛 테스트 예제

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

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

👆 위와 같은 유닛 테스트를 CI에서 자동으로 실행하도록 설정하면,

❌ 버그가 있는 코드가 main 브랜치로 머지되는 걸 막을 수 있어요! 🚀

3️⃣ 크로스 플랫폼 검증

 

테스트가 로컬에서는 되는데 배포하면 깨지는 경우가 많죠?

🛠️ 다양한 OS & 브라우저에서 테스트를 실행해야 해요!

 

✔️ 다양한 OS에서 실행하기

strategy:
  matrix:
    os: [ubuntu-latest, windows-latest, macos-latest]

runs-on: ${{ matrix.os }}

📌 이렇게 하면?

✅ 리눅스, 윈도우, 맥에서 동시에 테스트 실행

✅ OS에 따라 다르게 동작하는 코드도 검증 가능

4️⃣ Codecov 연동으로 커버리지 측정

 

테스트를 실행할 때 코드 커버리지를 자동으로 측정하면

📌 테스트가 얼마나 잘 커버되고 있는지 바로 확인할 수 있어요!

 

✔️ Codecov 설치

npm install --save-dev codecov

✔️ CI/CD에 Codecov 추가

- name: Upload coverage to Codecov
  uses: codecov/codecov-action@v3

✔️ Jest 설정 (jest.config.js)

module.exports = {
  collectCoverage: true,
  coverageDirectory: "coverage",
  coverageReporters: ["json", "lcov", "text-summary"]
};

👀 이렇게 하면?

✅ 테스트 실행 후 Codecov에서 커버리지 리포트 자동 생성!

✅ 부족한 테스트 영역을 바로 파악 가능 🔍

🎯 결론: Testing Library 계열 워크플로우 최적화!

 

✔️ CI/CD 시간을 단축하려면?

➡️ cache, matrix, 병렬 실행 활용

 

✔️ 코드 품질을 유지하려면?

➡️ ESLint, TypeScript, Jest 자동화

 

✔️ 운영 환경에서 깨지는 걸 방지하려면?

➡️ 다양한 OS & Node.js 버전에서 실행

 

✔️ 테스트 커버리지를 측정하려면?

➡️ Codecov 연동으로 부족한 테스트 영역 파악

 

💡 이제 Testing Library를 활용한 CI/CD 자동화를 마스터하고,

탄탄한 프론트엔드 테스트 환경을 구축해보자! 🚀

 

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