useNavigate()을 검증할 때 이해가 안되는 부분이 있습니다.
245
投稿した質問数 22
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
0
안녕하세요!
실제 코드를 먼저 살펴보면
//ErrorPage.jsx
// useNavigate를 호출해서 반환된 함수가 navigate에 할당
const navigate = useNavigate();
const handleClickBackButton = () => {
navigate(-1); // 할당된 함수를 -1 파라미터와 호출
};이기 때문에 실제 코드의 흐름과 동일하게 작성되도록 useNavigate 함수를 호출했을때 반환된 함수가 navigate에 할당되도록 작성되어있기 때문에 위처럼 전달되도록 작성했습니다.
따라서 작성해주신
expect(navigate함수에 전달된 spyFn).toHaveBeenNthCalledWith(1, -1)
흐름대로 작성되었으며, 이를 통해 navigate가 호출이 다음과 같은 파라미터로 몇 회 호출 되었다 라는 것을 검증할 수 있게 됩니다.
혹시 추가로 궁금한 점이나 제가 잘못 설명한 부분이 있다면 알려주세요! 감사합니다.
mockZustand
0
64
2
프로젝트 세팅 오류 및 버전 오류 문제 문의
0
95
2
toggleIsModalOpened 테스트 할때 궁금한 점이 있습니다.
0
42
2
로딩/에러처리 검증은 어떻게 하는게 좋을까요?
0
65
1
통합 테스트에서 API 요청에 대한 검증은 이루어지지 않아도 괜찮을까요?
0
68
2
lint에러..
0
71
1
단언문 순서에 따라 테스트 결과가 왜 달라지나요?
0
108
2
useNavigate 테스트 시, 검증 대상 질문입니다.
0
113
2
강의 예시프로젝트 업데이트좀 부탁드립니다.
2
165
2
통합테스트와 단위테스트 파일 분리
0
108
1
grid 양옆에 margin은 어디서 설정되어있는건가요 ?
0
131
1
vitest 설치했는데
0
204
2
2부 할인쿠폰 관련
0
176
1
에러 해결 방법
0
406
2
직접 구현한 atom 컴포넌트 테스트 범위 질문
0
175
1
setup, teardown 동작 순서
0
211
1
debounce 함수 테스트 정확도 관련 질문입니다.
0
175
2
ProductFilter test 어떤 방식이 더 선호되는 방식일까요?
0
203
2
통합 테스트 작성 방식에 대해 궁금한 점이 있습니다
0
258
2
vitest Extension 알려주세요.
0
266
1
2.1 강의 질문있습니다.
0
139
1
toHaveStyle 메서드 사용이 조금 이상한 것 같습니다.
0
194
2
TestPayment에 쿠폰 정보를 prop으로 전달하는 이유
0
184
2
NavigationBar 테스트 속도가 너무 느린 문제
0
217
1