migration of People.test.tsx from jest to vitest

src/screens/UserPortal/People/People.test.tsx

@@ -13,7 +13,7 @@ import i18nForTest from 'utils/i18nForTest';
 import { StaticMockLink } from 'utils/StaticMockLink';
 import People from './People';
 import userEvent from '@testing-library/user-event';
-
+import { describe, it, expect, vi } from 'vitest';
 const MOCKS = [
   {
     request: {
@@ -113,27 +113,30 @@ async function wait(ms = 100): Promise<void> {
   });
 }
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useParams: () => ({ orgId: '' }),
-}));
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return {
+    ...actual,
+    useParams: () => ({ orgId: '' }),
+  };
+});
 
 describe('Testing People Screen [User Portal]', () => {
   Object.defineProperty(window, 'matchMedia', {
     writable: true,
-    value: jest.fn().mockImplementation((query) => ({
+    value: vi.fn().mockImplementation((query) => ({
       matches: false,
       media: query,
       onchange: null,
-      addListener: jest.fn(), // Deprecated
-      removeListener: jest.fn(), // Deprecated
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn(),
-      dispatchEvent: jest.fn(),
+      addListener: vi.fn(), // Deprecated
+      removeListener: vi.fn(), // Deprecated
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
     })),
   });
 
-  test('Screen should be rendered properly', async () => {
+  it('Screen should be rendered properly', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -151,7 +154,7 @@ describe('Testing People Screen [User Portal]', () => {
     expect(screen.queryAllByText('Noble Mittal')).not.toBe([]);
   });
 
-  test('Search works properly by pressing enter', async () => {
+  it('Search works properly by pressing enter', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -173,7 +176,7 @@ describe('Testing People Screen [User Portal]', () => {
     expect(screen.queryByText('Noble Mittal')).not.toBeInTheDocument();
   });
 
-  test('Search works properly by clicking search Btn', async () => {
+  it('Search works properly by clicking search Btn', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -199,7 +202,7 @@ describe('Testing People Screen [User Portal]', () => {
     expect(screen.queryByText('Noble Mittal')).not.toBeInTheDocument();
   });
 
-  test('Mode is changed to Admins', async () => {
+  it('Mode is changed to Admins', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>

src/setupTests.ts

@@ -3,8 +3,9 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
+import { vi, beforeAll } from 'vitest';
 
-global.fetch = jest.fn();
+global.fetch = vi.fn();
 
 import { format } from 'util';
 
@@ -19,17 +20,18 @@ Object.defineProperty(HTMLMediaElement.prototype, 'muted', {
   set: () => ({}),
 });
 
-import { jestPreviewConfigure } from 'jest-preview';
-
 // Global CSS here
 import 'bootstrap/dist/css/bootstrap.css';
 import 'bootstrap/dist/js/bootstrap.min.js';
 import 'react-datepicker/dist/react-datepicker.css';
 import 'flag-icons/css/flag-icons.min.css';
 
-jestPreviewConfigure({
-  // Opt-in to automatic mode to preview failed test case automatically.
-  autoPreview: true,
-});
+// jestPreviewConfigure({
+//   // Opt-in to automatic mode to preview failed test case automatically.
+//   autoPreview: true,
+// });
 
-jest.setTimeout(15000);
+// Use the global setTimeout function
+beforeAll(() => {
+  vi.setConfig({ testTimeout: 15000 });
+});

vitest.config.ts

@@ -14,7 +14,7 @@ export default defineConfig({
     svgrPlugin(),
   ],
   test: {
-    include: ['src/**/*.spec.{js,jsx,ts,tsx}'],
+    include: ['src/**/*.spec.{js,jsx,ts,tsx}', 'src/**/*.test.{js,jsx,ts,tsx}'],
     globals: true,
     environment: 'jsdom',
     setupFiles: 'vitest.setup.ts',