Refactor:src/screens/UserPortal/Events from Jest to Vitest

src/screens/UserPortal/Events/Events.test.tsx → src/screens/UserPortal/Events/Events.spec.tsx

@@ -19,35 +19,51 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { ThemeProvider } from 'react-bootstrap';
 import { createTheme } from '@mui/material';
 import useLocalStorage from 'utils/useLocalstorage';
+import { vi } from 'vitest';
 
-const { setItem, getItem } = useLocalStorage();
+/**
+ * Unit tests for the Events component.
+ *
+ * This file contains tests to verify the functionality and behavior of the Events component
+ * under various scenarios, including successful event creation, date/time picker handling,
+ * calendar view toggling, and error handling. Mocked dependencies are used to ensure isolated testing.
+ */
 
-jest.mock('react-toastify', () => ({
+const { setItem } = useLocalStorage();
+
+vi.mock('react-toastify', () => ({
   toast: {
-    error: jest.fn(),
-    info: jest.fn(),
-    success: jest.fn(),
+    error: vi.fn(),
+    info: vi.fn(),
+    success: vi.fn(),
   },
 }));
 
-jest.mock('@mui/x-date-pickers/DatePicker', () => {
+vi.mock('@mui/x-date-pickers/DatePicker', async () => {
+  const desktopDatePickerModule = await vi.importActual(
+    '@mui/x-date-pickers/DesktopDatePicker',
+  );
   return {
-    DatePicker: jest.requireActual('@mui/x-date-pickers/DesktopDatePicker')
-      .DesktopDatePicker,
+    DatePicker: desktopDatePickerModule.DesktopDatePicker,
   };
 });
 
-jest.mock('@mui/x-date-pickers/TimePicker', () => {
+vi.mock('@mui/x-date-pickers/TimePicker', async () => {
+  const timePickerModule = await vi.importActual(
+    '@mui/x-date-pickers/DesktopTimePicker',
+  );
   return {
-    TimePicker: jest.requireActual('@mui/x-date-pickers/DesktopTimePicker')
-      .DesktopTimePicker,
+    TimePicker: timePickerModule.DesktopTimePicker,
   };
 });
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useParams: () => ({ orgId: '' }),
-}));
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return {
+    ...actual,
+    useParams: () => ({ orgId: '' }),
+  };
+});
 
 const theme = createTheme({
   palette: {
@@ -252,19 +268,19 @@ async function wait(ms = 100): Promise<void> {
 describe('Testing Events Screen [User Portal]', () => {
   Object.defineProperty(window, 'matchMedia', {
     writable: true,
-    value: jest.fn().mockImplementation((query) => ({
+    value: vi.fn().mockImplementation((query) => ({
       matches: false,
       media: query,
       onchange: null,
-      addListener: jest.fn(), // Deprecated
-      removeListener: jest.fn(), // Deprecated
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn(),
-      dispatchEvent: jest.fn(),
+      addListener: vi.fn(), // Deprecated
+      removeListener: vi.fn(), // Deprecated
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
     })),
   });
 
-  test('Screen should be rendered properly', async () => {
+  it('Screen should be rendered properly', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -283,7 +299,7 @@ describe('Testing Events Screen [User Portal]', () => {
     await wait();
   });
 
-  test('Create event works as expected when event is not an all day event.', async () => {
+  it('Create event works as expected when event is not an all day event.', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -341,7 +357,7 @@ describe('Testing Events Screen [User Portal]', () => {
     );
   });
 
-  test('Create event works as expected when event is an all day event.', async () => {
+  it('Create event works as expected when event is an all day event.', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -384,7 +400,7 @@ describe('Testing Events Screen [User Portal]', () => {
     );
   });
 
-  test('Switch to calendar view works as expected.', async () => {
+  it('Switch to calendar view works as expected.', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -413,7 +429,7 @@ describe('Testing Events Screen [User Portal]', () => {
     expect(screen.getByText('Sun')).toBeInTheDocument();
   });
 
-  test('Testing DatePicker and TimePicker', async () => {
+  it('Testing DatePicker and TimePicker', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -431,11 +447,11 @@ describe('Testing Events Screen [User Portal]', () => {
     );
 
     await wait();
-
-    const startDate = '03/23/2024';
-    const endDate = '04/23/2024';
-    const startTime = '02:00 PM';
-    const endTime = '06:00 PM';
+    // MM/DD/YYYY
+    const startDate = new Date().toLocaleDateString();
+    const endDate = new Date().toLocaleDateString();
+    const startTime = '08:00 AM';
+    const endTime = '10:00 AM';
 
     userEvent.click(screen.getByTestId('createEventModalBtn'));
 
@@ -475,7 +491,7 @@ describe('Testing Events Screen [User Portal]', () => {
     expect(startTimePicker).toHaveValue(startTime);
   });
 
-  test('EndDate null', async () => {
+  it('EndDate null', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>

src/screens/UserPortal/Volunteer/UpcomingEvents/UpcomingEvents.test.tsx → src/screens/UserPortal/Volunteer/UpcomingEvents/UpcomingEvents.spec.tsx

@@ -21,11 +21,20 @@ import {
 } from './UpcomingEvents.mocks';
 import { toast } from 'react-toastify';
 import useLocalStorage from 'utils/useLocalstorage';
+import { vi } from 'vitest';
 
-jest.mock('react-toastify', () => ({
+/**
+ * Unit tests for the UpcomingEvents component.
+ *
+ * This file contains tests to verify the functionality and behavior of the UpcomingEvents component
+ * under various scenarios, including successful data fetching, error handling, and user interactions.
+ * Mocked dependencies are used to ensure isolated testing of the component.
+ */
+
+vi.mock('react-toastify', () => ({
   toast: {
-    success: jest.fn(),
-    error: jest.fn(),
+    success: vi.fn(),
+    error: vi.fn(),
   },
 }));
 
@@ -81,18 +90,21 @@ const renderUpcomingEvents = (link: ApolloLink): RenderResult => {
 
 describe('Testing Upcoming Events Screen', () => {
   beforeAll(() => {
-    jest.mock('react-router-dom', () => ({
-      ...jest.requireActual('react-router-dom'),
-      useParams: () => ({ orgId: 'orgId' }),
-    }));
+    vi.mock('react-router-dom', async () => {
+      const actual = await vi.importActual('react-router-dom');
+      return {
+        ...actual,
+        useParams: () => ({ orgId: 'orgId' }),
+      };
+    });
   });
 
   beforeEach(() => {
     setItem('userId', 'userId');
   });
 
   afterAll(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   it('should redirect to fallback URL if URL params are undefined', async () => {