개발자
redux를 사용하는 react 커스텀 훅 테스트 어떻게 개선하면 좋을까요?
안녕하세요! 커스텀 훅을 테스트하다가 궁금한 점이 생겨 질문드립니다. 예시 코드와 같이 redux-toolkit을 사용하고 있으며 커스텀 훅 내부에서 redux store에 접근하고 있습니다. 이렇게 사용하는 것이 잘못된 걸까요? 커스텀 훅을 테스트하다가 useAppSelector를 사용하고 있는데 Provider를 제공하지 않았기 때문에 에러가 발생하는 것을 보고 해결 방법은 문서에 있지만 이 방법이 좋은 방식일까 궁금해졌습니다. 제 생각으로는 장바구니와 관련된 함수들을 useBasket에 모아서 관리할 생각이었습니다. 따라서 장바구니 정보를 갖고 있는 basket store를 useBasket 안에서 가져오는 것이 맞다고 생각했습니다. 혹시 이렇게 하는 것보다 더 좋은 방법이 있을까요? 개선하기 위해 더 배워야 할 것들에 대해 조언이 필요합니다!
1const useBasket = () => {
2 const { basketList } = useAppSelector((state) => state.basketReducer);
3
4 // 장바구니 총 금액을 계산하는 함수입니다. 이 함수에서 basketList가 사용됩니다.
5 const getTotalBasketAmount = () => {
6 ...
7
8 return result;
9 };
10
11 return { getTotalBasketAmount };
12};
답변 0
첫 답변을 기다리고 있어요.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2023년 11월 08일
Redux를 사용하는 React 커스텀 훅을 테스트하기 위해 몇 가지 방법이 있습니다. 1. **Mocking Redux Store**: 테스트에서 실제 스토어 대신에 모의 스토어를 제공하여 환경을 제어합니다. [redux-mock-store](https://www.npmjs.com/package/redux-mock-store) 라이브러리를 이용한 방법이 있습니다. 2. **Wrapping Component with Provider**: wrapper로 `<Provider>`를 사용하여 `useAppSelector` 호출에서 redux store에 접근할 수 있게 합니다. 이 때 wrapping component 내부에서 초기 상태를 설정할 수 있습니다. 3. **Testing Implementation Detail**: 실제로는 추천하지 않는 방법입니다만, 컴포넌트의 세부 구현 사항까지 테스트하려면, 해당 컴포넌트가 Redux와 어떻게 상호작용하는지 계속 염두에 두고 개선해야 합니다. 좋은 단위 테스트는 구현 세부사항보다는 올바른 결과에 초점을 맞춰야합니다. 만약 커스텀 hook이 너무 많은 것들을 하거나, 관심사가 잘 분리되지 않은 경우라면, 그것이 리팩터링의 신호일 수도 있습니다. 예시로 드신 `getTotalBasketAmount` 함수 같은 경우는 장바구니 금액 계산을 위해 스토어에 있는 basketList만을 필요로 합니다. 이런 경우엔 해당 함수를 커스텀 훅 밖으로 분리하고, 필요한 데이터만을 인자로 전달하는 식으로 리팩터링할 수 있습니다. ```typescript const getTotalBasketAmount = (basketList) => { ... }; const useBasket = () => { const { basketList } = useAppSelector((state) => state.basketReducer); return { totalBasketAmount: getTotalBasketAmount(basketList) }; } ``` 좋은 테스트는 "행동"을 검증합니다. 따라서 컴포넌트/훅이 어떻게 동작해야 하는지에 초점을 맞추면서 테스트를 작성하면 됩니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!