A try of overhauling the frontend tests, bailed after 24h+

frontend/tests/test-utils.tsx

@@ -0,0 +1,51 @@
+import React, { ReactElement } from 'react';
+import { render as rtlRender, type RenderOptions } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { MemoryRouter } from 'react-router-dom';
+import { SettingsProvider } from '../src/hooks/SettingsProvider';
+
+/**
+ * Standardized render utility for frontend tests to ensure all necessary 
+ * providers (TanStack Query, Settings, Router, etc.) are present.
+ */
+
+interface CustomRenderOptions extends RenderOptions {
+  queryClient?: QueryClient;
+}
+
+const createTestQueryClient = () => new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+      gcTime: 0,
+    },
+  },
+});
+
+const AllTheProviders = ({ children, queryClient }: { children: React.ReactNode; queryClient: QueryClient }) => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <SettingsProvider>
+        <MemoryRouter>
+          {children}
+        </MemoryRouter>
+      </SettingsProvider>
+    </QueryClientProvider>
+  );
+};
+
+const renderWithProviders = (
+  ui: ReactElement,
+  { queryClient = createTestQueryClient(), ...renderOptions }: CustomRenderOptions = {}
+) => {
+  const component = (
+    <AllTheProviders queryClient={queryClient}>
+      {ui}
+    </AllTheProviders>
+  );
+
+  return { queryClient, ...rtlRender(component, renderOptions) };
+};
+
+export * from '@testing-library/react';
+export { renderWithProviders, createTestQueryClient };