Q: Snapshot 테스트의 장단점과 올바른 사용법은?

Snapshot 테스트는 컴포넌트의 렌더링 결과를 파일로 저장하고, 이후 변경 여부를 확인합니다. **기본 사용:** ```tsx import { render } from '@testing-library/react'; test('Button 렌더링', () => { const { container } = render( 클릭 ); expect(container).toMatchSnapshot(); }); // 인라인 스냅샷 test('Button 텍스트', () => { const { getByRole } = render( 클릭 ); expect(getByRole('button').textContent).toMatchInlineSnapshot(`"클릭"`); }); ``` **장점:** - 설정이 간단하고 빠르게 작성 가능 - 의도치 않은 UI 변경 감지 - 대규모 리팩토링 시 안

Question 1

단위 테스트, 통합 테스트, E2E 테스트의 차이점은?

Accepted Answer

테스트 피라미드에 따라 세 가지 주요 테스트 레벨이 있습니다.

| 레벨 | 대상 | 도구 | 속도 | 수량 |
|------|------|------|------|------|
| 단위(Unit) | 함수/컴포넌트 | Jest, Vitest | 빠름 | 많이 |
| 통합(Integration) | 여러 모듈 조합 | Testing Library | 보통 | 적당히 |
| E2E | 전체 시스템 | Playwright, Cypress | 느림 | 적게 |

```typescript
// 단위 테스트
test('add 함수', () => {
  expect(add(1, 2)).toBe(3);
});

// 통합 테스트 (React Testing Library)
test('폼 제출', async () => {
  render(<LoginForm />);
  await userEvent.type(screen.getByLabelText('이메일'), 'test@test.com');
  aw

Question 2

Mocking이란 무엇이며 왜 필요한가요?

Accepted Answer

Mocking은 테스트에서 외부 의존성을 가짜 객체로 대체하는 기법입니다.

```typescript
// API 호출 모킹
jest.mock('./api', () => ({
  fetchUser: jest.fn().mockResolvedValue({ id: 1, name: 'Kim' }),
}));

test('사용자 정보 표시', async () => {
  render(<UserProfile userId="1" />);
  await waitFor(() => {
    expect(screen.getByText('Kim')).toBeInTheDocument();
  });
});

// 모듈 모킹
jest.mock('next/navigation', () => ({
  useRouter: () => ({ push: jest.fn(), back: jest.fn() }),
  useSearchParams: () => new URLSearchParams(),
}));

// 타이머 모

Question 3

React Testing Library의 핵심 원칙과 사용법은?

Accepted Answer

React Testing Library는 "구현이 아닌 동작"을 테스트하는 것을 핵심 원칙으로 합니다.

```typescript
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

test('카운터 증가', async () => {
  render(<Counter />);

// 사용자가 보는 것 기준으로 요소 선택
  const button = screen.getByRole('button', { name: '증가' });
  const count = screen.getByText('0');

await userEvent.click(button);

expect(screen.getByText('1')).toBeInTheDocument();
});
```

**쿼리 우선순위 (권장 순):**
1. `getByRole` - 접근성

Question 4

TDD(테스트 주도 개발)의 원칙과 프론트엔드 적용법은?

Accepted Answer

**TDD(Test-Driven Development)**는 테스트를 먼저 작성하고, 테스트를 통과하는 최소한의 코드를 구현한 뒤 리팩토링하는 개발 방법론입니다.

**TDD 사이클 (Red-Green-Refactor):**
1. **Red**: 실패하는 테스트 작성
2. **Green**: 테스트를 통과하는 최소 코드 구현
3. **Refactor**: 중복 제거, 코드 정리 (테스트 유지)

**프론트엔드 TDD 예시:**
```ts
// 1. Red — 실패하는 테스트
describe('formatPrice', () => {
  it('원 단위로 포맷팅한다', () => {
    expect(formatPrice(1000)).toBe('1,000원');
    expect(formatPrice(0)).toBe('0원');
  });
});

// 2. Green — 최소 구현
function formatPrice(price: number): string {
  return p

Question 5

Storybook의 역할과 컴포넌트 개발 워크플로우를 설명해주세요.

Accepted Answer

Storybook은 UI 컴포넌트를 **독립적으로 개발하고 문서화**하는 도구입니다.

**Story 작성:**
```tsx
// Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
  title: 'UI/Button',
  component: Button,
  tags: ['autodocs'],
  argTypes: {
    variant: { control: 'select', options: ['primary', 'secondary'] },
    size: { control: 'radio', options: ['sm', 'md', 'lg'] },
  },
};
export default meta;

export const Primary: StoryObj<typeof B

Question 6

Snapshot 테스트의 장단점과 올바른 사용법은?

Accepted Answer

Snapshot 테스트는 컴포넌트의 렌더링 결과를 파일로 저장하고, 이후 변경 여부를 확인합니다. **기본 사용:** ```tsx import { render } from '@testing-library/react'; test('Button 렌더링', () => { const { container } = render(); expect(container).toMatchSnapshot(); }); // 인라인 스냅샷 test('Button 텍스트', () => { const { getByRole } = render(); expect(getByRole('button').textContent).toMatchInlineSnapshot(`"클릭"`); }); ``` **장점:** - 설정이 간단하고 빠르게 작성 가능 - 의도치 않은 UI 변경 감지 - 대규모 리팩토링 시 안

Question 7

MSW(Mock Service Worker)란 무엇이고 어떻게 사용하나요?

Accepted Answer

**MSW(Mock Service Worker)**는 Service Worker를 이용해 네트워크 요청을 가로채고 모의 응답을 반환하는 API 모킹 라이브러리입니다.

**설정:**
```ts
// src/mocks/handlers.ts
import { http, HttpResponse } from 'msw';

export const handlers = [
  http.get('/api/users', () => {
    return HttpResponse.json([
      { id: 1, name: 'Kim' },
      { id: 2, name: 'Lee' },
    ]);
  }),

http.post('/api/login', async ({ request }) => {
    const { email } = await request.json();
    return HttpResponse.json({ token: 'mock-token', email });

테스트

01단위 테스트, 통합 테스트, E2E 테스트의 차이점은?보통테스트 종류

02Mocking이란 무엇이며 왜 필요한가요?보통도구

03React Testing Library의 핵심 원칙과 사용법은?쉬움도구

04TDD(테스트 주도 개발)의 원칙과 프론트엔드 적용법은?보통방법론

05Storybook의 역할과 컴포넌트 개발 워크플로우를 설명해주세요.보통도구

06Snapshot 테스트의 장단점과 올바른 사용법은?보통전략

07MSW(Mock Service Worker)란 무엇이고 어떻게 사용하나요?보통도구