[Frontend] 테스트 코드 작성하기 - Testing Library & Jest

목차 (OPEN)

• 📘 왜 테스트 코드를 작성해야 할까?
• 🧪 프론트엔드 테스트의 종류
• ⚙️ Jest + Testing Library 설정
• 🧾 기본 테스트 예제 (App 컴포넌트 라우팅 테스트)
• 🧯 CI에서 테스트까지 돌리고 싶다면

 

 

 

 

📘 왜 테스트 코드를 작성해야 할까?

"프론트엔드는 눈으로 직접 확인할 수 있으니까

굳이 테스트까지 해야 할까?"

 

이렇게 생각하는 분들도 많지만,

사실은 오히려 그 반대이다.

 

 

💡 테스트 코드가 중요한 이유

✔ 리팩토링 시 기능이 깨지지 않았는지 빠르게 확인할 수 있다.

✔ 협업 중 다른 개발자가 변경한 코드가 내 기능에 영향을 주는지 검증할 수 있다.

✔ CI / CD 자동화 파이프라인에서 안정적인 배포를 도와준다.

✔ 버그를 조기에 발견하고 유지보수성을 높일 수 있다.

 

 

즉, 테스트는 프론트엔드 개발에서도

신뢰성 있는 코드 작성과 유지보수를 위해

꼭 필요한 과정이다.

 

 

---

🧪 프론트엔드 테스트의 종류

테스트 유형	설명	예시
Unit Test	하나의 컴포넌트 혹은 함수 단위 테스트	버튼 클릭 시 콜백이 호출되는지
Integration Test	여러 컴포넌트의 상호작용 테스트	로그인 페이지에서 입력 → 버튼 클릭 → 이동
E2E Test	실제 브라우저 환경에서 유저 플로우 테스트	Cypress, Playwright 사용

 

 

---

⚙️ Jest + Testing Library 설정

pnpm install --save-dev jest @types/jest ts-jest
pnpm install --save-dev @testing-library/react @testing-library/jest-dom

 

jest 👉🏻 테스트를 실행해주는 테스트 러너 역할을 한다.

@testing-library/react 👉🏻 DOM 중심의 테스트를 가능하게 해준다.

@testing-library/jest-dom 👉🏻 toBeInTheDocument() 등 추가적인 matcher들을 제공해준다.

 

💡 이때, jest.config.ts 혹은 jest.config.js 등의 설정 파일도 함께 작성해줘야 한다.

 

---

🧾 기본 테스트 예제 (App 컴포넌트 라우팅 테스트)

import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import App from '../App';

jest.mock('@/pages/main/MainPage', () => {
  const MainPage = () => <div>Main Page</div>;
  return { __esModule: true, default: MainPage };
});

jest.mock('@/pages/login/LoginPage', () => {
  const LoginPage = () => <div>Login Page</div>;
  return { __esModule: true, default: LoginPage };
});

describe('App routing', () => {
  it('renders MainPage for default route "/"', () => {
    render(
      <MemoryRouter initialEntries={['/']}>
        <App />
      </MemoryRouter>,
    );
    expect(screen.getByText('Main Page')).toBeInTheDocument();
  });

  it('renders LoginPage for route "/login"', () => {
    render(
      <MemoryRouter initialEntries={['/login']}>
        <App />
      </MemoryRouter>,
    );
    expect(screen.getByText('Login Page')).toBeInTheDocument();
  });
});

 

🔍 포인트 설명

MemoryRouter 👉🏻 테스트용 라우터로 실제 브라우저 없이 라우팅을 시뮬레이션할 수 있도록 해준다.

jest.mock 👉🏻 테스트에 필요한 컴포넌트만 가짜로 만들어서 독립성을 확보해준다.

screen.getByText() 👉🏻 실제 UI에서 특정 요소가 보이는지 검사해준다.

expect(...).toBeInTheDocument() 👉🏻 해당 요소가 DOM에 존재하는지 확인해준다.

 

---

🧯 CI에서 테스트까지 돌리고 싶다면

- name: Run Test with Coverage
  run: pnpm run test -- --coverage --ci

 

위 코드를 ci.yaml 스크립트에 추가해주면 된다.

 

💡 혹시 아직 test 파일을 작성하지 않았다면,

아래와 같이 --passWithNoTests 옵션을 사용해서 실패하지 않도록 처리해줄 수 있다.

 

- name: Run Test with Coverage
  run: pnpm run test -- --coverage --ci --passWithNoTests