test: refactor test to use jest.mock for next/router to simplify mock…

…ing and improve test readability

The changes were made to refactor the tests for OntologyLoader, PhenotypesLoader, and SummaryLoader components to use jest.mock for mocking the next/router module. This simplifies the mocking process and enhances the readability of the tests.

apps/genome-page/components/features/Ontology/OntologyLoader.test.tsx

@@ -2,16 +2,16 @@ import React from "react"
 import { render, screen } from "@testing-library/react"
 import { OntologyLoader } from "./OntologyLoader"
 
-// eslint-disable-next-line import/no-commonjs, unicorn/prefer-module -- ESM not supported by default as of Jest 29
-const useRouter = jest.spyOn(require("next/router"), "useRouter")
-
-const gene = "DDB_G123456"
+jest.mock("next/router", () => {
+  const useRouter = jest.fn(() => ({
+    query: { id: "DDB_G123456" },
+    pathname: "",
+  }))
+  return { useRouter }
+})
 
 describe("components/OntologyLoader", () => {
   it("should render skeleton loader", () => {
-    useRouter.mockImplementation(() => ({
-      pathname: `gene/${gene}/goannotations`,
-    }))
     render(<OntologyLoader />)
     expect(screen.getByTestId("skeleton-loader")).toBeInTheDocument()
   })

apps/genome-page/components/features/Ontology/OntologyLoader.tsx

@@ -38,7 +38,7 @@ const OntologyLoader = () => {
       gene={geneId}
       title={`GO Annotations for ${geneId}`}
       description={`Gene Ontology Annotations for ${geneId}`}>
-      <Box data-testid="skeleton-loader">
+      <Box>
         <MuiThemeProvider theme={skeletonTheme}>
           <AppBar position="static">
             <Tabs value={0}>

apps/genome-page/components/features/Phenotypes/PhenotypesLoader.test.tsx

@@ -2,6 +2,14 @@ import { render, screen } from "@testing-library/react"
 import React from "react"
 import { PhenotypesLoader } from "./PhenotypesLoader"
 
+jest.mock("next/router", () => {
+  const useRouter = jest.fn(() => ({
+    query: { id: "DDB_G123456" },
+    pathname: "",
+  }))
+  return { useRouter }
+})
+
 describe("features/Phenotypes/PhenotypesLoader", () => {
   it("should render loader", () => {
     render(<PhenotypesLoader />)

apps/genome-page/components/features/Summary/SummaryLoader.test.tsx

@@ -2,16 +2,16 @@ import React from "react"
 import { render, screen } from "@testing-library/react"
 import { SummaryLoader } from "./SummaryLoader"
 
-// eslint-disable-next-line import/no-commonjs, unicorn/prefer-module -- ESM not supported by default as of Jest 29
-const useRouter = jest.spyOn(require("next/router"), "useRouter")
-
-const gene = "DDB_G123456"
+jest.mock("next/router", () => {
+  const useRouter = jest.fn(() => ({
+    query: { id: "DDB_G123456" },
+    pathname: "",
+  }))
+  return { useRouter }
+})
 
 describe("components/SummaryLoader", () => {
   it("should render skeleton loader", () => {
-    useRouter.mockImplementation(() => ({
-      query: { id: gene },
-    }))
     render(<SummaryLoader />)
     expect(screen.getByTestId("skeleton-loader")).toBeInTheDocument()
   })