리액트에서 유닛테스트에 대해 질문이 있습니다!(RTL)

요즘 테스팅에 관심이 생겨서 기존에 있던 프로젝트로 유닛 테스트를 하나씩 해보고 있습니다. 유닛테스트 중 어떻게 테스트하는게 좋은 방법인지 궁금해서 질문드립니다 아래와 같은 카테고리 컴포넌트에서 React-Query를 사용하고 있습니다. 별로의 useQuery를 커스텀 훅으로 분리시켜놓은 상태이구요. 다음 컴포넌트를 유닛테스트 한다고 했을때, useCategoryQuery hook과 ui 부분에 대한 테스트는 별도로 분리시켜야 하는걸까요?? 분리해야 한다고 했을 때에는 useCategoryQuery 훅은 모킹하는게 맞는 부분인가요?? useQuery를 테스팅 하는 래퍼런스를 찾아봤는데 useQuery에 대한 테스트만 진행하는 로직 같아서 아리송해서 질문드립니다ㅠㅠ!

1const Category = ({ genre, setGenre }: IProps) => {
2  const {
3    getCategory: { data, isLoading, isError, error },
4  } = useCategoryQuery();
5
6  if (isLoading) {
7    return (
8      <Category>
9        {Array.from({ length: 7 }).map((_, idx: number) => (
10          <Placeholder key={idx} />
11        ))}
12      </Category>
13    );
14  }
15  return (
16    <Category>
17      <>
18        <li
19          data-testid="category-item"
20          onClick={() => setGenre(null)}
21          className={genre === null ? "active" : ""}
22        >
23          전체
24        </li>
25        {data?.map((item) => (
26          <li
27            data-testid="category-item"
28            onClick={() => setGenre(item.id)}
29            className={item.id === genre ? "active" : ""}
30            key={item.id}
31          >
32            {item.name}
33          </li>
34        ))}
35      </>
36    </Category>
37  );
38};
39
40export default Category ;

이 질문이 도움이 되었나요?

'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

추천해요 0

보충이 필요해요 0

익명님의 질문