인프런 커뮤니티 질문&답변
작성한 질문수
useNavigate()을 검증할 때 이해가 안되는 부분이 있습니다.
24.08.18 11:58 작성
·
62
0
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) 이여야 할 거 같다고 느껴져서 이해가 안갑니다.
답변 2
1
0
코드 조커, 오프
지식공유자
2024. 08. 19. 06:09
안녕하세요!
실제 코드를 먼저 살펴보면
//ErrorPage.jsx
// useNavigate를 호출해서 반환된 함수가 navigate에 할당
const navigate = useNavigate();
const handleClickBackButton = () => {
navigate(-1); // 할당된 함수를 -1 파라미터와 호출
};이기 때문에 실제 코드의 흐름과 동일하게 작성되도록 useNavigate 함수를 호출했을때 반환된 함수가 navigate에 할당되도록 작성되어있기 때문에 위처럼 전달되도록 작성했습니다.
따라서 작성해주신
expect(navigate함수에 전달된 spyFn).toHaveBeenNthCalledWith(1, -1)
흐름대로 작성되었으며, 이를 통해 navigate가 호출이 다음과 같은 파라미터로 몇 회 호출 되었다 라는 것을 검증할 수 있게 됩니다.
혹시 추가로 궁금한 점이나 제가 잘못 설명한 부분이 있다면 알려주세요! 감사합니다.