fixing unit test

Author: yyassi-heartex

web/libs/editor/src/components/TaskSummary/__tests__/TaskSummary.test.tsx

@@ -1,7 +1,21 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type { ReactElement } from "react";
 import { render, screen } from "@testing-library/react";
 import type { MSTAnnotation, MSTStore } from "../../../stores/types";
 import TaskSummary from "../TaskSummary";
 
+const createTestQueryClient = () =>
+  new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+    },
+  });
+
+const renderWithQueryClient = (ui: ReactElement) => {
+  const queryClient = createTestQueryClient();
+  return render(<QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>);
+};
+
 // Polyfill for Object.groupBy which may not be available in test environment
 if (!Object.groupBy) {
   Object.groupBy = <T, K extends PropertyKey>(
@@ -165,7 +179,7 @@ describe("TaskSummary", () => {
     const annotations = [createMockAnnotation()];
     const store = createMockStore();
 
-    render(<TaskSummary annotations={annotations} store={store} />);
+    renderWithQueryClient(<TaskSummary annotations={annotations} store={store} />);
 
     expect(screen.getByText("Task Summary")).toBeInTheDocument();
     expect(screen.getByText("Task Data")).toBeInTheDocument();
@@ -181,7 +195,7 @@ describe("TaskSummary", () => {
       },
     });
 
-    render(<TaskSummary annotations={annotations} store={store} />);
+    renderWithQueryClient(<TaskSummary annotations={annotations} store={store} />);
 
     expect(screen.getByText("Agreement")).toBeInTheDocument();
     expect(screen.getByText("85.5%")).toBeInTheDocument();
@@ -197,7 +211,7 @@ describe("TaskSummary", () => {
       },
     });
 
-    render(<TaskSummary annotations={annotations} store={store} />);
+    renderWithQueryClient(<TaskSummary annotations={annotations} store={store} />);
 
     // Backend controls agreement visibility, so if we have a number, show it
     expect(screen.getByText("Agreement")).toBeInTheDocument();
@@ -210,7 +224,7 @@ describe("TaskSummary", () => {
       project: null,
     });
 
-    render(<TaskSummary annotations={annotations} store={store} />);
+    renderWithQueryClient(<TaskSummary annotations={annotations} store={store} />);
 
     // Backend controls agreement visibility, so if we have a number, show it
     expect(screen.getByText("Agreement")).toBeInTheDocument();
@@ -226,7 +240,7 @@ describe("TaskSummary", () => {
     ];
     const store = createMockStore();
 
-    render(<TaskSummary annotations={annotations} store={store} />);
+    renderWithQueryClient(<TaskSummary annotations={annotations} store={store} />);
 
     expect(screen.getByText("Annotations")).toBeInTheDocument();
     expect(screen.getByText("2")).toBeInTheDocument(); // Only submitted annotations
@@ -241,7 +255,7 @@ describe("TaskSummary", () => {
     ];
     const store = createMockStore();
 
-    render(<TaskSummary annotations={annotations} store={store} />);
+    renderWithQueryClient(<TaskSummary annotations={annotations} store={store} />);
 
     expect(screen.getByText("Predictions")).toBeInTheDocument();
     expect(screen.getByText("2")).toBeInTheDocument(); // Only submitted predictions
@@ -266,7 +280,7 @@ describe("TaskSummary", () => {
       ]),
     });
 
-    render(<TaskSummary annotations={annotations} store={store} />);
+    renderWithQueryClient(<TaskSummary annotations={annotations} store={store} />);
 
     expect(screen.getByText("Annotator")).toBeInTheDocument();
     expect(screen.getByText("sentiment")).toBeInTheDocument();
@@ -288,7 +302,7 @@ describe("TaskSummary", () => {
       ]),
     });
 
-    render(<TaskSummary annotations={annotations} store={store} />);
+    renderWithQueryClient(<TaskSummary annotations={annotations} store={store} />);
 
     // Object tags should appear in the data summary (as header and badge)
     expect(screen.getAllByText("text")).toHaveLength(2); // header + badge
@@ -299,7 +313,7 @@ describe("TaskSummary", () => {
     const annotations: MSTAnnotation[] = [];
     const store = createMockStore();
 
-    render(<TaskSummary annotations={annotations} store={store} />);
+    renderWithQueryClient(<TaskSummary annotations={annotations} store={store} />);
 
     // Should show 0 for both annotations and predictions
     expect(screen.getByText("Annotations")).toBeInTheDocument();
@@ -322,7 +336,7 @@ describe("TaskSummary", () => {
       },
     });
 
-    render(<TaskSummary annotations={annotations} store={store} />);
+    renderWithQueryClient(<TaskSummary annotations={annotations} store={store} />);
 
     // Should not display agreement when it's undefined
     expect(screen.queryByText("Agreement")).not.toBeInTheDocument();
@@ -351,7 +365,7 @@ describe("TaskSummary", () => {
       names: new Map([controlWithPerRegion]),
     });
 
-    render(<TaskSummary annotations={annotations} store={store} />);
+    renderWithQueryClient(<TaskSummary annotations={annotations} store={store} />);
 
     expect(screen.getByText("regionLabel")).toBeInTheDocument();
   });
@@ -367,7 +381,7 @@ describe("TaskSummary", () => {
       ]),
     });
 
-    render(<TaskSummary annotations={annotations} store={store} />);
+    renderWithQueryClient(<TaskSummary annotations={annotations} store={store} />);
 
     // Only valid object tags with $ prefix should appear (as header and badge)
     expect(screen.getAllByText("text")).toHaveLength(2); // header + badge