diff --git a/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupDeleteModal.test.tsx b/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupDeleteModal.spec.tsx similarity index 92% rename from src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupDeleteModal.test.tsx rename to src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupDeleteModal.spec.tsx index 05c2dab5ff..8e726028db 100644 --- a/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupDeleteModal.test.tsx +++ b/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupDeleteModal.spec.tsx @@ -16,11 +16,18 @@ import { toast } from 'react-toastify'; import type { InterfaceDeleteVolunteerGroupModal } from './VolunteerGroupDeleteModal'; import VolunteerGroupDeleteModal from './VolunteerGroupDeleteModal'; import userEvent from '@testing-library/user-event'; +import { vi } from 'vitest'; -jest.mock('react-toastify', () => ({ +/** + * Mock implementation of the `react-toastify` module. + * Mocks the `toast` object with `success` and `error` methods to allow testing + * without triggering actual toast notifications. + */ + +vi.mock('react-toastify', () => ({ toast: { - success: jest.fn(), - error: jest.fn(), + success: vi.fn(), + error: vi.fn(), }, })); @@ -39,8 +46,8 @@ const t = { const itemProps: InterfaceDeleteVolunteerGroupModal[] = [ { isOpen: true, - hide: jest.fn(), - refetchGroups: jest.fn(), + hide: vi.fn(), + refetchGroups: vi.fn(), group: { _id: 'groupId', name: 'Group 1', diff --git a/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupModal.test.tsx b/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupModal.spec.tsx similarity index 96% rename from src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupModal.test.tsx rename to src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupModal.spec.tsx index 2fc0b2e348..79b1d94545 100644 --- a/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupModal.test.tsx +++ b/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupModal.spec.tsx @@ -22,11 +22,18 @@ import { toast } from 'react-toastify'; import type { InterfaceVolunteerGroupModal } from './VolunteerGroupModal'; import GroupModal from './VolunteerGroupModal'; import userEvent from '@testing-library/user-event'; +import { vi } from 'vitest'; -jest.mock('react-toastify', () => ({ +/** + * Mock implementation of the `react-toastify` module. + * Mocks the `toast` object with `success` and `error` methods to allow testing + * without triggering actual toast notifications. + */ + +vi.mock('react-toastify', () => ({ toast: { - success: jest.fn(), - error: jest.fn(), + success: vi.fn(), + error: vi.fn(), }, })); @@ -45,19 +52,19 @@ const t = { const itemProps: InterfaceVolunteerGroupModal[] = [ { isOpen: true, - hide: jest.fn(), + hide: vi.fn(), eventId: 'eventId', orgId: 'orgId', - refetchGroups: jest.fn(), + refetchGroups: vi.fn(), mode: 'create', group: null, }, { isOpen: true, - hide: jest.fn(), + hide: vi.fn(), eventId: 'eventId', orgId: 'orgId', - refetchGroups: jest.fn(), + refetchGroups: vi.fn(), mode: 'edit', group: { _id: 'groupId', @@ -96,10 +103,10 @@ const itemProps: InterfaceVolunteerGroupModal[] = [ }, { isOpen: true, - hide: jest.fn(), + hide: vi.fn(), eventId: 'eventId', orgId: 'orgId', - refetchGroups: jest.fn(), + refetchGroups: vi.fn(), mode: 'edit', group: { _id: 'groupId', diff --git a/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupViewModal.test.tsx b/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupViewModal.spec.tsx similarity index 98% rename from src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupViewModal.test.tsx rename to src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupViewModal.spec.tsx index 94c34923a2..b029909809 100644 --- a/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupViewModal.test.tsx +++ b/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupViewModal.spec.tsx @@ -11,6 +11,7 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import i18n from 'utils/i18nForTest'; import type { InterfaceVolunteerGroupViewModal } from './VolunteerGroupViewModal'; import VolunteerGroupViewModal from './VolunteerGroupViewModal'; +import { vi } from 'vitest'; const t = { ...JSON.parse( @@ -25,7 +26,7 @@ const t = { const itemProps: InterfaceVolunteerGroupViewModal[] = [ { isOpen: true, - hide: jest.fn(), + hide: vi.fn(), group: { _id: 'groupId', name: 'Group 1', @@ -63,7 +64,7 @@ const itemProps: InterfaceVolunteerGroupViewModal[] = [ }, { isOpen: true, - hide: jest.fn(), + hide: vi.fn(), group: { _id: 'groupId', name: 'Group 1', diff --git a/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroups.test.tsx b/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroups.spec.tsx similarity index 89% rename from src/screens/EventVolunteers/VolunteerGroups/VolunteerGroups.test.tsx rename to src/screens/EventVolunteers/VolunteerGroups/VolunteerGroups.spec.tsx index 0dcba34a3a..2ce6e6a9dd 100644 --- a/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroups.test.tsx +++ b/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroups.spec.tsx @@ -7,13 +7,14 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react'; 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 i18n from 'utils/i18nForTest'; import VolunteerGroups from './VolunteerGroups'; import type { ApolloLink } from '@apollo/client'; import { MOCKS, MOCKS_EMPTY, MOCKS_ERROR } from './VolunteerGroups.mocks'; +import { vi } from 'vitest'; const link1 = new StaticMockLink(MOCKS); const link2 = new StaticMockLink(MOCKS_ERROR); @@ -61,19 +62,30 @@ const renderVolunteerGroups = (link: ApolloLink): RenderResult => { ); }; +/** Mock useParams to provide consistent test data */ + describe('Testing VolunteerGroups Screen', () => { beforeAll(() => { - jest.mock('react-router-dom', () => ({ - ...jest.requireActual('react-router-dom'), - useParams: () => ({ orgId: 'orgId', eventId: 'eventId' }), - })); + vi.mock('react-router-dom', async () => { + const actualDom = await vi.importActual('react-router-dom'); + return { + ...actualDom, + useParams: vi.fn(), + }; + }); }); afterAll(() => { - jest.clearAllMocks(); + vi.clearAllMocks(); }); + const mockRouteParams = (orgId = 'orgId', eventId = 'eventId'): void => { + vi.mocked(useParams).mockReturnValue({ orgId, eventId }); + }; + it('should redirect to fallback URL if URL params are undefined', async () => { + /** Mocking the useParams hook to return undefined parameters */ + mockRouteParams('', ''); render( @@ -98,12 +110,14 @@ describe('Testing VolunteerGroups Screen', () => { }); it('should render Groups screen', async () => { + mockRouteParams(); renderVolunteerGroups(link1); const searchInput = await screen.findByTestId('searchBy'); expect(searchInput).toBeInTheDocument(); }); it('Check Sorting Functionality', async () => { + mockRouteParams(); renderVolunteerGroups(link1); const searchInput = await screen.findByTestId('searchBy'); expect(searchInput).toBeInTheDocument(); @@ -133,6 +147,7 @@ describe('Testing VolunteerGroups Screen', () => { }); it('Search by Groups', async () => { + mockRouteParams(); renderVolunteerGroups(link1); const searchInput = await screen.findByTestId('searchBy'); expect(searchInput).toBeInTheDocument(); @@ -153,6 +168,7 @@ describe('Testing VolunteerGroups Screen', () => { }); it('Search by Leader', async () => { + mockRouteParams(); renderVolunteerGroups(link1); const searchInput = await screen.findByTestId('searchBy'); expect(searchInput).toBeInTheDocument(); @@ -174,6 +190,7 @@ describe('Testing VolunteerGroups Screen', () => { }); it('should render screen with No Groups', async () => { + mockRouteParams(); renderVolunteerGroups(link3); await waitFor(() => { @@ -183,6 +200,7 @@ describe('Testing VolunteerGroups Screen', () => { }); it('Error while fetching groups data', async () => { + mockRouteParams(); renderVolunteerGroups(link2); await waitFor(() => { @@ -191,6 +209,7 @@ describe('Testing VolunteerGroups Screen', () => { }); it('Open and close ViewModal', async () => { + mockRouteParams(); renderVolunteerGroups(link1); const viewGroupBtn = await screen.findAllByTestId('viewGroupBtn'); @@ -201,6 +220,7 @@ describe('Testing VolunteerGroups Screen', () => { }); it('Open and Close Delete Modal', async () => { + mockRouteParams(); renderVolunteerGroups(link1); const deleteGroupBtn = await screen.findAllByTestId('deleteGroupBtn'); @@ -211,6 +231,7 @@ describe('Testing VolunteerGroups Screen', () => { }); it('Open and close GroupModal (Edit)', async () => { + mockRouteParams(); renderVolunteerGroups(link1); const editGroupBtn = await screen.findAllByTestId('editGroupBtn'); @@ -221,6 +242,7 @@ describe('Testing VolunteerGroups Screen', () => { }); it('Open and close GroupModal (Create)', async () => { + mockRouteParams(); renderVolunteerGroups(link1); const createGroupBtn = await screen.findByTestId('createGroupBtn');