[7팀 정건휘] Chapter 3-1. 프론트엔드 테스트 코드

[geonhwiii]

HARD

7주차 과제 체크포인트

기본과제

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

질문

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

병렬 테스트 문제 해결을 위해 각 테스트마다 독립된 핸들러를 생성합니다.

문제점:

• 기존 handlers.ts의 전역 events 배열은 모든 테스트에서 공유되는 문제가 있습니다.
• 병렬 실행 시 테스트 간섭으로 오류가 발생합니다.

해결 방안:

• 각 setup 함수 내부에서 독립된 testContext를 생성
• testContext가 테스트별로 격리된 데이터 환경 제공
• 클로저를 통해 각 핸들러가 고유한 testId를 참조

Q. 테스트를 독립적으로 구동시키기 위해 작성했던 설정들을 소개해주세요.

// 예시 : setupMockHandlerCreation
export const setupMockHandlerCreation = (initEvents: Event[] = []) => {
  const testId = testContext.create(initEvents);

  return [
    http.get('/api/events', () => {
      return HttpResponse.json({ events: testContext.getEvents(testId) });
    }),

    http.post('/api/events', async ({ request }) => {
      const json = (await request.json()) as Omit<Event, 'id'>;
      const event: Event = { ...json, id: randomUUID() };
      testContext.addEvent(testId, event);
      return HttpResponse.json(event, { status: 201 });
    }),
  ];
};

각 handler에서 context에서 관리하는 Map을 통해 각 테스트간 실행을 격리시키도록 하였습니다.

심화 과제

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

과제 셀프회고

• easy를 작성하는 동안은 즐거웠습니다.
• easy 내 테스트 코드에 사용되는 함수들이 테스트하기 좋은 코드다... 라는 생각을 하며 작성을 했습니다.
• msw는 너무 light하게 사용하고 있었나 라는 생각도 들었습니다.
• 테스트 환경에서 독립성을 지키는 것의 중요성을 알게되었습니다.

기술적 성장

• vitest(jest)내 함수들에서 사용하지 않았던 함수들을 사용할 수 있게 되었습니다.
• test 환경 내에 독립성에 대해서 고민하는 시각이 생겼습니다.

학습 효과 분석

• msw 핸들러를 활용하는 부분을 아직 적용하지 못했습니다.

• 이 부분을 보완해서 추가로 medium의 통합 테스트 부분을 작성해보려고 합니다.

• 그래서 통합 테스트에 대한 개념을 배워가고 싶습니다.

• 단위 테스트와 hook 테스트에 대해 분리가 잘 되어있어 이 부분이 조금 더 보이게 되었습니다.

과제 피드백

• mui 관련 import 오류가 있어, 테스트 코드 작성에 대해 문제라고 생각했던 부분에서 시간이 소모된 것이 아쉬웠습니다.
• 심화과제를 진행하여 직접 테스트 코드 만들어서 작성해보는 연습이 되어야할 것 같습니다.

리뷰 받고 싶은 내용

[hty0525]

이번 과제도 열심히 하느라 고생하셨습니다!
하드로 시작하셨다니, 그저 대단합니다.
그리고 각각 테스트가 병렬로 실행할 때, 발생하는 전역 공유 상태 문제도 context로 격리 환경을 만들어서 잘 해결 하셨어요.

그리고 질문이 있습니다!

• 테스트 코드를 클린코드와 연관지어 생각해 본다면 어떨까요?
• 건휘님이 생각하는 단위, 통합, E2E 테스트란?