Migrated src/components/EventStats/* from Jest to Vitest (#2997)

* Refactor: Migrated src/components/EventStats/* from Jest to Vitest

* Refactor: Removed duplicate mock implementation in EventStatsWrapper.spec.tsx

src/components/EventStats/EventStats.test.tsx → src/components/EventStats/EventStats.spec.tsx

@@ -4,13 +4,15 @@ import { MockedProvider } from '@apollo/react-testing';
 import { EventStats } from './EventStats';
 import { BrowserRouter } from 'react-router-dom';
 import { EVENT_FEEDBACKS } from 'GraphQl/Queries/Queries';
+import { vi, describe, expect, it } from 'vitest';
 
-// Mock the modules for PieChart rendering as they require a trasformer being used (which is not done by Jest)
+// Mock the modules for PieChart rendering as they require a trasformer being used (which is not done by Vitest)
 // These modules are used by the Feedback component
-jest.mock('@mui/x-charts/PieChart', () => ({
-  pieArcLabelClasses: jest.fn(),
-  PieChart: jest.fn().mockImplementation(() => <>Test</>),
-  pieArcClasses: jest.fn(),
+vi.mock('@mui/x-charts/PieChart', async () => ({
+  ...(await vi.importActual('@mui/x-charts/PieChart')),
+  pieArcLabelClasses: vi.fn(),
+  PieChart: vi.fn().mockImplementation(() => <>Test</>),
+  pieArcClasses: vi.fn(),
 }));
 
 const mockData = [
@@ -43,10 +45,10 @@ describe('Testing Event Stats', () => {
   const props = {
     eventId: 'eventStats123',
     show: true,
-    handleClose: jest.fn(),
+    handleClose: vi.fn(),
   };
 
-  test('The stats should be rendered properly', async () => {
+  it('The stats should be rendered properly', async () => {
     const { queryByText } = render(
       <MockedProvider mocks={mockData} addTypename={false}>
         <BrowserRouter>

src/components/EventStats/EventStatsWrapper.test.tsx → src/components/EventStats/EventStatsWrapper.spec.tsx

@@ -4,12 +4,15 @@ import { MockedProvider } from '@apollo/react-testing';
 import { EventStatsWrapper } from './EventStatsWrapper';
 import { BrowserRouter } from 'react-router-dom';
 import { EVENT_FEEDBACKS } from 'GraphQl/Queries/Queries';
+import { vi, describe, expect, it } from 'vitest';
 
-// Mock the modules for PieChart rendering as they require a trasformer being used (which is not done by Jest)
-jest.mock('@mui/x-charts/PieChart', () => ({
-  pieArcLabelClasses: jest.fn(),
-  PieChart: jest.fn().mockImplementation(() => <>Test</>),
-  pieArcClasses: jest.fn(),
+// Mock the modules for PieChart rendering as they require a trasformer being used (which is not done by Vitest)
+// These modules are used by the Feedback component
+vi.mock('@mui/x-charts/PieChart', async () => ({
+  ...(await vi.importActual('@mui/x-charts/PieChart')),
+  pieArcLabelClasses: vi.fn(),
+  PieChart: vi.fn().mockImplementation(() => <>Test</>),
+  pieArcClasses: vi.fn(),
 }));
 
 const mockData = [
@@ -38,20 +41,12 @@ const mockData = [
   },
 ];
 
-// Mock the modules for PieChart rendering as they require a trasformer being used (which is not done by Jest)
-// These modules are used by the Feedback component
-jest.mock('@mui/x-charts/PieChart', () => ({
-  pieArcLabelClasses: jest.fn(),
-  PieChart: jest.fn().mockImplementation(() => <>Test</>),
-  pieArcClasses: jest.fn(),
-}));
-
 describe('Testing Event Stats Wrapper', () => {
   const props = {
     eventId: 'eventStats123',
   };
 
-  test('The button to open and close the modal should work properly', async () => {
+  it('The button to open and close the modal should work properly', async () => {
     const { queryByText, queryByRole } = render(
       <MockedProvider mocks={mockData} addTypename={false}>
         <BrowserRouter>

src/components/EventStats/Statistics/AverageRating.test.tsx → src/components/EventStats/Statistics/AverageRating.spec.tsx

@@ -7,6 +7,7 @@ import { store } from 'state/store';
 import { I18nextProvider } from 'react-i18next';
 import i18nForTest from 'utils/i18nForTest';
 import { ToastContainer } from 'react-toastify';
+import { describe, expect, it } from 'vitest';
 
 const props = {
   data: {
@@ -35,7 +36,7 @@ const props = {
 };
 
 describe('Testing Average Rating Card', () => {
-  test('The component should be rendered and the Score should be shown', async () => {
+  it('The component should be rendered and the Score should be shown', async () => {
     const { queryByText } = render(
       <BrowserRouter>
         <Provider store={store}>

src/components/EventStats/Statistics/Feedback.test.tsx → src/components/EventStats/Statistics/Feedback.spec.tsx

@@ -7,12 +7,14 @@ import { store } from 'state/store';
 import { I18nextProvider } from 'react-i18next';
 import i18nForTest from 'utils/i18nForTest';
 import { ToastContainer } from 'react-toastify';
+import { vi, describe, expect, it } from 'vitest';
 
-// Mock the modules for PieChart rendering as they require a trasformer being used (which is not done by Jest)
-jest.mock('@mui/x-charts/PieChart', () => ({
-  pieArcLabelClasses: jest.fn(),
-  PieChart: jest.fn().mockImplementation(() => <>Test</>),
-  pieArcClasses: jest.fn(),
+// Mock the modules for PieChart rendering as they require a trasformer being used (which is not done by Vitest)
+vi.mock('@mui/x-charts/PieChart', async () => ({
+  ...(await vi.importActual('@mui/x-charts/PieChart')),
+  pieArcLabelClasses: vi.fn(),
+  PieChart: vi.fn().mockImplementation(() => <>Test</>),
+  pieArcClasses: vi.fn(),
 }));
 
 const nonEmptyProps = {
@@ -52,7 +54,7 @@ const emptyProps = {
 };
 
 describe('Testing Feedback Statistics Card', () => {
-  test('The component should be rendered and the feedback should be shown if present', async () => {
+  it('The component should be rendered and the feedback should be shown if present', async () => {
     const { queryByText } = render(
       <BrowserRouter>
         <Provider store={store}>
@@ -79,7 +81,7 @@ describe('Testing Feedback Statistics Card', () => {
     });
   });
 
-  test('The component should be rendered and message should be shown if no feedback is present', async () => {
+  it('The component should be rendered and message should be shown if no feedback is present', async () => {
     const { queryByText } = render(
       <BrowserRouter>
         <Provider store={store}>

src/components/EventStats/Statistics/Review.test.tsx → src/components/EventStats/Statistics/Review.spec.tsx

@@ -7,6 +7,7 @@ import { store } from 'state/store';
 import { I18nextProvider } from 'react-i18next';
 import i18nForTest from 'utils/i18nForTest';
 import { ToastContainer } from 'react-toastify';
+import { describe, expect, it } from 'vitest';
 
 const nonEmptyReviewProps = {
   data: {
@@ -51,7 +52,7 @@ const emptyReviewProps = {
 };
 
 describe('Testing Review Statistics Card', () => {
-  test('The component should be rendered and the reviews should be shown if present', async () => {
+  it('The component should be rendered and the reviews should be shown if present', async () => {
     const { queryByText } = render(
       <BrowserRouter>
         <Provider store={store}>
@@ -72,7 +73,7 @@ describe('Testing Review Statistics Card', () => {
     await waitFor(() => expect(queryByText('review2')).toBeInTheDocument());
   });
 
-  test('The component should be rendered and message should be shown if no review is present', async () => {
+  it('The component should be rendered and message should be shown if no review is present', async () => {
     const { queryByText } = render(
       <BrowserRouter>
         <Provider store={store}>