WIP: Test hooks

hooks/__tests__/useTMDB.test.ts

@@ -0,0 +1,53 @@
+import { renderHook, waitFor } from "@testing-library/react";
+import { rest } from "msw";
+import { setupServer } from "msw/node";
+
+import { useTMDB } from "@/hooks/useTMDB";
+
+const server = setupServer(
+  rest.get("https://api.themoviedb.org/3/movie/popular*", (req, res, ctx) => {
+    return res(
+      ctx.status(200),
+      ctx.json({
+        page: 1,
+        results: [
+          {
+            id: 1,
+            title: "Movie 1",
+          },
+        ],
+      })
+    );
+  })
+);
+
+describe("useTMDB", () => {
+  beforeAll(() => server.listen());
+  afterEach(() => server.resetHandlers());
+  afterAll(() => server.close());
+
+  it("returns initial state", async () => {
+    const { result } = renderHook(({ url }: { url: string }) => useTMDB(url), {
+      initialProps: { url: "/movie/popular" },
+    });
+
+    expect(result.current.loading).toBe(false);
+    expect(result.current.error).toBe(undefined);
+    expect(result.current.data).toBe(undefined);
+  });
+
+  it("returns data", async () => {
+    const { result, rerender } = renderHook(
+      ({ url }: { url: string }) => useTMDB(url),
+      {
+        initialProps: { url: "/movie/popular" },
+      }
+    );
+
+    expect(result.current.loading).toBe(false);
+  });
+
+  it("returns error", async () => {
+    //
+  });
+});

hooks/useTMDB.ts

@@ -15,14 +15,11 @@ export const useTMDB = <ResponseType>(url: string, page?: number) => {
     isLoading: loading,
   } = useSWR<ResponseType, TMDBError>(url ? fetchUrl.toString() : null);
 
-  let errMessage: string | undefined;
-
-  if (error) {
-    errMessage =
-      error.status_code === 7
-        ? "Resources not available"
-        : error.status_message;
-  }
+  let errMessage = error
+    ? error.status_code === 7
+      ? "Resources not available"
+      : error.status_message
+    : undefined;
 
   return {
     data,

jest.setup.ts

@@ -1,3 +1,14 @@
 import "@testing-library/jest-dom/extend-expect";
 
 jest.mock("next/router", () => require("next-router-mock"));
+// // src/setupTests.js
+// import { server } from "./mocks/server.js";
+// // Establish API mocking before all tests.
+// beforeAll(() => server.listen());
+
+// // Reset any request handlers that we may add during the tests,
+// // so they don't affect other tests.
+// afterEach(() => server.resetHandlers());
+
+// // Clean up after the tests are finished.
+// afterAll(() => server.close());

mocks/browser.ts

@@ -0,0 +1,4 @@
+import { setupWorker } from "msw";
+import { handlers } from "./handlers";
+
+export const worker = setupWorker(...handlers);

mocks/handlers.ts

@@ -0,0 +1,18 @@
+import { rest } from "msw";
+
+export const handlers = [
+  rest.get("https://api.themoviedb.org/3/movie/popular*", (req, res, ctx) => {
+    return res(
+      ctx.status(200),
+      ctx.json({
+        page: 1,
+        results: [
+          {
+            id: 1,
+            title: "Movie 1",
+          },
+        ],
+      })
+    );
+  }),
+];

mocks/server.ts

@@ -0,0 +1,4 @@
+import { setupServer } from "msw/node";
+import { handlers } from "./handlers";
+
+export const server = setupServer(...handlers);

package.json

@@ -55,6 +55,7 @@
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
     "lint-staged": "^13.1.0",
+    "msw": "^1.0.0",
     "next-router-mock": "^0.9.1-beta.0",
     "postcss": "^8.4.20",
     "prettier": "^2.8.1",