Merge pull request #113 from gfa-cc-after/fix/react-test-imports-and-…

…globals

fix: fix test imports and mock types

frontend/biome.json

@@ -37,6 +37,16 @@
           }
         }
       }
+    },
+    {
+      "include": ["*.test.tsx"],
+      "linter": {
+        "rules": {
+          "style": {
+            "noNamespaceImport": "off"
+          }
+        }
+      }
     }
   ]
 }

frontend/package.json

@@ -21,8 +21,6 @@
     "axios": "^1.7.4",
     "framer-motion": "^11.3.30",
     "jwt-decode": "^4.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "react-icons-kit": "^2.0.0",
     "validator": "^13.12.0",
     "zustand": "^4.5.4"
@@ -41,11 +39,13 @@
     "jsdom": "^24.1.0",
     "lint-staged": "^15.2.8",
     "msw": "^2.3.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-router-dom": "^6.23.1",
     "ts-node": "^10.9.2",
-    "typescript": "^5.2.2",
+    "typescript": "^5.6.2",
     "vite": "^5.4.6",
-    "vitest": "^2.0.2",
+    "vitest": "^2.1.1",
     "vitest-dom": "^0.1.1"
   }
 }

frontend/setup-tests.ts

@@ -1,9 +1,14 @@
+/// <reference types="vitest-dom/extend-expect" />
+
 import "vitest-dom/extend-expect";
 
 import { afterAll, afterEach, beforeAll } from "vitest";
 import { server } from "./src/mocks/server";
+
 // Establish API mocking before all tests.
-beforeAll(() => server.listen());
+beforeAll(() => {
+  server.listen();
+});
 
 // Reset any request handlers that we may add during the tests,
 // so they don't affect other tests.

frontend/src/App.tsx

@@ -3,7 +3,7 @@ import "./App.css";
 import { RouterProvider, createBrowserRouter } from "react-router-dom";
 import { Login } from "./pages/Login";
 import { Main } from "./pages/Main";
-import PetList from "./pages/PetList";
+import { PetList } from "./pages/PetList";
 import { ProfileDeletion } from "./pages/ProfileDeletion";
 import { ProfileDetail } from "./pages/ProfileDetail";
 import { ProfileUpdate } from "./pages/ProfileUpdate";

frontend/src/pages/PetList.test.tsx

@@ -1,13 +1,16 @@
 import { render, screen, waitFor } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
-import { petList } from "../httpClient";
-import PetList from "./PetList";
+import type { AxiosResponse } from "axios";
+import { type Mocked, describe, expect, it, vi } from "vitest";
+import * as httpClient from "../httpClient";
+import { PetList } from "./PetList";
 
 // Mock the petList function
 vi.mock("../httpClient", () => ({
   petList: vi.fn(),
 }));
 
+const mockHttpClient = httpClient as Mocked<typeof httpClient>;
+
 const mockPets = [
   {
     name: "Buddy",
@@ -29,7 +32,9 @@ const mockPets = [
 
 describe("PetList Component", () => {
   it("displays pets in a table when data is available", async () => {
-    (petList as vi.mock).mockResolvedValueOnce({ data: { pets: mockPets } });
+    mockHttpClient.petList.mockResolvedValue({
+      data: { pets: mockPets },
+    } as AxiosResponse);
 
     render(<PetList />);
 
@@ -42,7 +47,9 @@ describe("PetList Component", () => {
   });
 
   it("displays a message when no pets are registered", async () => {
-    (petList as vi.mock).mockResolvedValueOnce({ data: { pets: [] } });
+    mockHttpClient.petList.mockResolvedValue({
+      data: { pets: [] },
+    } as AxiosResponse);
 
     render(<PetList />);
 

frontend/src/pages/PetList.tsx

@@ -102,4 +102,4 @@ const PetList = () => {
   );
 };
 
-export default PetList;
+export { PetList };

frontend/src/pages/ProfileDeletion.test.tsx

@@ -9,7 +9,6 @@ vi.mock("../httpClient", () => ({
   deleteProfile: vi.fn(),
 }));
 
-// biome-ignore lint: used it for mocking purposes
 import * as httpClient from "../httpClient";
 
 describe("ProfileDeletion", () => {

frontend/src/pages/ProfileUpdate.test.tsx

@@ -1,22 +1,32 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
-import { describe, expect, it, vi } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { MockedFunction } from "vitest";
 import { useProfileUpdateState } from "../hooks/useProfileUpdate";
 import { ProfileUpdate } from "./ProfileUpdate.tsx";
 
 vi.mock("../hooks/useProfileUpdate");
 
-const mockUseProfileUpdateState = useProfileUpdateState as vi.MockedFunction<
+const mockUseProfileUpdateState = useProfileUpdateState as MockedFunction<
   typeof useProfileUpdateState
 >;
 
 describe("ProfileUpdate", () => {
   beforeEach(() => {
     mockUseProfileUpdateState.mockReturnValue({
-      state: { user: { email: "", firstName: "", lastName: "", password: "" } },
       updateUserField: vi.fn(),
       updateUserProfile: vi.fn(),
       navigate: vi.fn(),
+      state: {
+        user: {
+          email: "",
+          firstName: "",
+          lastName: "",
+          password: "",
+        },
+        errorMessage: null,
+        message: null,
+      },
     });
   });
 

frontend/tsconfig.json

@@ -24,12 +24,6 @@
     /* Needed for the Vitest */
     "types": ["vitest/globals"]
   },
-  "include": ["src", "src/tests/setup.ts"],
-  "exclude": [
-    "node_modules",
-    "src/tests/setup.ts",
-    "src/**/*.test.ts",
-    "src/**/*.test.tsx"
-  ],
+  "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

frontend/vite.config.ts

@@ -3,43 +3,8 @@
 import react from "@vitejs/plugin-react-swc";
 import { defineConfig } from "vite";
 
-const threshold: number = 70 as const;
-
 // https://vitejs.dev/config/
 // biome-ignore lint: viteconfig signature
 export default defineConfig({
   plugins: [react()],
-  test: {
-    globals: true,
-    include: ["**/*.test.ts", "**/*.test.tsx"],
-    environment: "jsdom",
-    setupFiles: ["./setup-tests.ts"],
-    css: true,
-    typecheck: {
-      tsconfig: "./tsconfig.test.json",
-    },
-    coverage: {
-      exclude: [
-        "src/**/*.test.tsx",
-        "src/**/*.test.ts",
-        "src/main.tsx",
-        "vite.config.ts",
-        "dist/**/*",
-        "node_modules/**/*",
-        "coverage/**/*",
-        ".eslintrc.cjs",
-        "src/**/*.d.ts",
-      ],
-      provider: "v8",
-      reporter: ["text", "json", "html"],
-      thresholds: {
-        "src/**/*.{ts,tsx}": {
-          functions: threshold,
-          branches: threshold,
-          statements: threshold,
-          lines: threshold,
-        },
-      },
-    },
-  },
 });

frontend/vitest.config.ts

@@ -0,0 +1,42 @@
+import react from "@vitejs/plugin-react-swc";
+import { defineConfig } from "vitest/config";
+
+const threshold: number = 70 as const;
+
+// biome-ignore lint: define config sigrature
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    // include: ["**/*.test.ts", "**/*.test.tsx"],
+    environment: "jsdom",
+    setupFiles: ["./setup-tests.ts"],
+    css: true,
+    typecheck: {
+      tsconfig: "./tsconfig.test.json",
+    },
+    coverage: {
+      exclude: [
+        "src/**/*.test.tsx",
+        "src/**/*.test.ts",
+        "src/main.tsx",
+        "vite.config.ts",
+        "dist/**/*",
+        "node_modules/**/*",
+        "coverage/**/*",
+        ".eslintrc.cjs",
+        "src/**/*.d.ts",
+      ],
+      provider: "v8",
+      reporter: ["text", "json", "html"],
+      thresholds: {
+        "src/**/*.{ts,tsx}": {
+          functions: threshold,
+          branches: threshold,
+          statements: threshold,
+          lines: threshold,
+        },
+      },
+    },
+  },
+});