chore: Update layouts/BaseLayout tests to Vitest

src/layouts/BaseLayout/BaseLayout.spec.tsx → src/layouts/BaseLayout/BaseLayout.test.tsx

@@ -1,8 +1,9 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { render, screen, waitFor } from '@testing-library/react'
-import { graphql, rest } from 'msw'
-import { setupServer } from 'msw/node'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+import { graphql, http, HttpResponse } from 'msw2'
+import { setupServer } from 'msw2/node'
 import { MemoryRouter, Route, useLocation } from 'react-router-dom'
+import { type Mock } from 'vitest'
 
 import config from 'config'
 
@@ -12,16 +13,24 @@ import { useInternalUser, useUser } from 'services/user'
 
 import BaseLayout from './BaseLayout'
 
-jest.mock('services/image')
-const mockedUseImage = useImage as jest.Mock
-jest.mock('services/impersonate')
-const mockedUseImpersonate = useImpersonate as jest.Mock
-jest.mock('shared/GlobalTopBanners', () => () => 'GlobalTopBanners')
-jest.mock('./InstallationHelpBanner', () => () => 'InstallationHelpBanner')
-jest.mock('pages/TermsOfService', () => () => 'TermsOfService')
-jest.mock('pages/DefaultOrgSelector', () => () => 'DefaultOrgSelector')
-jest.mock('layouts/Header', () => () => 'Header')
-jest.mock('layouts/Footer', () => () => 'Footer')
+vi.mock('services/image')
+const mockedUseImage = useImage as Mock
+
+vi.mock('services/impersonate')
+const mockedUseImpersonate = useImpersonate as Mock
+
+vi.mock('shared/GlobalTopBanners', () => ({
+  default: () => 'GlobalTopBanners',
+}))
+vi.mock('./InstallationHelpBanner', () => ({
+  default: () => 'InstallationHelpBanner',
+}))
+vi.mock('pages/TermsOfService', () => ({ default: () => 'TermsOfService' }))
+vi.mock('pages/DefaultOrgSelector', () => ({
+  default: () => 'DefaultOrgSelector',
+}))
+vi.mock('layouts/Header', () => ({ default: () => 'Header' }))
+vi.mock('layouts/Footer', () => ({ default: () => 'Footer' }))
 
 const mockOwner = {
   owner: {
@@ -183,7 +192,8 @@ beforeAll(() => {
 afterEach(() => {
   queryClient.clear()
   server.resetHandlers()
-  jest.resetAllMocks()
+  vi.clearAllMocks()
+  cleanup()
 })
 
 afterAll(() => {
@@ -212,49 +222,51 @@ describe('BaseLayout', () => {
     mockedUseImpersonate.mockReturnValue({ isImpersonating })
 
     server.use(
-      rest.get('/internal/user', (req, res, ctx) => {
-        return res(ctx.status(200), ctx.json(internalUser))
+      http.get('/internal/user', (info) => {
+        return HttpResponse.json(internalUser, { status: 200 })
+      }),
+      graphql.query('CurrentUser', (info) => {
+        return HttpResponse.json({ data: currentUser }, { status: 200 })
+      }),
+      graphql.query('DetailOwner', (info) => {
+        return HttpResponse.json({ data: mockOwner }, { status: 200 })
+      }),
+      http.get('/internal/:provider/:owner/account-details', (info) => {
+        return HttpResponse.json({}, { status: 200 })
       }),
-      graphql.query('CurrentUser', (_, res, ctx) =>
-        res(ctx.status(200), ctx.data(currentUser))
-      ),
-      graphql.query('DetailOwner', (_, res, ctx) =>
-        res(ctx.status(200), ctx.data(mockOwner))
-      ),
-      rest.get('/internal/:provider/:owner/account-details', (_, res, ctx) =>
-        res(ctx.status(200), ctx.json({}))
-      ),
       // Self hosted only
-      graphql.query('HasAdmins', (_, res, ctx) =>
-        res(ctx.status(200), ctx.data({}))
-      ),
-      graphql.query('Seats', (_, res, ctx) =>
-        res(ctx.status(200), ctx.data({}))
-      ),
-      graphql.query('TermsOfService', (_, res, ctx) =>
-        res(ctx.status(200), ctx.data({}))
-      ),
-      graphql.query('UseMyOrganizations', (_, res, ctx) =>
-        res(
-          ctx.status(200),
-          ctx.data({
-            myOrganizationsData: {
-              me: {
-                myOrganizations: {
-                  edges: [],
-                  pageInfo: { hasNextPage: false, endCursor: 'MTI=' },
+      graphql.query('HasAdmins', (info) => {
+        return HttpResponse.json({ data: {} }, { status: 200 })
+      }),
+      graphql.query('Seats', (info) => {
+        return HttpResponse.json({ data: {} }, { status: 200 })
+      }),
+      graphql.query('TermsOfService', (info) => {
+        return HttpResponse.json({ data: {} }, { status: 200 })
+      }),
+      graphql.query('UseMyOrganizations', (info) => {
+        return HttpResponse.json(
+          {
+            data: {
+              myOrganizationsData: {
+                me: {
+                  myOrganizations: {
+                    edges: [],
+                    pageInfo: { hasNextPage: false, endCursor: 'MTI=' },
+                  },
                 },
               },
             },
-          })
+          },
+          { status: 200 }
         )
-      ),
-      graphql.mutation('updateDefaultOrganization', (req, res, ctx) =>
-        res(ctx.status(200), ctx.data({}))
-      ),
-      rest.get('/internal/users/current', (_, res, ctx) =>
-        res(ctx.status(200), ctx.json({}))
-      )
+      }),
+      graphql.mutation('updateDefaultOrganization', (info) => {
+        return HttpResponse.json({ data: {} }, { status: 200 })
+      }),
+      http.get('/internal/users/current', (info) => {
+        return HttpResponse.json({}, { status: 200 })
+      })
     )
   }
 

src/layouts/BaseLayout/InstallationHelpBanner/InstallationHelpBanner.spec.jsx → src/layouts/BaseLayout/InstallationHelpBanner/InstallationHelpBanner.test.jsx

@@ -1,9 +1,10 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { render, screen, waitFor } from '@testing-library/react'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { graphql } from 'msw'
-import { setupServer } from 'msw/node'
+import { graphql, HttpResponse } from 'msw2'
+import { setupServer } from 'msw2/node'
 import { MemoryRouter, Route, Switch } from 'react-router-dom'
+import { vi } from 'vitest'
 
 import InstallationHelpBanner from './InstallationHelpBanner'
 
@@ -16,10 +17,13 @@ const server = setupServer()
 beforeAll(() => {
   server.listen()
 })
+
 beforeEach(() => {
+  cleanup()
   queryClient.clear()
   server.resetHandlers()
 })
+
 afterAll(() => {
   server.close()
 })
@@ -40,34 +44,38 @@ const wrapper =
 
 describe('InstallationHelpBanner', () => {
   function setup() {
-    const mutation = jest.fn()
+    const mutation = vi.fn()
 
-    const mockSetItem = jest.spyOn(window.localStorage.__proto__, 'setItem')
-    const mockGetItem = jest.spyOn(window.localStorage.__proto__, 'getItem')
+    const mockSetItem = vi.spyOn(window.localStorage.__proto__, 'setItem')
+    const mockGetItem = vi.spyOn(window.localStorage.__proto__, 'getItem')
 
     server.use(
-      graphql.query('IsSyncing', (req, res, ctx) => {
-        return res(
-          ctx.status(200),
-          ctx.data({
-            me: {
-              isSyncing: false,
+      graphql.query('IsSyncing', (info) => {
+        return HttpResponse.json(
+          {
+            data: {
+              me: {
+                isSyncing: false,
+              },
             },
-          })
+          },
+          { status: 200 }
         )
       }),
-      graphql.mutation('SyncData', (req, res, ctx) => {
-        mutation(req.variables)
-
-        return res(
-          ctx.status(200),
-          ctx.data({
-            syncWithGitProvider: {
-              me: {
-                isSyncing: true,
+      graphql.mutation('SyncData', (info) => {
+        mutation(info.variables)
+
+        return HttpResponse.json(
+          {
+            data: {
+              syncWithGitProvider: {
+                me: {
+                  isSyncing: true,
+                },
               },
             },
-          })
+          },
+          { status: 200 }
         )
       })
     )
@@ -146,9 +154,9 @@ describe('InstallationHelpBanner', () => {
         wrapper: wrapper(),
       })
 
-      const dismissButton = await screen.findByRole('button', {
-        name: 'x.svg',
-      })
+      const dismissButton = await screen.findByTestId(
+        'dismiss-install-help-banner'
+      )
       expect(dismissButton).toBeInTheDocument()
     })
 
@@ -161,9 +169,9 @@ describe('InstallationHelpBanner', () => {
         wrapper: wrapper(),
       })
 
-      const dismissButton = await screen.findByRole('button', {
-        name: 'x.svg',
-      })
+      const dismissButton = await screen.findByTestId(
+        'dismiss-install-help-banner'
+      )
       expect(dismissButton).toBeInTheDocument()
       await user.click(dismissButton)
 
@@ -184,9 +192,9 @@ describe('InstallationHelpBanner', () => {
         wrapper: wrapper(),
       })
 
-      const dismissButton = await screen.findByRole('button', {
-        name: 'x.svg',
-      })
+      const dismissButton = await screen.findByTestId(
+        'dismiss-install-help-banner'
+      )
       expect(dismissButton).toBeInTheDocument()
       await user.click(dismissButton)
 

src/layouts/BaseLayout/hooks/useUserAccessGate.spec.tsx → src/layouts/BaseLayout/hooks/useUserAccessGate.test.tsx

@@ -1,7 +1,7 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { renderHook, waitFor } from '@testing-library/react'
-import { graphql, rest } from 'msw'
-import { setupServer } from 'msw/node'
+import { cleanup, renderHook, waitFor } from '@testing-library/react'
+import { delay, graphql, http, HttpResponse } from 'msw2'
+import { setupServer } from 'msw2/node'
 import { MemoryRouter, Route } from 'react-router-dom'
 
 import config from 'config'
@@ -10,7 +10,7 @@ import { User } from 'services/user'
 
 import { useUserAccessGate } from './useUserAccessGate'
 
-jest.spyOn(console, 'error')
+vi.spyOn(console, 'error')
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -221,6 +221,7 @@ beforeAll(() => {
 })
 
 beforeEach(() => {
+  cleanup()
   queryClient.clear()
   server.resetHandlers()
 })
@@ -251,33 +252,33 @@ describe('useUserAccessGate', () => {
       internalUser: internalUserHasSyncedProviders,
     }
   ) {
-    const mockMutationVariables = jest.fn()
+    const mockMutationVariables = vi.fn()
 
     server.use(
-      rest.get('/internal/user', (req, res, ctx) => {
-        return res(ctx.status(200), ctx.json(internalUser))
+      http.get('/internal/user', (info) => {
+        return HttpResponse.json(internalUser, { status: 200 })
       }),
 
-      graphql.query('CurrentUser', (req, res, ctx) => {
-        return res(ctx.status(200), ctx.data(user))
+      graphql.query('CurrentUser', (info) => {
+        return HttpResponse.json({ data: user }, { status: 200 })
       }),
-      graphql.mutation('updateDefaultOrganization', (req, res, ctx) => {
-        mockMutationVariables(req.variables)
+      graphql.mutation('updateDefaultOrganization', async (info) => {
+        mockMutationVariables(info.variables)
 
         if (delayMutation) {
-          return res(ctx.delay(1000), ctx.status(200), ctx.data({}))
+          await delay(1000)
+          return HttpResponse.json({}, { status: 200 })
         }
 
-        return res(
-          ctx.status(200),
-          ctx.data({
+        return HttpResponse.json({
+          data: {
             updateDefaultOrganization: {
               defaultOrg: {
                 username: 'criticalRole',
               },
             },
-          })
-        )
+          },
+        })
       })
     )
 
@@ -286,7 +287,7 @@ describe('useUserAccessGate', () => {
     }
   }
 
-  afterEach(() => jest.resetAllMocks)
+  afterEach(() => vi.resetAllMocks)
 
   describe.each([
     [