test: use msw to mock fetching of users

src/App.tsx

@@ -3,7 +3,9 @@ import HomePage from "./pages/Home";
 
 function App() {
   return (
-    <HomePage />
+    <div>
+      <HomePage />
+    </div>
   );
 }
 

src/mocks/handlers.ts

@@ -2,7 +2,7 @@ import { http, HttpResponse } from "msw";
 
 /* handlers: what ever request you want to mock you need an handler. interception  */
 export const handlers = [
-  http.get("/resource", ({ request }) => {
+  http.get("/api/users", ({ request }) => {
     return HttpResponse.json([
       { id: 1, name: "John Doe", email: "johndoe@gmail.com" },
       { id: 2, name: "Smith Williams", email: "smithwilliams@gmail.com" },

src/pages/Home/index.tsx

@@ -1,7 +1,25 @@
 import { motion } from "framer-motion";
+import { useEffect, useState } from "react";
 import { Link } from "react-router";
 
+interface User {
+  id: number;
+  name: string;
+  email: string;
+}
+
 const HomePage = () => {
+  const [users, setUsers] = useState<User[]>([]);
+
+  useEffect(() => {
+    fetch("/api/users")
+      .then((response) => response.json())
+      .then((data) => setUsers(data))
+      .catch((error) => {
+        console.error(error);
+      });
+  }, []);
+
   return (
     <div className="h-screen w-full flex flex-col justify-center items-center">
       <motion.h1
@@ -25,6 +43,16 @@ const HomePage = () => {
       >
         Learn more
       </Link>
+      <div className="mt-8">
+        <h3 className="mb-4">Mock Service Worker Example:</h3>
+        <ul className="flex flex-col gap-2">
+          {users.map((user) => (
+            <li key={user.id}>
+              {user.name} | {user.email}
+            </li>
+          ))}
+        </ul>
+      </div>
     </div>
   );
 };