[8팀 김민지] Chapter 3-1. 프론트엔드 테스트 코드

[annkimm]

7주차 과제 체크포인트

기본과제

Medium

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

질문

뭔지 모르니까 드립다 AI 도움받으면서 질문 정리...

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

toastFn

• 실제 notistack 라이브러리의 토스트 메시지 함수를 가짜로 만든 것

vi.fn()

• Vitest의 모킹 함수 생성자

vi.mock('notistack')

• notistack 라이브러리 전체를 가짜로 바꿔치기 합니다.
• 테스트할 때는 라이브러리가 필요없으므로 모킹으로 대체

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

• 테스트 환경도 실제 환경과 동일한 환경을 만들어주기 위함
• Material-UI가 잘 동작될 수 있도록 하기 위함
• 토스트 메세지가 표시 되기 위함
• 하위 컴포넌트들이 Provider의 context 사용하기 위함

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

• 이벤트 생성, 수정, 삭제를 위한 것...?

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

• 예상 가능한 시간을 설정을 위해
• 시간대 이슈 방지

심화 과제

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

과제 셀프회고

와... 놀라울 정도로 테스트 코드에 흥미가 없다...
뭔가 질문도 뭘 해야할지 모를 정도
이제까지 했던 주차 중에 가장 흥미가 안 생기는 주차
앞으로 테스트 코드 한 주 남았는데 어떻게 넘어가야할지..
감이 안 잡힌다.
일단 과제는 다했지만..
남은 테스트 코드 한 주차 과제도 난이도 별로 있길...

기술적 성장

• 낯선 테스트 코드 작성
  잘 몰랐던 테스트 코드의 메서드가 뭐가 있는지는 알 수 있었던 듯 합니다. waitFor, act, vi.advanceTimersByTime 같은 메서드들
• 테스트 디버깅 향상
  전에 과제할 때 테스트 실패하면 디버깅하기 힘들었는데 이번에 테스트 코드하면서 좀 더 디버깅을 전보다 잘 할 수 있게 되었습니다.

코드 품질

        <EventFormItem editingEvent={editingEvent} addOrUpdateEvent={addOrUpdateEvent}>
          <BasicInfoForm
            title={title}
            date={date}
            startTime={startTime}
            endTime={endTime}
            setDate={setDate}
            setTitle={setTitle}
          />
          <DetailForm
            description={description}
            location={location}
            category={category}
            setDescription={setDescription}
            setLocation={setLocation}
            setCategory={setCategory}
          />
          <SettingForm
            isRepeating={isRepeating}
            repeatEndDate={repeatEndDate}
            notificationTime={notificationTime}
            setIsRepeating={setIsRepeating}
            setNotificationTime={setNotificationTime}
          />
          <TimeForm
            startTime={startTime}
            endTime={endTime}
            startTimeError={startTimeError}
            endTimeError={endTimeError}
            handleStartTimeChange={handleStartTimeChange}
            handleEndTimeChange={handleEndTimeChange}
          />
        </EventFormItem>

• 뭔가 전에 클린 코드할 때 보다 리팩토링이 잘된 것 같습니다.
• EventFormItem 컴포넌트에 child를 넘김으로써 컴포넌트 props를 최소한으로 넘기게 된게 좀 만족스러운 부분.
• 테스트 코드인데 주차인데 테스트 코드로써 만족스러운 부분은 없습니다.
• 테스트 코드를 짠 게 이게 잘 짠 건지 못 짠 건지에 대한 기준이 없달까요...

학습 효과 분석

• 테스트 코드를 좀 더 쉽게 짤려면 함수의 단일 책임 원칙을 지키면 지킬 수록 편하는 걸 좀 알게 되었습니다.
• 테스트 코드를 여러 시나리오로 짜서 테스트 하면 할수록 함수에 대한 안전성이 높아진다는 점을 알게 되었습니다.

과제 피드백

질문하고 싶은 내용

• 풀스택을 하고 있다보니 오히려 자바 쪽은 커버리지때문에 테스트 코드는 작게라도 짜봤는데 리액트는 테스트 코드를 짜본 적이 없어서 그런 지, 아니면 배경 지식이 약해서 그런건지 테스트 코드에 대한 흥미도가 너무 없습니다. 어떻게 하면 흥미도를 끌어올릴 수 있을까요 전에 했던 주차에 비해 의욕이 떨어진달까요; 너무 개인적인 기호같아서 질문을 할까 망설였지만, 같이 고민해주시고 답을 주시지 않을까 싶어서 한 번 남겨 봅니다 ㅎㅎ..