3.4. 타이머 테스트의 마지막 테스트 질문입니다.

  it('연이어 호출해도 마지막 호출 기준으로 지정된 타이머 시간이 지난 경우에만 함수가 호출된다.', () => {
    const spy = vi.fn();

    const debouncedFn = debounce(spy, 300);

    // 최초 호출
    debouncedFn();

    // 최초 호출 후 0.2초 후 호출
    vi.advanceTimersByTime(200);
    debouncedFn();

    // 두번째 호출 후 0.1초 후 호출
    vi.advanceTimersByTime(100);
    debouncedFn();

    // 세번째 호출 후 0.2초 후 호출
    vi.advanceTimersByTime(200);
    debouncedFn(); // 👈 4번째 호출

    // 네번째 호출 후 0.3초 후 호출
    // 최초 호출 후에 함수 호출 간격이 0.3초 이상 -> 다섯번째 호출이 유일
    vi.advanceTimersByTime(300);
    debouncedFn(); // 👈 5번째 호출

    // 다섯번을 호출했지만 실제 spy함수는 단 한 번만 호출
    expect(spy).toHaveBeenCalledTimes(1);
  });

안녕하세요. 새해 복 많이 받으세요 :)

다름이 아니라 위 코드에서 4번째 호출 후 바로 뒤, vi.advanceTimersByTime(300);로 인해 0.3초가 흘렀고 이로 인해 expect(spy).toHaveBeenCalledTimes(1); 이 맞다고 나온 것이 아닌지 궁금해서 질문드립니다.

강의에서는 4번째 호출이 아닌 5번째 호출로 인해 호출된다고 하셨는데(최초 호출 후에 함수 호출 간격이 0.3초 이상인 경우는 다섯번째 호출이 유일하다고 하신 것 같아요) 5번째 호출 후에는 0.3초가 흘렀다는 가정 (vi.advanceTimersByTime(300);)이 없고 제가 혼자 테스트 해보며 5번째 호출 후에 vi.advanceTimersByTime(300);를 넣어 0.3초가 흘렀다고 가정을 하니 호출이 2번 되었다고 떠서요.

제가 debounce를 헷갈려 했는데 제가 아직 잘 이해하지 못한 부분이 있는 건지 아니면 실제로 잘못 설명된 부분이 있는 건지 모르겠어서 질문 드립니다.

감사합니다.

it('연이어 호출해도 마지막 호출 기준으로 지정된 타이머 시간이 지난 경우에만 함수가 호출된다.', () => {
    const spy = vi.fn();

    const debouncedFn = debounce(spy, 300);

    debouncedFn();

    expect(spy).toHaveBeenCalledTimes(1); // 검증 시점 함수는 아직 대기 상태! 실패한다
});