From c9b2eadf6a4898761c74bf9fe9d4b45a0b99c821 Mon Sep 17 00:00:00 2001 From: rafidoth Date: Wed, 11 Dec 2024 23:36:04 +0600 Subject: [PATCH 1/3] Refactored: src/screens/UserPortal/Campaigns from Jest to Vitest --- ...{Campaigns.test.tsx => Campaigns.spec.tsx} | 41 ++++++++++++------- tsconfig.json | 7 +++- 2 files changed, 32 insertions(+), 16 deletions(-) rename src/screens/UserPortal/Campaigns/{Campaigns.test.tsx => Campaigns.spec.tsx} (92%) diff --git a/src/screens/UserPortal/Campaigns/Campaigns.test.tsx b/src/screens/UserPortal/Campaigns/Campaigns.spec.tsx similarity index 92% rename from src/screens/UserPortal/Campaigns/Campaigns.test.tsx rename to src/screens/UserPortal/Campaigns/Campaigns.spec.tsx index 17b7eec4d5..3f3de8646b 100644 --- a/src/screens/UserPortal/Campaigns/Campaigns.test.tsx +++ b/src/screens/UserPortal/Campaigns/Campaigns.spec.tsx @@ -26,29 +26,34 @@ import { USER_FUND_CAMPAIGNS_ERROR, } from './CampaignsMocks'; -jest.mock('react-toastify', () => ({ +vi.mock('react-toastify', () => ({ toast: { - success: jest.fn(), - error: jest.fn(), + success: vi.fn(), + error: vi.fn(), }, })); -jest.mock('@mui/x-date-pickers/DateTimePicker', () => { + +vi.mock('@mui/x-date-pickers/DateTimePicker', async () => { + const actual = await vi.importActual( + '@mui/x-date-pickers/DesktopDateTimePicker', + ); return { - DateTimePicker: jest.requireActual( - '@mui/x-date-pickers/DesktopDateTimePicker', - ).DesktopDateTimePicker, + DateTimePicker: actual.DesktopDateTimePicker, }; }); + const { setItem } = useLocalStorage(); const link1 = new StaticMockLink(MOCKS); const link2 = new StaticMockLink(USER_FUND_CAMPAIGNS_ERROR); const link3 = new StaticMockLink(EMPTY_MOCKS); + const cTranslations = JSON.parse( JSON.stringify( i18nForTest.getDataByLanguage('en')?.translation.userCampaigns, ), ); + const pTranslations = JSON.parse( JSON.stringify(i18nForTest.getDataByLanguage('en')?.translation.pledges), ); @@ -85,14 +90,17 @@ describe('Testing User Campaigns Screen', () => { }); beforeAll(() => { - jest.mock('react-router-dom', () => ({ - ...jest.requireActual('react-router-dom'), - useParams: () => ({ orgId: 'orgId' }), - })); + vi.mock('react-router-dom', async () => { + const actual = await vi.importActual('react-router-dom'); + return { + ...actual, + useParams: vi.fn(() => ({ orgId: 'orgId' })), // Mock `useParams` + }; + }); }); afterAll(() => { - jest.clearAllMocks(); + vi.clearAllMocks(); }); afterEach(() => { @@ -117,16 +125,19 @@ describe('Testing User Campaigns Screen', () => { }); it('should redirect to fallback URL if URL params are undefined', async () => { + vi.unmock('react-router-dom'); render( - + - } /> + } /> } + element={ +
Error : orgId not found
+ } /> diff --git a/tsconfig.json b/tsconfig.json index 7e0274edb2..9c6bf2e04d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,11 @@ { "compilerOptions": { - "types": ["vite/client", "vite-plugin-svgr/client", "node"], + "types": [ + "vite/client", + "vite-plugin-svgr/client", + "node", + "vitest/globals" + ], "baseUrl": "src", "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], From e57155e4b43e0cc3d757d062c29880cfb1a1dd5c Mon Sep 17 00:00:00 2001 From: rafidoth Date: Thu, 12 Dec 2024 09:55:56 +0600 Subject: [PATCH 2/3] Refactored: src/screens/UserPortal/Campaigns from Jest to Vitest --- src/screens/UserPortal/Campaigns/Campaigns.spec.tsx | 9 ++++----- tsconfig.json | 7 +------ 2 files changed, 5 insertions(+), 11 deletions(-) diff --git a/src/screens/UserPortal/Campaigns/Campaigns.spec.tsx b/src/screens/UserPortal/Campaigns/Campaigns.spec.tsx index 3f3de8646b..38ba14fd3f 100644 --- a/src/screens/UserPortal/Campaigns/Campaigns.spec.tsx +++ b/src/screens/UserPortal/Campaigns/Campaigns.spec.tsx @@ -20,6 +20,7 @@ import i18nForTest from 'utils/i18nForTest'; import type { ApolloLink } from '@apollo/client'; import useLocalStorage from 'utils/useLocalstorage'; import Campaigns from './Campaigns'; +import { vi, it, expect, describe } from 'vitest'; import { EMPTY_MOCKS, MOCKS, @@ -128,16 +129,14 @@ describe('Testing User Campaigns Screen', () => { vi.unmock('react-router-dom'); render( - + - } /> + } /> Error : orgId not found - } + element={
} /> diff --git a/tsconfig.json b/tsconfig.json index 9c6bf2e04d..7e0274edb2 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,11 +1,6 @@ { "compilerOptions": { - "types": [ - "vite/client", - "vite-plugin-svgr/client", - "node", - "vitest/globals" - ], + "types": ["vite/client", "vite-plugin-svgr/client", "node"], "baseUrl": "src", "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], From dddcaab60b862f9f243db2aeb870d30b4e2e4048 Mon Sep 17 00:00:00 2001 From: rafidoth Date: Thu, 12 Dec 2024 10:27:00 +0600 Subject: [PATCH 3/3] Refactored: src/screens/UserPortal/Campaigns from Jest to Vitest --- .../UserPortal/Campaigns/Campaigns.spec.tsx | 29 ++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/src/screens/UserPortal/Campaigns/Campaigns.spec.tsx b/src/screens/UserPortal/Campaigns/Campaigns.spec.tsx index 38ba14fd3f..09cde6b25d 100644 --- a/src/screens/UserPortal/Campaigns/Campaigns.spec.tsx +++ b/src/screens/UserPortal/Campaigns/Campaigns.spec.tsx @@ -27,6 +27,7 @@ import { USER_FUND_CAMPAIGNS_ERROR, } from './CampaignsMocks'; +/* Mocking 'react-toastify` */ vi.mock('react-toastify', () => ({ toast: { success: vi.fn(), @@ -34,6 +35,7 @@ vi.mock('react-toastify', () => ({ }, })); +/* Mocking `@mui/x-date-pickers/DateTimePicker` */ vi.mock('@mui/x-date-pickers/DateTimePicker', async () => { const actual = await vi.importActual( '@mui/x-date-pickers/DesktopDateTimePicker', @@ -45,6 +47,9 @@ vi.mock('@mui/x-date-pickers/DateTimePicker', async () => { const { setItem } = useLocalStorage(); +/** + * Creates a mocked Apollo link for testing. + */ const link1 = new StaticMockLink(MOCKS); const link2 = new StaticMockLink(USER_FUND_CAMPAIGNS_ERROR); const link3 = new StaticMockLink(EMPTY_MOCKS); @@ -59,6 +64,13 @@ const pTranslations = JSON.parse( JSON.stringify(i18nForTest.getDataByLanguage('en')?.translation.pledges), ); +/* + * Renders the `Campaigns` component for testing. + * + * @param link - The mocked Apollo link used for testing. + * @returns The rendered result of the `Campaigns` component. + */ + const renderCampaigns = (link: ApolloLink): RenderResult => { return render( @@ -85,12 +97,18 @@ const renderCampaigns = (link: ApolloLink): RenderResult => { ); }; +/** + * Test suite for the User Campaigns screen. + */ describe('Testing User Campaigns Screen', () => { beforeEach(() => { setItem('userId', 'userId'); }); beforeAll(() => { + /** + * Mocks the `useParams` function from `react-router-dom` to simulate URL parameters. + */ vi.mock('react-router-dom', async () => { const actual = await vi.importActual('react-router-dom'); return { @@ -108,6 +126,9 @@ describe('Testing User Campaigns Screen', () => { cleanup(); }); + /** + * Verifies that the User Campaigns screen renders correctly with mock data. + */ it('should render the User Campaigns screen', async () => { renderCampaigns(link1); await waitFor(() => { @@ -117,6 +138,9 @@ describe('Testing User Campaigns Screen', () => { }); }); + /** + * Ensures the app redirects to the fallback URL if `userId` is null in LocalStorage. + */ it('should redirect to fallback URL if userId is null in LocalStorage', async () => { setItem('userId', null); renderCampaigns(link1); @@ -125,8 +149,11 @@ describe('Testing User Campaigns Screen', () => { }); }); + /** + * Ensures the app redirects to the fallback URL if URL parameters are undefined. + */ it('should redirect to fallback URL if URL params are undefined', async () => { - vi.unmock('react-router-dom'); + vi.unmock('react-router-dom'); // unmocking to get real behavior from useParams render(