[3팀 여진석] Chapter 🦍 3-1. 프론트엔드 테스트 코드 🦍

by realstone22025. 8. 16.

난이도에 맞는 템플릿을 선택해서 작성해주세요!

7주차 과제 체크포인트

기본

HARD

7주차 과제 체크포인트

기본과제

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

질문

Q. handlersUtils에 남긴 질문에 답변해주세요.

일단 문제는 handler에서 json을 수정하는 handler가 전역으로 설정 되어있다는 점이다. 병렬적으로 테스트가 실행될경우 모두가 같은 json을 수정하게되는 것이 문제다.

어떻게하면 병렬적으로 테스트할 때 독립적으로 실행시킬까?

test마다 독립적으로 events를 셋팅해야한다.
test마다 server handler가 독립적으로 동작해야한다.

짱돌을 계속 굴려봐도 API자체에서 수정하는 내용이다보니 events를 독립적으로 셋팅하려면 결국 테스트마다 새로 handler를 생성해야되는게 아닌가? 라는 결론을 지었다.

어떻게 테스트마다 새로 핸들러를 셋팅할 수 있을까?

1. 테스트마다 setupServer 설정하기

https://mswjs.io/docs/api/setup-server

While we commend setting up request interception globally, as a part of your testing setup, you may also use setupServer in individual tests, if you want to. Just make sure to choose one pattern and follow it throughout your tests—multiple setupServer calls is not a good idea!

공식문서를 참고해봤을 때 setupServer는 글로벌로 한번 선언하거나, 테스트별로 설정해야한다고 적혀있다.

중복으로 선언해서는 안된다.

지금 구조에서 setupServer를 테스트마다 동작시키려면, global로 mocking하고 있는 로직을 제거해야한다.

이렇게되면 독립적으로 이벤트 핸들러를 동작시킬 수는 있지만, 특별히 다르게 동작해야될 이유가 없는 곳에서도 불필요하게 매번 setupServer 로직을 넣어줘야한다.

더 좋은 방법이 없을까?

2. handler override 하기

https://mswjs.io/docs/best-practices/network-behavior-overrides/#resetting-request-handlers

override를 할 수 있는 방법이 없을까 찾아보던중 문서 제목이 override인 내용을 찾았다.

server.use()와 resetHandlers()를 사용하면 내가 해결하고자 했던 내용을 풀어낼 수 있었다.

전역적으로 setup server handler들이 존재
테스트 내부에서 각각 handler를 use()함수를 통해 override를 해줘서 다르게 동작시킨다.
override한 테스트에서는 테스트가 끝날 때 resetHandlers()를 실행시켜 원상복구

그림으로 그려보면 이런 모습이지 않을까?

Q. 테스트를 독립적으로 구동시키기 위해 작성했던 설정들을 소개해주세요. 위에서 작성한 내용처럼 server.use() resetHandlers()를 사용하였다.

export const setupMockHandlerCreationError = () => {
  afterEach(() => {
    server.resetHandlers();
  });

  server.use(
    http.post('/api/events', () => {
      return HttpResponse.json({ message: 'Error' }, { status: 500 });
    })
  );
};

심화 과제

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

ㅎㅎㅎ... 안했습니다... 아니.. 못했습니다..

과제 셀프회고

테스트코드는 나의 관심사도 아니였고, 스타트업에서 과연 필요한 내용일까? 싶은 의구심도 갖고 있었다. 그러다보니 당연히 테스트코드 자체를 처음 공부해봤다.

공부해본 후기로는 이녀석.. 우리 회사에서도 당장 하나씩 사용해봐도 괜찮겠는데...? 라는 생각을 했다. 회사에는 핵심기능이 옷편집, 옷등록, 코디등록 등등 앱 초기부터 있었던 기초기능이있다. 해당 기능들을 개선하거나 고도화할 때마다 레거시 코드들이 어떻게 동작하고 있는것이고, 기획도 잘 모르겠고, 기대값도 뭔지 모르겠는 경우가 많다. 이런 곳에 테스트코드를 도입해놓으면, 안정적으로 개발할 수 있을 것 같고 팀원들에게 도입을 고려해보자고 전달해둔 상태이다.

과제는 난이도를 선택할 수 있었는데, 나는 hard를 선택하였다. 테스트코드는 완전 처음 접해보긴하지만, hard 테스트 코드를 전부 수행해야지 공부했다고 느낄 수 있을 것 같았고 심화과제는 처음부터 포기하고, 테스트코드를 학습하자는 목표를 갖고 과제에 임했다. 테스트코드를 다 작성하고 리팩토링하는 과정도 겪어보고 싶었지만, 테스트코드만으로도 쉽지 않은 주간이었다.

그래도 오랜만에 AI를 사용하지 않고 구글링하고 문서를 찾아가며 작성하는 것의 재미도 느꼈다. 오랜만에 밑바닥부터 모르는 것을 학습하니 재미있었고, AI를 사용하지 말고 과제하라고 하신 코치님의 깊은 뜻을 느낄 수 있었던 주간이었다.

과제 탈락을 보는 것은 너무 슬프지만, hard고른 곳을 후회하지 않는다! 테스트코드를 학습했으니까!!!

기술적 성장

테스트 코드의 이해

Testing Library??? Jest?? Vitest??

이번에 발제를 들으면서 테스팅 라이브러리는 뭐고, jest와 vitest는 무엇이지 정리가 되지 않았다.

Vitest, Jest vitest와 jest는 테스트 코드를 실행하는 러너이다. 테스트코드를 실행시키고 결과물을 출력해주는 시스템이다.
Testing Library? vitest와 jest를 이용하여 테스트를 돌릴 수 있게 해주는 도구이다.

약간 진격의거인 세계관으로 비교해보자면,, testing library는 입체기동장치 test는 거인 vitest, jest는 조사병단, 주둔병단 이런 느낌이랄까..?

테스트 작성 방법

테스트 코드를 작성하는 방식에는 두가지 방식이 있다.

구현 기반 테스트 구현 기반 테스트는 구현 세부사항에 따라서 개발자 관점, 코드 구조 기반으로 작성하는 방식이다. 내부 로직에 대해서 커버리지가 높다.
명세 기반 테스트 명세 기반 테스트는 사용자 관점, 요구사항 문서에 따라서 작성하는 방식이다.

예를 들어서 "초기 상태에서는 알림이 없어야 한다" 라는 테스트를 진행할 때 알람이 없어야 한다는 명세 기반 테스트일까 구현 기반 테스트일까?

테스트 코드를 작성해보았다.

it('초기 상태에서는 알림이 없어야 한다', async () => {
  const { result: eventsResult } = renderHook(() => useEventOperations(false));

  await screen.findByText('일정 로딩 완료!');

  const events = eventsResult.current.events;

  const { result } = renderHook(() => useNotifications(events));

  expect(result.current.notifications).toEqual([]);
});

useEventOperations, useNotifications 등의 hook 내부에서 어떻게 구현이 되어있는지는 테스트하지 않았다. 이런 경우가 명세 기반 테스트이다.

올바른 테스트 코드

답변은 정적이어야할까? 동적이어도 될까?

처음 과제를 진행했을 때는 고정된 테스트 방식에 대해서 의문을 품었다. 데이터나 날짜를 변경하면 매번 결과값을 하드코딩으로 다시 작성하는 것이 매우 비효율적으로 보였다. 그래서 전부 동적으로 답변이 나오도록 작성했었다.

it('holidays는 오늘 날짜에 해당하는 공휴일 정보를 포함하고 있어야 한다', async () => {
  const { result } = renderHook(() => useCalendarView());

  const holidays = HOLIDAY_RECORD_BY_MONTH[format('YYYY-MM')];

  expect(result.current.holidays).toEqual(holidays);
});

it(`currentDate는 오늘 날짜인 ${format('YYYY-MM-DD')}이어야 한다`, () => {
  const { result } = renderHook(() => useCalendarView());

  assertDate(result.current.currentDate, new Date());
});

여기까지는 아마 취향차이 정도로 넘어갈 수 있을 것 같다. 문제 없을 것 같다.

그러나 "검색어에 맞는 이벤트만 필터링해야 한다" 라는 테스트의 결과값을 직접 filter해서 결과값을 추론한다면..?

 expect(result).toEqual(data.filter(...))

이런 테스트 코드를 작성하고 data.filter()도.. 테스트 돌려야하는거아니야...? 생각했다. 그리고 아차 싶었다. 내가 뭔 생각을한거야! 하며 무한 테스트 굴레에 빠지는 상상을 하고 이건 잘못됐다고 느꼈다.

그래서 바로 코치님들께 여쭤봤다. 취향차이가 있긴하지만 테스트코드의 답변은 정적으로 적는 것이 좋다고 하셨다.

테스트코드는 너무 코딩하듯 작성하는 것은 좋지 않구나라고 느꼈다.

동등 분할 그룹

테스트 설계 기법 중 하나이다.

입력값들을 의미적으로 동일한 결과를 내는 그룹으로 나누는 기법이다.

아래 예시를 보면 "일정이 표시되지 않는다", "일정이 표시된다" 두 그룹으로 나뉜다. 이 때는 의미가 있는 동등 분할 그룹이다.

it('주별 뷰를 선택 후 해당 주에 일정이 없으면, 일정이 표시되지 않는다.', async () => {
  const user = userEvent.setup();

  vi.setSystemTime(new Date('2025-09-01'));

  ...

  expect(screen.queryByText('팀 회의')).not.toBeInTheDocument();
});

it('주별 뷰 선택 후 해당 일자에 일정이 존재한다면 해당 일정이 정확히 표시된다', async () => {
  const user = userEvent.setup();

  vi.setSystemTime(new Date('2025-09-12'));
  ...

  expect(within(weekViewContainer).getByText('팀 회의')).toBeVisible();
});

그러나 만약 아래처럼 같은 분할 그룹의 테스트를 여러번 하는 경우는 잘못된 테스트 설계다


 it('주별 뷰를 선택 후 9월 1주차에 일정이 없으면, 일정이 표시되지 않는다.', async () => {
  const user = userEvent.setup();

  ...

  expect(screen.queryByText('팀 회의')).not.toBeInTheDocument();
});

it('주별 뷰를 선택 후 9월 2주차에 일정이 없으면, 일정이 표시되지 않는다.', async () => {
  const user = userEvent.setup();

  ...

  expect(screen.queryByText('팀 회의')).not.toBeInTheDocument();
});

경계값 테스트

테스트의 경계값에는 개발자의 실수가 많이 일어날 수 있는 위치이다. 아래처럼 경계값이 올바르게 분류되는지 테스트하는 것은 의미있다.

it('주의 끝(일요일)에 대해 올바른 주의 날짜들을 반환한다', () => {
  expect(getWeekDates(new Date('2025-07-07'))).toEqual([
    new Date('2025-07-06'),
    new Date('2025-07-07'),
    new Date('2025-07-08'),
    new Date('2025-07-09'),
    new Date('2025-07-10'),
    new Date('2025-07-11'),
    new Date('2025-07-12'),
  ]);
});

학습 효과 분석

실무 적용 가능성

회사에는 핵심기능이 옷편집, 옷등록, 코디등록 등등 앱 초기부터 있었던 기초기능이 있다. 해당 기능들을 개선하거나 고도화할 때마다 레거시 코드들이 어떻게 동작하고 있는것이고, 기획도 잘 모르겠고, 기대값도 뭔지 모르겠는 경우가 많다. 스프린트에서 해당 작업을 하게 된다는 얘기만 들어도 머리가 아프고, 시간이 비정상적으로 많이 소모된다.

원래는 어쩔 수 없지.. 싹 다 엎어버려야되는데, 기획부터 개발까지 새로 해야되는거 아니야? 라는 생각만 하고 있었는데, 이번에 테스트 코드를 작성하면서 생각이 조금 바뀌었다.

오프님이 Q&A 섹션중 누군가 비효율적인 테스트코드 같다고 해도 테스트코드로 인해 심리적인 안정감을 받을 수 있다면 그걸로도 의미있다고 하셨다. 이 말씀이 좀 와닿게 되는 것 같다. 옛날 기능을 건드릴 때마다 무슨 버그가 발생할지 모르겠으니 불안하고 작업하고 싶지 않았는데, 테스트코드로 나에게 심리적인 안정감을 준다면 개발하기가 정말 편할 것 같다.

테스트코드를 학습한 후 생각

테스트 코드하면 엄청 멀게만 느껴졌고, 우리 회사처럼 작은, 빠르게 기능 개발하기 바쁜 곳은 의미가 없을 것이야. 라고만 생각했는데, 테스트 코드가 오히려 빠른 추친력을 줄 수도 있을 것 같다는 생각을 했다. 회사에서 한달에 한번씩 팀 회고를 하는데, 이 때 테스트 코드에 대한 생각을 나눠보려고 한다.

과제 피드백

테스트 코드를 처음 접하다보니 과제양이 벅차게 느껴지긴 했습니다. 그래서 난이도를 나눠주시긴 하셨지만, 쉬운걸 고르고 싶지 않았고... 심화과제 리팩토링은 과감하게 포기하고 테스트코드에 집중하여 학습하고자 하였습니다. 이런 경우에 제가 선택한 길이긴 하지만 심화과제 실패해서 슬프네요 ㅜ

리뷰 받고 싶은 내용

1. handlersUtils 함수 로직

과제의 핵심이 병렬로 실행했을 때 문제가 없어야한다고 하셨는데, 테스트가 병렬로 돈다면, 여러곳에서 동시에 server.use로 override를 하면 문제가 생기는 것이 아닌가? 하는 걱정이 되었습니다.

테스트를 실행했을 때는 문제가 발생하지 않는데, 테스트가 병렬로 돈다는 의미가 동시에 테스트가 실행된다는 것은 아닌걸까요?

server.resetHandlers()를 해주지 않으면 외부 테스트에 영향주는 것을 보았을 때는 그렇지만은 아닌거같고.. 약간 혼란스러운 부분입니다.

2. 회사에서 테스트 코드 도입하는 방법?

위에 회고에 적은 것처럼 레거시 로직과 함께 개발할 때 필요성이 느껴진 것 같습니다. 해당 포인트로 팀원들과 얘기해서 도입을 해볼까 싶은데, 준일님은 어떻게 생각하시나요? 제가 새로운거 배웠다고 신나서 편협된 시각으로 지금 상황을 바라본게 아닐까? 걱정되었습니다.

3. 테스트 코드의 기대값을 어디까지 정적으로 두어야하고 동적으로 만들어야할지? (이미 오프코치님께서 답변을 해주셨지만, 준일님께도 들어보고 싶네요 ㅎㅎ..)

예를 들어서 "검색어에 맞는 이벤트만 필터링해야 한다" 라는 테스트에서의 결과 기대값이 아래라면,

[
  {
    id: '2',
    title: '준일님 짱짱맨',
    date: '2025-10-15',
    startTime: '09:00',
    endTime: '10:00',
    description: '준일님 짱짱맨',
    location: '회의실 B',
    category: '업무',
    repeat: { type: 'none', interval: 0 },
    notificationTime: 10,
  },
];

정답에 대한 기대값을 정적으로 보관해야할지 아래처럼 filter로 돌아야되나 고민하였습니다.

eventList.filter(...)

filter의 로직이 도는순간 테스트코드를 테스트해야되는 상황이 오는게 아닌가? 라는 무한 테스트 굴레의 빠지는 상상을 해보았습니다.

그럼 무조건 정적으로 두어야하나? 싶다가도 아주 간단한 결과값인데도 정적으로 두는 것은 또 불필요한 것 같습니다.

예시로 들어보면, "주간 뷰에서 다음으로 navigate" 하는 테스트입니다.

7일후, 7일전으로 이동하는 아주 간단한 로직임에도 이것도 정적인 데이터로 테스트결과값을 작성해놔야할지 고민입니다.

정적으로 두면 mock 데이터가 변경되면 테스트 결과값도 같이 매번 수정해줘야한다는 불편한 점이 있을텐데, 불편하더라도 올바른 테스트를 작성하려면 정적인 데이터를 사용해야할까요?

과제 피드백

안녕하세요 진석님! 7주차 과제 잘 진행해주셨네요 ㅎㅎ 다만 심화과제는 시간이 많이 부족했군요.. ㅠㅠ 아쉽습니다.

handlersUtils 함수 로직: 과제의 핵심이 병렬로 실행했을 때 문제가 없어야한다고 하셨는데, 테스트가 병렬로 돈다면, 여러곳에서 동시에 server.use로 override를 하면 문제가 생기는 것이 아닌가? 하는 걱정이 되었습니다. 테스트를 실행했을 때는 문제가 발생하지 않는데, 테스트가 병렬로 돈다는 의미가 동시에 테스트가 실행된다는 것은 아닌걸까요? server.resetHandlers()를 해주지 않으면 외부 테스트에 영향주는 것을 보았을 때는 그렇지만은 아닌거같고.. 약간 혼란스러운 부분입니다.

테스트 병렬 실행의 의미

Jest/Vitest에서 "병렬 실행"은 서로 다른 테스트 파일들을 병렬로 실행하는 것을 의미한답니다!

# 이런 식으로 여러 파일이 동시에 실행됩니다
test-file-1.test.ts (Worker 1) ← 독립적인 프로세스
test-file-2.test.ts (Worker 2) ← 독립적인 프로세스  
test-file-3.test.ts (Worker 3) ← 독립적인 프로세스

하지만 별도의 설정을 해주지 않는다면 하나의 테스트 파일 내부에서는 테스트들이 순차적으로 실행된답니다..!

공식문서 링크: https://vitest.dev/guide/parallelism.html#file-parallelism

MSW Server 인스턴스

각 테스트 파일은 독립적인 MSW server 인스턴스를 가집니다.

// setupTests.ts에서 생성된 server는 각 파일마다 독립적
export const server = setupServer(...handlers);

따라서 파일 A에서 server.use()를 호출해도 파일 B의 server에는 영향을 주지 않는답니다! 즉, 다르게 이야기해보자면 같은 파일 내의 테스트 간에는 문제가 생길수도 있어요.

// 같은 테스트 파일에서
describe('Event tests', () => {
  test('should handle creation error', () => {
    setupMockHandlerCreationError(); // server.use()로 POST 핸들러 추가
    // 테스트 실행...
  });

  test('should handle normal flow', () => {
    // 이전 테스트의 POST 핸들러가 여전히 활성화되어 있을 수 있음!
    // afterEach는 테스트 완료 후에 실행되므로
  });
});

그래서 이러한 접근이 필요할 수 있답니다!

export const createMockHandlerScope = (handlers: any[]) => {
  let originalHandlers: any[];
  
  return {
    setup: () => {
      // 현재 핸들러 백업
      originalHandlers = server.listHandlers();
      server.use(...handlers);
    },
    cleanup: () => {
      // 정확히 이전 상태로 복원
      server.resetHandlers(...originalHandlers);
    }
  };
};

// 또는 테스트별 독립적인 설정
export const withMockHandlers = (handlers: any[], testFn: () => void) => {
  const originalHandlers = server.listHandlers();
  
  beforeEach(() => {
    server.use(...handlers);
  });
  
  afterEach(() => {
    server.resetHandlers(...originalHandlers);
  });
  
  return testFn;
};

회사에서 테스트 코드 도입하는 방법: 위에 회고에 적은 것처럼 레거시 로직과 함께 개발할 때 필요성이 느껴진 것 같습니다. 해당 포인트로 팀원들과 얘기해서 도입을 해볼까 싶은데, 준일님은 어떻게 생각하시나요? 제가 새로운거 배웠다고 신나서 편협된 시각으로 지금 상황을 바라본게 아닐까? 걱정되었습니다.

테스트를 정말 도입하고 싶다면, 팀에 "테스트"에 대한 이야기를 꺼내지 않고 일단 테스트를 작성해서 PR을 올린다음에 "이렇게 하니까 ~~ 등의 효과를 느꼈어요!" 라고 추가해보는거죠 ㅎㅎ

무조건 모든 코드에 도입하기보단 그냥 진석님이 필요하다고 생각하는 부분에 테스트를 추가해서 도입하면 된다고 생각해요.

이렇게 일단 눈에 보이는 방식으로 테스트를 보여준 다음에 팀원의 반응을 살펴보세요. "굳이?" 라는 키워드가 계속 노출된다면.. 아마 도입하기 힘들 수 있답니다 ㅠㅠ

테스트 코드의 기대값을 어디까지 정적으로 두어야하고 동적으로 만들어야할지? (이미 오프코치님께서 답변을 해주셨지만, 준일님께도 들어보고 싶네요 ㅎㅎ..)

이런 문제를 해결하기 위해 목데이터가 있다고 생각해요 ㅎㅎ 기대값이 바뀌지 않도록 목데이터를 통해 고정해놓는거죠. 그러면 꼭 이럴 때 목데이터를 써야하는가!? 라기 보단... 최소한의 고정이 필요하다고 생각해요. 가령 날짜만 고정해놓는다거나!?

사이드 이펙트가 최소화된 로직이라면 어떤 input이든 output을 뱉어내는 방식은 동일할테니까요! 대신 엣지케이스(경계값)을 테스트 케이스에 꼼꼼하게 추가해주면 좋답니다!

항해플러스 프론트엔드

realstone2 님의 상세페이지 ＞ [3팀 여진석] Chapter 🦍 3-1. 프론트엔드 테스트 코드 🦍

[3팀 여진석] Chapter 🦍 3-1. 프론트엔드 테스트 코드 🦍

7주차 과제 체크포인트

기본

HARD

7주차 과제 체크포인트

기본과제

질문

어떻게하면 병렬적으로 테스트할 때 독립적으로 실행시킬까?

어떻게 테스트마다 새로 핸들러를 셋팅할 수 있을까?

1. 테스트마다 setupServer 설정하기

2. handler override 하기

심화 과제

과제 셀프회고

기술적 성장

테스트 코드의 이해

Testing Library??? Jest?? Vitest??

테스트 작성 방법

올바른 테스트 코드

답변은 정적이어야할까? 동적이어도 될까?

동등 분할 그룹

경계값 테스트

학습 효과 분석

실무 적용 가능성

테스트코드를 학습한 후 생각

과제 피드백

리뷰 받고 싶은 내용

1. handlersUtils 함수 로직

2. 회사에서 테스트 코드 도입하는 방법?

3. 테스트 코드의 기대값을 어디까지 정적으로 두어야하고 동적으로 만들어야할지? (이미 오프코치님께서 답변을 해주셨지만, 준일님께도 들어보고 싶네요 ㅎㅎ..)

과제 피드백

테스트 병렬 실행의 의미

MSW Server 인스턴스