chore: Update services/selfHosted tests to Vitest (#3307)

src/services/selfHosted/useSelfHostedCurrentUser.spec.js → src/services/selfHosted/useSelfHostedCurrentUser.test.jsx

@@ -1,7 +1,7 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { renderHook, waitFor } from '@testing-library/react'
-import { rest } from 'msw'
-import { setupServer } from 'msw/node'
+import { http, HttpResponse } from 'msw2'
+import { setupServer } from 'msw2/node'
 import { MemoryRouter, Route } from 'react-router-dom'
 
 import { useSelfHostedCurrentUser } from './useSelfHostedCurrentUser'
@@ -27,36 +27,36 @@ const wrapper = ({ children }) => (
 )
 
 const server = setupServer()
-beforeAll(() => server.listen())
+beforeAll(() => {
+  server.listen()
+})
+
 beforeEach(() => {
   server.resetHandlers()
   queryClient.clear()
 })
-afterAll(() => server.close())
+
+afterAll(() => {
+  server.close()
+})
 
 describe('useSelfHostedCurrentUser', () => {
   function setup() {
     server.use(
-      rest.get('/internal/users/current', (req, res, ctx) =>
-        res(ctx.status(200), ctx.json(user))
-      )
+      http.get('/internal/users/current', (info) => {
+        return HttpResponse.json(user)
+      })
     )
   }
 
   describe('when called', () => {
     describe('when data is loaded', () => {
-      beforeEach(() => {
-        setup()
-      })
-
       it('returns the user info', async () => {
+        setup()
         const { result } = renderHook(() => useSelfHostedCurrentUser(), {
           wrapper,
         })
 
-        await waitFor(() => result.current.isFetching)
-        await waitFor(() => !result.current.isFetching)
-
         await waitFor(() => expect(result.current.data).toEqual(user))
       })
     })

src/services/selfHosted/useSelfHostedHasAdmins.spec.js → src/services/selfHosted/useSelfHostedHasAdmins.test.jsx

@@ -1,7 +1,7 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { renderHook, waitFor } from '@testing-library/react'
-import { graphql } from 'msw'
-import { setupServer } from 'msw/node'
+import { graphql, HttpResponse } from 'msw2'
+import { setupServer } from 'msw2/node'
 
 import { useSelfHostedHasAdmins } from './useSelfHostedHasAdmins'
 
@@ -13,55 +13,36 @@ const wrapper = ({ children }) => (
 )
 
 const server = setupServer()
-beforeAll(() => server.listen())
+beforeAll(() => {
+  server.listen()
+})
+
 beforeEach(() => {
   server.resetHandlers()
   queryClient.clear()
 })
-afterAll(() => server.close())
+
+afterAll(() => {
+  server.close()
+})
 
 describe('useSelfHostedHasAdmins', () => {
   function setup({ data }) {
     server.use(
-      graphql.query('HasAdmins', (req, res, ctx) =>
-        res(ctx.status(200), ctx.data(data))
-      )
+      graphql.query('HasAdmins', (info) => {
+        return HttpResponse.json({ data })
+      })
     )
   }
 
   describe('when called', () => {
-    beforeEach(() => {
-      setup({ data: { config: { hasAdmins: true } } })
-    })
-
-    it('returns isLoading', () => {
-      const { result } = renderHook(
-        () => useSelfHostedHasAdmins({ provider: 'gl' }),
-        {
-          wrapper,
-        }
-      )
-
-      expect(result.current.isLoading).toBeTruthy()
-    })
-  })
-
-  describe('when data is loaded', () => {
-    beforeEach(async () => {
-      setup({ data: { config: { hasAdmins: true } } })
-    })
-
     it('returns the user info', async () => {
+      setup({ data: { config: { hasAdmins: true } } })
       const { result } = renderHook(
         () => useSelfHostedHasAdmins({ provider: 'gl' }),
-        {
-          wrapper,
-        }
+        { wrapper }
       )
 
-      await waitFor(() => result.current.isFetching)
-      await waitFor(() => !result.current.isFetching)
-
       await waitFor(() => expect(result.current.data).toEqual(true))
     })
   })

src/services/selfHosted/useSelfHostedSeatsAndLicense.spec.tsx → src/services/selfHosted/useSelfHostedSeatsAndLicense.test.tsx

@@ -1,17 +1,16 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { renderHook, waitFor } from '@testing-library/react'
-import { graphql } from 'msw'
-import { setupServer } from 'msw/node'
+import { graphql, HttpResponse } from 'msw2'
+import { setupServer } from 'msw2/node'
+import { type MockInstance } from 'vitest'
 
 import { useSelfHostedSeatsAndLicense } from './useSelfHostedSeatsAndLicense'
 
 const mockSelfHostedLicense = {
   config: {
     seatsUsed: 5,
     seatsLimit: 30,
-    selfHostedLicense: {
-      expirationDate: '2020-05-09T00:00:00',
-    },
+    selfHostedLicense: { expirationDate: '2020-05-09T00:00:00' },
   },
 }
 
@@ -20,12 +19,12 @@ const mockUnsuccessfulParseError = {}
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
 })
-const server = setupServer()
 
 const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
   <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
 )
 
+const server = setupServer()
 beforeAll(() => {
   server.listen()
 })
@@ -46,11 +45,11 @@ interface SetupArgs {
 describe('useSelfHostedSeatsAndLicense', () => {
   function setup({ isUnsuccessfulParseError = false }: SetupArgs) {
     server.use(
-      graphql.query('SelfHostedSeatsAndLicense', (req, res, ctx) => {
+      graphql.query('SelfHostedSeatsAndLicense', (info) => {
         if (isUnsuccessfulParseError) {
-          return res(ctx.status(200), ctx.data(mockUnsuccessfulParseError))
+          return HttpResponse.json({ data: mockUnsuccessfulParseError })
         } else {
-          return res(ctx.status(200), ctx.data(mockSelfHostedLicense))
+          return HttpResponse.json({ data: mockSelfHostedLicense })
         }
       })
     )
@@ -62,14 +61,10 @@ describe('useSelfHostedSeatsAndLicense', () => {
         it('returns the license details', async () => {
           setup({})
           const { result } = renderHook(
-            () =>
-              useSelfHostedSeatsAndLicense({
-                provider: 'gh',
-              }),
+            () => useSelfHostedSeatsAndLicense({ provider: 'gh' }),
             { wrapper }
           )
 
-          await waitFor(() => result.current.isSuccess)
           await waitFor(() =>
             expect(result.current.data).toEqual({
               seatsUsed: 5,
@@ -84,32 +79,25 @@ describe('useSelfHostedSeatsAndLicense', () => {
     })
 
     describe('unsuccessful parse of zod schema', () => {
-      beforeEach(() => {
-        jest.spyOn(console, 'error')
+      let consoleSpy: MockInstance
+      beforeAll(() => {
+        consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
       })
 
-      afterEach(() => {
-        jest.resetAllMocks()
+      afterAll(() => {
+        consoleSpy.mockRestore()
       })
 
       it('throws a 404', async () => {
         setup({ isUnsuccessfulParseError: true })
         const { result } = renderHook(
-          () =>
-            useSelfHostedSeatsAndLicense({
-              provider: 'gh',
-            }),
-          {
-            wrapper,
-          }
+          () => useSelfHostedSeatsAndLicense({ provider: 'gh' }),
+          { wrapper }
         )
 
-        await waitFor(() => expect(result.current.isError).toBeTruthy())
         await waitFor(() =>
           expect(result.current.error).toEqual(
-            expect.objectContaining({
-              status: 404,
-            })
+            expect.objectContaining({ status: 404 })
           )
         )
       })

src/services/selfHosted/useSelfHostedSeatsConfig.spec.js → src/services/selfHosted/useSelfHostedSeatsConfig.test.jsx

@@ -1,7 +1,7 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { renderHook, waitFor } from '@testing-library/react'
-import { graphql } from 'msw'
-import { setupServer } from 'msw/node'
+import { graphql, HttpResponse } from 'msw2'
+import { setupServer } from 'msw2/node'
 import { MemoryRouter, Route } from 'react-router-dom'
 
 import { useSelfHostedSeatsConfig } from './useSelfHostedSeatsConfig'
@@ -25,35 +25,35 @@ const wrapper = ({ children }) => (
 )
 
 const server = setupServer()
-beforeAll(() => server.listen())
+beforeAll(() => {
+  server.listen()
+})
+
 beforeEach(() => {
   server.resetHandlers()
   queryClient.clear()
 })
-afterAll(() => server.close())
+
+afterAll(() => {
+  server.close()
+})
 
 describe('useSelfHostedSeatsConfig', () => {
   function setup() {
     server.use(
-      graphql.query('Seats', (req, res, ctx) =>
-        res(ctx.status(200), ctx.data(mockData))
-      )
+      graphql.query('Seats', (req, res, ctx) => {
+        return HttpResponse.json({ data: mockData })
+      })
     )
   }
 
   describe('when called', () => {
-    beforeEach(() => {
-      setup()
-    })
-
     it('returns data', async () => {
+      setup()
       const { result } = renderHook(() => useSelfHostedSeatsConfig(), {
         wrapper,
       })
 
-      await waitFor(() => result.current.isFetching)
-      await waitFor(() => !result.current.isFetching)
-
       await waitFor(() =>
         expect(result.current.data).toStrictEqual({
           seatsUsed: 5,

src/services/selfHosted/useSelfHostedSettings.spec.tsx → src/services/selfHosted/useSelfHostedSettings.test.tsx

@@ -1,15 +1,15 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { renderHook, waitFor } from '@testing-library/react'
-import { graphql } from 'msw'
-import { setupServer } from 'msw/node'
+import { graphql, HttpResponse } from 'msw2'
+import { setupServer } from 'msw2/node'
 import { MemoryRouter, Route } from 'react-router-dom'
+import { type MockInstance } from 'vitest'
 
 import { useSelfHostedSettings } from './useSelfHostedSettings'
 
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
 })
-const server = setupServer()
 
 const mockResponse = {
   config: {
@@ -27,6 +27,7 @@ const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
   </QueryClientProvider>
 )
 
+const server = setupServer()
 beforeAll(() => {
   server.listen()
 })
@@ -43,11 +44,11 @@ afterAll(() => {
 describe('useSelfHostedSettings', () => {
   function setup({ invalidResponse = false }) {
     server.use(
-      graphql.query('SelfHostedSettings', (req, res, ctx) => {
+      graphql.query('SelfHostedSettings', (info) => {
         if (invalidResponse) {
-          return res(ctx.status(200), ctx.data({}))
+          return HttpResponse.json({})
         }
-        return res(ctx.status(200), ctx.data(mockResponse))
+        return HttpResponse.json({ data: mockResponse })
       })
     )
   }
@@ -57,9 +58,6 @@ describe('useSelfHostedSettings', () => {
       setup({})
       const { result } = renderHook(() => useSelfHostedSettings(), { wrapper })
 
-      await waitFor(() => result.current.isFetching)
-      await waitFor(() => !result.current.isFetching)
-
       await waitFor(() =>
         expect(result.current.data).toStrictEqual({
           planAutoActivate: true,
@@ -71,8 +69,14 @@ describe('useSelfHostedSettings', () => {
   })
 
   describe('invalid response', () => {
+    let consoleSpy: MockInstance
+
     beforeAll(() => {
-      console.error = () => {}
+      consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    })
+
+    afterAll(() => {
+      consoleSpy.mockRestore()
     })
 
     it('rejects with 404', async () => {
@@ -81,12 +85,13 @@ describe('useSelfHostedSettings', () => {
         wrapper,
       })
 
-      await waitFor(() => expect(result.current.isError).toBeTruthy())
-      expect(result.current.error).toEqual(
-        expect.objectContaining({
-          status: 404,
-          dev: 'useSelfHostedSettings - 404 schema parsing failed',
-        })
+      await waitFor(() =>
+        expect(result.current.error).toEqual(
+          expect.objectContaining({
+            status: 404,
+            dev: 'useSelfHostedSettings - 404 schema parsing failed',
+          })
+        )
       )
     })
   })