인프런 커뮤니티 질문&답변
작성한 질문수
3.4. 타이머 테스트의 마지막 테스트 질문입니다.
해결된 질문
작성
·
283
·
수정됨
1
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를 헷갈려 했는데 제가 아직 잘 이해하지 못한 부분이 있는 건지 아니면 실제로 잘못 설명된 부분이 있는 건지 모르겠어서 질문 드립니다.
감사합니다.
답변 1
1
안녕하세요 Kate님! 어제 이사를 해서 질문 답변이 늦은 점 양해 부탁드립니다. 😇
우선, 말씀해주신 부분이 맞습니다. 테스트를 잘못 작성했던 것 같네요. 해당 부분은 수정해서 업로드 해두도록 하겠습니다!
실패하는 시나리오를 아래 작성해봤는데요. 이 코드를 보면 좀 더 이해하기 쉬우실 것 같습니다.
it('연이어 호출해도 마지막 호출 기준으로 지정된 타이머 시간이 지난 경우에만 함수가 호출된다.', () => {
const spy = vi.fn();
const debouncedFn = debounce(spy, 300);
debouncedFn();
expect(spy).toHaveBeenCalledTimes(1); // 검증 시점 함수는 아직 대기 상태! 실패한다
});따라서, 해당 테스트의 단언 내용은 네 번째 함수의 결과로 검증되는 것이 맞으며 마지막 함수 호출은 현재로써는 무의미한 상태라고 볼 수 있을 것 같습니다.
추가로 궁금하신 점 있으시면 편하게 질문 남겨주시면 감사하겠습니다.
새해 복 많이 받으세요!
https://github.com/practical-fe-testing/test-example-shopping-mall/commit/fef895ff98c93b743206f8cb7ebac5d0c61883cb
이 커밋에서 수정되었습니다. 감사합니다!