NCL-8490 Migrate jest to vitest

Author: patrikk0123

package-lock.json

@@ -30,16 +30,15 @@
     "start": "VITE_VERSION=$npm_package_version vite",
     "build": "VITE_VERSION=$npm_package_version vite build",
     "preview": "VITE_VERSION=$npm_package_version vite preview",
-    "test": "TZ=Europe/Bratislava react-scripts test --transformIgnorePatterns \"node_modules/(?!axios)/\"",
+    "test": "vitest",
     "eject": "react-scripts eject",
     "prepare": "husky install",
     "prettier-write": "prettier --write '**/*.{js,jsx,ts,tsx,json,css,scss,md}'",
     "prettier-check": "prettier --check '**/*.{js,jsx,ts,tsx,json,css,scss,md}'"
   },
   "eslintConfig": {
     "extends": [
-      "react-app",
-      "react-app/jest"
+      "react-app"
     ]
   },
   "browserslist": {
@@ -56,7 +55,6 @@
   },
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",
-    "@types/jest": "^29.5.12",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.0.0",
     "@types/react": "^18.3.3",
@@ -65,10 +63,12 @@
     "@vitejs/plugin-react": "^5.0.2",
     "axios-mock-adapter": "^1.21.2",
     "husky": "^8.0.1",
+    "jsdom": "^27.0.0",
     "lint-staged": "^13.0.3",
     "prettier": "2.8.4",
     "vite": "^7.1.5",
-    "vite-tsconfig-paths": "^5.1.4"
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.2.4"
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx,json,css,scss,md}": "prettier --check --ignore-unknown"

package.json

@@ -2,23 +2,17 @@ import { act, render } from '@testing-library/react';
 import * as routeData from 'react-router';
 import { MemoryRouter } from 'react-router';
 import ResizeObserver from 'resize-observer-polyfill';
+import { vi } from 'vitest';
 
 import { AppLayout } from '../AppLayout';
 
 global.ResizeObserver = ResizeObserver;
 
-jest.mock('services/keycloakService');
-jest.mock('services/genericSettingsApi');
-jest.mock('services/webConfigService');
-jest.mock('services/broadcastService');
-jest.mock('contexts/ThemeContext');
-
-jest.mock('react-router', () => {
-  return {
-    __esModule: true,
-    ...jest.requireActual('react-router'),
-  };
-});
+vi.mock('services/keycloakService');
+vi.mock('services/genericSettingsApi');
+vi.mock('services/webConfigService');
+vi.mock('services/broadcastService');
+vi.mock('contexts/ThemeContext');
 
 window.pnc = {
   config: {
@@ -38,7 +32,7 @@ const mockMatches = [
 ];
 
 beforeEach(() => {
-  jest.spyOn(routeData, 'useMatches').mockReturnValue(mockMatches);
+  vi.spyOn(routeData, 'useMatches').mockReturnValue(mockMatches);
 });
 
 test('renders AppLayout', async () => {

src/__tests__/AppLayout.test.tsx

@@ -1,9 +1,10 @@
 import { render } from '@testing-library/react';
 import { MemoryRouter } from 'react-router';
+import { vi } from 'vitest';
 
 import { ActionButton } from 'components/ActionButton/ActionButton';
 
-jest.mock('components/ProtectedContent/ProtectedComponent');
+vi.mock('components/ProtectedContent/ProtectedComponent');
 
 test('renders ActionButton', () => {
   render(

src/components/ActionButton/__tests__/ActionButton.test.tsx

@@ -1,11 +1,13 @@
-import { act, render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { vi } from 'vitest';
 
 import { AdministrationPage } from 'components/AdministrationPage/AdministrationPage';
 
-jest.mock('services/buildApi');
-jest.mock('services/genericSettingsApi');
-jest.mock('services/githubApi');
-jest.mock('services/uiLogger');
+vi.mock('services/webConfigService');
+vi.mock('services/buildApi');
+vi.mock('services/genericSettingsApi');
+vi.mock('services/githubApi');
+vi.mock('services/uiLogger');
 
 test('renders AdministrationPage', async () => {
   render(<AdministrationPage></AdministrationPage>);

src/components/AdministrationPage/__tests__/AdministrationPage.test.tsx

@@ -1,15 +1,16 @@
 import { act, render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router';
 import ResizeObserver from 'resize-observer-polyfill';
+import { vi } from 'vitest';
 
 import { ArtifactsPage } from 'components/ArtifactsPage/ArtifactsPage';
 
 global.ResizeObserver = ResizeObserver;
 
-jest.mock('services/artifactApi');
-jest.mock('services/keycloakService');
-jest.mock('services/uiLogger');
-jest.mock('services/webConfigService');
+vi.mock('services/artifactApi');
+vi.mock('services/keycloakService');
+vi.mock('services/uiLogger');
+vi.mock('services/webConfigService');
 
 describe('display ArtifactsPage component', () => {
   let artifactsMock: any;
@@ -40,6 +41,6 @@ describe('display ArtifactsPage component', () => {
         </MemoryRouter>
       );
     });
-    expect(tree).toMatchSnapshot();
+    expect(tree.container).toMatchSnapshot();
   });
 });