[ Vitest ] 테스트 코드 개선 경험 기록

1. 문제 코드

  it('검색어에 맞는 이벤트만 필터링해야 한다', async () => {
    const { result: searchResult } = renderHook(() => useSearch(events, new Date(), 'month'));
	const { filteredEvents, setSearchTerm } = result.current;
    
    act(() => {
      searchResult.current.setSearchTerm('헬스장');
    });

    filteredEvents.forEach((event: Event) => {
      const searchTargets: EventKeys[] = ['title', 'description', 'location'];
      const isFiltered = searchTargets.some((target: EventKeys) => event[target] === '헬스장');
      expect(isFiltered).toBeTruthy();
    });
  });

• 문제점 1 : result의 current를 구조분해할당 하면서 act 이후의 filteredEvents가 변경되지 않은 값으로 테스트하고 있음
• 문제점 2 : expect를 forEach문 안에서 실행함으로써 테스트 동작이 많아지고 예측이 어려워지고 있음

2. 해결 코드

  it('검색어에 맞는 이벤트만 필터링해야 한다', async () => {
    const { result: searchResult } = renderHook(() => useSearch(events, new Date(), 'month'));
	const { setSearchTerm } = result.current;
    
    act(() => {
      searchResult.current.setSearchTerm('헬스장');
    });
    
    const { filteredEvents } = result.current; // act 이후 바뀐 current에서 조회
    
    const result = filteredEvents.every((event: Event) => {
      const searchTargets: EventKeys[] = ['title', 'description', 'location'];
      const isFiltered = searchTargets.some((target: EventKeys) => event[target] === '헬스장');
      return isFiltered;
    });

    expect(result).toBeTruthy(); // Array.every로 전체가 참인지 한번만 체크
  });

• 해결 1 : act 이후 변경된 current로 이후 검증 진행
• 해결 2 : Array.every 매서드로 테스트 결과 한 번만 체크