fix test runner (#5069)

* update ts and msw, fix tests

Co-authored-by: Artsiom Kharuzhenka <[email protected]>

Author: pd-redis

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/auto-refresh/AutoRefresh.spec.tsx

@@ -63,7 +63,7 @@ describe('AutoRefresh', () => {
     render(<AutoRefresh {...instance(mockedProps)} onRefresh={onRefresh} />)
 
     fireEvent.click(screen.getByTestId('refresh-btn'))
-    expect(onRefresh).toBeCalled()
+    expect(onRefresh).toHaveBeenCalled()
   })
 
   it('refresh text should contain "Last refresh" time with disabled auto-refresh', async () => {
@@ -170,22 +170,23 @@ describe('AutoRefresh', () => {
       })
       expect(screen.getByTestId(INLINE_ITEM_EDITOR)).toHaveValue('1')
 
-      screen.getByTestId(/apply-btn/).click()
+      await userEvent.click(screen.getByTestId(/apply-btn/))
+      // screen.getByTestId(/apply-btn/).click()
 
       await act(async () => {
         await new Promise((r) => setTimeout(r, 1300))
       })
-      expect(onRefresh).toBeCalledTimes(1)
+      expect(onRefresh).toHaveBeenCalledTimes(1)
 
       await act(async () => {
         await new Promise((r) => setTimeout(r, 1300))
       })
-      expect(onRefresh).toBeCalledTimes(2)
+      expect(onRefresh).toHaveBeenCalledTimes(2)
 
       await act(async () => {
         await new Promise((r) => setTimeout(r, 1300))
       })
-      expect(onRefresh).toBeCalledTimes(3)
+      expect(onRefresh).toHaveBeenCalledTimes(3)
     })
 
     it('should respect minimumRefreshRate when setting refresh rate', async () => {
@@ -279,7 +280,7 @@ describe('AutoRefresh', () => {
 
     screen.getByTestId(/apply-btn/).click()
 
-    await act(() => {
+    await act(async () => {
       rerender(
         <AutoRefresh
           {...instance(mockedProps)}
@@ -292,14 +293,14 @@ describe('AutoRefresh', () => {
     await act(async () => {
       await new Promise((r) => setTimeout(r, 1300))
     })
-    expect(onRefresh).toBeCalledTimes(0)
+    expect(onRefresh).toHaveBeenCalledTimes(0)
 
     await act(async () => {
       await new Promise((r) => setTimeout(r, 1300))
     })
-    expect(onRefresh).toBeCalledTimes(0)
+    expect(onRefresh).toHaveBeenCalledTimes(0)
 
-    await act(() => {
+    await act(async () => {
       rerender(
         <AutoRefresh
           {...instance(mockedProps)}
@@ -312,7 +313,7 @@ describe('AutoRefresh', () => {
     await act(async () => {
       await new Promise((r) => setTimeout(r, 1300))
     })
-    expect(onRefresh).toBeCalledTimes(1)
+    expect(onRefresh).toHaveBeenCalledTimes(1)
   })
 
   it('refresh tooltip text should contain disabled refresh button reason message when button disabled', async () => {

redisinsight/ui/src/components/base/forms/FormField.ts

@@ -1,7 +1,12 @@
 import React from 'react'
-import { cloneDeep } from 'lodash'
 import reactRouterDom from 'react-router-dom'
-import { act, cleanup, mockedStore, render } from 'uiSrc/utils/test-utils'
+import {
+  act,
+  cleanup,
+  createMockedStore,
+  mockedStore,
+  render,
+} from 'uiSrc/utils/test-utils'
 
 import {
   appRedirectionSelector,
@@ -45,13 +50,15 @@ jest.mock('uiSrc/utils/routing', () => ({
 let store: typeof mockedStore
 beforeEach(() => {
   cleanup()
-  store = cloneDeep(mockedStore)
+  store = createMockedStore()
   store.clearActions()
 })
 
 const fromUrl =
   'redisinsight://databases/connect?redisUrl=redis://default:password@localhost:6379&databaseAlias=My Name&redirect=workbench?guidePath=/quick-guides/document/introduction.md&cloudBdbId=1232&subscriptionType=fixed&planMemoryLimit=30&memoryLimitMeasurementUnit=mb&free=true&target=_blank'
 
+const renderGlobalUrlHandler = () => render(<GlobalUrlHandler />, { store })
+
 describe('GlobalUrlHandler', () => {
   beforeEach(() => {
     reactRouterDom.useLocation = jest
@@ -60,11 +67,11 @@ describe('GlobalUrlHandler', () => {
   })
 
   it('should render', () => {
-    expect(render(<GlobalUrlHandler />)).toBeTruthy()
+    expect(renderGlobalUrlHandler()).toBeTruthy()
   })
 
   it('should not call any actions by default', () => {
-    render(<GlobalUrlHandler />)
+    renderGlobalUrlHandler()
     expect(store.getActions()).toEqual([])
   })
 
@@ -77,7 +84,7 @@ describe('GlobalUrlHandler', () => {
       .mockReturnValueOnce({ replace: replaceMock })
     reactRouterDom.useLocation = jest.fn().mockReturnValueOnce({ search })
 
-    render(<GlobalUrlHandler />)
+    renderGlobalUrlHandler()
     expect(store.getActions()).toEqual([
       setFromUrl(decodeURIComponent(fromUrl)),
     ])
@@ -99,7 +106,7 @@ describe('GlobalUrlHandler', () => {
     ;(appRedirectionSelector as jest.Mock).mockReturnValueOnce({ fromUrl })
 
     await act(async () => {
-      render(<GlobalUrlHandler />)
+      renderGlobalUrlHandler()
     })
 
     const actionUrl = new URL(fromUrl)
@@ -130,7 +137,7 @@ describe('GlobalUrlHandler', () => {
     ;(appRedirectionSelector as jest.Mock).mockReturnValueOnce({ fromUrl })
 
     await act(async () => {
-      render(<GlobalUrlHandler />)
+      renderGlobalUrlHandler()
     })
 
     const actionUrl = new URL(fromUrl)
@@ -158,9 +165,7 @@ describe('GlobalUrlHandler', () => {
       fromUrl,
     })
 
-    await act(() => {
-      render(<GlobalUrlHandler />)
-    })
+    renderGlobalUrlHandler()
 
     const actionUrl = new URL(fromUrl)
     const fromParams = new URLSearchParams(actionUrl.search)
@@ -194,7 +199,7 @@ describe('GlobalUrlHandler', () => {
     })
 
     await act(() => {
-      render(<GlobalUrlHandler />)
+      renderGlobalUrlHandler()
     })
 
     const actionUrl = new URL(url)
@@ -246,7 +251,7 @@ describe('GlobalUrlHandler', () => {
     })
 
     await act(() => {
-      render(<GlobalUrlHandler />)
+      renderGlobalUrlHandler()
     })
 
     const actionUrl = new URL(url)
@@ -296,7 +301,7 @@ describe('GlobalUrlHandler', () => {
     })
 
     await act(() => {
-      render(<GlobalUrlHandler />)
+      renderGlobalUrlHandler()
     })
 
     const actionUrl = new URL(url)
@@ -347,7 +352,7 @@ describe('GlobalUrlHandler', () => {
     })
 
     await act(() => {
-      render(<GlobalUrlHandler />)
+      renderGlobalUrlHandler()
     })
 
     const actionUrl = new URL(url)
@@ -398,7 +403,7 @@ describe('GlobalUrlHandler', () => {
     })
 
     await act(() => {
-      render(<GlobalUrlHandler />)
+      renderGlobalUrlHandler()
     })
 
     const actionUrl = new URL(url)

redisinsight/ui/src/components/global-url-handler/GlobalUrlHandler.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/components/notifications/components/infinite-messages/InfiniteMessages.spec.tsx

@@ -1,12 +1,6 @@
 import React from 'react'
 import { cloneDeep } from 'lodash'
-import {
-  act,
-  cleanup,
-  fireEvent,
-  mockedStore,
-  render,
-} from 'uiSrc/utils/test-utils'
+import { cleanup, mockedStore, render, userEvent } from 'uiSrc/utils/test-utils'
 import {
   getRedisModulesSummary,
   sendEventTelemetry,
@@ -15,6 +9,7 @@ import {
 import {
   freeInstancesSelector,
   setDefaultInstance,
+  setDefaultInstanceSuccess,
 } from 'uiSrc/slices/instances/instances'
 import { OAuthSocialSource } from 'uiSrc/slices/interfaces'
 import { setCapability } from 'uiSrc/slices/app/context'
@@ -63,10 +58,8 @@ describe('OAuthConnectFreeDb', () => {
 
     const { queryByTestId } = render(<OAuthConnectFreeDb id="providedId" />)
 
-    await act(() =>
-      fireEvent.click(
-        queryByTestId('connect-free-db-btn') as HTMLButtonElement,
-      ),
+    await userEvent.click(
+      queryByTestId('connect-free-db-btn') as HTMLButtonElement,
     )
 
     expect(sendEventTelemetry).toHaveBeenCalledWith({
@@ -86,6 +79,7 @@ describe('OAuthConnectFreeDb', () => {
         tutorialPopoverShown: false,
       }),
       setDefaultInstance(),
+      setDefaultInstanceSuccess(),
     ]
     expect(store.getActions()).toEqual(expectedActions)
   })

redisinsight/ui/src/components/oauth/oauth-connect-free-db/OAuthConnectFreeDb.spec.tsx

@@ -3,6 +3,7 @@ import { cloneDeep } from 'lodash'
 import {
   act,
   cleanup,
+  expectActionsToContain,
   fireEvent,
   mockedStore,
   render,
@@ -86,7 +87,7 @@ describe('OAuthCreateDb', () => {
 
     expect(screen.getByTestId('sso-email')).toBeInTheDocument()
 
-    expect(sendEventTelemetry).toBeCalledWith({
+    expect(sendEventTelemetry).toHaveBeenCalledWith({
       event: TelemetryEvent.CLOUD_SIGN_IN_SOCIAL_ACCOUNT_SELECTED,
       eventData: {
         accountOption: OAuthStrategy.SSO,
@@ -107,7 +108,7 @@ describe('OAuthCreateDb', () => {
       fireEvent.click(screen.getByTestId('btn-submit'))
     })
 
-    expect(sendEventTelemetry).toBeCalledWith({
+    expect(sendEventTelemetry).toHaveBeenCalledWith({
       event: TelemetryEvent.CLOUD_SIGN_IN_SSO_OPTION_PROCEEDED,
       eventData: {
         action: OAuthSocialAction.Create,
@@ -124,7 +125,7 @@ describe('OAuthCreateDb', () => {
 
     fireEvent.click(screen.getByTestId('google-oauth'))
 
-    expect(sendEventTelemetry).toBeCalledWith({
+    expect(sendEventTelemetry).toHaveBeenCalledWith({
       event: TelemetryEvent.CLOUD_SIGN_IN_SOCIAL_ACCOUNT_SELECTED,
       eventData: {
         accountOption: OAuthStrategy.Google,
@@ -174,7 +175,7 @@ describe('OAuthCreateDb', () => {
     expect(store.getActions()).toEqual(expectedActions)
   })
 
-  it('should call proper actions after click create without recommened settings', async () => {
+  it('should call proper actions after click create without recommended settings', async () => {
     ;(oauthCloudUserSelector as jest.Mock).mockReturnValue({ data: {} })
     render(<OAuthCreateDb />)
 
@@ -193,6 +194,6 @@ describe('OAuthCreateDb', () => {
       setSocialDialogState(null),
       getPlans(),
     ]
-    expect(store.getActions()).toEqual(expectedActions)
+    expectActionsToContain(store.getActions(), expectedActions)
   })
 })