[1팀 신희원] Chapter 🧦 3-1. 프론트엔드 테스트 코드 🧦

[Amelia-Shin]

Medium

7주차 과제 체크포인트

기본과제

Medium

• 총 11개의 파일, 115개의 단위 테스트를 무사히 작성하고 통과시킨다.

질문

Q. medium.useEventOperations.spec.tsx > 아래 toastFn과 mock과 이 fn은 무엇을 해줄까요?

toastFn : 실제 토스트를 표시하지 않고, 함수가 호출되었는지만 기록
mock (notistack) : 실제 notistack 라이브러리가 없어도 테스트 가능
const enqueueSnackbarFn = vi.fn(); : 가짜 함수로 호출을 추적하고 기록

Q. medium.integration.spec.tsx > 여기서 ChakraProvider로 묶어주는 동작은 의미있을까요? 있다면 어떤 의미일까요?

ThemeProvider (테마 제공)
SnackbarProvider (토스트 시스템)
CssBaseline (기본 스타일 초기화)

컴포넌트들이 제대로 작동할 수 있게 해주기 위함 (Provider를 사용하지 않으면 컴포넌트를 렌더링이 되지만 기능은 작동하지 않을 수 있음)

Q. handlersUtils > 아래 여러가지 use 함수는 어떤 역할을 할까요? 어떻게 사용될 수 있을까요?

각 이벤트 생성/수정/삭제를 위한 mock API를 설정하여, 테스트 시작 전에 필요한 mock 환경을 구성할수있습니다.
이미 짜여져 있는 함수를 가져다 쓰는거였지만 미디움에서 편리하게 사용했습니다..
테스트 환경에서 실제 API를 호출하기에 너무 많은 리소스를 사용한다고 생각이 들고, 실제 서버 대신 가짜 서버와 데이터를 만들어 사용함으로써 더 빠른 테스트를 진행할 수 있다고 생각합니다.

Q. setupTests.ts > 왜 이 시간을 설정해주는 걸까요?

vi.setSystemTime으로 고정된 시간을 설정하여 날짜/시간 의존 로직이 항상 일관된 결과를 반환하도록 해주기 위해서라고 생각합니다.
장점 : 테스트의 예측 가능성과 재현성을 보장!

심화 과제

• App 컴포넌트 적절한 단위의 컴포넌트, 훅, 유틸 함수로 분리했는가?
• 해당 모듈들에 대한 적절한 테스트를 5개 이상 작성했는가?

과제 셀프회고

TMI. Hard 진행하다가 커밋하지 않은 파일들이 다 날라갔어요..
왜 날라갔냐면.... 푸쉬를 했더니 off코치님 코드에 푸쉬가 되었고, 아래 명령어 실행했더니 수정한 파일들이 다 날라갔어요 ^0^
스테이징에 안올려둔 제 잘못.... 앞으로 reset 조심하자....

# 1. 로컬에서 마지막 커밋과 변경사항 모두 삭제 (hard reset)
git reset --hard HEAD~1

# 2. 원격에서도 삭제
git push origin +HEAD

갑자기 의욕 다 꺾이고 시간문제로 미디움으로 내려왔습니다... (그래도...과제 2번 반복학습할수있어서 좋-아- ^o^)

기술적 성장

• 에러 난다고 AI한테만 의존하지말자...

MUI Icons 간단 모킹 이 부분을 AI가 고쳐줬는데, 왜 저게 필요한지 진짜 이해할 수가 없었다.
그리고 너무 쓰기 싫었다. 하지만 나는 구글링을 해야겠다는 생각을 하지않고 AI한테 에러를 고쳐달라고 했지만 고치면 고칠수록 이상하고 여전히 에러는 사라지지 않았다.

처음에 짠 테스트 코드

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

/* 이거를 사용해야 EMFILE 에러 발생 X
// MUI Icons 간단 모킹
vi.mock('@mui/icons-material', () => ({
  ChevronLeft: () => null,
  ChevronRight: () => null,
  Notifications: () => null,
}));
*/

import { CalendarView } from '../../components/calendar/CalendarView';
import { createMockEvents } from '../utils';

const renderCalendarView = (props: Parameters<typeof CalendarView>[0]) =>
  render(<CalendarView {...props} />);

describe('CalendarView', () => {
  const mockEvents = createMockEvents();

  const mockHolidays = {
    '2025-01-01': '신정',
    '2025-01-15': '설날',
  };

  const mockSetView = vi.fn();
  const mockNavigate = vi.fn();

  beforeEach(() => {
    vi.clearAllMocks();
  });
  it('Week이 선택되었을 때 해당 날짜의 주간 일정이 렌더링된다', () => {
    renderCalendarView({
      view: 'week',
      setView: mockSetView,
      currentDate: new Date('2025-01-15'),
      navigate: mockNavigate,
      filteredEvents: mockEvents,
      notifiedEvents: [],
      holidays: mockHolidays,
    });

    expect(screen.getByTestId('week-view')).toBeInTheDocument();
    expect(screen.queryByTestId('month-view')).not.toBeInTheDocument();
  });

결국 구글링을 해서 찾은 방법!!!
mui/material-ui#46324

-import { LocationCity } from "@mui/icons-material";
+import LocationCity from "@mui/icons-material/LocationCity";

몇시간동안 삽질했는데.... 다음부터 절대 똑같은 에러를 보더라도 AI한테 고쳐달라는둥 시간낭비하지말자.

코드 품질

없습니다.

학습 효과 분석

• act 와 waitFor
  act, waitFor 같은 도구가 비동기 로직과 UI 업데이트를 제어하는 역할을 한다는 것을 알게 되었습니다.

act 와 waitFor의 차이점

act는 동기, 비동기로 사용 가능
waitFor은 항상 비동기

act와 waitFor은 언제 사용하는게 좋을까?

// 동기 act - 타이머 즉시 진행
act(() => {
   vi.advanceTImersByTime(1000);
});

// waitFor - 실제로 시간이 흘러야 함
  await waitFor(() => {
    expect(screen.getByText('1초 지남')).toBeInTheDocument();
  }, { timeout: 2000 });

과제 피드백

easy 테스트 작성도 재밌었고, 통합테스트는 처음에 좀 막막했지만 방법을 알고 하나씩 해보니 오히려 easy보다 더 재밌었습니다.

리뷰 받고 싶은 내용

Q1. 저는 아래 코드에서 2번 방법을 사용해서 데이터를 불러왔는데요.
데이터를 불러오는 방법 중에 다른 방법도 있는데 보통 1번 방법은 언제 많이 사용하는지 궁금합니다.

it('저장되어있는 초기 이벤트 데이터를 적절하게 불러온다', async () => {
  setupMockHandlerCreation(events);
  const { result } = renderHook(() => useEventOperations(false));
 
//  1번 방법
   await act(async () => {
     await new Promise((resolve) => setTimeout(resolve, 0));
   });

// 2번 방법
  await act(async () => {
    await result.current.fetchEvents();
  });

  expect(result.current.events).toEqual(events);
  expect(enqueueSnackbarFn).toHaveBeenCalledWith('일정 로딩 완료!', { variant: 'info' });
});

Q2. 의미있는 테스트 코드를 작성하기 위한 기준이 어떤것인지 궁금합니다.
단일 테스트에서 굳이 이런 내용까지 테스트에 넣어야하나? 싶었던게 있었습니다.
예시)

  it.skip('유효하지 않은 월에 대해 적절히 처리한다', () => {
    expect(getDaysInMonth(2025, 13)).toBe(31);
  });

it.skip('size 파라미터를 생략하면 기본값 2를 사용한다', () => {
    expect(fillZero(1)).toBe('01');
  });

그리고 의미있는 테스트코드를 작성하기 위해선 어떤걸 하면 좋을까요?