Refactor: src/screens/OrganizationFunds from Jest to Vitest

src/screens/OrganizationFunds/FundModal.test.tsx → src/screens/OrganizationFunds/FundModal.spec.tsx

@@ -21,11 +21,12 @@ import { toast } from 'react-toastify';
 import { MOCKS, MOCKS_ERROR } from './OrganizationFundsMocks';
 import type { InterfaceFundModal } from './FundModal';
 import FundModal from './FundModal';
+import { vi } from 'vitest';
 
-jest.mock('react-toastify', () => ({
+vi.mock('react-toastify', () => ({
   toast: {
-    success: jest.fn(),
-    error: jest.fn(),
+    success: vi.fn(),
+    error: vi.fn(),
   },
 }));
 
@@ -38,7 +39,7 @@ const translations = JSON.parse(
 const fundProps: InterfaceFundModal[] = [
   {
     isOpen: true,
-    hide: jest.fn(),
+    hide: vi.fn(),
     fund: {
       _id: 'fundId',
       name: 'Fund 1',
@@ -54,13 +55,13 @@ const fundProps: InterfaceFundModal[] = [
         lastName: 'Doe',
       },
     },
-    refetchFunds: jest.fn(),
+    refetchFunds: vi.fn(),
     orgId: 'orgId',
     mode: 'create',
   },
   {
     isOpen: true,
-    hide: jest.fn(),
+    hide: vi.fn(),
     fund: {
       _id: 'fundId',
       name: 'Fund 1',
@@ -76,7 +77,7 @@ const fundProps: InterfaceFundModal[] = [
         lastName: 'Doe',
       },
     },
-    refetchFunds: jest.fn(),
+    refetchFunds: vi.fn(),
     orgId: 'orgId',
     mode: 'edit',
   },

src/screens/OrganizationFunds/OrganizationFunds.test.tsx → src/screens/OrganizationFunds/OrganizationFunds.spec.tsx

@@ -11,7 +11,7 @@ import {
 import userEvent from '@testing-library/user-event';
 import { I18nextProvider } from 'react-i18next';
 import { Provider } from 'react-redux';
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { MemoryRouter, Route, Routes, useParams } from 'react-router-dom';
 import { store } from 'state/store';
 import { StaticMockLink } from 'utils/StaticMockLink';
 import i18nForTest from 'utils/i18nForTest';
@@ -20,11 +20,12 @@ import { MOCKS, MOCKS_ERROR, NO_FUNDS } from './OrganizationFundsMocks';
 import type { ApolloLink } from '@apollo/client';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { vi } from 'vitest';
 
-jest.mock('react-toastify', () => ({
+vi.mock('react-toastify', () => ({
   toast: {
-    success: jest.fn(),
-    error: jest.fn(),
+    success: vi.fn(),
+    error: vi.fn(),
   },
 }));
 
@@ -67,51 +68,57 @@ const renderOrganizationFunds = (link: ApolloLink): RenderResult => {
 
 describe('OrganizationFunds Screen =>', () => {
   beforeEach(() => {
-    jest.mock('react-router-dom', () => ({
-      ...jest.requireActual('react-router-dom'),
-      useParams: () => ({ orgId: 'orgId' }),
-    }));
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
+    vi.mock('react-router-dom', async () => {
+      const actual = await vi.importActual('react-router-dom');
+      return {
+        ...actual,
+        useParams: vi.fn(),
+      };
+    });
   });
 
   afterEach(() => {
+    vi.clearAllMocks();
     cleanup();
   });
 
   it('should render the Campaign Pledge screen', async () => {
+    vi.mocked(useParams).mockReturnValue({ orgId: 'orgId' });
     renderOrganizationFunds(link1);
     await waitFor(() => {
       expect(screen.getByTestId('searchByName')).toBeInTheDocument();
     });
   });
 
   it('should redirect to fallback URL if URL params are undefined', async () => {
+    vi.mocked(useParams).mockReturnValue({});
     render(
       <MockedProvider addTypename={false} link={link1}>
         <MemoryRouter initialEntries={['/orgfunds/']}>
           <Provider store={store}>
             <I18nextProvider i18n={i18nForTest}>
               <Routes>
-                <Route path="/orgfunds/" element={<OrganizationFunds />} />
                 <Route
                   path="/"
                   element={<div data-testid="paramsError"></div>}
                 />
+                <Route path="/orgfunds/" element={<OrganizationFunds />} />
               </Routes>
             </I18nextProvider>
           </Provider>
         </MemoryRouter>
       </MockedProvider>,
     );
+    await waitFor(() => {
+      expect(window.location.pathname).toBe('/');
+    });
     await waitFor(() => {
       expect(screen.getByTestId('paramsError')).toBeInTheDocument();
     });
   });
 
   it('open and close Create Fund modal', async () => {
+    vi.mocked(useParams).mockReturnValue({ orgId: 'orgId' });
     renderOrganizationFunds(link1);
 
     const createFundBtn = await screen.findByTestId('createFundBtn');
@@ -128,6 +135,7 @@ describe('OrganizationFunds Screen =>', () => {
   });
 
   it('open and close update fund modal', async () => {
+    vi.mocked(useParams).mockReturnValue({ orgId: 'orgId' });
     renderOrganizationFunds(link1);
 
     await waitFor(() => {
@@ -150,6 +158,7 @@ describe('OrganizationFunds Screen =>', () => {
   });
 
   it('Search the Funds list by name', async () => {
+    vi.mocked(useParams).mockReturnValue({ orgId: 'orgId' });
     renderOrganizationFunds(link1);
     const searchField = await screen.findByTestId('searchByName');
     fireEvent.change(searchField, {
@@ -163,20 +172,23 @@ describe('OrganizationFunds Screen =>', () => {
   });
 
   it('should render the Fund screen with error', async () => {
+    vi.mocked(useParams).mockReturnValue({ orgId: 'orgId' });
     renderOrganizationFunds(link2);
     await waitFor(() => {
       expect(screen.getByTestId('errorMsg')).toBeInTheDocument();
     });
   });
 
   it('renders the empty fund component', async () => {
+    vi.mocked(useParams).mockReturnValue({ orgId: 'orgId' });
     renderOrganizationFunds(link3);
     await waitFor(() =>
       expect(screen.getByText(translations.noFundsFound)).toBeInTheDocument(),
     );
   });
 
   it('Sort the Pledges list by Latest created Date', async () => {
+    vi.mocked(useParams).mockReturnValue({ orgId: 'orgId' });
     renderOrganizationFunds(link1);
 
     const sortBtn = await screen.findByTestId('filter');
@@ -198,6 +210,7 @@ describe('OrganizationFunds Screen =>', () => {
   });
 
   it('Sort the Pledges list by Earliest created Date', async () => {
+    vi.mocked(useParams).mockReturnValue({ orgId: 'orgId' });
     renderOrganizationFunds(link1);
 
     const sortBtn = await screen.findByTestId('filter');
@@ -219,6 +232,7 @@ describe('OrganizationFunds Screen =>', () => {
   });
 
   it('Click on Fund Name', async () => {
+    vi.mocked(useParams).mockReturnValue({ orgId: 'orgId' });
     renderOrganizationFunds(link1);
 
     const fundName = await screen.findAllByTestId('fundName');
@@ -231,6 +245,7 @@ describe('OrganizationFunds Screen =>', () => {
   });
 
   it('Click on View Campaign', async () => {
+    vi.mocked(useParams).mockReturnValue({ orgId: 'orgId' });
     renderOrganizationFunds(link1);
 
     const viewBtn = await screen.findAllByTestId('viewBtn');