move static data

apps/website/app/races/[id]/page.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, waitFor, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 import RaceDetailPage from './page';
 import { RaceDetailViewModel } from '@/lib/view-models/RaceDetailViewModel';
@@ -67,6 +68,17 @@ vi.mock('@/lib/utilities/LeagueMembershipUtility', () => ({
   },
 }));
 
+const renderWithQueryClient = (ui: React.ReactElement) => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  return render(<QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>);
+};
+
 const createViewModel = (status: string) => {
   return new RaceDetailViewModel({
     race: {
@@ -119,7 +131,7 @@ describe('RaceDetailPage - Re-open Race behavior', () => {
 
     const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true);
 
-    render(<RaceDetailPage />);
+    renderWithQueryClient(<RaceDetailPage />);
 
     const reopenButton = await screen.findByText('Re-open Race');
     expect(reopenButton).toBeInTheDocument();
@@ -145,7 +157,7 @@ describe('RaceDetailPage - Re-open Race behavior', () => {
     const viewModel = createViewModel('completed');
     mockGetRaceDetail.mockResolvedValue(viewModel);
 
-    render(<RaceDetailPage />);
+    renderWithQueryClient(<RaceDetailPage />);
 
     await waitFor(() => {
       expect(mockGetRaceDetail).toHaveBeenCalled();
@@ -159,7 +171,7 @@ describe('RaceDetailPage - Re-open Race behavior', () => {
     const viewModel = createViewModel('scheduled');
     mockGetRaceDetail.mockResolvedValue(viewModel);
 
-    render(<RaceDetailPage />);
+    renderWithQueryClient(<RaceDetailPage />);
 
     await waitFor(() => {
       expect(mockGetRaceDetail).toHaveBeenCalled();

apps/website/app/races/[id]/page.tsx

@@ -33,7 +33,7 @@ import {
 } from 'lucide-react';
 import Link from 'next/link';
 import { useParams, useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 export default function RaceDetailPage() {
   const router = useRouter();