유닛 테스트(FE)

프론트엔드에서 컴포넌트, 함수, 훅 등의 최소 단위가 독립적으로 올바르게 동작하는지 검증하는 테스트입니다.

프론트엔드 유닛 테스트 대상

대표 도구

테스트 예시

1. 유틸 함수 테스트

// formatPrice.js
export const formatPrice = (price) => {
  return price.toLocaleString() + '원';
};

// formatPrice.test.js
describe('formatPrice', () => {
  test('금액에 콤마와 원을 붙인다', () => {
    expect(formatPrice(10000)).toBe('10,000원');
  });

  test('0원을 올바르게 처리한다', () => {
    expect(formatPrice(0)).toBe('0원');
  });
});

2. 컴포넌트 테스트 (React Testing Library)

// LoginButton.jsx
export const LoginButton = ({ isLoggedIn, onLogin, onLogout }) => {
  return isLoggedIn
    ? <button onClick={onLogout}>로그아웃</button>
    : <button onClick={onLogin}>로그인</button>;
};

// LoginButton.test.jsx
import { render, screen, fireEvent } from '@testing-library/react';

describe('LoginButton', () => {
  test('로그아웃 상태이면 로그인 버튼을 보여준다', () => {
    render(<LoginButton isLoggedIn={false} onLogin={() => {}} />);
    expect(screen.getByText('로그인')).toBeInTheDocument();
  });

  test('로그인 버튼 클릭 시 onLogin이 호출된다', () => {
    const onLogin = jest.fn();
    render(<LoginButton isLoggedIn={false} onLogin={onLogin} />);
    fireEvent.click(screen.getByText('로그인'));
    expect(onLogin).toHaveBeenCalledTimes(1);
  });
});

3. 커스텀 훅 테스트

// useCounter.js
import { useState } from 'react';
export const useCounter = (initial = 0) => {
  const [count, setCount] = useState(initial);
  const increment = () => setCount(c => c + 1);
  return { count, increment };
};

// useCounter.test.js
import { renderHook, act } from '@testing-library/react';

describe('useCounter', () => {
  test('초기값이 올바르게 설정된다', () => {
    const { result } = renderHook(() => useCounter(5));
    expect(result.current.count).toBe(5);
  });

  test('increment 호출 시 count가 1 증가한다', () => {
    const { result } = renderHook(() => useCounter(0));
    act(() => result.current.increment());
    expect(result.current.count).toBe(1);
  });
});

BE vs FE 유닛 테스트 차이