test(ui): wrap CreateKeyPage test in QueryClientProvider

page.tsx now calls useUISettings (react-query), which needs a
QueryClient that layout.tsx supplies in production but the test did
not. Add the provider and mock getUiSettings so the query resolves.

ui/litellm-dashboard/tests/CreateKeyPage.expiredToken.test.tsx

@@ -72,6 +72,8 @@ vi.mock("@/components/networking", () => {
   return {
     // Called on mount; we don't care about its contents, only that it resolves
     getUiConfig: vi.fn().mockResolvedValue({}),
+    // Fetched by useUISettings(); resolve with empty settings so nudges stay default-on
+    getUiSettings: vi.fn().mockResolvedValue({ values: {}, field_schema: {} }),
     // Used to build the redirect URL
     proxyBaseUrl: "https://example.com",
     // Called when decoding a valid token
@@ -146,17 +148,22 @@ vi.mock("@/lib/cva.config", () => ({
   cx: (...args: string[]) => args.join(" "),
 }));
 
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import CreateKeyPage from "@/app/page";
 import { AuthProvider } from "@/contexts/AuthContext";
 
 // The page consumes auth state via useAuth(). Wrap it so the hook resolves
 // against a real provider — the provider's effects (cookie read, JWT decode,
-// redirect-on-expired) are what these tests exercise.
+// redirect-on-expired) are what these tests exercise. The QueryClientProvider
+// mirrors what layout.tsx supplies in production for hooks like useUISettings.
 function PageUnderTest() {
+  const [queryClient] = React.useState(() => new QueryClient({ defaultOptions: { queries: { retry: false } } }));
   return (
-    <AuthProvider>
-      <CreateKeyPage />
-    </AuthProvider>
+    <QueryClientProvider client={queryClient}>
+      <AuthProvider>
+        <CreateKeyPage />
+      </AuthProvider>
+    </QueryClientProvider>
   );
 }