Fix test issues: Use getAllByRole for multiple elements, add React cleanup

tests/unit/Footer.test.jsx

@@ -246,13 +246,17 @@ describe("Footer", () => {
     const emailLinks = screen.getAllByRole("link", {
       name: "medlab@colorado.edu",
     });
-    const blueskyLink = screen.getByRole("link", {
+    const blueskyLinks = screen.getAllByRole("link", {
       name: "Follow us on Bluesky",
     });
-    const gitlabLink = screen.getByRole("link", {
+    const gitlabLinks = screen.getAllByRole("link", {
       name: "Follow us on GitLab",
     });
 
+    // Use the first instance of each social media link
+    const blueskyLink = blueskyLinks[0];
+    const gitlabLink = gitlabLinks[0];
+
     // Check email links (multiple due to responsive design)
     emailLinks.forEach((emailLink) => {
       expect(emailLink).toHaveClass("focus:outline-none");

vitest.setup.ts

@@ -1,10 +1,14 @@
 import "@testing-library/jest-dom/vitest";
 import { afterAll, afterEach, beforeAll } from "vitest";
+import { cleanup } from "@testing-library/react";
 import { server } from "./tests/msw/server";
 // expose Tailwind tokens to JSDOM (for design token checks)
 import "./app/tailwind.css";
 
 // MSW for API integration tests (mock fetch)
 beforeAll(() => server.listen({ onUnhandledRequest: "bypass" }));
-afterEach(() => server.resetHandlers());
+afterEach(() => {
+  server.resetHandlers();
+  cleanup(); // Clean up React DOM after each test
+});
 afterAll(() => server.close());