민섭 trouble‐shooting‐3
가장 기본적으로 사용될 useQuery test 입니다!! 간단하게 로딩중일 때 로딩중이라고 text가 나오는 지 테스트했습니다.
먼저 커스텀 훅을 가져와서 test를 해보려고 할 때 입니다!!
저는 useGetAllWishs라는 커스텀 훅을 만들어서 사용하고 있습니다.
간단하게 설명하자면 사용자가 wish list에 넣은 상품들 가져오는 query 입니다!!
useQuery를 사용하는 이유는 아마 에러헨들링과 로딩 상태 구현이 쉽기 때문이 이유에 하나 일 것 같습니다. 따라서 isLoading이 true 일 때 테스트 하는 함수를 만들어보았습니다.
먼저 사용할 customHook을 jest의 모킹 함수로 불러와주었습니다. type은 에러가 너무 나서 any를 넣었는데 이거 같이 찾아봐도 좋을 것 같습니다... ㅠㅠㅜ
이후 함수를 모킹 할 쿼리 주소를 찾아주고 연결합니다.
mockImplementation 메서드는
다음과 같이 모킹으로 실행되어야 할 함수를 사용할 수 있게 합니다. 해당 모킹 객체는 모든 호출과 그 함수에서 나오는 인스턴스를 모두 기록합니다!!
따라서 해당 customHook에서 return값으로 준, 그리고 사용할 컴포넌트에서 객체구조분해 할당으로 꺼낸 인스턴스들의 값을 변경할 수 있습니다.
즉 isLoading의 상태를 임의로 설정할 수 있습니다!!
renderHook은 커스텀 훅을 사용할 때 필요한 메서드입니다. 기본적으로 testing library에 깔려 있습니다. 해당 메서드를 통해서 훅의 결과를 가져올 수 있는데, 이를 통해서 isLoading에 초기값을 true로 했다면 result.current.isLoading은 true가 됩니다.
이를 통해 테스트를 진행할 수 있습니다.
초기 mockImplementation에서 파라미터값 isLoading을 true로 했기 때문에
화면에는 로딩중이라는 text가 떠야하고
이를
통해 expect 값으로 테스트합니다!!