2026년 Vitest로 시작하는 React 컴포넌트 테스트 완벽 가이드

제가 실제 프로젝트에서 측정한 결과인데요:

• Jest: 컴포넌트 100개 테스트 → 약 2분 15초
• Vitest: 동일한 테스트 → 약 28초
• 무려 5배 가까이 빨라졌어요!

npm install -D vitest @testing-library/react @testing-library/jest-dom @testing-library/user-event jsdom

yarn add -D vitest @testing-library/react @testing-library/jest-dom @testing-library/user-event jsdom

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: './src/test/setup.js',
  },
})

import { expect, afterEach } from 'vitest'
import { cleanup } from '@testing-library/react'
import * as matchers from '@testing-library/jest-dom/matchers'

// jest-dom의 매처들을 Vitest에 추가
expect.extend(matchers)

// 각 테스트 후 자동으로 정리
afterEach(() => {
  cleanup()
})

"scripts": {
  "test": "vitest",
  "test:ui": "vitest --ui",
  "test:coverage": "vitest --coverage"
}

// Button.jsx
export function Button({ children, onClick }) {
  return (
    <button onClick={onClick} className="btn">
      {children}
    </button>
  );
}

// Button.test.jsx
import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { Button } from './Button';

describe('Button 컴포넌트', () => {
  it('버튼이 올바르게 렌더링된다', () => {
    render(<Button>클릭하세요</Button>);
    
    const button = screen.getByText('클릭하세요');
    expect(button).toBeInTheDocument();
  });
});

// UserCard.jsx
export function UserCard({ name, email, role }) {
  return (
    <div className="user-card">
      <h3>{name}</h3>
      <p>{email}</p>
      {role && <span className="role">{role}</span>}
    </div>
  );
}

// UserCard.test.jsx
import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { UserCard } from './UserCard';

describe('UserCard 컴포넌트', () => {
  it('사용자 정보가 올바르게 표시된다', () => {
    render(
      <UserCard 
        name="홍길동" 
        email="hong@example.com" 
        role="개발자" 
      />
    );
    
    expect(screen.getByText('홍길동')).toBeInTheDocument();
    expect(screen.getByText('hong@example.com')).toBeInTheDocument();
    expect(screen.getByText('개발자')).toBeInTheDocument();
  });

  it('role이 없을 때는 표시되지 않는다', () => {
    render(
      <UserCard 
        name="홍길동" 
        email="hong@example.com" 
      />
    );
    
    expect(screen.queryByText('개발자')).not.toBeInTheDocument();
  });
});

// Counter.jsx
import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
      <button onClick={() => setCount(count - 1)}>감소</button>
      <button onClick={() => setCount(0)}>초기화</button>
    </div>
  );
}

// Counter.test.jsx
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, it, expect } from 'vitest';
import { Counter } from './Counter';

describe('Counter 컴포넌트', () => {
  it('증가 버튼 클릭 시 카운트가 증가한다', async () => {
    const user = userEvent.setup();
    render(<Counter />);
    
    const increaseButton = screen.getByText('증가');
    await user.click(increaseButton);
    
    expect(screen.getByText('현재 카운트: 1')).toBeInTheDocument();
  });

  it('감소 버튼 클릭 시 카운트가 감소한다', async () => {
    const user = userEvent.setup();
    render(<Counter />);
    
    const decreaseButton = screen.getByText('감소');
    await user.click(decreaseButton);
    
    expect(screen.getByText('현재 카운트: -1')).toBeInTheDocument();
  });

  it('초기화 버튼 클릭 시 0으로 돌아간다', async () => {
    const user = userEvent.setup();
    render(<Counter />);
    
    // 먼저 증가시키고
    await user.click(screen.getByText('증가'));
    await user.click(screen.getByText('증가'));
    
    // 초기화
    await user.click(screen.getByText('초기화'));
    
    expect(screen.getByText('현재 카운트: 0')).toBeInTheDocument();
  });
});

// LoginForm.jsx
import { useState } from 'react';

export function LoginForm({ onSubmit }) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit({ email, password });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        placeholder="이메일"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        type="password"
        placeholder="비밀번호"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button type="submit">로그인</button>
    </form>
  );
}

// LoginForm.test.jsx
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, it, expect, vi } from 'vitest';
import { LoginForm } from './LoginForm';

describe('LoginForm 컴포넌트', () => {
  it('사용자 입력을 올바르게 처리한다', async () => {
    const user = userEvent.setup();
    const handleSubmit = vi.fn();
    
    render(<LoginForm onSubmit={handleSubmit} />);
    
    const emailInput = screen.getByPlaceholderText('이메일');
    const passwordInput = screen.getByPlaceholderText('비밀번호');
    const submitButton = screen.getByText('로그인');
    
    await user.type(emailInput, 'test@example.com');
    await user.type(passwordInput, 'password123');
    await user.click(submitButton);
    
    expect(handleSubmit).toHaveBeenCalledWith({
      email: 'test@example.com',
      password: 'password123'
    });
  });
});

• getByRole - 가장 권장되는 방법이에요. 접근성도 좋아지고 의미도 명확해요
• getByLabelText - 폼 요소를 찾을 때 완전 유용해요
• getByPlaceholderText - placeholder로 찾을 수 있어요
• getByText - 텍스트 내용으로 찾을 때 사용해요
• getByTestId - 최후의 수단으로 사용하세요

import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';

describe('쿼리 메서드 예시', () => {
  it('Role로 버튼 찾기', () => {
    render(<button>제출하기</button>);
    
    const button = screen.getByRole('button', { name: '제출하기' });
    expect(button).toBeInTheDocument();
  });

  it('Label로 입력 필드 찾기', () => {
    render(
      <div>
        <label htmlFor="username">사용자명</label>
        <input id="username" />
      </div>
    );
    
    const input = screen.getByLabelText('사용자명');
    expect(input).toBeInTheDocument();
  });

  it('여러 개 요소 찾기', () => {
    render(
      <ul>
        <li>항목 1</li>
        <li>항목 2</li>
        <li>항목 3</li>
      </ul>
    );
    
    const items = screen.getAllByRole('listitem');
    expect(items).toHaveLength(3);
  });
});

// Message.jsx
export function Message({ isError, text }) {
  return (
    <div className={isError ? 'error' : 'success'}>
      {isError ? '❌' : '✅'} {text}
    </div>
  );
}

// Message.test.jsx
import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { Message } from './Message';

describe('Message 컴포넌트', () => {
  it('에러 메시지를 올바르게 표시한다', () => {
    render(<Message isError={true} text="오류가 발생했습니다" />);
    
    expect(screen.getByText(/❌/)).toBeInTheDocument();
    expect(screen.getByText(/오류가 발생했습니다/)).toBeInTheDocument();
  });

  it('성공 메시지를 올바르게 표시한다', () => {
    render(<Message isError={false} text="저장되었습니다" />);
    
    expect(screen.getByText(/✅/)).toBeInTheDocument();
    expect(screen.getByText(/저장되었습니다/)).toBeInTheDocument();
  });
});

import { render, screen } from '@testing-library/react';

test('사용자 관점에서 요소 찾기', () => {
  render(<LoginForm />);
  
  // ✅ 좋은 방법 - 사용자가 보는 것처럼
  const submitButton = screen.getByRole('button', { name: '로그인' });
  const emailInput = screen.getByRole('textbox', { name: '이메일' });
  const passwordInput = screen.getByLabelText('비밀번호');
  
  // ❌ 나쁜 방법 - 구현 세부사항에 의존
  const badButton = screen.getByTestId('submit-btn');
  const badInput = screen.getByClassName('email-field');
});

import { render, screen, waitFor } from '@testing-library/react';

test('API 데이터 로딩 테스트', async () => {
  render(<UserProfile userId="123" />);
  
  // ✅ findBy는 자동으로 1초까지 대기
  const userName = await screen.findByText('홍길동');
  expect(userName).toBeInTheDocument();
  
  // ✅ 커스텀 timeout도 가능
  const avatar = await screen.findByRole('img', 
    { name: '프로필 이미지' },
    { timeout: 3000 }
  );
  
  // ❌ getBy를 쓰면 즉시 에러 발생
  // const badName = screen.getByText('홍길동'); // 안 돼요!
});

findBy를 쓸 때 await를 빼먹으면 테스트가 Promise 객체를 받아서 이상하게 통과될 수 있어요. 제가 한 번 이것 때문에 버그를 못 잡아서 30분 날렸거든요. 꼭 async/await 같이 써주세요!

import { render, screen, waitFor } from '@testing-library/react';

test('로딩 완료 후 스피너 사라짐', async () => {
  render(<DataLoader />);
  
  // 처음엔 있어야 함
  expect(screen.getByText('로딩 중...')).toBeInTheDocument();
  
  // 데이터 로드 완료 대기
  await screen.findByText('데이터 로드 완료');
  
  // ✅ queryBy로 없는지 확인
  expect(screen.queryByText('로딩 중...')).not.toBeInTheDocument();
  
  // ❌ getBy를 쓰면 에러 발생
  // expect(screen.getByText('로딩 중...')).not.toBeInTheDocument(); // 안 돼요!
});

test('할 일 목록 렌더링', async () => {
  render(<TodoList />);
  
  // 여러 개의 체크박스 찾기
  const checkboxes = screen.getAllByRole('checkbox');
  expect(checkboxes).toHaveLength(5);
  
  // 비동기로 추가되는 항목들
  const items = await screen.findAllByRole('listitem');
  expect(items).toHaveLength(5);
  
  // 각 항목 검증
  items.forEach((item, index) => {
    expect(item).toHaveTextContent(`할 일 ${index + 1}`);
  });
});

1. 요소가 비동기로 나타나나요? → Yes: findBy / No: 다음 질문
2. 요소가 없을 수도 있나요? → Yes: queryBy / No: 다음 질문
3. 여러 개가 존재하나요? → Yes: getAllBy / No: getBy
4. 어떤 선택자를 쓸까? → 1순위 ByRole → 2순위 ByLabelText → 3순위 ByText

import { render, screen, waitFor } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import UserProfile from './UserProfile';

describe('UserProfile 비동기 테스트', () => {
  it('사용자 데이터를 API에서 가져와 렌더링한다', async () => {
    // API 모킹
    global.fetch = vi.fn(() =>
      Promise.resolve({
        json: () => Promise.resolve({
          name: '홍길동',
          email: 'hong@example.com',
          age: 28
        })
      })
    );

    render(<UserProfile userId="123" />);

    // 로딩 상태 확인
    expect(screen.getByText('로딩 중...')).toBeInTheDocument();

    // 비동기 데이터 로딩 대기
    const userName = await screen.findByText('홍길동');
    expect(userName).toBeInTheDocument();

    // 이메일도 제대로 표시되는지 확인
    await waitFor(() => {
      expect(screen.getByText('hong@example.com')).toBeInTheDocument();
    });

    // API가 정확히 호출되었는지 검증
    expect(global.fetch).toHaveBeenCalledWith('/api/users/123');
  });

  it('API 에러 발생 시 에러 메시지를 보여준다', async () => {
    global.fetch = vi.fn(() => Promise.reject(new Error('네트워크 오류')));

    render(<UserProfile userId="123" />);

    // 에러 메시지가 나타날 때까지 대기
    const errorMessage = await screen.findByText(/데이터를 불러올 수 없습니다/);
    expect(errorMessage).toBeInTheDocument();
  });
});

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, it, expect, vi } from 'vitest';
import ContactForm from './ContactForm';

describe('ContactForm 인터랙션 테스트', () => {
  it('사용자가 폼을 작성하고 제출할 수 있다', async () => {
    const user = userEvent.setup();
    const mockSubmit = vi.fn();

    render(<ContactForm onSubmit={mockSubmit} />);

    // 이름 입력 - 진짜 사용자처럼 타이핑
    const nameInput = screen.getByLabelText('이름');
    await user.type(nameInput, '김코딩');
    expect(nameInput).toHaveValue('김코딩');

    // 이메일 입력 - 지우고 다시 입력하는 케이스
    const emailInput = screen.getByLabelText('이메일');
    await user.type(emailInput, 'wrong@email');
    await user.clear(emailInput);
    await user.type(emailInput, 'correct@email.com');

    // 메시지 입력 - 긴 텍스트
    const messageInput = screen.getByLabelText('문의 내용');
    await user.type(messageInput, '안녕하세요. 문의드립니다.');

    // 체크박스 선택
    const agreeCheckbox = screen.getByRole('checkbox', { name: /개인정보 수집 동의/ });
    await user.click(agreeCheckbox);
    expect(agreeCheckbox).toBeChecked();

    // 폼 제출
    const submitButton = screen.getByRole('button', { name: '전송' });
    await user.click(submitButton);

    // 제출 함수가 올바른 데이터로 호출되었는지 확인
    expect(mockSubmit).toHaveBeenCalledWith({
      name: '김코딩',
      email: 'correct@email.com',
      message: '안녕하세요. 문의드립니다.',
      agreed: true
    });
  });

  it('필수 입력 검증이 작동한다', async () => {
    const user = userEvent.setup();
    render(<ContactForm />);

    // 아무것도 입력 안 하고 제출
    const submitButton = screen.getByRole('button', { name: '전송' });
    await user.click(submitButton);

    // 에러 메시지 확인
    expect(screen.getByText('이름을 입력해주세요')).toBeInTheDocument();
  });
});

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, it, expect, beforeEach } from 'vitest';
import { create } from 'zustand';
import ShoppingCart from './ShoppingCart';

// 테스트용 스토어 생성 함수
const createTestStore = (initialState = {}) => {
  return create((set) => ({
    items: [],
    addItem: (item) => set((state) => ({ 
      items: [...state.items, item] 
    })),
    removeItem: (id) => set((state) => ({
      items: state.items.filter(item => item.id !== id)
    })),
    ...initialState
  }));
};

describe('ShoppingCart Zustand 테스트', () => {
  let testStore;

  beforeEach(() => {
    // 각 테스트마다 새 스토어 생성
    testStore = createTestStore();
  });

  it('상품을 장바구니에 추가할 수 있다', async () => {
    const user = userEvent.setup();
    
    render(<ShoppingCart store={testStore} />);

    const addButton = screen.getByRole('button', { name: '장바구니 추가' });
    await user.click(addButton);

    // 스토어 상태 직접 확인
    const { items } = testStore.getState();
    expect(items).toHaveLength(1);
    expect(items[0].name).toBe('상품명');

    // UI에도 반영되었는지 확인
    expect(screen.getByText('장바구니 (1)')).toBeInTheDocument();
  });

  it('초기 상태가 있는 경우를 테스트한다', () => {
    // 이미 상품이 담긴 상태로 시작
    const storeWithItems = createTestStore({
      items: [
        { id: 1, name: '노트북', price: 1500000 },
        { id: 2, name: '마우스', price: 50000 }
      ]
    });

    render(<ShoppingCart store={storeWithItems} />);

    expect(screen.getByText('장바구니 (2)')).toBeInTheDocument();
    expect(screen.getByText('총 1,550,000원')).toBeInTheDocument();
  });
});

import { renderHook, waitFor } from '@testing-library/react';
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
import { useDebounce } from './useDebounce';

describe('useDebounce 훅 테스트', () => {
  beforeEach(() => {
    vi.useFakeTimers();
  });

  afterEach(() => {
    vi.restoreAllMocks();
  });

  it('초기값을 즉시 반환한다', () => {
    const { result } = renderHook(() => useDebounce('초기값', 500));
    expect(result.current).toBe('초기값');
  });

  it('값이 변경되면 딜레이 후 업데이트된다', async () => {
    const { result, rerender } = renderHook(
      ({ value, delay }) => useDebounce(value, delay),
      {
        initialProps: { value: '첫번째', delay: 500 }
      }
    );

    expect(result.current).toBe('첫번째');

    // 값 변경
    rerender({ value: '두번째', delay: 500 });

    // 아직 딜레이 시간 전이므로 이전 값 유지
    expect(result.current).toBe('첫번째');

    // 500ms 경과
    vi.advanceTimersByTime(500);

    await waitFor(() => {
      expect(result.current).toBe('두번째');
    });
  });

  it('연속된 입력에서는 마지막 값만 반영된다', async () => {
    const { result, rerender } = renderHook(
      ({ value }) => useDebounce(value, 300),
      { initialProps: { value: 'A' } }
    );

    // 빠르게 연속 입력
    rerender({ value: 'AB' });
    vi.advanceTimersByTime(100);
    
    rerender({ value: 'ABC' });
    vi.advanceTimersByTime(100);
    
    rerender({ value: 'ABCD' });
    
    // 마지막 입력 후 300ms 경과
    vi.advanceTimersByTime(300);

    await waitFor(() => {
      expect(result.current).toBe('ABCD');
    });
  });
});

import { render, screen, within } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, it, expect, vi } from 'vitest';
import Modal from './Modal';

describe('Modal 컴포넌트 테스트', () => {
  it('열기/닫기가 정상 작동한다', async () => {
    const user = userEvent.setup();
    const onClose = vi.fn();

    const { baseElement } = render(
      <Modal isOpen={true} onClose={onClose}>
        <h2>모달 제목</h2>
        <p>모달 내용</p>
      </Modal>
    );

    // Portal로 document.body에 렌더링되므로 baseElement 사용
    const modal = within(baseElement).getByRole('dialog');
    expect(modal).toBeInTheDocument();

    // 닫기 버튼 클릭
    const closeButton = within(modal).getByRole('button', { name: '닫기' });
    await user.click(closeButton);

    expect(onClose).toHaveBeenCalledTimes(1);
  });

  it('ESC 키로 모달을 닫을 수 있다', async () => {
    const user = userEvent.setup();
    const onClose = vi.fn();

    render(
      <Modal isOpen={true} onClose={onClose}>
        모달 내용
      </Modal>
    );

    await user.keyboard('{Escape}');
    expect(onClose).toHaveBeenCalled();
  });

  it('배경 클릭으로 모달을 닫을 수 있다', async () => {
    const user = userEvent.setup();
    const onClose = vi.fn();

    const { baseElement } = render(
      <Modal isOpen={true} onClose={onClose} closeOnBackdropClick>
        모달 내용
      </Modal>
    );

    const backdrop = within(baseElement).getByTestId('modal-backdrop');
    await user.click(backdrop);

    expect(onClose).toHaveBeenCalled();
  });

  it('포커스 트랩이 작동한다', async () => {
    const user = userEvent.setup();

    render(
      <Modal isOpen={true}>
        <button>버튼1</button>
        <button>버튼2</button>
        <button>버튼3</button>
      </Modal>
    );

    const button1 = screen.getByRole('button', { name: '버튼1' });
    const button3 = screen.getByRole('button', { name: '버튼3' });

    // 마지막 요소에서 Tab을 누르면 첫 번째 요소로
    button3.focus();
    await user.tab();
    expect(button1).toHaveFocus();
  });
});

import { render } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import React from 'react';

const ExpensiveComponent = React.memo(({ data, onRender }) => {
  onRender();
  return <div>{data}</div>;
});

describe('메모이제이션 테스트', () => {
  it('props가 변경되지 않으면 리렌더링하지 않는다', () => {
    const renderSpy = vi.fn();
    const data = { value: 'test' };

    const { rerender } = render(
      <ExpensiveComponent data={data} onRender={renderSpy} />
    );

    expect(renderSpy).toHaveBeenCalledTimes(1);

    // 같은 props로 리렌더링
    rerender(<ExpensiveComponent data={data} onRender={renderSpy} />);

    // 여전히 1회만 렌더링되어야 함
    expect(renderSpy).toHaveBeenCalledTimes(1);
  });

  it('props가 변경되면 리렌더링한다', () => {
    const renderSpy = vi.fn();

    const { rerender } = render(
      <ExpensiveComponent data={{ value: 'test1' }} onRender={renderSpy} />
    );

    expect(renderSpy).toHaveBeenCalledTimes(1);

    // 다른 props로 리렌더링
    rerender(
      <ExpensiveComponent data={{ value: 'test2' }} onRender={renderSpy} />
    );

    // 2회 렌더링되어야 함
    expect(renderSpy).toHaveBeenCalledTimes(2);
  });
});

성능 최적화 테스트는 단위 테스트보다는 E2E 테스트나 프로파일링 도구로 하는 게 더 정확해요. 단위 테스트에서는 "의도한 대로 메모이제이션이 작동하는지" 정도만 확인하는 게 좋아요. 실제 성능 개선 효과는 프로덕션 환경에서 측정해야 하거든요.

Vitest로 컴포넌트 테스트를 작성할 때는 AAA 패턴을 따르면 정말 깔끔해져요. Arrange(준비), Act(실행), Assert(검증)로 나누는 거죠.

test('로그인 버튼 클릭 시 핸들러 호출', async () => {
  // Arrange - 준비
  const handleLogin = vi.fn();
  render(<LoginButton onClick={handleLogin} />);
  
  // Act - 실행
  const button = screen.getByRole('button', { name: '로그인' });
  await userEvent.click(button);
  
  // Assert - 검증
  expect(handleLogin).toHaveBeenCalledTimes(1);
});

// ❌ 안 좋은 방법
const input = container.querySelector('#email-input');
input.value = 'test@example.com';

// ✅ 좋은 방법
const emailInput = screen.getByLabelText('이메일');
await userEvent.type(emailInput, 'test@example.com');

// 사용자가 실제로 하는 행동을 시뮬레이션하죠!

// 헬퍼 함수 만들기
function renderWithProviders(component, options = {}) {
  const { initialState, ...renderOptions } = options;
  
  return render(
    <QueryClientProvider client={queryClient}>
      <ThemeProvider>
        {component}
      </ThemeProvider>
    </QueryClientProvider>,
    renderOptions
  );
}

// 테스트에서 간단하게 사용
test('프로필 표시', () => {
  renderWithProviders(<Profile />);
  expect(screen.getByText('사용자 프로필')).toBeInTheDocument();
});

describe('회원가입 폼', () => {
  // 핵심 기능
  test('모든 필드 입력 후 제출 성공', async () => {
    // ...
  });
  
  // 엣지 케이스
  test('이메일 형식 잘못되면 에러 메시지 표시', async () => {
    // ...
  });
  
  test('비밀번호가 너무 짧으면 제출 불가', async () => {
    // ...
  });
  
  // 접근성
  test('키보드로 폼 탐색 가능', async () => {
    // ...
  });
});

describe('타이머 컴포넌트', () => {
  beforeEach(() => {
    vi.useFakeTimers();
  });
  
  afterEach(() => {
    vi.clearAllTimers();
    vi.useRealTimers();
    cleanup(); // React Testing Library 정리
  });
  
  test('3초 후 메시지 표시', () => {
    render(<Timer />);
    
    act(() => {
      vi.advanceTimersByTime(3000);
    });
    
    expect(screen.getByText('시간 종료!')).toBeInTheDocument();
  });
});

테스트 간 독립성은 정말 중요해요. 한 테스트가 다른 테스트에 영향을 주면 디버깅이 엄청 어려워지거든요. afterEach에서 제대로 정리하는 습관을 들이세요!

describe('UserProfile 컴포넌트', () => {
  describe('렌더링', () => {
    test('사용자 정보가 없을 때 로딩 표시', () => {
      // ...
    });
    
    test('사용자 정보가 있을 때 프로필 표시', () => {
      // ...
    });
  });
  
  describe('편집 기능', () => {
    test('편집 버튼 클릭 시 편집 모드 진입', () => {
      // ...
    });
    
    test('저장 버튼 클릭 시 API 호출', () => {
      // ...
    });
  });
  
  describe('에러 처리', () => {
    test('API 실패 시 에러 메시지 표시', () => {
      // ...
    });
  });
});