diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx
index bff658b..c1bf3eb 100644
--- a/src/components/Modal.jsx
+++ b/src/components/Modal.jsx
@@ -1,7 +1,7 @@
 import { useEffect, useRef } from "react"
 import { css } from "@emotion/react"
 
-function Modal({ openModal, closeModal, children }) {
+const Modal = ({ openModal, closeModal, children }) => {
   const style = css`
     dialog {
       border: none;
diff --git a/test/App.test.jsx b/test/App.test.jsx
index 200403b..719c6de 100644
--- a/test/App.test.jsx
+++ b/test/App.test.jsx
@@ -34,6 +34,11 @@ function renderApp(history, pageContext, children = null) {
 
 describe("App", () => {
   vi.spyOn(window, "fetch").mockImplementation(mockFetch)
+  vi.mock("../src/components/Modal.jsx", async () => {
+    return {
+      default: () => <div></div>,
+    }
+  })
   useStaticQuery.mockImplementation(() => mockConfig)
 
   it("renders App component with expand and collapse button", async () => {