fix test runner

jest.config.cjs

@@ -4,6 +4,7 @@ require('dotenv').config({ path: './redisinsight/ui/.env.test' });
 module.exports = {
   testEnvironmentOptions: {
     url: 'http://localhost/',
+    customExportConditions: [''],
   },
   moduleNameMapper: {
     '\\.(jpg|jpeg|png|ico|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
@@ -40,9 +41,9 @@ module.exports = {
   setupFilesAfterEnv: ['<rootDir>/redisinsight/ui/src/setup-tests.ts'],
   moduleDirectories: ['node_modules', 'redisinsight/node_modules'],
   moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json'],
-  testEnvironment: 'jest-environment-jsdom',
+  testEnvironment: 'jest-fixed-jsdom',
   transformIgnorePatterns: [
-    'node_modules/(?!(monaco-editor|react-monaco-editor|brotli-dec-wasm)/)',
+    'node_modules/(?!(monaco-editor|react-monaco-editor|brotli-dec-wasm|until-async)/)',
   ],
   // TODO: add tests for plugins
   modulePathIgnorePatterns: [

package.json

@@ -200,14 +200,15 @@
     "ioredis-mock": "^5.5.4",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "jest-fixed-jsdom": "^0.0.10",
     "jest-html-reporters": "^3.1.7",
     "jest-runner-groups": "^2.2.0",
     "jest-when": "^3.2.1",
     "license-checker": "^25.0.1",
     "lint-staged": "^10.2.11",
     "mini-css-extract-plugin": "2.7.2",
     "moment": "^2.29.3",
-    "msw": "^1.3.4",
+    "msw": "^2.11.5",
     "patch-package": "^8.0.0",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "3.5.2",

redisinsight/ui/src/components/notifications/components/infinite-messages/InfiniteMessages.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { fireEvent, render, screen } from 'uiSrc/utils/test-utils'
+import { fireEvent, render, screen, act } from 'uiSrc/utils/test-utils'
 
 import { OAuthProvider } from 'uiSrc/components/oauth/oauth-select-plan/constants'
 import notificationsReducer, {
@@ -19,24 +19,22 @@ const createTestStore = () =>
       getDefaultMiddleware({ serializableCheck: false }),
   })
 
-const renderToast = (notification: InfiniteMessage) => {
+const renderToast = async (notification: InfiniteMessage) => {
   const store = createTestStore()
 
   render(
     <>
-      {/* <RiToaster /> */}
       <Notifications />
     </>,
     { store },
   )
-
-  store.dispatch(addInfiniteNotification(notification))
+  await act(async () => store.dispatch(addInfiniteNotification(notification)))
 }
 
 describe('INFINITE_MESSAGES', () => {
   describe('AUTHENTICATING', () => {
     it('should render message', async () => {
-      renderToast(INFINITE_MESSAGES.AUTHENTICATING())
+      await renderToast(INFINITE_MESSAGES.AUTHENTICATING())
 
       // Wait for the notification to appear
       const title = await screen.findByText('Authenticating…')

redisinsight/ui/src/mocks/handlers/analytics/clusterDetailsHandlers.ts

@@ -1,4 +1,4 @@
-import { rest, RestHandler } from 'msw'
+import { http, HttpHandler, HttpResponse } from 'msw'
 import { ApiEndpoints } from 'uiSrc/constants'
 import { getUrl } from 'uiSrc/utils'
 import { getMswURL } from 'uiSrc/utils/test-utils'
@@ -11,12 +11,13 @@ import { Database as DatabaseInstanceResponse } from 'apiSrc/modules/database/mo
 
 export const INSTANCE_ID_MOCK = 'instanceId'
 
-const handlers: RestHandler[] = [
+const handlers: HttpHandler[] = [
   // useGetClusterDetailsQuery
-  rest.get<DatabaseInstanceResponse[]>(
+  http.get<any, DatabaseInstanceResponse[]>(
     getMswURL(getUrl(INSTANCE_ID_MOCK, ApiEndpoints.CLUSTER_DETAILS)),
-    async (_req, res, ctx) =>
-      res(ctx.status(200), ctx.json(CLUSTER_DETAILS_DATA_MOCK)),
+    async () => {
+      return HttpResponse.json(CLUSTER_DETAILS_DATA_MOCK, { status: 200 })
+    },
   ),
 ]
 

redisinsight/ui/src/mocks/handlers/analytics/dbAnalysisHistoryHandlers.ts

@@ -1,16 +1,17 @@
-import { rest, RestHandler } from 'msw'
+import { http, HttpHandler, HttpResponse } from 'msw'
 import { ApiEndpoints } from 'uiSrc/constants'
 import { getUrl } from 'uiSrc/utils'
 import { getMswURL } from 'uiSrc/utils/test-utils'
 
 export const INSTANCE_ID_MOCK = 'instanceId'
 
-const handlers: RestHandler[] = [
+const handlers: HttpHandler[] = [
   // fetchDBAnalysisReportsHistory
-  rest.get(
+  http.get(
     getMswURL(getUrl(INSTANCE_ID_MOCK, ApiEndpoints.DATABASE_ANALYSIS)),
-    async (_req, res, ctx) =>
-      res(ctx.status(200), ctx.json(DB_ANALYSIS_HISTORY_DATA_MOCK)),
+    async () => {
+      return HttpResponse.json(DB_ANALYSIS_HISTORY_DATA_MOCK, { status: 200 })
+    },
   ),
 ]
 

redisinsight/ui/src/mocks/handlers/analytics/index.ts

@@ -1,10 +1,7 @@
-import { DefaultBodyType, MockedRequest, RestHandler } from 'msw'
+import { HttpHandler } from 'msw'
 
 import clusterDetails from './clusterDetailsHandlers'
 import dbAnalysisHistory from './dbAnalysisHistoryHandlers'
 
-const handlers: RestHandler<MockedRequest<DefaultBodyType>>[] = [].concat(
-  clusterDetails,
-  dbAnalysisHistory,
-)
+const handlers: HttpHandler[] = [...clusterDetails, ...dbAnalysisHistory]
 export default handlers

redisinsight/ui/src/mocks/handlers/app/featureHandlers.ts

@@ -1,4 +1,4 @@
-import { rest, RestHandler } from 'msw'
+import { http, HttpHandler, HttpResponse } from 'msw'
 import { ApiEndpoints } from 'uiSrc/constants'
 import { getMswURL } from 'uiSrc/utils/test-utils'
 
@@ -92,12 +92,13 @@ export const FEATURES_DATA_MOCK = {
   },
 }
 
-const handlers: RestHandler[] = [
+const handlers: HttpHandler[] = [
   // get features
-  rest.get<(typeof FEATURES_DATA_MOCK)[]>(
+  http.get<any, (typeof FEATURES_DATA_MOCK)[]>(
     getMswURL(ApiEndpoints.FEATURES),
-    async (_req, res, ctx) =>
-      res(ctx.status(200), ctx.json(FEATURES_DATA_MOCK)),
+    async () => {
+      return HttpResponse.json(FEATURES_DATA_MOCK, { status: 200 })
+    },
   ),
 ]
 

redisinsight/ui/src/mocks/handlers/app/index.ts

@@ -1,12 +1,8 @@
-import { DefaultBodyType, MockedRequest, RestHandler } from 'msw'
+import { HttpHandler } from 'msw'
 
 import info from './infoHandlers'
 import telemetry from './telemetryHandlers'
 import featureHandlers from './featureHandlers'
 
-const handlers: RestHandler<MockedRequest<DefaultBodyType>>[] = [].concat(
-  info,
-  telemetry,
-  featureHandlers,
-)
+const handlers: HttpHandler[] = [...info, ...telemetry, ...featureHandlers]
 export default handlers

redisinsight/ui/src/mocks/handlers/app/infoHandlers.ts

@@ -1,4 +1,4 @@
-import { rest, RestHandler } from 'msw'
+import { http, HttpHandler, HttpResponse } from 'msw'
 import { ApiEndpoints } from 'uiSrc/constants'
 import { getMswURL } from 'uiSrc/utils/test-utils'
 import { Database as DatabaseInstanceResponse } from 'apiSrc/modules/database/models/database'
@@ -11,12 +11,13 @@ export const APP_INFO_DATA_MOCK = {
   buildType: 'ELECTRON',
 }
 
-const handlers: RestHandler[] = [
+const handlers: HttpHandler[] = [
   // fetchServerInfo
-  rest.get<DatabaseInstanceResponse[]>(
+  http.get<any, DatabaseInstanceResponse[]>(
     getMswURL(ApiEndpoints.INFO),
-    async (_req, res, ctx) =>
-      res(ctx.status(200), ctx.json(APP_INFO_DATA_MOCK)),
+    async () => {
+      return HttpResponse.json(APP_INFO_DATA_MOCK, { status: 200 })
+    },
   ),
 ]
 

redisinsight/ui/src/mocks/handlers/app/telemetryHandlers.ts

@@ -1,18 +1,16 @@
-import { rest, RestHandler } from 'msw'
+import { http, HttpHandler, HttpResponse } from 'msw'
 import { ApiEndpoints } from 'uiSrc/constants'
 import { getMswURL } from 'uiSrc/utils/test-utils'
 
-const handlers: RestHandler[] = [
+const handlers: HttpHandler[] = [
   // sendEventTelemetry
-  rest.post(
-    getMswURL(ApiEndpoints.ANALYTICS_SEND_EVENT),
-    async (req, res, ctx) => res(ctx.status(200)),
-  ),
+  http.post(getMswURL(ApiEndpoints.ANALYTICS_SEND_EVENT), async () => {
+    return HttpResponse.text('', { status: 200 })
+  }),
   // sendPageViewTelemetry
-  rest.post(
-    getMswURL(ApiEndpoints.ANALYTICS_SEND_PAGE),
-    async (req, res, ctx) => res(ctx.status(200)),
-  ),
+  http.post(getMswURL(ApiEndpoints.ANALYTICS_SEND_PAGE), async () => {
+    return HttpResponse.text('', { status: 200 })
+  }),
 ]
 
 export default handlers

redisinsight/ui/src/mocks/handlers/browser/bulkActionsHandlers.ts

@@ -1,21 +1,24 @@
-import { rest, RestHandler } from 'msw'
+import { http, HttpHandler, HttpResponse } from 'msw'
 import { ApiEndpoints } from 'uiSrc/constants'
 import { getMswURL } from 'uiSrc/utils/test-utils'
 import { getUrl } from 'uiSrc/utils'
 import { IBulkActionOverview } from 'uiSrc/slices/interfaces'
 import { bulkActionOverviewFactory } from 'uiSrc/mocks/factories/browser/bulkActions/bulkActionOverview.factory'
 import { INSTANCE_ID_MOCK } from '../instances/instancesHandlers'
 
-const handlers: RestHandler[] = [
-  rest.post<IBulkActionOverview>(
+const handlers: HttpHandler[] = [
+  http.post<any, IBulkActionOverview>(
     getMswURL(
       getUrl(
         INSTANCE_ID_MOCK,
         ApiEndpoints.BULK_ACTIONS_IMPORT_VECTOR_COLLECTION,
       ),
     ),
-    async (_req, res, ctx) =>
-      res(ctx.status(200), ctx.json(bulkActionOverviewFactory.build())),
+    async () => {
+      return HttpResponse.json(bulkActionOverviewFactory.build(), {
+        status: 200,
+      })
+    },
   ),
 ]
 

redisinsight/ui/src/mocks/handlers/browser/index.ts

@@ -1,10 +1,7 @@
-import { DefaultBodyType, MockedRequest, RestHandler } from 'msw'
+import { HttpHandler } from 'msw'
 
 import redisearch from './redisearchHandlers'
 import bulkActions from './bulkActionsHandlers'
 
-const handlers: RestHandler<MockedRequest<DefaultBodyType>>[] = [].concat(
-  redisearch,
-  bulkActions,
-)
+const handlers: HttpHandler[] = [...redisearch, ...bulkActions]
 export default handlers

redisinsight/ui/src/mocks/handlers/browser/redisearchHandlers.ts

@@ -1,4 +1,4 @@
-import { rest, RestHandler } from 'msw'
+import { http, HttpHandler, HttpResponse } from 'msw'
 import { ApiEndpoints } from 'uiSrc/constants'
 import { getMswURL } from 'uiSrc/utils/test-utils'
 import { getUrl, stringToBuffer } from 'uiSrc/utils'
@@ -16,21 +16,25 @@ export const REDISEARCH_LIST_DATA_MOCK = {
   ),
 }
 
-const handlers: RestHandler[] = [
+const handlers: HttpHandler[] = [
   // fetchRedisearchListAction
-  rest.get<ListRedisearchIndexesResponse>(
+  http.get<any, ListRedisearchIndexesResponse>(
     getMswURL(getUrl(INSTANCE_ID_MOCK, ApiEndpoints.REDISEARCH)),
-    async (_req, res, ctx) =>
-      res(ctx.status(200), ctx.json(REDISEARCH_LIST_DATA_MOCK)),
+    async () => {
+      return HttpResponse.json(REDISEARCH_LIST_DATA_MOCK, { status: 200 })
+    },
   ),
-  rest.post<IndexInfoDto>(
+  http.post<any, IndexInfoDto>(
     getMswURL(getUrl(INSTANCE_ID_MOCK, ApiEndpoints.REDISEARCH_INFO)),
-    async (_req, res, ctx) =>
-      res(ctx.status(200), ctx.json(indexInfoFactory.build())),
+    async () => {
+      return HttpResponse.json(indexInfoFactory.build(), { status: 200 })
+    },
   ),
-  rest.delete(
+  http.delete(
     getMswURL(getUrl(INSTANCE_ID_MOCK, ApiEndpoints.REDISEARCH)),
-    async (_req, res, ctx) => res(ctx.status(204)),
+    async () => {
+      return HttpResponse.text('', { status: 204 })
+    },
   ),
 ]
 

redisinsight/ui/src/mocks/handlers/content/createRedisButtonsHandlers.ts

@@ -1,16 +1,15 @@
-import { rest, RestHandler } from 'msw'
+import { http, HttpHandler, HttpResponse } from 'msw'
 import { ApiEndpoints } from 'uiSrc/constants'
 import { ConnectionType } from 'uiSrc/slices/interfaces'
 import { getMswResourceURL } from 'uiSrc/utils/test-utils'
 
-const handlers: RestHandler[] = [
+const handlers: HttpHandler[] = [
   // fetchContentAction
-  rest.get(
+  http.get(
     getMswResourceURL(ApiEndpoints.CONTENT_CREATE_DATABASE),
-    async (req, res, ctx) =>
-      res(
-        ctx.status(200),
-        ctx.json([
+    async () => {
+      return HttpResponse.json(
+        [
           {
             id: 'e37cc441-a4f2-402c-8bdb-fc2413cbbaff',
             host: 'localhost',
@@ -64,8 +63,10 @@ const handlers: RestHandler[] = [
               name: 'mymaster',
             },
           },
-        ]),
-      ),
+        ],
+        { status: 200 },
+      )
+    },
   ),
 ]
 

redisinsight/ui/src/mocks/handlers/content/index.ts

@@ -1,6 +1,5 @@
-import { DefaultBodyType, MockedRequest, RestHandler } from 'msw'
-
+import { HttpHandler } from 'msw'
 import crb from './createRedisButtonsHandlers'
 
-const handlers: RestHandler<MockedRequest>[] = [].concat(crb)
+const handlers: HttpHandler[] = [...crb]
 export default handlers

redisinsight/ui/src/mocks/handlers/index.ts

@@ -1,4 +1,3 @@
-import { MockedRequest, RestHandler } from 'msw'
 import instances from './instances'
 import content from './content'
 import app from './app'
@@ -12,16 +11,16 @@ import user from './user'
 import workbench from './workbench'
 
 // @ts-ignore
-export const handlers: RestHandler<MockedRequest>[] = [].concat(
-  instances,
-  content,
-  app,
-  analytics,
-  browser,
-  recommendations,
-  cloud,
-  tutorials,
-  rdi,
-  user,
-  workbench,
-)
+export const handlers = [
+  ...instances,
+  ...content,
+  ...app,
+  ...analytics,
+  ...browser,
+  ...recommendations,
+  ...cloud,
+  ...tutorials,
+  ...rdi,
+  ...user,
+  ...workbench,
+]