diff --git a/src/services/selfHosted/index.js b/src/services/selfHosted/index.ts
similarity index 100%
rename from src/services/selfHosted/index.js
rename to src/services/selfHosted/index.ts
diff --git a/src/services/selfHosted/useSelfHostedCurrentUser.spec.js b/src/services/selfHosted/useSelfHostedCurrentUser.test.jsx
similarity index 76%
rename from src/services/selfHosted/useSelfHostedCurrentUser.spec.js
rename to src/services/selfHosted/useSelfHostedCurrentUser.test.jsx
index 12ef216f1b..2adf79df21 100644
--- a/src/services/selfHosted/useSelfHostedCurrentUser.spec.js
+++ b/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))
       })
     })
diff --git a/src/services/selfHosted/useSelfHostedHasAdmins.spec.js b/src/services/selfHosted/useSelfHostedHasAdmins.test.jsx
similarity index 54%
rename from src/services/selfHosted/useSelfHostedHasAdmins.spec.js
rename to src/services/selfHosted/useSelfHostedHasAdmins.test.jsx
index 9b6e667560..80d05e85a2 100644
--- a/src/services/selfHosted/useSelfHostedHasAdmins.spec.js
+++ b/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))
     })
   })
diff --git a/src/services/selfHosted/useSelfHostedSeatsAndLicense.spec.tsx b/src/services/selfHosted/useSelfHostedSeatsAndLicense.test.tsx
similarity index 67%
rename from src/services/selfHosted/useSelfHostedSeatsAndLicense.spec.tsx
rename to src/services/selfHosted/useSelfHostedSeatsAndLicense.test.tsx
index 7c2851fcc0..df93c71590 100644
--- a/src/services/selfHosted/useSelfHostedSeatsAndLicense.spec.tsx
+++ b/src/services/selfHosted/useSelfHostedSeatsAndLicense.test.tsx
@@ -1,7 +1,8 @@
 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'
 
@@ -9,9 +10,7 @@ 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 })
           )
         )
       })
diff --git a/src/services/selfHosted/useSelfHostedSeatsConfig.spec.js b/src/services/selfHosted/useSelfHostedSeatsConfig.test.jsx
similarity index 76%
rename from src/services/selfHosted/useSelfHostedSeatsConfig.spec.js
rename to src/services/selfHosted/useSelfHostedSeatsConfig.test.jsx
index 60c03c2feb..cd929a22ce 100644
--- a/src/services/selfHosted/useSelfHostedSeatsConfig.spec.js
+++ b/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,
diff --git a/src/services/selfHosted/useSelfHostedSettings.spec.tsx b/src/services/selfHosted/useSelfHostedSettings.test.tsx
similarity index 71%
rename from src/services/selfHosted/useSelfHostedSettings.spec.tsx
rename to src/services/selfHosted/useSelfHostedSettings.test.tsx
index 1e7103c6bd..a271ac4f25 100644
--- a/src/services/selfHosted/useSelfHostedSettings.spec.tsx
+++ b/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',
+          })
+        )
       )
     })
   })
diff --git a/src/services/selfHosted/useSelfHostedUserList.spec.tsx b/src/services/selfHosted/useSelfHostedUserList.test.tsx
similarity index 84%
rename from src/services/selfHosted/useSelfHostedUserList.spec.tsx
rename to src/services/selfHosted/useSelfHostedUserList.test.tsx
index de4e0d70cb..a258bd24e9 100644
--- a/src/services/selfHosted/useSelfHostedUserList.spec.tsx
+++ b/src/services/selfHosted/useSelfHostedUserList.test.tsx
@@ -1,8 +1,9 @@
 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 { type MockInstance } from 'vitest'
 
 import { useSelfHostedUserList } from './useSelfHostedUserList'
 
@@ -43,7 +44,6 @@ const mockSecondResponse = {
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
 })
-const server = setupServer()
 const wrapper =
   (initialEntries = '/gh'): React.FC<React.PropsWithChildren> =>
   ({ children }) => (
@@ -54,6 +54,7 @@ const wrapper =
     </QueryClientProvider>
   )
 
+const server = setupServer()
 beforeAll(() => {
   server.listen()
 })
@@ -70,21 +71,19 @@ afterAll(() => {
 describe('useSelfHostedUserList', () => {
   function setup({ invalidResponse = false }) {
     server.use(
-      rest.get('/internal/users', (req, res, ctx) => {
+      http.get('/internal/users', (info) => {
         if (invalidResponse) {
-          return res(ctx.status(200), ctx.json({}))
+          return HttpResponse.json({})
         }
 
-        const {
-          url: { searchParams },
-        } = req
+        const searchParams = new URL(info.request.url).searchParams
         const pageNumber = Number(searchParams.get('page'))
 
         if (pageNumber > 1) {
-          return res(ctx.status(200), ctx.json(mockSecondResponse))
+          return HttpResponse.json(mockSecondResponse)
         }
 
-        return res(ctx.status(200), ctx.json(mockFirstResponse))
+        return HttpResponse.json(mockFirstResponse)
       })
     )
   }
@@ -118,9 +117,7 @@ describe('useSelfHostedUserList', () => {
         setup({})
         const { result } = renderHook(
           () => useSelfHostedUserList({ search: '' }),
-          {
-            wrapper: wrapper(),
-          }
+          { wrapper: wrapper() }
         )
 
         await waitFor(() => result.current.isLoading)
@@ -156,9 +153,7 @@ describe('useSelfHostedUserList', () => {
         setup({})
         const { result } = renderHook(
           () => useSelfHostedUserList({ search: 'codecov' }),
-          {
-            wrapper: wrapper(),
-          }
+          { wrapper: wrapper() }
         )
 
         await waitFor(() => result.current.isFetching)
@@ -194,8 +189,14 @@ describe('useSelfHostedUserList', () => {
   })
 
   describe('endpoint returns invalid data', () => {
-    beforeEach(() => {
-      console.error = () => {}
+    let consoleSpy: MockInstance
+
+    beforeAll(() => {
+      consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    })
+
+    afterAll(() => {
+      consoleSpy.mockRestore()
     })
 
     it('rejects with 404', async () => {
@@ -204,12 +205,13 @@ describe('useSelfHostedUserList', () => {
         wrapper: wrapper(),
       })
 
-      await waitFor(() => expect(result.current.isError).toBeTruthy())
-      expect(result.current.error).toEqual(
-        expect.objectContaining({
-          status: 404,
-          dev: 'useSelfHostedUserList - 404 schema parsing failed',
-        })
+      await waitFor(() =>
+        expect(result.current.error).toEqual(
+          expect.objectContaining({
+            status: 404,
+            dev: 'useSelfHostedUserList - 404 schema parsing failed',
+          })
+        )
       )
     })
   })