Refactor: src/screens/OrganizationVenues from Jest to Vitest

src/components/MemberDetail/customTableCell.test.tsx

@@ -65,7 +65,16 @@
     await waitFor(() => screen.getByTestId('custom-row'));
 
     expect(screen.getByText('Test Event')).toBeInTheDocument();
-    expect(screen.getByText('May 1, 2023')).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        new Date('2023-05-01').toLocaleDateString(undefined, {
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric',
+          timeZone: 'UTC',
+        }),
+      ),
+    ).toBeInTheDocument();
     expect(screen.getByText('Yes')).toBeInTheDocument();
     expect(screen.getByText('2')).toBeInTheDocument();
 
@@ -87,7 +96,7 @@
     expect(screen.getByRole('progressbar')).toBeInTheDocument();
   });
 
   // it('displays error state', async () => {
   //   const errorMock = [
   //     {
   //       request: {
@@ -121,7 +130,7 @@
   //   expect(toast.error).toHaveBeenCalledWith('An error occurred');
   // });
 
   // it('displays no event found message', async () => {
   //   const noEventMock = [
   //     {
   //       request: {

src/components/OrganizationScreen/OrganizationScreen.test.tsx

@@ -81,15 +81,17 @@ describe('Testing OrganizationScreen', () => {
     fireEvent.click(closeButton);
 
     // Check for contract class after closing
-    expect(screen.getByTestId('mainpageright')).toHaveClass('_expand_ccl5z_8');
+    expect(
+      screen.getByTestId('mainpageright').className.includes('expand'),
+    ).toBeTruthy();
 
     const openButton = screen.getByTestId('openMenu');
     fireEvent.click(openButton);
 
     // Check for expand class after opening
-    expect(screen.getByTestId('mainpageright')).toHaveClass(
-      '_contract_ccl5z_61',
-    );
+    expect(
+      screen.getByTestId('mainpageright').className.includes('contract'),
+    ).toBeTruthy();
   });
 
   test('handles window resize', () => {

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

@@ -1,3 +1,15 @@
+/**
+ * Tests for the OrganizationVenues component.
+ * These tests include:
+ * - Ensuring the component renders correctly with default props.
+ * - Handling the absence of `orgId` by redirecting to the homepage.
+ * - Fetching and displaying venues via Apollo GraphQL queries.
+ * - Allowing users to search venues by name or description.
+ * - Sorting venues by capacity in ascending or descending order.
+ * - Verifying that long venue names or descriptions are handled gracefully.
+ * - Testing loading states and edge cases for Apollo queries.
+ * - Mocking GraphQL mutations for venue-related actions and validating their behavior.
+ */
 import React from 'react';
 import { MockedProvider } from '@apollo/react-testing';
 import type { RenderResult } from '@testing-library/react';
@@ -10,7 +22,6 @@ import {
 } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
-import 'jest-location-mock';
 import { I18nextProvider } from 'react-i18next';
 import OrganizationVenues from './OrganizationVenues';
 import { store } from 'state/store';
@@ -19,7 +30,7 @@ import { StaticMockLink } from 'utils/StaticMockLink';
 import { VENUE_LIST } from 'GraphQl/Queries/OrganizationQueries';
 import type { ApolloLink } from '@apollo/client';
 import { DELETE_VENUE_MUTATION } from 'GraphQl/Mutations/VenueMutations';
-
+import { vi } from 'vitest';
 const MOCKS = [
   {
     request: {
@@ -239,11 +250,11 @@ async function wait(ms = 100): Promise<void> {
   });
 }
 
-jest.mock('react-toastify', () => ({
+vi.mock('react-toastify', () => ({
   toast: {
-    success: jest.fn(),
-    warning: jest.fn(),
-    error: jest.fn(),
+    success: vi.fn(),
+    warning: vi.fn(),
+    error: vi.fn(),
   },
 }));
 
@@ -272,14 +283,14 @@ const renderOrganizationVenue = (link: ApolloLink): RenderResult => {
 
 describe('OrganizationVenue with missing orgId', () => {
   beforeAll(() => {
-    jest.mock('react-router-dom', () => ({
-      ...jest.requireActual('react-router-dom'),
+    vi.doMock('react-router-dom', async () => ({
+      ...(await vi.importActual('react-router-dom')),
       useParams: () => ({ orgId: undefined }),
     }));
   });
 
   afterAll(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
   test('Redirect to /orglist when orgId is falsy/undefined', async () => {
     render(
@@ -299,7 +310,6 @@ describe('OrganizationVenue with missing orgId', () => {
         </MemoryRouter>
       </MockedProvider>,
     );
-
     await waitFor(() => {
       const paramsError = screen.getByTestId('paramsError');
       expect(paramsError).toBeInTheDocument();
@@ -308,17 +318,17 @@ describe('OrganizationVenue with missing orgId', () => {
 });
 
 describe('Organisation Venues', () => {
-  global.alert = jest.fn();
+  global.alert = vi.fn();
 
   beforeAll(() => {
-    jest.mock('react-router-dom', () => ({
-      ...jest.requireActual('react-router-dom'),
+    vi.doMock('react-router-dom', async () => ({
+      ...(await vi.importActual('react-router-dom')),
       useParams: () => ({ orgId: 'orgId' }),
     }));
   });
 
   afterAll(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   test('searches the venue list correctly by Name', async () => {

src/setupTests.ts

@@ -8,8 +8,17 @@
 
 import { format } from 'util';
 
-global.console.error = function (...args): void {
-  throw new Error(format(...args));
+const jsDomCssError = 'Error: Could not parse CSS stylesheet';
+
+// Override console.error to suppress the CSS parsing error
+global.console.error = (...params) => {
+  // If the error message is related to CSS parsing, suppress it
+  if (params.find((p) => p.toString().includes(jsDomCssError))) {
+    return; // Do nothing for this error
+  }
+
+  // Otherwise, throw an error or log the message
+  throw new Error(format(...params)); // You can choose to throw or log here
 };
 
 global.console.warn = function (...args): void {