[Feature] - 여행기 무한 스크롤 관련 테스트 추가

frontend/.prettierrc.json

@@ -18,6 +18,7 @@
     "^@type/(.*)$",
     "^@apis/(.*)$",
     "^@mocks/(.*)$",
+    "^@queries/(.*)$",
     "^@components/(.*)$",
     "^@hooks/(.*)$",
     "^@constants/(.*)$",

frontend/__tests__/mainPage.test.tsx

@@ -0,0 +1,45 @@
+import { waitFor } from "@testing-library/react";
+
+import { createInfiniteTravelogueHook } from "./utils/createInfiniteTravelogueHook";
+
+describe("메인 페이지", () => {
+  describe("여행기 무한 스크롤 확인", () => {
+    it("메인 페이지로 진입했을때 보여지는 여행기는 총 5개이다.", async () => {
+      const { result } = createInfiniteTravelogueHook();
+      await waitFor(() => {
+        expect(result.current.status).toMatch("success");
+        expect(result.current.travelogues.length).toBe(5);
+      });
+    });
+
+    it("다음 페이지로 이동할 경우 보여지는 여행기는 총 10개이다.", async () => {
+      const { result } = createInfiniteTravelogueHook();
+
+      await waitFor(() => {
+        result.current.fetchNextPage();
+      });
+
+      await waitFor(() => {
+        expect(result.current.status).toMatch("success");
+        expect(result.current.travelogues.length).toBe(10);
+      });
+    });
+
+    it("마지막 페이지로 이동할 경우 더 이상 콘텐츠를 확인할 수 없다.", async () => {
+      const { result } = createInfiniteTravelogueHook();
+
+      await waitFor(() => {
+        result.current.fetchNextPage();
+      });
+
+      await waitFor(() => {
+        result.current.fetchNextPage();
+      });
+
+      await waitFor(() => {
+        expect(result.current.status).toMatch("success");
+        expect(result.current.hasNextPage).toBeFalsy();
+      });
+    });
+  });
+});

frontend/__tests__/utils/createInfiniteTravelogueHook.tsx

@@ -0,0 +1,22 @@
+import { renderHook } from "@testing-library/react";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+import useInfiniteTravelogues from "@queries/useInfiniteTravelogues";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 0,
+    },
+  },
+});
+
+export const wrapper = ({ children }: React.PropsWithChildren) => (
+  <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+);
+
+export const createInfiniteTravelogueHook = () =>
+  renderHook(() => useInfiniteTravelogues(), {
+    wrapper,
+  });

frontend/jest.config.js

@@ -22,6 +22,8 @@ module.exports = {
     (https://mswjs.io/docs/migrations/1.x-to-2.x/#frequent-issues)
   */
   setupFiles: ["./jest.polyfills.js"],
+  setupFilesAfterEnv: ["./jest-setup.ts"],
+
   testEnvironmentOptions: {
     customExportConditions: [""],
   },