Extract query provider, write test for useResumeData

src/App.tsx

@@ -1,31 +1,21 @@
 import { lazy, Suspense } from 'react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ErrorBoundary } from 'react-error-boundary';
+import { QueryProvider } from 'contexts/query';
 import { ResumeProvider } from 'contexts/ResumeContext';
 import LoadingView from 'views/LoadingView';
 import ErrorView from 'views/ErrorView';
 
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      staleTime: 60 * 60 * 1000,
-      refetchOnWindowFocus: false,
-      retry: 2,
-    },
-  },
-});
-
 const CurriculumVitae = lazy(() => import('views/CurriculumVitae'));
 
 export function App() {
   return (
     <ErrorBoundary fallback={<ErrorView />}>
       <Suspense fallback={<LoadingView />}>
-        <QueryClientProvider client={queryClient}>
+        <QueryProvider>
           <ResumeProvider>
             <CurriculumVitae />
           </ResumeProvider>
-        </QueryClientProvider>
+        </QueryProvider>
       </Suspense>
     </ErrorBoundary>
   );

src/contexts/query.tsx

@@ -0,0 +1,26 @@
+import { PropsWithChildren } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 60 * 60 * 1000,
+      refetchOnWindowFocus: false,
+      retry: 2,
+    },
+  },
+});
+
+export function QueryProvider({ children }: PropsWithChildren) {
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}
+
+export function withClient(client: QueryClient) {
+  return function QueryProviderWithClient({ children }: PropsWithChildren) {
+    return (
+      <QueryClientProvider client={client}>{children}</QueryClientProvider>
+    );
+  };
+}

src/hooks/__tests__/useResumeData.test.ts

@@ -0,0 +1,17 @@
+import { QueryClient } from '@tanstack/react-query';
+import { renderHook, waitFor } from '@testing-library/react';
+import useResumeData from 'hooks/useResumeData';
+import { withClient } from 'contexts/query';
+
+describe('useResumeData', async () => {
+  test('should render the hook correctly', async () => {
+    const queryClient = new QueryClient();
+    const { result } = renderHook(useResumeData, {
+      wrapper: withClient(queryClient),
+    });
+
+    await waitFor(() => {
+      expect(result.current.data).toBeDefined();
+    });
+  });
+});