Update dev dependencies fix the jest setups

Author: Mgrdich

frontend/package.json

@@ -10,6 +10,7 @@
     "@microsoft/fetch-event-source": "2.0.1",
     "@szhsin/react-menu": "3.5.3",
     "@tanstack/react-query": "4.36.1",
+    "@tanstack/react-query-devtools": "4.36.1",
     "@tanstack/react-table": "8.16.0",
     "ace-builds": "1.33.0",
     "ajv": "8.8.2",
@@ -32,8 +33,7 @@
     "styled-components": "6.1.8",
     "use-debounce": "10.0.0",
     "yup": "1.4.0",
-    "zustand": "4.5.2",
-    "@tanstack/react-query-devtools": "4.36.1"
+    "zustand": "4.5.2"
   },
   "scripts": {
     "start": "vite",
@@ -58,8 +58,8 @@
     "@swc/jest": "0.2.36",
     "@testing-library/dom": "10.0.0",
     "@testing-library/jest-dom": "6.4.2",
-    "@testing-library/user-event": "14.5.2",
     "@testing-library/react": "14.3.1",
+    "@testing-library/user-event": "14.5.2",
     "@types/eventsource": "1.1.15",
     "@types/lossless-json": "1.0.4",
     "@types/node": "20.11.17",
@@ -68,12 +68,9 @@
     "@types/react-dom": "18.2.25",
     "@types/react-router-dom": "5.3.3",
     "@types/styled-components": "5.1.34",
+    "@types/testing-library__jest-dom": "5.14.9",
     "@typescript-eslint/eslint-plugin": "6.21.0",
     "@typescript-eslint/parser": "6.21.0",
-    "vite": "5.2.10",
-    "vite-tsconfig-paths": "4.3.2",
-    "vite-plugin-checker": "0.6.4",
-    "vite-plugin-ejs": "1.7.0",
     "@vitejs/plugin-react-swc": "3.6.0",
     "dotenv": "16.4.5",
     "eslint": "8.57.0",
@@ -88,18 +85,21 @@
     "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-react": "7.34.1",
     "eslint-plugin-react-hooks": "4.6.0",
-    "@types/testing-library__jest-dom": "5.14.9",
+    "fetch-mock": "9.11.0",
     "jest": "29.7.0",
-    "jest-watch-typeahead": "2.2.2",
     "jest-environment-jsdom": "29.7.0",
     "jest-sonar-reporter": "2.0.0",
     "jest-styled-components": "7.1.1",
+    "jest-watch-typeahead": "2.2.2",
     "prettier": "3.2.5",
     "rimraf": "5.0.5",
     "ts-node": "10.9.2",
     "ts-prune": "0.10.3",
     "typescript": "5.4.5",
-    "fetch-mock": "9.11.0",
+    "vite": "5.2.10",
+    "vite-plugin-checker": "0.6.4",
+    "vite-plugin-ejs": "1.7.0",
+    "vite-tsconfig-paths": "4.3.2",
     "whatwg-fetch": "3.6.20"
   },
   "engines": {

frontend/pnpm-lock.yaml

@@ -1,4 +1,10 @@
-import React, { PropsWithChildren, ReactElement, useMemo } from 'react';
+import React, {
+  FC,
+  ReactNode,
+  PropsWithChildren,
+  ReactElement,
+  useMemo,
+} from 'react';
 import {
   MemoryRouter,
   MemoryRouterProps,
@@ -38,7 +44,7 @@ interface CustomRenderOptions extends Omit<RenderOptions, 'wrapper'> {
 }
 
 interface WithRouteProps {
-  children: React.ReactNode;
+  children: ReactNode;
   path: string;
 }
 
@@ -51,15 +57,15 @@ export const expectQueryWorks = async (
   expect(result.current.data).toBeDefined();
 };
 
-export const WithRoute: React.FC<WithRouteProps> = ({ children, path }) => {
+export const WithRoute: FC<WithRouteProps> = ({ children, path }) => {
   return (
     <Routes>
       <Route path={path} element={children} />
     </Routes>
   );
 };
 
-export const TestQueryClientProvider: React.FC<PropsWithChildren<unknown>> = ({
+export const TestQueryClientProvider: FC<PropsWithChildren<unknown>> = ({
   children,
 }) => {
   // use new QueryClient instance for each test run to avoid issues with cache
@@ -75,7 +81,7 @@ export const TestQueryClientProvider: React.FC<PropsWithChildren<unknown>> = ({
  * @description it will create a UserInfo Provider that will actually
  * disable the rbacFlag , to user if you can pass it as an argument
  * */
-const TestUserInfoProvider: React.FC<
+const TestUserInfoProvider: FC<
   PropsWithChildren<{ data?: { roles?: RolesType; rbacFlag: boolean } }>
 > = ({ children, data }) => {
   const contextValue = useMemo(() => {
@@ -107,9 +113,7 @@ const customRender = (
   }: CustomRenderOptions = {}
 ) => {
   // overrides @testing-library/react render.
-  const AllTheProviders: React.FC<PropsWithChildren<unknown>> = ({
-    children,
-  }) => (
+  const AllTheProviders: FC<PropsWithChildren<unknown>> = ({ children }) => (
     <TestQueryClientProvider>
       <GlobalSettingsContext.Provider
         value={globalSettings || { hasDynamicConfig: false }}
@@ -136,23 +140,3 @@ const customRenderHook = (hook: () => UseQueryResult<unknown, unknown>) =>
   renderHook(hook, { wrapper: TestQueryClientProvider });
 
 export { customRender as render, customRenderHook as renderQueryHook };
-
-export class EventSourceMock {
-  url: string;
-
-  close: () => void;
-
-  open: () => void;
-
-  error: () => void;
-
-  onmessage: () => void;
-
-  constructor(url: string) {
-    this.url = url;
-    this.open = jest.fn();
-    this.error = jest.fn();
-    this.onmessage = jest.fn();
-    this.close = jest.fn();
-  }
-}

frontend/src/lib/testHelpers.tsx

@@ -1,3 +1,3 @@
 import 'whatwg-fetch';
 import 'jest-styled-components';
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom/jest-globals';

frontend/src/setupTests.ts

@@ -20,11 +20,12 @@
     "jsx": "react-jsx",
     "baseUrl": "src",
     "noFallthroughCasesInSwitch": true,
-    "types": ["vite/client"]
+    "types": ["vite/client","@testing-library/jest-dom"]
   },
   "include": [
     "src",
     "vite.config.ts",
     "jest.config.ts",
+    "src/setupTests.ts"
   ]
 }