diff --git a/src/components/UserPortal/ChatRoom/ChatRoom.test.tsx b/src/components/UserPortal/ChatRoom/ChatRoom.spec.tsx
similarity index 98%
rename from src/components/UserPortal/ChatRoom/ChatRoom.test.tsx
rename to src/components/UserPortal/ChatRoom/ChatRoom.spec.tsx
index c808485132..fef1b67fa5 100644
--- a/src/components/UserPortal/ChatRoom/ChatRoom.test.tsx
+++ b/src/components/UserPortal/ChatRoom/ChatRoom.spec.tsx
@@ -21,6 +21,15 @@ import {
 import ChatRoom from './ChatRoom';
 import { useLocalStorage } from 'utils/useLocalstorage';
 import { StaticMockLink } from 'utils/StaticMockLink';
+import { vi } from 'vitest';
+
+/**
+ * Unit tests for the ChatRoom component
+ *
+ * Tests cover component rendering, message functionality (sending/replying),
+ * user interactions, GraphQL integration, and provider integrations
+ * (Router, Redux, i18n) for both direct and group chats.
+ */
 
 const { setItem } = useLocalStorage();
 
@@ -1188,9 +1197,9 @@ const SEND_MESSAGE_TO_CHAT_MOCK = [
 ];
 
 describe('Testing Chatroom Component [User Portal]', () => {
-  window.HTMLElement.prototype.scrollIntoView = jest.fn();
+  window.HTMLElement.prototype.scrollIntoView = vi.fn();
 
-  test('Chat room should display fallback content if no chat is active', async () => {
+  it('Chat room should display fallback content if no chat is active', async () => {
     const mocks = [
       ...MESSAGE_SENT_TO_CHAT_MOCK,
       ...CHAT_BY_ID_QUERY_MOCK,
@@ -1212,7 +1221,7 @@ describe('Testing Chatroom Component [User Portal]', () => {
     expect(await screen.findByTestId('noChatSelected')).toBeInTheDocument();
   });
 
-  test('Selected contact is direct chat', async () => {
+  it('Selected contact is direct chat', async () => {
     const link = new MockSubscriptionLink();
     const mocks = [
       ...MESSAGE_SENT_TO_CHAT_MOCK,
@@ -1234,7 +1243,7 @@ describe('Testing Chatroom Component [User Portal]', () => {
     await wait();
   });
 
-  test('send message direct chat', async () => {
+  it('send message direct chat', async () => {
     setItem('userId', '2');
     const mocks = [
       ...MESSAGE_SENT_TO_CHAT_MOCK,
@@ -1319,7 +1328,7 @@ describe('Testing Chatroom Component [User Portal]', () => {
     await wait(400);
   });
 
-  test('send message direct chat when userId is different', async () => {
+  it('send message direct chat when userId is different', async () => {
     setItem('userId', '8');
     const mocks = [
       ...GROUP_CHAT_BY_ID_QUERY_MOCK,
@@ -1404,7 +1413,7 @@ describe('Testing Chatroom Component [User Portal]', () => {
     await wait(400);
   });
 
-  test('Selected contact is group chat', async () => {
+  it('Selected contact is group chat', async () => {
     const mocks = [
       ...MESSAGE_SENT_TO_CHAT_MOCK,
       ...CHAT_BY_ID_QUERY_MOCK,
@@ -1425,7 +1434,7 @@ describe('Testing Chatroom Component [User Portal]', () => {
     await wait();
   });
 
-  test('send message group chat', async () => {
+  it('send message group chat', async () => {
     const mocks = [
       ...MESSAGE_SENT_TO_CHAT_MOCK,
       ...CHAT_BY_ID_QUERY_MOCK,
@@ -1505,7 +1514,7 @@ describe('Testing Chatroom Component [User Portal]', () => {
     await wait(500);
   });
 
-  test('reply to message', async () => {
+  it('reply to message', async () => {
     const mocks = [
       ...MESSAGE_SENT_TO_CHAT_MOCK,
       ...CHAT_BY_ID_QUERY_MOCK,
diff --git a/src/components/UserPortal/ChatRoom/ChatRoom.tsx b/src/components/UserPortal/ChatRoom/ChatRoom.tsx
index c23244a314..27768dce5a 100644
--- a/src/components/UserPortal/ChatRoom/ChatRoom.tsx
+++ b/src/components/UserPortal/ChatRoom/ChatRoom.tsx
@@ -159,17 +159,14 @@ export default function chatRoom(props: InterfaceChatRoomProps): JSX.Element {
       userId: userId,
     },
     onData: (messageSubscriptionData) => {
-      if (
-        messageSubscriptionData?.data.data.messageSentToChat &&
-        messageSubscriptionData?.data.data.messageSentToChat
-          .chatMessageBelongsTo['_id'] == props.selectedContact
-      ) {
+      const chatMessage = messageSubscriptionData.data?.data?.messageSentToChat;
+      const chatId = chatMessage?.chatMessageBelongsTo?._id;
+
+      if (!chatId) return;
+      if (chatId === props.selectedContact) {
         chatRefetch();
       } else {
-        chatRefetch({
-          id: messageSubscriptionData?.data.data.messageSentToChat
-            .chatMessageBelongsTo['_id'],
-        });
+        chatRefetch({ id: chatId });
       }
     },
   });
diff --git a/src/components/UserPortal/CommentCard/CommentCard.test.tsx b/src/components/UserPortal/CommentCard/CommentCard.spec.tsx
similarity index 85%
rename from src/components/UserPortal/CommentCard/CommentCard.test.tsx
rename to src/components/UserPortal/CommentCard/CommentCard.spec.tsx
index f02e5a606a..112fd1bcf5 100644
--- a/src/components/UserPortal/CommentCard/CommentCard.test.tsx
+++ b/src/components/UserPortal/CommentCard/CommentCard.spec.tsx
@@ -7,12 +7,23 @@ import { BrowserRouter } from 'react-router-dom';
 import { store } from 'state/store';
 import i18nForTest from 'utils/i18nForTest';
 import { StaticMockLink } from 'utils/StaticMockLink';
-
 import CommentCard from './CommentCard';
 import userEvent from '@testing-library/user-event';
 import { LIKE_COMMENT, UNLIKE_COMMENT } from 'GraphQl/Mutations/mutations';
 import useLocalStorage from 'utils/useLocalstorage';
-
+import { vi } from 'vitest';
+
+/**
+ * Unit tests for the CommentCard component.
+ *
+ * These tests ensure the CommentCard component renders and behaves as expected
+ * under different scenarios. They cover various functionalities like:
+ *  - Initial rendering with comment liked/not liked by user
+ *  - User liking a comment
+ *  - User unliking a comment
+ * Mocked dependencies like `useLocalStorage` and Apollo Client mocks are used
+ * to isolate the component and test its behavior independently.
+ */
 const { getItem, setItem } = useLocalStorage();
 
 async function wait(ms = 100): Promise<void> {
@@ -56,8 +67,8 @@ const MOCKS = [
   },
 ];
 
-const handleLikeComment = jest.fn();
-const handleDislikeComment = jest.fn();
+const handleLikeComment = vi.fn();
+const handleDislikeComment = vi.fn();
 const link = new StaticMockLink(MOCKS, true);
 
 describe('Testing CommentCard Component [User Portal]', () => {
@@ -67,7 +78,7 @@ describe('Testing CommentCard Component [User Portal]', () => {
     });
   });
 
-  test('Component should be rendered properly if comment is already liked by the user.', async () => {
+  it('Component should be rendered properly if comment is already liked by the user.', async () => {
     const cardProps = {
       id: '1',
       creator: {
@@ -108,7 +119,7 @@ describe('Testing CommentCard Component [User Portal]', () => {
     }
   });
 
-  test('Component should be rendered properly if comment is not already liked by the user.', async () => {
+  it('Component should be rendered properly if comment is not already liked by the user.', async () => {
     const cardProps = {
       id: '1',
       creator: {
@@ -149,7 +160,7 @@ describe('Testing CommentCard Component [User Portal]', () => {
     }
   });
 
-  test('Component renders as expected if user likes the comment.', async () => {
+  it('Component renders as expected if user likes the comment.', async () => {
     const cardProps = {
       id: '1',
       creator: {
@@ -195,7 +206,7 @@ describe('Testing CommentCard Component [User Portal]', () => {
     }
   });
 
-  test('Component renders as expected if user unlikes the comment.', async () => {
+  it('Component renders as expected if user unlikes the comment.', async () => {
     const cardProps = {
       id: '1',
       creator: {
diff --git a/src/components/UserPortal/ContactCard/ContactCard.test.tsx b/src/components/UserPortal/ContactCard/ContactCard.spec.tsx
similarity index 73%
rename from src/components/UserPortal/ContactCard/ContactCard.test.tsx
rename to src/components/UserPortal/ContactCard/ContactCard.spec.tsx
index 05a6a0a530..1d32360301 100644
--- a/src/components/UserPortal/ContactCard/ContactCard.test.tsx
+++ b/src/components/UserPortal/ContactCard/ContactCard.spec.tsx
@@ -10,7 +10,19 @@ import i18nForTest from 'utils/i18nForTest';
 import { StaticMockLink } from 'utils/StaticMockLink';
 import ContactCard from './ContactCard';
 import userEvent from '@testing-library/user-event';
-
+import { vi } from 'vitest';
+
+/**
+ * Unit tests for the ContactCard component.
+ *
+ * These tests ensure the ContactCard component renders and behaves as expected
+ * under different scenarios. They cover various functionalities like:
+ *  - Rendering the contact card with and without a profile image
+ *  - Selecting a contact by clicking on the card
+ *  - Applying a grey background color to the selected contact card (for groups)
+ * Mocked dependencies like StaticMockLink are used
+ * to isolate the component and test its behavior independently.
+ */
 const link = new StaticMockLink([], true);
 
 async function wait(ms = 100): Promise<void> {
@@ -30,12 +42,12 @@ let props = {
   image: '',
   selectedContact: '',
   type: '',
-  setSelectedContact: jest.fn(),
-  setSelectedChatType: jest.fn(),
+  setSelectedContact: vi.fn(),
+  setSelectedChatType: vi.fn(),
 };
 
 describe('Testing ContactCard Component [User Portal]', () => {
-  test('Component should be rendered properly  if person image is undefined', async () => {
+  it('Component should be rendered properly  if person image is undefined', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -51,7 +63,7 @@ describe('Testing ContactCard Component [User Portal]', () => {
     await wait();
   });
 
-  test('Component should be rendered properly if person image is not undefined', async () => {
+  it('Component should be rendered properly if person image is not undefined', async () => {
     props = {
       ...props,
       image: 'personImage',
@@ -72,7 +84,7 @@ describe('Testing ContactCard Component [User Portal]', () => {
     await wait();
   });
 
-  test('Contact gets selectected when component is clicked', async () => {
+  it('Contact gets selectected when component is clicked', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -92,7 +104,7 @@ describe('Testing ContactCard Component [User Portal]', () => {
     await wait();
   });
 
-  test('Component is rendered with background color grey if the contact is selected', async () => {
+  it('Component is rendered with background color grey if the contact is selected', async () => {
     props = {
       ...props,
       selectedContact: '1',
diff --git a/src/components/UserPortal/CreateDirectChat/CreateDirectChat.test.tsx b/src/components/UserPortal/CreateDirectChat/CreateDirectChat.spec.tsx
similarity index 97%
rename from src/components/UserPortal/CreateDirectChat/CreateDirectChat.test.tsx
rename to src/components/UserPortal/CreateDirectChat/CreateDirectChat.spec.tsx
index d8b3466207..5526206708 100644
--- a/src/components/UserPortal/CreateDirectChat/CreateDirectChat.test.tsx
+++ b/src/components/UserPortal/CreateDirectChat/CreateDirectChat.spec.tsx
@@ -20,9 +20,24 @@ import {
 } from 'GraphQl/Mutations/OrganizationMutations';
 import { CHATS_LIST, CHAT_BY_ID } from 'GraphQl/Queries/PlugInQueries';
 import useLocalStorage from 'utils/useLocalstorage';
-
+import { vi } from 'vitest';
 const { setItem } = useLocalStorage();
 
+/**
+ * Unit tests for the Create Direct Chat Modal functionality in the User Portal
+ *
+ * These tests cover the following scenarios:
+ * 1. Opening and closing the create new direct chat modal, ensuring proper UI elements
+ *    like dropdown, search input, and submit button are displayed and functional.
+ * 2. Creating a new direct chat, which includes testing the interaction with the add button,
+ *    submitting the chat, and closing the modal.
+ *
+ * Tests involve interacting with the modal's UI elements, performing actions like
+ * opening the dropdown, searching for users, clicking on the submit button, and closing
+ * the modal. GraphQL mocks are used for testing chat-related queries and mutations,
+ * ensuring that the modal behaves as expected when interacting with the GraphQL API.
+ */
+
 const UserConnectionListMock = [
   {
     request: {
@@ -1380,23 +1395,23 @@ async function wait(ms = 100): Promise<void> {
 }
 
 describe('Testing Create Direct Chat Modal [User Portal]', () => {
-  window.HTMLElement.prototype.scrollIntoView = jest.fn();
+  window.HTMLElement.prototype.scrollIntoView = vi.fn();
 
   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('Open and close create new direct chat modal', async () => {
+  it('Open and close create new direct chat modal', async () => {
     const mock = [
       ...GROUP_CHAT_BY_ID_QUERY_MOCK,
       ...MESSAGE_SENT_TO_CHAT_MOCK,
@@ -1446,7 +1461,7 @@ describe('Testing Create Direct Chat Modal [User Portal]', () => {
     fireEvent.click(closeButton);
   });
 
-  test('create new direct chat', async () => {
+  it('create new direct chat', async () => {
     setItem('userId', '1');
     const mock = [
       ...GROUP_CHAT_BY_ID_QUERY_MOCK,
diff --git a/src/components/UserPortal/CreateGroupChat/CreateGroupChat.test.tsx b/src/components/UserPortal/CreateGroupChat/CreateGroupChat.spec.tsx
similarity index 97%
rename from src/components/UserPortal/CreateGroupChat/CreateGroupChat.test.tsx
rename to src/components/UserPortal/CreateGroupChat/CreateGroupChat.spec.tsx
index 055985d5fb..711bb29a93 100644
--- a/src/components/UserPortal/CreateGroupChat/CreateGroupChat.test.tsx
+++ b/src/components/UserPortal/CreateGroupChat/CreateGroupChat.spec.tsx
@@ -26,6 +26,24 @@ import {
 import { CHATS_LIST, CHAT_BY_ID } from 'GraphQl/Queries/PlugInQueries';
 import useLocalStorage from 'utils/useLocalstorage';
 import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
+
+/**
+ * Unit tests for the Create Group Chat Modal functionality in the User Portal
+ *
+ * These tests cover the following scenarios:
+ * 1. Opening and closing the create new group chat modal, ensuring proper UI elements
+ *    like the dropdown, new group chat button, and close button are displayed and functional.
+ * 2. Creating a new group chat by interacting with the group name input field, organization
+ *    selection, and submission process. It also ensures that the create button is properly
+ *    triggered after filling out the required fields.
+ * 3. Adding and removing users from the group chat, testing the interactions with the add
+ *    and remove buttons, and verifying the submit button and search functionality for user selection.
+ *
+ * GraphQL mocks are used to simulate chat-related queries and mutations. The tests ensure that
+ * the modal behaves correctly in various user interaction scenarios, including handling of form
+ * fields, user management, and modal navigation.
+ */
 
 const { setItem } = useLocalStorage();
 
@@ -2212,23 +2230,23 @@ async function wait(ms = 100): Promise<void> {
 }
 
 describe('Testing Create Group Chat Modal [User Portal]', () => {
-  window.HTMLElement.prototype.scrollIntoView = jest.fn();
+  window.HTMLElement.prototype.scrollIntoView = vi.fn();
 
   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('open and close create new direct chat modal', async () => {
+  it('open and close create new direct chat modal', async () => {
     const mock = [
       ...USER_JOINED_ORG_MOCK,
       ...GROUP_CHAT_BY_ID_QUERY_MOCK,
@@ -2266,7 +2284,7 @@ describe('Testing Create Group Chat Modal [User Portal]', () => {
     fireEvent.click(closeButton);
   });
 
-  test('create new group chat', async () => {
+  it('create new group chat', async () => {
     const mock = [
       ...USER_JOINED_ORG_MOCK,
       ...GROUP_CHAT_BY_ID_QUERY_MOCK,
@@ -2366,7 +2384,7 @@ describe('Testing Create Group Chat Modal [User Portal]', () => {
     // });
   }, 3000);
 
-  test('add and remove user', async () => {
+  it('add and remove user', async () => {
     setItem('userId', '1');
     const mock = [
       ...USER_JOINED_ORG_MOCK,
diff --git a/src/components/UserPortal/DonationCard/DonationCard.test.tsx b/src/components/UserPortal/DonationCard/DonationCard.spec.tsx
similarity index 64%
rename from src/components/UserPortal/DonationCard/DonationCard.test.tsx
rename to src/components/UserPortal/DonationCard/DonationCard.spec.tsx
index cddf62dd6c..f4d8473dd1 100644
--- a/src/components/UserPortal/DonationCard/DonationCard.test.tsx
+++ b/src/components/UserPortal/DonationCard/DonationCard.spec.tsx
@@ -11,6 +11,19 @@ import { StaticMockLink } from 'utils/StaticMockLink';
 import DonationCard from './DonationCard';
 import { type InterfaceDonationCardProps } from 'screens/UserPortal/Donate/Donate';
 
+/**
+ * Unit test for the DonationCard component in the User Portal
+ *
+ * This test ensures that the DonationCard component renders correctly when provided with
+ * the required props. It uses the MockedProvider to mock any GraphQL queries and the
+ * StaticMockLink to simulate the network layer. The component is wrapped with necessary
+ * providers such as BrowserRouter, Redux store, and i18n provider to simulate the environment
+ * in which the component operates.
+ *
+ * The test specifically checks if the component renders without errors, though more tests
+ * can be added in the future to validate interactions and state changes based on user actions.
+ */
+
 const link = new StaticMockLink([], true);
 
 async function wait(ms = 100): Promise<void> {
@@ -31,7 +44,7 @@ const props: InterfaceDonationCardProps = {
 };
 
 describe('Testing ContactCard Component [User Portal]', () => {
-  test('Component should be rendered properly', async () => {
+  it('Component should be rendered properly', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
diff --git a/src/components/UserPortal/EventCard/EventCard.test.tsx b/src/components/UserPortal/EventCard/EventCard.spec.tsx
similarity index 94%
rename from src/components/UserPortal/EventCard/EventCard.test.tsx
rename to src/components/UserPortal/EventCard/EventCard.spec.tsx
index 78aa32abcf..150f676447 100644
--- a/src/components/UserPortal/EventCard/EventCard.test.tsx
+++ b/src/components/UserPortal/EventCard/EventCard.spec.tsx
@@ -11,7 +11,6 @@ import { Provider } from 'react-redux';
 import { store } from 'state/store';
 import { StaticMockLink } from 'utils/StaticMockLink';
 import userEvent from '@testing-library/user-event';
-import { debug } from 'jest-preview';
 import useLocalStorage from 'utils/useLocalstorage';
 
 const { setItem } = useLocalStorage();
@@ -66,7 +65,7 @@ describe('Testing Event Card In User portal', () => {
     ],
   };
 
-  test('The card should be rendered properly, and all the details should be displayed correct', async () => {
+  it('The card should be rendered properly, and all the details should be displayed correct', async () => {
     const { queryByText } = render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -79,7 +78,6 @@ describe('Testing Event Card In User portal', () => {
         </BrowserRouter>
       </MockedProvider>,
     );
-    debug();
     await waitFor(() => expect(queryByText('Test Event')).toBeInTheDocument());
     await waitFor(() =>
       expect(queryByText('This is a test event')).toBeInTheDocument(),
@@ -105,7 +103,7 @@ describe('Testing Event Card In User portal', () => {
     await waitFor(() => expect(queryByText('Register')).toBeInTheDocument());
   });
 
-  test('When the user is already registered', async () => {
+  it('When the user is already registered', async () => {
     setItem('userId', '234');
     const { queryByText } = render(
       <MockedProvider addTypename={false} link={link}>
@@ -124,7 +122,7 @@ describe('Testing Event Card In User portal', () => {
     );
   });
 
-  test('Handle register should work properly', async () => {
+  it('Handle register should work properly', async () => {
     setItem('userId', '456');
     const { queryByText } = render(
       <MockedProvider addTypename={false} link={link}>
@@ -173,7 +171,7 @@ describe('Event card when start and end time are not given', () => {
     ],
   };
 
-  test('Card is rendered correctly', async () => {
+  it('Card is rendered correctly', async () => {
     const { container } = render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
diff --git a/src/components/UserPortal/OrganizationCard/OrganizationCard.test.tsx b/src/components/UserPortal/OrganizationCard/OrganizationCard.spec.tsx
similarity index 77%
rename from src/components/UserPortal/OrganizationCard/OrganizationCard.test.tsx
rename to src/components/UserPortal/OrganizationCard/OrganizationCard.spec.tsx
index 77516ddc7a..1aa8c8462a 100644
--- a/src/components/UserPortal/OrganizationCard/OrganizationCard.test.tsx
+++ b/src/components/UserPortal/OrganizationCard/OrganizationCard.spec.tsx
@@ -18,15 +18,33 @@ import useLocalStorage from 'utils/useLocalstorage';
 import {
   SEND_MEMBERSHIP_REQUEST,
   JOIN_PUBLIC_ORGANIZATION,
+  CANCEL_MEMBERSHIP_REQUEST,
 } from 'GraphQl/Mutations/OrganizationMutations';
 import { toast } from 'react-toastify';
-
+import { vi } from 'vitest';
+
+/**
+ * Unit tests for the OrganizationCard component in the User Portal
+ *
+ * These tests validate the behavior and rendering of the OrganizationCard component.
+ * The tests ensure the component displays properly with various states and that interactions
+ * such as sending membership requests and visiting organizations work as expected.
+ *
+ * 1. **Component should be rendered properly**: Tests if the component renders correctly with the provided props.
+ * 2. **Component should render properly with an image**: Verifies the component's behavior when an organization image is available.
+ * 3. **Visit organization**: Simulates a click on the "manage" button and verifies that the user is redirected to the correct organization page.
+ * 4. **Send membership request**: Tests if the membership request is successfully sent and verifies the success toast message.
+ * 5. **Send membership request to a public organization**: Validates sending a membership request to a public organization and verifies multiple success toast messages.
+ * 6. **Withdraw membership request**: Simulates withdrawing a membership request and verifies that the button works as expected.
+ *
+ * Mocked GraphQL queries and mutations are used to simulate the backend behavior for testing.
+ */
 const { getItem } = useLocalStorage();
 
-jest.mock('react-toastify', () => ({
+vi.mock('react-toastify', () => ({
   toast: {
-    success: jest.fn(),
-    error: jest.fn(),
+    success: vi.fn(),
+    error: vi.fn(),
   },
 }));
 
@@ -146,6 +164,21 @@ const MOCKS = [
       },
     },
   },
+  {
+    request: {
+      query: CANCEL_MEMBERSHIP_REQUEST,
+      variables: {
+        membershipRequestId: '56gheqyr7deyfuiwfewifruy8',
+      },
+    },
+    result: {
+      data: {
+        cancelMembershipRequest: {
+          _id: '56gheqyr7deyfuiwfewifruy8',
+        },
+      },
+    },
+  },
 ];
 
 const link = new StaticMockLink(MOCKS, true);
@@ -189,7 +222,7 @@ let props = {
 };
 
 describe('Testing OrganizationCard Component [User Portal]', () => {
-  test('Component should be rendered properly', async () => {
+  it('Component should be rendered properly', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -205,7 +238,7 @@ describe('Testing OrganizationCard Component [User Portal]', () => {
     await wait();
   });
 
-  test('Component should be rendered properly if organization Image is not undefined', async () => {
+  it('Component should be rendered properly if organization Image is not undefined', async () => {
     props = {
       ...props,
       image: 'organizationImage',
@@ -226,7 +259,7 @@ describe('Testing OrganizationCard Component [User Portal]', () => {
     await wait();
   });
 
-  test('Visit organization', async () => {
+  it('Visit organization', async () => {
     const cardProps = {
       ...props,
       id: '3',
@@ -258,7 +291,7 @@ describe('Testing OrganizationCard Component [User Portal]', () => {
     expect(window.location.pathname).toBe(`/user/organization/${cardProps.id}`);
   });
 
-  test('Send membership request', async () => {
+  it('Send membership request', async () => {
     props = {
       ...props,
       image: 'organizationImage',
@@ -286,7 +319,7 @@ describe('Testing OrganizationCard Component [User Portal]', () => {
     expect(toast.success).toHaveBeenCalledWith('MembershipRequestSent');
   });
 
-  test('send membership request to public org', async () => {
+  it('send membership request to public org', async () => {
     const cardProps = {
       ...props,
       id: '2',
@@ -316,13 +349,21 @@ describe('Testing OrganizationCard Component [User Portal]', () => {
     expect(toast.success).toHaveBeenCalledTimes(2);
   });
 
-  test('withdraw membership request', async () => {
+  it('withdraw membership request', async () => {
     const cardProps = {
       ...props,
       id: '3',
       image: 'organizationImage',
       userRegistrationRequired: true,
       membershipRequestStatus: 'pending',
+      membershipRequests: [
+        {
+          _id: '56gheqyr7deyfuiwfewifruy8',
+          user: {
+            _id: getItem('userId'),
+          },
+        },
+      ],
     };
 
     render(
diff --git a/src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.test.tsx b/src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.spec.tsx
similarity index 81%
rename from src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.test.tsx
rename to src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.spec.tsx
index 038ff626df..7f9e8e52bb 100644
--- a/src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.test.tsx
+++ b/src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.spec.tsx
@@ -1,6 +1,5 @@
 import React, { act } from 'react';
 import { MockedProvider } from '@apollo/react-testing';
-import 'jest-localstorage-mock';
 import { render, screen } from '@testing-library/react';
 import { I18nextProvider } from 'react-i18next';
 import { Provider } from 'react-redux';
@@ -17,6 +16,28 @@ import { PLUGIN_SUBSCRIPTION } from 'GraphQl/Mutations/mutations';
 
 import { createMemoryHistory } from 'history';
 import useLocalStorage from 'utils/useLocalstorage';
+import { vi } from 'vitest';
+
+/**
+ * Unit tests for the OrganizationNavbar component.
+ *
+ * These tests validate the rendering and behavior of the component, ensuring it renders correctly,
+ * handles user interactions, and manages language and plugin updates.
+ *
+ * 1. **Component rendering**: Verifies correct rendering with provided props and organization details.
+ * 2. **Navigation on plugin click**: Simulates navigation when a plugin link is clicked.
+ * 3. **Language switch to English**: Tests if the language changes to English.
+ * 4. **Language switch to French**: Tests if the language changes to French.
+ * 5. **Language switch to Hindi**: Tests if the language changes to Hindi.
+ * 6. **Language switch to Spanish**: Tests if the language changes to Spanish.
+ * 7. **Language switch to Chinese**: Tests if the language changes to Chinese.
+ * 8. **Rendering plugins from localStorage**: Verifies correct rendering of plugins from localStorage.
+ * 9. **Plugin removal on uninstallation**: Ensures plugins are removed when uninstalled for the organization.
+ * 10. **Rendering plugins when not uninstalled**: Ensures plugins render if not uninstalled.
+ * 11. **No changes for unmatched plugin**: Ensures no changes when an unrecognized plugin update occurs.
+ *
+ * Mocked GraphQL queries and subscriptions simulate backend behavior.
+ */
 
 const { setItem, removeItem } = useLocalStorage();
 
@@ -167,23 +188,26 @@ const navbarProps = {
   currentPage: 'home',
 };
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useParams: () => ({ orgId: organizationId }),
-}));
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return {
+    ...actual,
+    useParams: () => ({ orgId: organizationId }),
+  };
+});
 
 describe('Testing OrganizationNavbar Component [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(),
     })),
   });
 
@@ -193,7 +217,7 @@ describe('Testing OrganizationNavbar Component [User Portal]', () => {
     });
   });
 
-  test('Component should be rendered properly', async () => {
+  it('Component should be rendered properly', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -217,7 +241,7 @@ describe('Testing OrganizationNavbar Component [User Portal]', () => {
     // expect(screen.getByText('Chat')).toBeInTheDocument();
   });
 
-  test('should navigate correctly on clicking a plugin', async () => {
+  it('should navigate correctly on clicking a plugin', async () => {
     const history = createMemoryHistory();
     render(
       <MockedProvider addTypename={false} link={link}>
@@ -240,7 +264,7 @@ describe('Testing OrganizationNavbar Component [User Portal]', () => {
     expect(history.location.pathname).toBe(`/user/people/${organizationId}`);
   });
 
-  test('The language is switched to English', async () => {
+  it('The language is switched to English', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -270,7 +294,7 @@ describe('Testing OrganizationNavbar Component [User Portal]', () => {
     // expect(screen.getByText('Chat')).toBeInTheDocument();
   });
 
-  test('The language is switched to fr', async () => {
+  it('The language is switched to fr', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -294,7 +318,7 @@ describe('Testing OrganizationNavbar Component [User Portal]', () => {
     expect(cookies.get('i18next')).toBe('fr');
   });
 
-  test('The language is switched to hi', async () => {
+  it('The language is switched to hi', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -318,7 +342,7 @@ describe('Testing OrganizationNavbar Component [User Portal]', () => {
     expect(cookies.get('i18next')).toBe('hi');
   });
 
-  test('The language is switched to sp', async () => {
+  it('The language is switched to sp', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -342,7 +366,7 @@ describe('Testing OrganizationNavbar Component [User Portal]', () => {
     expect(cookies.get('i18next')).toBe('sp');
   });
 
-  test('The language is switched to zh', async () => {
+  it('The language is switched to zh', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -366,7 +390,7 @@ describe('Testing OrganizationNavbar Component [User Portal]', () => {
     expect(cookies.get('i18next')).toBe('zh');
   });
 
-  test('Component should be rendered properly if plugins are present in localStorage', async () => {
+  it('Component should be rendered properly if plugins are present in localStorage', async () => {
     setItem('talawaPlugins', JSON.stringify(testPlugins));
 
     render(
@@ -390,7 +414,7 @@ describe('Testing OrganizationNavbar Component [User Portal]', () => {
     removeItem('talawaPlugins');
   });
 
-  test('should remove plugin if uninstalledOrgs contains organizationId', async () => {
+  it('should remove plugin if uninstalledOrgs contains organizationId', async () => {
     setItem('talawaPlugins', JSON.stringify(testPlugins));
 
     render(
@@ -412,7 +436,7 @@ describe('Testing OrganizationNavbar Component [User Portal]', () => {
     });
   });
 
-  test('should render plugin if uninstalledOrgs does not contain organizationId', async () => {
+  it('should render plugin if uninstalledOrgs does not contain organizationId', async () => {
     setItem('talawaPlugins', JSON.stringify(testPlugins));
 
     render(
@@ -434,7 +458,7 @@ describe('Testing OrganizationNavbar Component [User Portal]', () => {
     });
   });
 
-  test('should do nothing if pluginName is not found in the rendered plugins', async () => {
+  it('should do nothing if pluginName is not found in the rendered plugins', async () => {
     render(
       <MockedProvider addTypename={false} link={link4}>
         <BrowserRouter>
diff --git a/src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.test.tsx b/src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.spec.tsx
similarity index 74%
rename from src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.test.tsx
rename to src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.spec.tsx
index cddac285fd..2559eaae14 100644
--- a/src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.test.tsx
+++ b/src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.spec.tsx
@@ -13,6 +13,20 @@ import { store } from 'state/store';
 import i18nForTest from 'utils/i18nForTest';
 import { StaticMockLink } from 'utils/StaticMockLink';
 import OrganizationSidebar from './OrganizationSidebar';
+import { vi } from 'vitest';
+
+/**
+ * Unit tests for the OrganizationSidebar component in the User Portal.
+ *
+ * These tests validate the rendering and behavior of the OrganizationSidebar component,
+ * ensuring that it displays correct content based on the availability of members and events.
+ *
+ * 1. **Component renders properly when members and events lists are empty**: Verifies the correct display of "No Members to show" and "No Events to show" when both lists are empty.
+ * 2. **Component renders properly when events list is not empty**: Tests that the events section is rendered correctly when events are available, and "No Events to show" is not displayed.
+ * 3. **Component renders properly when members list is not empty**: Verifies the correct display of members when available, ensuring "No Members to show" is not displayed.
+ *
+ * Mocked GraphQL queries simulate backend responses for members and events lists.
+ */
 
 const MOCKS = [
   {
@@ -94,13 +108,17 @@ async function wait(ms = 100): Promise<void> {
   });
 }
 let mockId = '';
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useParams: () => ({ orgId: mockId }),
-}));
+
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return {
+    ...actual,
+    useParams: () => ({ orgId: mockId }),
+  };
+});
 
 describe('Testing OrganizationSidebar Component [User Portal]', () => {
-  test('Component should be rendered properly when members and events list is empty', async () => {
+  it('Component should be rendered properly when members and events list is empty', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -119,7 +137,7 @@ describe('Testing OrganizationSidebar Component [User Portal]', () => {
     expect(screen.queryByText('No Events to show')).toBeInTheDocument();
   });
 
-  test('Component should be rendered properly when events list is not empty', async () => {
+  it('Component should be rendered properly when events list is not empty', async () => {
     mockId = 'events';
     render(
       <MockedProvider addTypename={false} link={link}>
@@ -139,7 +157,7 @@ describe('Testing OrganizationSidebar Component [User Portal]', () => {
     expect(screen.queryByText('Event')).toBeInTheDocument();
   });
 
-  test('Component should be rendered properly when members list is not empty', async () => {
+  it('Component should be rendered properly when members list is not empty', async () => {
     mockId = 'members';
     render(
       <MockedProvider addTypename={false} link={link}>
diff --git a/src/components/UserPortal/PeopleCard/PeopleCard.test.tsx b/src/components/UserPortal/PeopleCard/PeopleCard.spec.tsx
similarity index 65%
rename from src/components/UserPortal/PeopleCard/PeopleCard.test.tsx
rename to src/components/UserPortal/PeopleCard/PeopleCard.spec.tsx
index fd5d6c7f93..c725a8d45a 100644
--- a/src/components/UserPortal/PeopleCard/PeopleCard.test.tsx
+++ b/src/components/UserPortal/PeopleCard/PeopleCard.spec.tsx
@@ -10,6 +10,18 @@ import i18nForTest from 'utils/i18nForTest';
 import { StaticMockLink } from 'utils/StaticMockLink';
 import PeopleCard from './PeopleCard';
 
+/**
+ * Unit tests for the PeopleCard component in the User Portal.
+ *
+ * These tests ensure that the PeopleCard component renders correctly with and without an image,
+ * validating that all information (name, role, email, etc.) is displayed as expected.
+ *
+ * 1. **Component renders properly**: Verifies that the component renders correctly with the given props (name, email, role, etc.).
+ * 2. **Component renders properly if the person image is provided**: Ensures the component correctly displays the image when a valid image URL is passed in the props.
+ *
+ * Mocked GraphQL queries are used to simulate backend behavior, though no queries are required for these tests.
+ */
+
 const link = new StaticMockLink([], true);
 
 async function wait(ms = 100): Promise<void> {
@@ -30,7 +42,7 @@ let props = {
 };
 
 describe('Testing PeopleCard Component [User Portal]', () => {
-  test('Component should be rendered properly', async () => {
+  it('Component should be rendered properly', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -46,7 +58,7 @@ describe('Testing PeopleCard Component [User Portal]', () => {
     await wait();
   });
 
-  test('Component should be rendered properly if person image is not undefined', async () => {
+  it('Component should be rendered properly if person image is not undefined', async () => {
     props = {
       ...props,
       image: 'personImage',
diff --git a/src/components/UserPortal/PostCard/PostCard.test.tsx b/src/components/UserPortal/PostCard/PostCard.spec.tsx
similarity index 90%
rename from src/components/UserPortal/PostCard/PostCard.test.tsx
rename to src/components/UserPortal/PostCard/PostCard.spec.tsx
index 1b7708b384..fe3fcf3dc1 100644
--- a/src/components/UserPortal/PostCard/PostCard.test.tsx
+++ b/src/components/UserPortal/PostCard/PostCard.spec.tsx
@@ -21,14 +21,33 @@ import {
   UPDATE_POST_MUTATION,
 } from 'GraphQl/Mutations/mutations';
 import useLocalStorage from 'utils/useLocalstorage';
+import { vi } from 'vitest';
+
+/**
+ * Unit tests for the PostCard component in the User Portal.
+ *
+ * These tests ensure the PostCard component behaves as expected:
+ *
+ * 1. **Component rendering**: Verifies correct rendering with props like title, text, and creator info.
+ * 2. **Dropdown functionality**: Tests the dropdown for editing and deleting posts.
+ * 3. **Edit post**: Ensures the post can be edited with a success message.
+ * 4. **Delete post**: Verifies post deletion works with a success message.
+ * 5. **Like/unlike post**: Ensures the UI updates when a user likes or unlikes a post.
+ * 6. **Post image**: Verifies post image rendering.
+ * 7. **Create comment**: Ensures a comment is created successfully.
+ * 8. **Like/unlike comment**: Tests liking/unliking comments.
+ * 9. **Comment modal**: Verifies the comment modal appears when clicked.
+ *
+ * Mocked GraphQL data is used for simulating backend behavior.
+ */
 
 const { setItem, getItem } = useLocalStorage();
 
-jest.mock('react-toastify', () => ({
+vi.mock('react-toastify', () => ({
   toast: {
-    error: jest.fn(),
-    info: jest.fn(),
-    success: jest.fn(),
+    error: vi.fn(),
+    info: vi.fn(),
+    success: vi.fn(),
   },
 }));
 
@@ -164,7 +183,7 @@ async function wait(ms = 100): Promise<void> {
 const link = new StaticMockLink(MOCKS, true);
 
 describe('Testing PostCard Component [User Portal]', () => {
-  test('Component should be rendered properly', async () => {
+  it('Component should be rendered properly', async () => {
     const cardProps = {
       id: 'postId',
       userImage: 'image.png',
@@ -218,7 +237,7 @@ describe('Testing PostCard Component [User Portal]', () => {
           id: '2',
         },
       ],
-      fetchPosts: jest.fn(),
+      fetchPosts: vi.fn(),
     };
 
     render(
@@ -236,7 +255,7 @@ describe('Testing PostCard Component [User Portal]', () => {
     await wait();
   });
 
-  test('Dropdown component should be rendered properly', async () => {
+  it('Dropdown component should be rendered properly', async () => {
     setItem('userId', '2');
 
     const cardProps = {
@@ -263,7 +282,7 @@ describe('Testing PostCard Component [User Portal]', () => {
           id: '2',
         },
       ],
-      fetchPosts: jest.fn(),
+      fetchPosts: vi.fn(),
     };
 
     render(
@@ -285,7 +304,7 @@ describe('Testing PostCard Component [User Portal]', () => {
     expect(screen.getByText('Delete')).toBeInTheDocument();
   });
 
-  test('Edit post should work properly', async () => {
+  it('Edit post should work properly', async () => {
     setItem('userId', '2');
 
     const cardProps = {
@@ -312,7 +331,7 @@ describe('Testing PostCard Component [User Portal]', () => {
           id: '2',
         },
       ],
-      fetchPosts: jest.fn(),
+      fetchPosts: vi.fn(),
     };
 
     render(
@@ -341,7 +360,7 @@ describe('Testing PostCard Component [User Portal]', () => {
     expect(toast.success).toHaveBeenCalledWith('Post updated Successfully');
   });
 
-  test('Delete post should work properly', async () => {
+  it('Delete post should work properly', async () => {
     setItem('userId', '2');
 
     const cardProps = {
@@ -368,7 +387,7 @@ describe('Testing PostCard Component [User Portal]', () => {
           id: '2',
         },
       ],
-      fetchPosts: jest.fn(),
+      fetchPosts: vi.fn(),
     };
 
     render(
@@ -393,7 +412,7 @@ describe('Testing PostCard Component [User Portal]', () => {
     );
   });
 
-  test('Component should be rendered properly if user has liked the post', async () => {
+  it('Component should be rendered properly if user has liked the post', async () => {
     const beforeUserId = getItem('userId');
     setItem('userId', '2');
 
@@ -421,7 +440,7 @@ describe('Testing PostCard Component [User Portal]', () => {
           id: '2',
         },
       ],
-      fetchPosts: jest.fn(),
+      fetchPosts: vi.fn(),
     };
 
     render(
@@ -443,7 +462,7 @@ describe('Testing PostCard Component [User Portal]', () => {
     }
   });
 
-  test('Component should be rendered properly if user unlikes a post', async () => {
+  it('Component should be rendered properly if user unlikes a post', async () => {
     const beforeUserId = getItem('userId');
     setItem('userId', '2');
 
@@ -471,7 +490,7 @@ describe('Testing PostCard Component [User Portal]', () => {
           id: '2',
         },
       ],
-      fetchPosts: jest.fn(),
+      fetchPosts: vi.fn(),
     };
 
     render(
@@ -496,7 +515,7 @@ describe('Testing PostCard Component [User Portal]', () => {
     }
   });
 
-  test('Component should be rendered properly if user likes a post', async () => {
+  it('Component should be rendered properly if user likes a post', async () => {
     const beforeUserId = getItem('userId');
     setItem('userId', '2');
 
@@ -524,7 +543,7 @@ describe('Testing PostCard Component [User Portal]', () => {
           id: '1',
         },
       ],
-      fetchPosts: jest.fn(),
+      fetchPosts: vi.fn(),
     };
 
     render(
@@ -549,7 +568,7 @@ describe('Testing PostCard Component [User Portal]', () => {
     }
   });
 
-  test('Component should be rendered properly if post image is defined', async () => {
+  it('Component should be rendered properly if post image is defined', async () => {
     const cardProps = {
       id: '',
       userImage: 'image.png',
@@ -574,7 +593,7 @@ describe('Testing PostCard Component [User Portal]', () => {
           id: '1',
         },
       ],
-      fetchPosts: jest.fn(),
+      fetchPosts: vi.fn(),
     };
 
     render(
@@ -592,7 +611,7 @@ describe('Testing PostCard Component [User Portal]', () => {
     await wait();
   });
 
-  test('Comment is created successfully after create comment button is clicked.', async () => {
+  it('Comment is created successfully after create comment button is clicked.', async () => {
     const cardProps = {
       id: '1',
       userImage: 'image.png',
@@ -617,7 +636,7 @@ describe('Testing PostCard Component [User Portal]', () => {
           id: '1',
         },
       ],
-      fetchPosts: jest.fn(),
+      fetchPosts: vi.fn(),
     };
 
     render(
@@ -701,7 +720,7 @@ describe('Testing PostCard Component [User Portal]', () => {
           id: '1',
         },
       ],
-      fetchPosts: jest.fn(),
+      fetchPosts: vi.fn(),
     };
     const beforeUserId = getItem('userId');
     setItem('userId', '2');
@@ -788,7 +807,7 @@ describe('Testing PostCard Component [User Portal]', () => {
           id: '1',
         },
       ],
-      fetchPosts: jest.fn(),
+      fetchPosts: vi.fn(),
     };
     const beforeUserId = getItem('userId');
     setItem('userId', '1');
@@ -815,7 +834,7 @@ describe('Testing PostCard Component [User Portal]', () => {
       setItem('userId', beforeUserId);
     }
   });
-  test('Comment modal pops when show comments button is clicked.', async () => {
+  it('Comment modal pops when show comments button is clicked.', async () => {
     const cardProps = {
       id: '',
       userImage: 'image.png',
@@ -840,7 +859,7 @@ describe('Testing PostCard Component [User Portal]', () => {
           id: '1',
         },
       ],
-      fetchPosts: jest.fn(),
+      fetchPosts: vi.fn(),
     };
 
     render(
diff --git a/src/components/UserPortal/PromotedPost/PromotedPost.test.tsx b/src/components/UserPortal/PromotedPost/PromotedPost.spec.tsx
similarity index 77%
rename from src/components/UserPortal/PromotedPost/PromotedPost.test.tsx
rename to src/components/UserPortal/PromotedPost/PromotedPost.spec.tsx
index 6ec8ec5de7..dc8bb14e2d 100644
--- a/src/components/UserPortal/PromotedPost/PromotedPost.test.tsx
+++ b/src/components/UserPortal/PromotedPost/PromotedPost.spec.tsx
@@ -10,6 +10,18 @@ import i18nForTest from 'utils/i18nForTest';
 import { StaticMockLink } from 'utils/StaticMockLink';
 import PromotedPost from './PromotedPost';
 
+/**
+ * Unit tests for the PromotedPost component.
+ *
+ * 1. **Render check**: Verifies the component renders correctly with props like title and image.
+ * 2. **Image prop check**: Tests if the component renders correctly with an image.
+ * 3. **Icon display**: Ensures the icon (StarPurple500Icon) is displayed.
+ * 4. **Text display**: Checks that the post title is displayed correctly.
+ * 5. **Image display**: Verifies the correct image is displayed when the image prop is set.
+ *
+ * GraphQL data is mocked for backend simulation.
+ */
+
 const link = new StaticMockLink([], true);
 
 async function wait(ms = 100): Promise<void> {
@@ -27,7 +39,7 @@ let props = {
 };
 
 describe('Testing PromotedPost Test', () => {
-  test('Component should be rendered properly', async () => {
+  it('Component should be rendered properly', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -43,7 +55,7 @@ describe('Testing PromotedPost Test', () => {
     await wait();
   });
 
-  test('Component should be rendered properly if prop image is not undefined', async () => {
+  it('Component should be rendered properly if prop image is not undefined', async () => {
     props = {
       ...props,
       image: 'promotedPostImage',
@@ -65,7 +77,7 @@ describe('Testing PromotedPost Test', () => {
   });
 });
 
-test('Component should display the icon correctly', async () => {
+it('Component should display the icon correctly', async () => {
   const { queryByTestId } = render(
     <MockedProvider addTypename={false} link={link}>
       <BrowserRouter>
@@ -84,7 +96,7 @@ test('Component should display the icon correctly', async () => {
   });
 });
 
-test('Component should display the text correctly', async () => {
+it('Component should display the text correctly', async () => {
   const { queryAllByText } = render(
     <MockedProvider addTypename={false} link={link}>
       <BrowserRouter>
@@ -103,7 +115,7 @@ test('Component should display the text correctly', async () => {
   });
 });
 
-test('Component should display the image correctly', async () => {
+it('Component should display the image correctly', async () => {
   props = {
     ...props,
     image: 'promotedPostImage',
diff --git a/src/components/UserPortal/Register/Register.test.tsx b/src/components/UserPortal/Register/Register.spec.tsx
similarity index 80%
rename from src/components/UserPortal/Register/Register.test.tsx
rename to src/components/UserPortal/Register/Register.spec.tsx
index 1883d60da3..7ca65f8f0d 100644
--- a/src/components/UserPortal/Register/Register.test.tsx
+++ b/src/components/UserPortal/Register/Register.spec.tsx
@@ -12,6 +12,22 @@ import i18nForTest from 'utils/i18nForTest';
 import { StaticMockLink } from 'utils/StaticMockLink';
 import Register from './Register';
 import { toast } from 'react-toastify';
+import { vi } from 'vitest';
+
+/**
+ * Unit tests for the Register component.
+ *
+ * 1. **Render test**: Verifies proper rendering of the Register component.
+ * 2. **Mode switch to Login**: Ensures that clicking the "setLoginBtn" changes mode to 'login'.
+ * 3. **Empty email validation**: Checks if toast.error is triggered for empty email.
+ * 4. **Empty password validation**: Ensures toast.error is called for empty password.
+ * 5. **Empty first name validation**: Ensures toast.error is called if first name is missing.
+ * 6. **Empty last name validation**: Verifies toast.error is triggered if last name is missing.
+ * 7. **Password mismatch validation**: Verifies toast.error is shown if confirm password doesn't match.
+ * 8. **Successful registration**: Confirms that toast.success is called when valid credentials are entered.
+ *
+ * GraphQL mock data is used for testing user registration functionality.
+ */
 
 const MOCKS = [
   {
@@ -56,22 +72,22 @@ async function wait(ms = 100): Promise<void> {
   });
 }
 
-jest.mock('react-toastify', () => ({
+vi.mock('react-toastify', () => ({
   toast: {
-    success: jest.fn(),
-    warn: jest.fn(),
-    error: jest.fn(),
+    success: vi.fn(),
+    warn: vi.fn(),
+    error: vi.fn(),
   },
 }));
 
-const setCurrentMode: React.Dispatch<SetStateAction<string>> = jest.fn();
+const setCurrentMode: React.Dispatch<SetStateAction<string>> = vi.fn();
 
 const props = {
   setCurrentMode,
 };
 
 describe('Testing Register Component [User Portal]', () => {
-  test('Component should be rendered properly', async () => {
+  it('Component should be rendered properly', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -87,7 +103,7 @@ describe('Testing Register Component [User Portal]', () => {
     await wait();
   });
 
-  test('Expect the mode to be changed to Login', async () => {
+  it('Expect the mode to be changed to Login', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -107,7 +123,7 @@ describe('Testing Register Component [User Portal]', () => {
     expect(setCurrentMode).toHaveBeenCalledWith('login');
   });
 
-  test('Expect toast.error to be called if email input is empty', async () => {
+  it('Expect toast.error to be called if email input is empty', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -127,7 +143,7 @@ describe('Testing Register Component [User Portal]', () => {
     expect(toast.error).toHaveBeenCalledWith('Please enter valid details.');
   });
 
-  test('Expect toast.error to be called if password input is empty', async () => {
+  it('Expect toast.error to be called if password input is empty', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -148,7 +164,7 @@ describe('Testing Register Component [User Portal]', () => {
     expect(toast.error).toHaveBeenCalledWith('Please enter valid details.');
   });
 
-  test('Expect toast.error to be called if first name input is empty', async () => {
+  it('Expect toast.error to be called if first name input is empty', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -172,7 +188,7 @@ describe('Testing Register Component [User Portal]', () => {
     expect(toast.error).toHaveBeenCalledWith('Please enter valid details.');
   });
 
-  test('Expect toast.error to be called if last name input is empty', async () => {
+  it('Expect toast.error to be called if last name input is empty', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -228,7 +244,7 @@ describe('Testing Register Component [User Portal]', () => {
     );
   });
 
-  test('Expect toast.success to be called if valid credentials are entered.', async () => {
+  it('Expect toast.success to be called if valid credentials are entered.', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
diff --git a/src/components/UserPortal/SecuredRouteForUser/SecuredRouteForUser.test.tsx b/src/components/UserPortal/SecuredRouteForUser/SecuredRouteForUser.spec.tsx
similarity index 77%
rename from src/components/UserPortal/SecuredRouteForUser/SecuredRouteForUser.test.tsx
rename to src/components/UserPortal/SecuredRouteForUser/SecuredRouteForUser.spec.tsx
index 93b71b14f1..98459b930a 100644
--- a/src/components/UserPortal/SecuredRouteForUser/SecuredRouteForUser.test.tsx
+++ b/src/components/UserPortal/SecuredRouteForUser/SecuredRouteForUser.spec.tsx
@@ -4,10 +4,20 @@ import { render, screen, waitFor } from '@testing-library/react';
 import SecuredRouteForUser from './SecuredRouteForUser';
 import useLocalStorage from 'utils/useLocalstorage';
 
+/**
+ * Unit tests for SecuredRouteForUser component:
+ *
+ * 1. **Logged-in user**: Verifies that the route renders when 'IsLoggedIn' is set to 'TRUE'.
+ * 2. **Not logged-in user**: Ensures redirection to the login page when 'IsLoggedIn' is 'FALSE'.
+ * 3. **Logged-in user with admin access**: Checks that the route renders for a logged-in user with 'AdminFor' set (i.e., admin of an organization).
+ *
+ * LocalStorage values like 'IsLoggedIn' and 'AdminFor' are set to simulate different user states.
+ */
+
 const { setItem } = useLocalStorage();
 
 describe('SecuredRouteForUser', () => {
-  test('renders the route when the user is logged in', () => {
+  it('renders the route when the user is logged in', () => {
     // Set the 'IsLoggedIn' value to 'TRUE' in localStorage to simulate a logged-in user and do not set 'AdminFor' so that it remains undefined.
     setItem('IsLoggedIn', 'TRUE');
 
@@ -31,7 +41,7 @@ describe('SecuredRouteForUser', () => {
     expect(screen.getByTestId('organizations-content')).toBeInTheDocument();
   });
 
-  test('redirects to /user when the user is not logged in', async () => {
+  it('redirects to /user when the user is not logged in', async () => {
     // Set the user as not logged in in local storage
     setItem('IsLoggedIn', 'FALSE');
 
@@ -58,7 +68,7 @@ describe('SecuredRouteForUser', () => {
     });
   });
 
-  test('renders the route when the user is logged in and user is ADMIN', () => {
+  it('renders the route when the user is logged in and user is ADMIN', () => {
     // Set the 'IsLoggedIn' value to 'TRUE' in localStorage to simulate a logged-in user and set 'AdminFor' to simulate ADMIN of some Organization.
     setItem('IsLoggedIn', 'TRUE');
     setItem('AdminFor', [
diff --git a/src/components/UserPortal/StartPostModal/StartPostModal.test.tsx b/src/components/UserPortal/StartPostModal/StartPostModal.spec.tsx
similarity index 71%
rename from src/components/UserPortal/StartPostModal/StartPostModal.test.tsx
rename to src/components/UserPortal/StartPostModal/StartPostModal.spec.tsx
index c34f3a2e9e..2d9024bcd3 100644
--- a/src/components/UserPortal/StartPostModal/StartPostModal.test.tsx
+++ b/src/components/UserPortal/StartPostModal/StartPostModal.spec.tsx
@@ -12,12 +12,26 @@ import { store } from 'state/store';
 import { StaticMockLink } from 'utils/StaticMockLink';
 import i18nForTest from 'utils/i18nForTest';
 import StartPostModal from './StartPostModal';
-
-jest.mock('react-toastify', () => ({
+import { vi } from 'vitest';
+
+/**
+ * Unit tests for StartPostModal component:
+ *
+ * 1. **Rendering StartPostModal**: Verifies that the modal renders correctly when the `show` prop is set to `true`.
+ * 2. **Invalid post submission**: Ensures that when the post body is empty, an error toast is shown with the appropriate message ("Can't create a post with an empty body").
+ * 3. **Valid post submission**: Checks that a post with valid text triggers an info toast, and simulates the creation of a post with the message "Processing your post. Please wait."
+ * 4. **User image null**: Confirms that when the user image is null, a default image is displayed instead.
+ * 5. **User image not null**: Verifies that when the user image is provided, the correct user image is shown.
+ *
+ * Mocked GraphQL mutation (`CREATE_POST_MUTATION`) and toast notifications are used to simulate the post creation process.
+ * The `renderStartPostModal` function is used to render the modal with different user states and input values.
+ */
+
+vi.mock('react-toastify', () => ({
   toast: {
-    error: jest.fn(),
-    info: jest.fn(),
-    success: jest.fn(),
+    error: vi.fn(),
+    info: vi.fn(),
+    success: vi.fn(),
   },
 }));
 
@@ -62,8 +76,8 @@ const renderStartPostModal = (
 ): RenderResult => {
   const cardProps = {
     show: visibility,
-    onHide: jest.fn(),
-    fetchPosts: jest.fn(),
+    onHide: vi.fn(),
+    fetchPosts: vi.fn(),
     userData: {
       user: {
         __typename: 'User',
@@ -113,18 +127,18 @@ const renderStartPostModal = (
 
 describe('Testing StartPostModal Component: User Portal', () => {
   afterAll(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
-  test('Check if StartPostModal renders properly', async () => {
+  it('Check if StartPostModal renders properly', async () => {
     renderStartPostModal(true, null);
 
     const modal = await screen.findByTestId('startPostModal');
     expect(modal).toBeInTheDocument();
   });
 
-  test('On invalid post submission with empty body Error toast should be shown', async () => {
-    const toastSpy = jest.spyOn(toast, 'error');
+  it('On invalid post submission with empty body Error toast should be shown', async () => {
+    const toastSpy = vi.spyOn(toast, 'error');
     renderStartPostModal(true, null);
     await wait();
 
@@ -134,7 +148,7 @@ describe('Testing StartPostModal Component: User Portal', () => {
     );
   });
 
-  test('On valid post submission Info toast should be shown', async () => {
+  it('On valid post submission Info toast should be shown', async () => {
     renderStartPostModal(true, null);
     await wait();
 
@@ -154,7 +168,7 @@ describe('Testing StartPostModal Component: User Portal', () => {
     // );
   });
 
-  test('If user image is null then default image should be shown', async () => {
+  it('If user image is null then default image should be shown', async () => {
     renderStartPostModal(true, null);
     await wait();
 
@@ -165,7 +179,7 @@ describe('Testing StartPostModal Component: User Portal', () => {
     );
   });
 
-  test('If user image is not null then user image should be shown', async () => {
+  it('If user image is not null then user image should be shown', async () => {
     renderStartPostModal(true, 'image.png');
     await wait();
 
diff --git a/src/components/UserPortal/UserNavbar/UserNavbar.test.tsx b/src/components/UserPortal/UserNavbar/UserNavbar.spec.tsx
similarity index 74%
rename from src/components/UserPortal/UserNavbar/UserNavbar.test.tsx
rename to src/components/UserPortal/UserNavbar/UserNavbar.spec.tsx
index 8c3447f25a..6173871dbb 100644
--- a/src/components/UserPortal/UserNavbar/UserNavbar.test.tsx
+++ b/src/components/UserPortal/UserNavbar/UserNavbar.spec.tsx
@@ -13,6 +13,22 @@ import UserNavbar from './UserNavbar';
 import userEvent from '@testing-library/user-event';
 import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
 
+/**
+ * Unit tests for UserNavbar component [User Portal]:
+ *
+ * 1. **Rendering UserNavbar**: Verifies that the `UserNavbar` component renders correctly.
+ * 2. **Switching language to English**: Ensures that clicking the language dropdown and selecting 'English' updates the language cookie to 'en'.
+ * 3. **Switching language to French**: Verifies that selecting 'French' updates the language cookie to 'fr'.
+ * 4. **Switching language to Hindi**: Confirms that choosing 'Hindi' updates the language cookie to 'hi'.
+ * 5. **Switching language to Spanish**: Ensures that selecting 'Spanish' sets the language cookie to 'sp'.
+ * 6. **Switching language to Chinese**: Verifies that selecting 'Chinese' changes the language cookie to 'zh'.
+ * 7. **Interacting with the dropdown menu**: Ensures the user can open the dropdown and see available options like 'Settings' and 'Logout'.
+ * 8. **Navigating to the 'Settings' page**: Confirms that clicking 'Settings' in the dropdown correctly navigates the user to the "/user/settings" page.
+ *
+ * The tests simulate interactions with the language dropdown and the user dropdown menu to ensure proper functionality of language switching and navigation.
+ * Mocked GraphQL mutation (`REVOKE_REFRESH_TOKEN`) and mock store are used to test the component in an isolated environment.
+ */
+
 async function wait(ms = 100): Promise<void> {
   await act(() => {
     return new Promise((resolve) => {
@@ -39,7 +55,7 @@ describe('Testing UserNavbar Component [User Portal]', () => {
     });
   });
 
-  test('Component should be rendered properly', async () => {
+  it('Component should be rendered properly', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -55,7 +71,7 @@ describe('Testing UserNavbar Component [User Portal]', () => {
     await wait();
   });
 
-  test('The language is switched to English', async () => {
+  it('The language is switched to English', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -79,7 +95,7 @@ describe('Testing UserNavbar Component [User Portal]', () => {
     expect(cookies.get('i18next')).toBe('en');
   });
 
-  test('The language is switched to fr', async () => {
+  it('The language is switched to fr', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -103,7 +119,7 @@ describe('Testing UserNavbar Component [User Portal]', () => {
     expect(cookies.get('i18next')).toBe('fr');
   });
 
-  test('The language is switched to hi', async () => {
+  it('The language is switched to hi', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -127,7 +143,7 @@ describe('Testing UserNavbar Component [User Portal]', () => {
     expect(cookies.get('i18next')).toBe('hi');
   });
 
-  test('The language is switched to sp', async () => {
+  it('The language is switched to sp', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -151,7 +167,7 @@ describe('Testing UserNavbar Component [User Portal]', () => {
     expect(cookies.get('i18next')).toBe('sp');
   });
 
-  test('The language is switched to zh', async () => {
+  it('The language is switched to zh', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -175,7 +191,7 @@ describe('Testing UserNavbar Component [User Portal]', () => {
     expect(cookies.get('i18next')).toBe('zh');
   });
 
-  test('User can see and interact with the dropdown menu', async () => {
+  it('User can see and interact with the dropdown menu', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -195,7 +211,7 @@ describe('Testing UserNavbar Component [User Portal]', () => {
     expect(screen.getByTestId('logoutBtn')).toBeInTheDocument();
   });
 
-  test('User can navigate to the "Settings" page', async () => {
+  it('User can navigate to the "Settings" page', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
diff --git a/src/components/UserPortal/UserProfile/EventsAttendedByUser.test.tsx b/src/components/UserPortal/UserProfile/EventsAttendedByUser.spec.tsx
similarity index 76%
rename from src/components/UserPortal/UserProfile/EventsAttendedByUser.test.tsx
rename to src/components/UserPortal/UserProfile/EventsAttendedByUser.spec.tsx
index 82b173e399..dfdeb5523e 100644
--- a/src/components/UserPortal/UserProfile/EventsAttendedByUser.test.tsx
+++ b/src/components/UserPortal/UserProfile/EventsAttendedByUser.spec.tsx
@@ -4,6 +4,18 @@ import { EventsAttendedByUser } from './EventsAttendedByUser';
 import { MockedProvider } from '@apollo/client/testing';
 import { EVENT_DETAILS } from 'GraphQl/Queries/Queries';
 
+/**
+ * Unit tests for EventsAttendedByUser component:
+ *
+ * 1. **Rendering with events**: Verifies that the component renders properly when the user has attended events.
+ *    - It checks for the presence of a title ('eventAttended') and ensures the correct number of event cards are rendered (2 events in this case).
+ * 2. **Rendering without events**: Ensures that when the user has not attended any events, a message indicating no events attended is displayed.
+ *    - It checks for the presence of a 'noeventsAttended' message and ensures no event cards are rendered.
+ *
+ * Mock GraphQL queries (using `MockedProvider`) simulate the fetching of event details.
+ * The tests check the proper handling of different user event attendance scenarios.
+ */
+
 const mockT = (key: string, params?: Record<string, string>): string => {
   if (params) {
     return Object.entries(params).reduce(
@@ -96,7 +108,7 @@ describe('EventsAttendedByUser Component', () => {
     t: mockT,
   };
 
-  test('renders the component with events', () => {
+  it('renders the component with events', () => {
     render(
       <MockedProvider mocks={mocks} addTypename={false}>
         <EventsAttendedByUser {...mockUserWithEvents} />
@@ -107,7 +119,7 @@ describe('EventsAttendedByUser Component', () => {
     expect(screen.getAllByTestId('usereventsCard')).toHaveLength(2);
   });
 
-  test('renders no events message when user has no events', () => {
+  it('renders no events message when user has no events', () => {
     render(
       <MockedProvider mocks={mocks} addTypename={false}>
         <EventsAttendedByUser {...mockUserWithoutEvents} />
diff --git a/src/components/UserPortal/UserProfile/UserAddressFields.test.tsx b/src/components/UserPortal/UserProfile/UserAddressFields.spec.tsx
similarity index 69%
rename from src/components/UserPortal/UserProfile/UserAddressFields.test.tsx
rename to src/components/UserPortal/UserProfile/UserAddressFields.spec.tsx
index 7aff734bc6..9c0a6609e4 100644
--- a/src/components/UserPortal/UserProfile/UserAddressFields.test.tsx
+++ b/src/components/UserPortal/UserProfile/UserAddressFields.spec.tsx
@@ -2,12 +2,25 @@ import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import { UserAddressFields } from './UserAddressFields';
 import { countryOptions } from 'utils/formEnumFields';
+import { vi } from 'vitest';
+
+/**
+ * Unit tests for UserAddressFields component:
+ *
+ * 1. **Rendering form fields**: Ensures address, state, and country fields are rendered.
+ * 2. **Displaying translated labels**: Verifies correct translations for labels.
+ * 3. **Handling input changes**: Tests if `handleFieldChange` is called with correct values for address, state, and country.
+ * 4. **Rendering country options**: Checks if all country options are displayed.
+ * 5. **Displaying initial values**: Ensures initial values (address, state, country) are correctly shown.
+ *
+ * `fireEvent` simulates user actions, and `vi.fn()` mocks callback functions.
+ */
 
 describe('UserAddressFields', () => {
   const mockProps = {
     tCommon: (key: string) => `translated_${key}`,
     t: (key: string) => `translated_${key}`,
-    handleFieldChange: jest.fn(),
+    handleFieldChange: vi.fn(),
     userDetails: {
       address: '123 Test Street',
       state: 'Test State',
@@ -16,10 +29,10 @@ describe('UserAddressFields', () => {
   };
 
   beforeEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
-  test('renders all form fields correctly', () => {
+  it('renders all form fields correctly', () => {
     render(<UserAddressFields {...mockProps} />);
 
     expect(screen.getByTestId('inputAddress')).toBeInTheDocument();
@@ -27,7 +40,7 @@ describe('UserAddressFields', () => {
     expect(screen.getByTestId('inputCountry')).toBeInTheDocument();
   });
 
-  test('displays correct labels with translations', () => {
+  it('displays correct labels with translations', () => {
     render(<UserAddressFields {...mockProps} />);
 
     expect(screen.getByText('translated_address')).toBeInTheDocument();
@@ -35,7 +48,7 @@ describe('UserAddressFields', () => {
     expect(screen.getByText('translated_country')).toBeInTheDocument();
   });
 
-  test('handles address input change', () => {
+  it('handles address input change', () => {
     render(<UserAddressFields {...mockProps} />);
 
     const addressInput = screen.getByTestId('inputAddress');
@@ -47,7 +60,7 @@ describe('UserAddressFields', () => {
     );
   });
 
-  test('handles state input change', () => {
+  it('handles state input change', () => {
     render(<UserAddressFields {...mockProps} />);
 
     const stateInput = screen.getByTestId('inputState');
@@ -59,7 +72,7 @@ describe('UserAddressFields', () => {
     );
   });
 
-  test('handles country selection change', () => {
+  it('handles country selection change', () => {
     render(<UserAddressFields {...mockProps} />);
 
     const countrySelect = screen.getByTestId('inputCountry');
@@ -68,7 +81,7 @@ describe('UserAddressFields', () => {
     expect(mockProps.handleFieldChange).toHaveBeenCalledWith('country', 'CA');
   });
 
-  test('renders all country options', () => {
+  it('renders all country options', () => {
     render(<UserAddressFields {...mockProps} />);
 
     const countrySelect = screen.getByTestId('inputCountry');
@@ -77,7 +90,7 @@ describe('UserAddressFields', () => {
     expect(options.length).toBe(countryOptions.length + 1); // +1 for disabled option
   });
 
-  test('displays initial values correctly', () => {
+  it('displays initial values correctly', () => {
     render(<UserAddressFields {...mockProps} />);
 
     expect(screen.getByTestId('inputAddress')).toHaveValue('123 Test Street');
diff --git a/src/components/UserPortal/UserSidebar/UserSidebar.test.tsx b/src/components/UserPortal/UserSidebar/UserSidebar.spec.tsx
similarity index 86%
rename from src/components/UserPortal/UserSidebar/UserSidebar.test.tsx
rename to src/components/UserPortal/UserSidebar/UserSidebar.spec.tsx
index 79d603614f..ac6465a3e6 100644
--- a/src/components/UserPortal/UserSidebar/UserSidebar.test.tsx
+++ b/src/components/UserPortal/UserSidebar/UserSidebar.spec.tsx
@@ -15,6 +15,25 @@ import i18nForTest from 'utils/i18nForTest';
 import { StaticMockLink } from 'utils/StaticMockLink';
 import UserSidebar from './UserSidebar';
 import useLocalStorage from 'utils/useLocalstorage';
+import { vi } from 'vitest';
+
+/**
+ * Unit tests for UserSidebar component:
+ *
+ * 1. **Rendering with user data**: Verifies correct rendering when user data is fetched.
+ * 2. **Logo and title**: Ensures logo, title, and left drawer are visible.
+ * 3. **Empty organizations list**: Tests rendering when the user has no joined organizations.
+ * 4. **Organization image rendering**: Verifies rendering when organizations have an image.
+ * 5. **User profile and links**: Ensures user details and links like 'My Organizations' and 'Settings' are visible.
+ * 6. **Responsive rendering**: Tests correct rendering and drawer toggle on smaller screens.
+ * 7. **Active button style**: Verifies button style changes when clicked.
+ * 8. **Translation display**: Ensures translated text is shown.
+ * 9. **Sidebar closure on mobile**: Verifies sidebar closes when a link is clicked on mobile view.
+ * 10. **Drawer visibility on small screens**: Tests drawer visibility toggle based on `hideDrawer` prop.
+ * 11. **Drawer state change**: Verifies drawer visibility changes when `hideDrawer` prop changes.
+ *
+ * `fireEvent` simulates user actions, and `vi.fn()` mocks callback functions.
+ */
 
 const { setItem } = useLocalStorage();
 
@@ -27,7 +46,7 @@ const resizeWindow = (width: number): void => {
 
 const props = {
   hideDrawer: true,
-  setHideDrawer: jest.fn(),
+  setHideDrawer: vi.fn(),
 };
 
 const MOCKS = [
@@ -365,10 +384,10 @@ const renderUserSidebar = (
 
 describe('UserSidebar Component Tests in User Portal', () => {
   beforeEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
-  test('UserSidebar component renders correctly with user data present', async () => {
+  it('UserSidebar component renders correctly with user data present', async () => {
     await act(async () => {
       renderUserSidebar('properId', link);
       await wait();
@@ -376,7 +395,7 @@ describe('UserSidebar Component Tests in User Portal', () => {
     expect(screen.getByText('Talawa User Portal')).toBeInTheDocument();
   });
 
-  test('Displays the logo and title text of the User Portal', async () => {
+  it('Displays the logo and title text of the User Portal', async () => {
     await act(async () => {
       renderUserSidebar('properId', link);
       await wait();
@@ -385,7 +404,7 @@ describe('UserSidebar Component Tests in User Portal', () => {
     expect(screen.getByTestId('leftDrawerContainer')).toBeVisible();
   });
 
-  test('UserSidebar renders correctly when joinedOrganizations list is empty', async () => {
+  it('UserSidebar renders correctly when joinedOrganizations list is empty', async () => {
     await act(async () => {
       renderUserSidebar('orgEmpty', link);
       await wait();
@@ -393,7 +412,7 @@ describe('UserSidebar Component Tests in User Portal', () => {
     expect(screen.getByText('My Organizations')).toBeInTheDocument();
   });
 
-  test('Renders UserSidebar component with organization image when present', async () => {
+  it('Renders UserSidebar component with organization image when present', async () => {
     await act(async () => {
       renderUserSidebar('imagePresent', link);
       await wait();
@@ -401,7 +420,7 @@ describe('UserSidebar Component Tests in User Portal', () => {
     expect(screen.getByText('Settings')).toBeInTheDocument();
   });
 
-  test('User profile data renders with all expected navigation links visible', async () => {
+  it('User profile data renders with all expected navigation links visible', async () => {
     await act(async () => {
       renderUserSidebar('properId', link);
       await wait();
@@ -413,7 +432,7 @@ describe('UserSidebar Component Tests in User Portal', () => {
     });
   });
 
-  test('UserSidebar renders correctly on smaller screens and toggles drawer visibility', async () => {
+  it('UserSidebar renders correctly on smaller screens and toggles drawer visibility', async () => {
     await act(async () => {
       resizeWindow(800);
       render(
@@ -433,7 +452,7 @@ describe('UserSidebar Component Tests in User Portal', () => {
     expect(props.setHideDrawer).toHaveBeenCalledWith(true);
   });
 
-  test('Active route button style changes correctly upon click', async () => {
+  it('Active route button style changes correctly upon click', async () => {
     await act(async () => {
       renderUserSidebar('properId', link);
       await wait();
@@ -448,7 +467,7 @@ describe('UserSidebar Component Tests in User Portal', () => {
     expect(settingsBtn).toHaveClass('text-white btn btn-success');
   });
 
-  test('Translation hook displays expected text in UserSidebar', async () => {
+  it('Translation hook displays expected text in UserSidebar', async () => {
     await act(async () => {
       renderUserSidebar('properId', link);
       await wait();
@@ -458,7 +477,7 @@ describe('UserSidebar Component Tests in User Portal', () => {
     ).toBeInTheDocument();
   });
 
-  test('handleLinkClick function closes the sidebar on mobile view when a link is clicked', async () => {
+  it('handleLinkClick function closes the sidebar on mobile view when a link is clicked', async () => {
     resizeWindow(800);
     await act(async () => {
       renderUserSidebar('properId', link);
@@ -471,10 +490,10 @@ describe('UserSidebar Component Tests in User Portal', () => {
 
   describe('UserSidebar Drawer Visibility Tests on Smaller Screens', () => {
     beforeEach(() => {
-      jest.clearAllMocks();
+      vi.clearAllMocks();
     });
 
-    test('Clicking a link closes the drawer when window width is 820px or less', () => {
+    it('Clicking a link closes the drawer when window width is 820px or less', () => {
       act(() => {
         window.innerWidth = 820;
         window.dispatchEvent(new Event('resize'));
@@ -499,7 +518,7 @@ describe('UserSidebar Component Tests in User Portal', () => {
     });
 
     describe('UserSidebar Drawer State Tests', () => {
-      test('Drawer visibility changes based on hideDrawer prop', () => {
+      it('Drawer visibility changes based on hideDrawer prop', () => {
         const { rerender } = render(
           <MockedProvider addTypename={false}>
             <BrowserRouter>
diff --git a/src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.test.tsx b/src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.spec.tsx
similarity index 86%
rename from src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.test.tsx
rename to src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.spec.tsx
index 2f28d9afd1..f26997f572 100644
--- a/src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.test.tsx
+++ b/src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.spec.tsx
@@ -1,10 +1,8 @@
 import React, { act } from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import 'jest-localstorage-mock';
 import { I18nextProvider } from 'react-i18next';
 import { BrowserRouter } from 'react-router-dom';
-
 import i18nForTest from 'utils/i18nForTest';
 import type { InterfaceUserSidebarOrgProps } from './UserSidebarOrg';
 import UserSidebarOrg from './UserSidebarOrg';
@@ -15,7 +13,24 @@ import { ORGANIZATIONS_LIST } from 'GraphQl/Queries/Queries';
 import { StaticMockLink } from 'utils/StaticMockLink';
 import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
 import useLocalStorage from 'utils/useLocalstorage';
+import { vi } from 'vitest';
 
+/**
+ * Unit tests for UserSidebarOrg component:
+ *
+ * 1. **Rendering with organization data**: Verifies correct rendering when data is fetched.
+ * 2. **Profile Page & Modal**: Ensures profile button and organization details modal appear.
+ * 3. **Menu Navigation**: Tests correct navigation when menu buttons like 'People' are clicked.
+ * 4. **Responsive Design**: Verifies sidebar behavior on screens.
+ * 5. **Organization Image**: Ensures correct rendering of organization image.
+ * 6. **Empty Organizations**: Verifies error message when no organizations exist.
+ * 7. **Drawer Visibility**: Tests drawer visibility with `hideDrawer` prop values.
+ * 8. **User Profile Rendering**: Confirms user details are displayed.
+ * 9. **Translation Display**: Ensures proper translation of UI text.
+ * 10. **Toast Notifications Mocking**: Mocks toast notifications during tests.
+ *
+ * `fireEvent` simulates user actions, and `vi.fn()` mocks callback functions.
+ */
 const { setItem } = useLocalStorage();
 
 const props: InterfaceUserSidebarOrgProps = {
@@ -47,7 +62,7 @@ const props: InterfaceUserSidebarOrgProps = {
     },
   ],
   hideDrawer: false,
-  setHideDrawer: jest.fn(),
+  setHideDrawer: vi.fn(),
 };
 
 const MOCKS = [
@@ -213,11 +228,11 @@ const defaultScreens = [
   'All Organizations',
 ];
 
-jest.mock('react-toastify', () => ({
+vi.mock('react-toastify', () => ({
   toast: {
-    success: jest.fn(),
-    warn: jest.fn(),
-    error: jest.fn(),
+    success: vi.fn(),
+    warn: vi.fn(),
+    error: vi.fn(),
   },
 }));
 
@@ -244,7 +259,7 @@ beforeEach(() => {
 });
 
 afterEach(() => {
-  jest.clearAllMocks();
+  vi.clearAllMocks();
   localStorage.clear();
 });
 
@@ -253,7 +268,7 @@ const linkImage = new StaticMockLink(MOCKS_WITH_IMAGE, true);
 const linkEmpty = new StaticMockLink(MOCKS_EMPTY, true);
 
 describe('Testing LeftDrawerOrg component for SUPERADMIN', () => {
-  test('Component should be rendered properly', async () => {
+  it('Component should be rendered properly', async () => {
     setItem('UserImage', '');
     setItem('SuperAdmin', true);
     setItem('FirstName', 'John');
@@ -275,7 +290,7 @@ describe('Testing LeftDrawerOrg component for SUPERADMIN', () => {
     });
   });
 
-  test('Testing Profile Page & Organization Detail Modal', async () => {
+  it('Testing Profile Page & Organization Detail Modal', async () => {
     setItem('UserImage', '');
     setItem('SuperAdmin', true);
     setItem('FirstName', 'John');
@@ -295,7 +310,7 @@ describe('Testing LeftDrawerOrg component for SUPERADMIN', () => {
     expect(screen.getByTestId(/orgBtn/i)).toBeInTheDocument();
   });
 
-  test('Testing Menu Buttons', async () => {
+  it('Testing Menu Buttons', async () => {
     setItem('UserImage', '');
     setItem('SuperAdmin', true);
     setItem('FirstName', 'John');
@@ -316,7 +331,7 @@ describe('Testing LeftDrawerOrg component for SUPERADMIN', () => {
     expect(global.window.location.pathname).toContain('/user/people/123');
   });
 
-  test('Testing when screen size is less than 820px', async () => {
+  it('Testing when screen size is less than 820px', async () => {
     setItem('SuperAdmin', true);
     render(
       <MockedProvider addTypename={false} link={link}>
@@ -339,7 +354,7 @@ describe('Testing LeftDrawerOrg component for SUPERADMIN', () => {
     expect(window.location.pathname).toContain('user/people/123');
   });
 
-  test('Testing when image is present for Organization', async () => {
+  it('Testing when image is present for Organization', async () => {
     setItem('UserImage', '');
     setItem('SuperAdmin', true);
     setItem('FirstName', 'John');
@@ -358,7 +373,7 @@ describe('Testing LeftDrawerOrg component for SUPERADMIN', () => {
     await wait();
   });
 
-  test('Testing when Organization does not exists', async () => {
+  it('Testing when Organization does not exists', async () => {
     setItem('UserImage', '');
     setItem('SuperAdmin', true);
     setItem('FirstName', 'John');
@@ -380,7 +395,7 @@ describe('Testing LeftDrawerOrg component for SUPERADMIN', () => {
     ).toBeInTheDocument();
   });
 
-  test('Testing Drawer when hideDrawer is null', () => {
+  it('Testing Drawer when hideDrawer is null', () => {
     setItem('UserImage', '');
     setItem('SuperAdmin', true);
     setItem('FirstName', 'John');
@@ -398,7 +413,7 @@ describe('Testing LeftDrawerOrg component for SUPERADMIN', () => {
     );
   });
 
-  test('Testing Drawer when hideDrawer is true', () => {
+  it('Testing Drawer when hideDrawer is true', () => {
     setItem('UserImage', '');
     setItem('SuperAdmin', true);
     setItem('FirstName', 'John');