useNavigate()을 검증할 때 이해가 안되는 부분이 있습니... - 인프런

실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트

3.2. 모듈 모킹(Mocking)

useNavigate()을 검증할 때 이해가 안되는 부분이 있습니다.

작성

const navigateFn = vi.fn();

vi.mock('react-router-dom', async () => {
  const original = await vi.importActual('react-router-dom');

  return { ...original, useNavigate: () => navigateFn };
});

useNavigate 함수에 스파이 함수를 전달할때 위 코드를 사용하고 있는데요.

이부분에서 이해가 어려운게 있습니다.

//ErrorPage.jsx

const navigate = useNavigate();
  const handleClickBackButton = () => {
    navigate(-1);
  };

실제로 네비게이션에 활용하는 함수는 navigate() 잖아요.

그런데 왜 스파이 함수를 useNavigate()에 전달하는 건가요?

직관적으로 보자면, expect(navigate함수에 전달된 spyFn).toHaveBeenNthCalledWith(1, -1) 이여야 할 거 같다고 느껴져서 이해가 안갑니다.

javascript react 소프트웨어-테스트 vitest

답변 2

박상원

질문자

답변 감사드립니다.

이해가 됐습니다.

행복한 하루 보내세요~

코드 조커, 오프

지식공유자

안녕하세요!

실제 코드를 먼저 살펴보면

//ErrorPage.jsx

// useNavigate를 호출해서 반환된 함수가 navigate에 할당
const navigate = useNavigate(); 

const handleClickBackButton = () => {
  navigate(-1); // 할당된 함수를 -1 파라미터와 호출
};

이기 때문에 실제 코드의 흐름과 동일하게 작성되도록 useNavigate 함수를 호출했을때 반환된 함수가 navigate에 할당되도록 작성되어있기 때문에 위처럼 전달되도록 작성했습니다.

따라서 작성해주신

expect(navigate함수에 전달된 spyFn).toHaveBeenNthCalledWith(1, -1)

흐름대로 작성되었으며, 이를 통해 navigate가 호출이 다음과 같은 파라미터로 몇 회 호출 되었다 라는 것을 검증할 수 있게 됩니다.

혹시 추가로 궁금한 점이나 제가 잘못 설명한 부분이 있다면 알려주세요! 감사합니다.

인프런 커뮤니티 질문&답변

useNavigate()을 검증할 때 이해가 안되는 부분이 있습니다.