react-query의 invalidateQuery 모킹하기

프론트엔드에서의 테스트 코드 작성이다보니 렌더링 요소들에 대한 테스트를 주로 작성했다.
글이 작성 되었을때 작성이 되면 경로가 이동되거나 아니면 작성 버튼이 사라진다던가 같이..
그러던 중 invalidateQuery와 동일하게 추가가되면 새로운 서버 데이터를 받아오는 모킹작업을 해볼까?
라는 생각이 들었다.(뭔가 깔끔한 테스트 코드가 될 것 같은..!?)

 react-query가 뭔지 모르고 invalidateQuery가 뭔지 모른다면 여기까지만 보시길..

 

 구글링을 해도 단순히 axios를 모킹해서 axios 호출에 대한 테스트를 진행하는 것뿐.
 내가 원하는 성공하면 다시 get요청을 보내서 다시 렌더링해. 라는 로직이 구현될리 없었다.
 그래서 서버가 돌아가는 원리가 결국에는 스택을 쌓는 것이기 때문에 배열을 만들고 그 배열에 push 해준다면? 처음에 get을 할때에는 push되기 전의 데이터가 가겠지만 그 이후에 push 되는대로 return되면서 동작하겠지. 라는 생각에 다달았다.
 그럼 바로 코드로 고고!

 코드는 보이는대로 이해가 될 것이다. 해당 코드는 테스트 코드가 아니라 msw로 모킹한 핸들러이다. 

import { rest } from "msw";
const comments = {
  comment: [
    {
      commentId: 1,
      nickname: "카카오",
      content: "댓글 내용입니다.",
      createdAt: "2023-08-28 17:08:22",
      child: [
        {
          commentId: 2,
          nickname: "닉네임2",
          content: "내용2",
          createdAt: "2023-08-28 17:08:22",
        },
        {
          commentId: 3,
          nickname: "닉네임3",
          content: "내용3",
          createdAt: "2023-08-28 17:08:22",
        },
      ],
    },
  ],
};
export const commentsHandler = [
  rest.get(`/comments`, (req, res, ctx) => {
    return res(ctx.status(200), ctx.json(comments));
  }),
  rest.post(`/comments`, (req, res, ctx) => {
    const isCreateComment = (data: commentRequest) => {
      return (
        typeof data.content === "string" &&
        (typeof data.parentId === "string" || typeof data.parentId === "object")
      );
    };
    const postData = req.body as commentRequest;
    if (isCreateComment(postData)) {
      comments.comment.push({
        commentId: 4,
        nickname: "닉네임4",
        content: postData.content,
        createdAt: "2023-08-28 17:08:22",
        child: [],
      });
      return res(ctx.status(201));
    } else {
      return res(ctx.status(500));
    }
  }),
];