Fix Panel test setup

frontend/src/components/Panel/Panel.test.tsx

@@ -1,5 +1,6 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { fireEvent, render } from "@testing-library/react";
+import React from "react";
 import { getArticle } from "../../lib/api";
 import { Language } from "../../lib/types";
 import useNavState from "../../store/navStore";
@@ -22,22 +23,7 @@ const queryClient = new QueryClient({
     },
   },
 });
-const renderWithClient = (ui: React.ReactElement) => {
-  const { rerender, ...result } = render(
-    <QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>
-  );
-  return {
-    ...result,
-    rerender: (rerenderUi: React.ReactElement) =>
-      rerender(
-        <QueryClientProvider client={queryClient}>
-          {rerenderUi}
-        </QueryClientProvider>
-      ),
-  };
-};
-
-const wrapper = ({ children }) => (
+const wrapper = ({ children }: { children: React.ReactNode }) => (
   <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
 );
 
@@ -70,7 +56,7 @@ describe("Panel Component", () => {
 
   test("renders error state", async () => {
     (getArticle as jest.Mock).mockRejectedValue(new Error("Failed to fetch"));
-    const { findByText } = renderWithClient(<Panel />);
+    const { findByText } = render(<Panel />, { wrapper });
     expect(
       await findByText("An error has occurred: Failed to fetch")
     ).toBeInTheDocument();
@@ -80,7 +66,7 @@ describe("Panel Component", () => {
     const mockData = `<div class='paragraph' data-paragraph-id='1'>Test Content</div>`;
     jest.mocked(getArticle).mockResolvedValue(mockData);
 
-    const result = renderWithClient(<Panel />);
+    const result = render(<Panel />, { wrapper });
     expect(await result.findByText("Test Content")).toBeInTheDocument();
   });
 
@@ -91,7 +77,7 @@ describe("Panel Component", () => {
         `;
     (getArticle as jest.Mock).mockResolvedValue(mockData);
 
-    const result = renderWithClient(<Panel />);
+    const result = render(<Panel />, { wrapper });
 
     const paragraph1 = await result.findByText("Paragraph 1");
     const paragraph2 = await result.findByText("Paragraph 2");
@@ -113,7 +99,7 @@ describe("Panel Component", () => {
       .mockResolvedValue(
         "<div class='paragraph' data-paragraph-id='1'>Test Content</div>"
       );
-    const result = renderWithClient(<Panel language={Language.FRA} />);
+    const result = render(<Panel language={Language.FRA} />, { wrapper });
 
     const languageSwitcher = await result.findByRole("combobox");
     expect(languageSwitcher).toBeInTheDocument();