[7팀 최용훈] Chapter 3-1. 프론트엔드 테스트 코드

[yhun940731]

Medium

7주차 과제 체크포인트

기본과제

Medium

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

질문

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

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

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

Q. setupTests.ts > 왜 이 시간을 설정해주는 걸까요?
테스트 시점마다 날짜가 달라지면 작성된 테스트의 결과가 달라질 수 있기 때문에 날짜를 고정하기 위해 사용합니다.

심화 과제

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

과제 셀프회고

기술적 성장

• 테스트 코드 자체를 처음 작성해봅니다.
• 이전 과제들에서 테스트 코도의 중요성은 절실히 느꼈지만, 직접 짜보는 건 아예 새로운 경험이었습니다. 테스트 코드도 비즈니스 로직 짜듯 정성을 기울여야하는구나 느꼈습니다

코드 품질

학습 효과 분석

easy.useSearch.spec - new Date() 시스템 시간 값이 이상한데?

처음에는 dummy events 데이터를 8월로 만들고서 계속 테스트 통과 안되어서 원인을 찾다가 설마하고 new Date() 콘솔에 찍어보니까 10월이라고 떠서 당황했습니다. new Date() 가 10월이라니.
지금 8월인데 10월로 나오는게 이상해서 한참 생각했습니다. 시스템 환경 내 시간이 잘 못 됐을리는 없고 관련된 부분이 어디있었을까 한참 찾았습니다.

beforeEach(() => {
    expect.hasAssertions(); // ? Med: 이걸 왜 써야하는지 물어보자

    vi.setSystemTime(new Date('2025-10-01')); // ? Med: 이걸 왜 써야하는지 물어보자
});

이걸 왜 써야하는지 진작 물어볼걸...

easy.dateUtils.spec - getDaysInMonth

//  day에 0을 넣음으로써 monthIndex에 넣은 정수의 -1월을 계산한다.
function getDaysInMonth(year: number, month: number): number {
     return new Date(year, month, 0).getDate();
}

new Date(2025, 8, 0) -> 여기서 8은 9월,
day가 0으로 9월에서 -1을 한 8월로 계산됨.
month param에 8을 넣고 결과값도 8월로 계산됨.

monthIndex는 0에서 11로 월을 판단하는데, 우리가 쓰는 1~12월과는 -1씩 차이나기 때문에 moth parameter가 우리가 실사용하는 월로 계산되는 경우.
함수 제대로 안 보고 막 작성했다가 꽤나 꼬였습니다. 기존 코드를 잘 살펴보자..

과제 피드백

• 테스트 코드 반복 작성으로 초급자에게 금방 익숙해지는.. 이제 간단한 테스트는 짤 수 있을 것 같아요...

리뷰 받고 싶은 내용

[hty0525]

이번 과제도 열심히 하느라 고생하셨습니다!
그동안 과제를 하면서 이미 완성되어 있는 테스트 코드만 보다가 직접 해본다는 게 쉽지 않았을 텐데, 잘 완료하신 것 같아요.
그리고 이제는 시간 관련된 함수는 헷갈릴 게 별로 없을 것 같네요.
또한 함수 자체를 잘 보자는 것도 배우게 된 것 같고요.

그리고 질문이 있습니다!

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

[yhun940731]

@hty0525

테스트 코드를 클린코드와 연관지어 생각해 본다면 어떨까요?

• 테스트 코드는 클린 코드 원칙을 적용해야 빛을 내는 방식이라고 생각합니다. 의존성을 최소화하고 각각 독립적으로 존재해야 단위 테스트에 편리하며, 그러한 함수의 결합으로 로직이 전개되어야 통합 테스트 내에서도 원인을 명확히 찾아낼 수 있는 테스트 코드를 작성할 수 있다고 생각해요.

용훈님이 생각하는 단위, 통합, E2E 테스트란?

• 단위, 통합, E2E 테스트는 목적이 다릅니다.
• 단위 테스트의 경우 최소 단위에 대한 테스트를 목적으로합니다. 대상은 의존성이 없는 순수함수부터, 한가지 역할을 하는 유틸, hooks, compoents까지의 테스트를 말합니다.
• 통합테스트는 위 단위 테스트 대상들이 모여 상호작용하는 큰 단위에 대한 테스트입니다. FE에서는 컴포넌트가 내부가 선언된 유틸, hooks 등과 함께 의도한 동작을 정확히 수행하는 지를 테스트합니다.
• E2E 테스트의 경우 클라이언트가 사용하는 서비스가 의도한 대로 동작하는지 기능을 전부 테스트하는 방식입니다.
• 일반적으로 단위 테스트를 가장 많이 작성하고 통합, E2E 테스트를 순서대로 최소화하는 피라미드 형태로 관리합니다.