Rework tests to use msw and renderInTest

react/src/AppRouter.tsx

@@ -65,7 +65,10 @@ function AppRouter() {
             </ProtectedRoute>
           }
         />
-        <Route path={ROUTES.PUBLIC_PROJECT} element={<MapProject isPublicView />} />
+        <Route
+          path={ROUTES.PUBLIC_PROJECT}
+          element={<MapProject isPublicView />}
+        />
         <Route path={ROUTES.CALLBACK} element={<Callback />} />
         <Route
           path={ROUTES.STREETVIEW_CALLBACK}

react/src/components/FeatureFileTree/FeatureFileTree.test.tsx

@@ -1,14 +1,10 @@
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
+import { fireEvent, waitFor } from '@testing-library/react';
+import { http, HttpResponse } from 'msw';
 import FeatureFileTree from './FeatureFileTree';
+import { server, renderInTest } from '@hazmapper/test/testUtil';
 import { featureCollection } from '@hazmapper/__fixtures__/featuresFixture';
-import { useDeleteFeature } from '@hazmapper/hooks';
-
-// Mock the hooks
-jest.mock('@hazmapper/hooks', () => ({
-  useDeleteFeature: jest.fn(),
-}));
+import { testDevConfiguration } from '@hazmapper/__fixtures__/appConfigurationFixture';
 
 jest.mock('react-resize-detector', () => ({
   useResizeDetector: () => ({
@@ -17,64 +13,59 @@ jest.mock('react-resize-detector', () => ({
   }),
 }));
 
-const renderWithRouter = (ui: React.ReactElement, { route = '/' } = {}) => {
-  return {
-    ...render(<MemoryRouter initialEntries={[route]}>{ui}</MemoryRouter>),
-  };
-};
-
 describe('FeatureFileTree', () => {
-  const defaultProps = {
+  const defaultTreeProps = {
     featureCollection: featureCollection,
     isPublicView: false,
     projectId: 1,
   };
 
   beforeEach(() => {
     jest.clearAllMocks();
-
-    (useDeleteFeature as jest.Mock).mockImplementation(() => ({
-      mutate: jest.fn(),
-      isLoading: false,
-    }));
   });
 
   it('renders feature list correctly', () => {
-    const { getByText } = renderWithRouter(
-      <FeatureFileTree {...defaultProps} />
+    const { getByText } = renderInTest(
+      <FeatureFileTree {...defaultTreeProps} />
     );
 
     expect(getByText('foo')).toBeDefined();
     expect(getByText('image1.JPG')).toBeDefined();
     expect(getByText('image2.JPG')).toBeDefined();
   });
 
-  it('handles feature deletion for non-public projects', () => {
-    const deleteFeatureMock = jest.fn();
-    (useDeleteFeature as jest.Mock).mockImplementation(() => ({
-      mutate: deleteFeatureMock,
-      isLoading: false,
-    }));
+  it('handles feature deletion for non-public projects', async () => {
+    const featureId = 1;
+    let wasDeleted = false;
+
+    server.use(
+      http.delete(
+        `${testDevConfiguration.geoapiUrl}/projects/${defaultTreeProps.projectId}/features/${featureId}/`,
+        () => {
+          wasDeleted = true;
+          return HttpResponse.json({}, { status: 200 });
+        }
+      )
+    );
 
-    const { getByTestId } = renderWithRouter(
-      <FeatureFileTree {...defaultProps} />,
-      { route: '/?selectedFeature=1' }
+    const { getByTestId } = renderInTest(
+      <FeatureFileTree {...defaultTreeProps} />,
+      `/?selectedFeature=${featureId}`
     );
 
     // Find and click delete button (as featured is selected)
     const deleteButton = getByTestId('delete-feature-button');
     fireEvent.click(deleteButton);
 
-    expect(deleteFeatureMock).toHaveBeenCalledWith({
-      projectId: 1,
-      featureId: 1,
+    await waitFor(() => {
+      expect(wasDeleted).toBeTruthy();
     });
   });
 
   it('does not show delete button for public projects', () => {
-    const { queryByTestId } = renderWithRouter(
-      <FeatureFileTree {...defaultProps} isPublicView={true} />,
-      { route: '/?selectedFeature=1' }
+    const { queryByTestId } = renderInTest(
+      <FeatureFileTree {...defaultTreeProps} isPublicView={true} />,
+      '/?selectedFeature=1'
     );
 
     // Verify delete button is not present
@@ -83,8 +74,8 @@ describe('FeatureFileTree', () => {
   });
 
   it('does not show delete button when no feature is selected', () => {
-    const { queryByTestId } = renderWithRouter(
-      <FeatureFileTree {...defaultProps} isPublicView={false} />
+    const { queryByTestId } = renderInTest(
+      <FeatureFileTree {...defaultTreeProps} isPublicView={false} />
     );
 
     // Verify delete button is not present

react/src/components/MapProjectNavBar/MapProjectNavBar.tsx

@@ -62,7 +62,9 @@ interface NavBarPanelProps {
   isPublicView?: boolean;
 }
 
-const MapProjectNavBar: React.FC<NavBarPanelProps> = ({ isPublicView = false }) => {
+const MapProjectNavBar: React.FC<NavBarPanelProps> = ({
+  isPublicView = false,
+}) => {
   const location = useLocation();
   const queryParams = new URLSearchParams(location.search);
   const activePanel = queryParams.get(queryPanelKey);

react/src/pages/MapProject/MapProject.tsx

@@ -61,7 +61,12 @@ const MapProject: React.FC<MapProjectProps> = ({ isPublicView = false }) => {
     );
   }
 
-  return <LoadedMapProject isPublicView={isPublicView} activeProject={activeProject} />;
+  return (
+    <LoadedMapProject
+      isPublicView={isPublicView}
+      activeProject={activeProject}
+    />
+  );
 };
 
 interface LoadedMapProject {

react/src/test/testUtil.tsx

@@ -17,6 +17,9 @@ export const testQueryClient = new QueryClient({
       staleTime: 0,
       useErrorBoundary: true,
     },
+    mutations: {
+      retry: false,
+    },
   },
 });