diff --git a/src/services/pathContents/branch/dir/usePrefetchBranchDirEntry.spec.tsx b/src/services/pathContents/branch/dir/usePrefetchBranchDirEntry.test.tsx
similarity index 93%
rename from src/services/pathContents/branch/dir/usePrefetchBranchDirEntry.spec.tsx
rename to src/services/pathContents/branch/dir/usePrefetchBranchDirEntry.test.tsx
index 3d692590a5..9ab7ab4f2e 100644
--- a/src/services/pathContents/branch/dir/usePrefetchBranchDirEntry.spec.tsx
+++ b/src/services/pathContents/branch/dir/usePrefetchBranchDirEntry.test.tsx
@@ -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 { usePrefetchBranchDirEntry } from './usePrefetchBranchDirEntry'
@@ -151,20 +151,20 @@ describe('usePrefetchBranchDirEntry', () => {
     isUnsuccessfulParseError = false,
   }: SetupArgs) {
     server.use(
-      graphql.query('BranchContents', (req, res, ctx) => {
+      graphql.query('BranchContents', (info) => {
         if (isMissingCoverage) {
-          return res(ctx.status(200), ctx.data(mockDataMissingCoverage))
+          return HttpResponse.json({ data: mockDataMissingCoverage })
         } else if (isUnknownPath) {
-          return res(ctx.status(200), ctx.data(mockDataUnknownPath))
+          return HttpResponse.json({ data: mockDataUnknownPath })
         } else if (isRepositoryNotFoundError) {
-          return res(ctx.status(200), ctx.data(mockDataRepositoryNotFound))
+          return HttpResponse.json({ data: mockDataRepositoryNotFound })
         } else if (isOwnerNotActivatedError) {
-          return res(ctx.status(200), ctx.data(mockDataOwnerNotActivated))
+          return HttpResponse.json({ data: mockDataOwnerNotActivated })
         } else if (isUnsuccessfulParseError) {
-          return res(ctx.status(200), ctx.data(mockUnsuccessfulParseError))
+          return HttpResponse.json({ data: mockUnsuccessfulParseError })
         }
 
-        return res(ctx.status(200), ctx.data(mockData))
+        return HttpResponse.json({ data: mockData })
       })
     )
   }
diff --git a/src/services/pathContents/branch/dir/useRepoBranchContents.spec.tsx b/src/services/pathContents/branch/dir/useRepoBranchContents.test.tsx
similarity index 94%
rename from src/services/pathContents/branch/dir/useRepoBranchContents.spec.tsx
rename to src/services/pathContents/branch/dir/useRepoBranchContents.test.tsx
index 1c7e73ff86..25bfd530f7 100644
--- a/src/services/pathContents/branch/dir/useRepoBranchContents.spec.tsx
+++ b/src/services/pathContents/branch/dir/useRepoBranchContents.test.tsx
@@ -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 { useRepoBranchContents } from './useRepoBranchContents'
@@ -150,20 +150,20 @@ describe('useRepoBranchContents', () => {
     isUnsuccessfulParseError = false,
   }: SetupArgs) {
     server.use(
-      graphql.query('BranchContents', (req, res, ctx) => {
+      graphql.query('BranchContents', (info) => {
         if (isMissingCoverage) {
-          return res(ctx.status(200), ctx.data(mockDataMissingCoverage))
+          return HttpResponse.json({ data: mockDataMissingCoverage })
         } else if (isUnknownPath) {
-          return res(ctx.status(200), ctx.data(mockDataUnknownPath))
+          return HttpResponse.json({ data: mockDataUnknownPath })
         } else if (isRepositoryNotFoundError) {
-          return res(ctx.status(200), ctx.data(mockDataRepositoryNotFound))
+          return HttpResponse.json({ data: mockDataRepositoryNotFound })
         } else if (isOwnerNotActivatedError) {
-          return res(ctx.status(200), ctx.data(mockDataOwnerNotActivated))
+          return HttpResponse.json({ data: mockDataOwnerNotActivated })
         } else if (isUnsuccessfulParseError) {
-          return res(ctx.status(200), ctx.data(mockUnsuccessfulParseError))
+          return HttpResponse.json({ data: mockUnsuccessfulParseError })
         }
 
-        return res(ctx.status(200), ctx.data(mockData))
+        return HttpResponse.json({ data: mockData })
       })
     )
   }
diff --git a/src/services/pathContents/branch/file/usePrefetchBranchFileEntry.spec.js b/src/services/pathContents/branch/file/usePrefetchBranchFileEntry.test.jsx
similarity index 94%
rename from src/services/pathContents/branch/file/usePrefetchBranchFileEntry.spec.js
rename to src/services/pathContents/branch/file/usePrefetchBranchFileEntry.test.jsx
index 81ce97659c..2887e99295 100644
--- a/src/services/pathContents/branch/file/usePrefetchBranchFileEntry.spec.js
+++ b/src/services/pathContents/branch/file/usePrefetchBranchFileEntry.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 { usePrefetchBranchFileEntry } from './usePrefetchBranchFileEntry'
@@ -90,9 +90,9 @@ const mockData = {
 describe('usePrefetchBranchFileEntry', () => {
   function setup() {
     server.use(
-      graphql.query('CoverageForFile', (req, res, ctx) =>
-        res(ctx.status(200), ctx.data(mockData))
-      )
+      graphql.query('CoverageForFile', (info) => {
+        return HttpResponse.json({ data: mockData })
+      })
     )
   }
 
diff --git a/src/services/pathContents/commit/dir/index.js b/src/services/pathContents/commit/dir/index.ts
similarity index 100%
rename from src/services/pathContents/commit/dir/index.js
rename to src/services/pathContents/commit/dir/index.ts
diff --git a/src/services/pathContents/commit/dir/usePrefetchCommitDirEntry.spec.tsx b/src/services/pathContents/commit/dir/usePrefetchCommitDirEntry.test.tsx
similarity index 91%
rename from src/services/pathContents/commit/dir/usePrefetchCommitDirEntry.spec.tsx
rename to src/services/pathContents/commit/dir/usePrefetchCommitDirEntry.test.tsx
index 89223177fe..f779fa3192 100644
--- a/src/services/pathContents/commit/dir/usePrefetchCommitDirEntry.spec.tsx
+++ b/src/services/pathContents/commit/dir/usePrefetchCommitDirEntry.test.tsx
@@ -1,7 +1,7 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { renderHook } 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 { usePrefetchCommitDirEntry } from './usePrefetchCommitDirEntry'
@@ -141,23 +141,19 @@ describe('usePrefetchCommitDirEntry', () => {
     isUnsuccessfulParse = false,
   }: SetupArgs) {
     server.use(
-      graphql.query('CommitPathContents', (req, res, ctx) => {
+      graphql.query('CommitPathContents', (info) => {
         if (isMissingCoverage) {
-          return res(ctx.status(200), ctx.data(mockDataMissingCoverage))
+          return HttpResponse.json({ data: mockDataMissingCoverage })
+        } else if (isUnknownPath) {
+          return HttpResponse.json({ data: mockDataUnknownPath })
+        } else if (isNotFoundError) {
+          return HttpResponse.json({ data: mockNotFoundError })
+        } else if (isOwnerNotActivatedError) {
+          return HttpResponse.json({ data: mockOwnerNotActivatedError })
+        } else if (isUnsuccessfulParse) {
+          return HttpResponse.json({ data: mockUnsuccessfulParseError })
         }
-        if (isUnknownPath) {
-          return res(ctx.status(200), ctx.data(mockDataUnknownPath))
-        }
-        if (isNotFoundError) {
-          return res(ctx.status(200), ctx.data(mockNotFoundError))
-        }
-        if (isOwnerNotActivatedError) {
-          return res(ctx.status(200), ctx.data(mockOwnerNotActivatedError))
-        }
-        if (isUnsuccessfulParse) {
-          return res(ctx.status(200), ctx.data(mockUnsuccessfulParseError))
-        }
-        return res(ctx.status(200), ctx.data(mockData))
+        return HttpResponse.json({ data: mockData })
       })
     )
   }
diff --git a/src/services/pathContents/commit/dir/useRepoCommitContents.spec.tsx b/src/services/pathContents/commit/dir/useRepoCommitContents.test.tsx
similarity index 94%
rename from src/services/pathContents/commit/dir/useRepoCommitContents.spec.tsx
rename to src/services/pathContents/commit/dir/useRepoCommitContents.test.tsx
index 49c0a4c804..edd6d5912f 100644
--- a/src/services/pathContents/commit/dir/useRepoCommitContents.spec.tsx
+++ b/src/services/pathContents/commit/dir/useRepoCommitContents.test.tsx
@@ -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 { useRepoCommitContents } from './useRepoCommitContents'
@@ -144,19 +144,19 @@ describe('useRepoCommitContents', () => {
     isUnsuccessfulParseError = false,
   }: SetupArgs) {
     server.use(
-      graphql.query('CommitPathContents', (req, res, ctx) => {
+      graphql.query('CommitPathContents', (info) => {
         if (isMissingCoverage) {
-          return res(ctx.status(200), ctx.data(mockDataMissingCoverage))
+          return HttpResponse.json({ data: mockDataMissingCoverage })
         } else if (isUnknownPath) {
-          return res(ctx.status(200), ctx.data(mockDataUnknownPath))
+          return HttpResponse.json({ data: mockDataUnknownPath })
         } else if (isNotFoundError) {
-          return res(ctx.status(200), ctx.data(mockNotFoundError))
+          return HttpResponse.json({ data: mockNotFoundError })
         } else if (isOwnerNotActivatedError) {
-          return res(ctx.status(200), ctx.data(mockOwnerNotActivatedError))
+          return HttpResponse.json({ data: mockOwnerNotActivatedError })
         } else if (isUnsuccessfulParseError) {
-          return res(ctx.status(200), ctx.data(mockUnsuccessfulParseError))
+          return HttpResponse.json({ data: mockUnsuccessfulParseError })
         }
-        return res(ctx.status(200), ctx.data(mockData))
+        return HttpResponse.json({ data: mockData })
       })
     )
   }
diff --git a/src/services/pathContents/commit/file/index.js b/src/services/pathContents/commit/file/index.ts
similarity index 100%
rename from src/services/pathContents/commit/file/index.js
rename to src/services/pathContents/commit/file/index.ts
diff --git a/src/services/pathContents/commit/file/usePrefetchCommitFileEntry.spec.tsx b/src/services/pathContents/commit/file/usePrefetchCommitFileEntry.test.tsx
similarity index 90%
rename from src/services/pathContents/commit/file/usePrefetchCommitFileEntry.spec.tsx
rename to src/services/pathContents/commit/file/usePrefetchCommitFileEntry.test.tsx
index a3d86276a2..d58b441514 100644
--- a/src/services/pathContents/commit/file/usePrefetchCommitFileEntry.spec.tsx
+++ b/src/services/pathContents/commit/file/usePrefetchCommitFileEntry.test.tsx
@@ -1,8 +1,9 @@
 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 { usePrefetchCommitFileEntry } from './usePrefetchCommitFileEntry'
 
@@ -116,19 +117,19 @@ describe('usePrefetchCommitFileEntry', () => {
     const mockVars = jest.fn()
 
     server.use(
-      graphql.query('CoverageForFile', (req, res, ctx) => {
-        mockVars(req.variables)
+      graphql.query('CoverageForFile', (info) => {
+        mockVars(info.variables)
 
         if (isNotFoundError) {
-          return res(ctx.status(200), ctx.data(mockNotFoundError))
+          return HttpResponse.json({ data: mockNotFoundError })
         } else if (isOwnerNotActivatedError) {
-          return res(ctx.status(200), ctx.data(mockOwnerNotActivatedError))
+          return HttpResponse.json({ data: mockOwnerNotActivatedError })
         } else if (isUnsuccessfulParseError) {
-          return res(ctx.status(200), ctx.data(mockUnsuccessfulParseError))
+          return HttpResponse.json({ data: mockUnsuccessfulParseError })
         } else if (isNullOwner) {
-          return res(ctx.status(200), ctx.data(mockNullOwner))
+          return HttpResponse.json({ data: mockNullOwner })
         } else {
-          return res(ctx.status(200), ctx.data(mockData))
+          return HttpResponse.json({ data: mockData })
         }
       })
     )
@@ -277,12 +278,13 @@ describe('usePrefetchCommitFileEntry', () => {
   })
 
   describe('returns NotFoundError __typename', () => {
+    let consoleSpy: MockInstance
     beforeEach(() => {
-      jest.spyOn(console, 'error')
+      consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
     })
 
     afterEach(() => {
-      jest.restoreAllMocks()
+      consoleSpy.mockRestore()
     })
 
     it('throws a 404', async () => {
@@ -314,12 +316,13 @@ describe('usePrefetchCommitFileEntry', () => {
   })
 
   describe('returns OwnerNotActivatedError __typename', () => {
+    let consoleSpy: MockInstance
     beforeEach(() => {
-      jest.spyOn(console, 'error')
+      consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
     })
 
     afterEach(() => {
-      jest.restoreAllMocks()
+      consoleSpy.mockRestore()
     })
 
     it('throws a 403', async () => {
@@ -351,12 +354,13 @@ describe('usePrefetchCommitFileEntry', () => {
   })
 
   describe('unsuccessful parse of zod schema', () => {
+    let consoleSpy: MockInstance
     beforeEach(() => {
-      jest.spyOn(console, 'error')
+      consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
     })
 
     afterEach(() => {
-      jest.restoreAllMocks()
+      consoleSpy.mockRestore()
     })
 
     it('throws a 404', async () => {
diff --git a/src/services/pathContents/pull/dir/usePrefetchPullDirEntry.spec.tsx b/src/services/pathContents/pull/dir/usePrefetchPullDirEntry.test.tsx
similarity index 92%
rename from src/services/pathContents/pull/dir/usePrefetchPullDirEntry.spec.tsx
rename to src/services/pathContents/pull/dir/usePrefetchPullDirEntry.test.tsx
index 4f48b8e1ca..9ffac58a96 100644
--- a/src/services/pathContents/pull/dir/usePrefetchPullDirEntry.spec.tsx
+++ b/src/services/pathContents/pull/dir/usePrefetchPullDirEntry.test.tsx
@@ -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 { usePrefetchPullDirEntry } from './usePrefetchPullDirEntry'
@@ -95,17 +95,15 @@ describe('usePrefetchPullDirEntry', () => {
     ownerNotActivated = false,
   }) {
     server.use(
-      graphql.query('PullPathContents', (req, res, ctx) => {
+      graphql.query('PullPathContents', (info) => {
         if (invalidSchema) {
-          return res(ctx.status(200), ctx.data({}))
+          return HttpResponse.json({ data: {} })
+        } else if (repositoryNotFound) {
+          return HttpResponse.json({ data: mockDataRepositoryNotFound })
+        } else if (ownerNotActivated) {
+          return HttpResponse.json({ data: mockDataOwnerNotActivated })
         }
-        if (repositoryNotFound) {
-          return res(ctx.status(200), ctx.data(mockDataRepositoryNotFound))
-        }
-        if (ownerNotActivated) {
-          return res(ctx.status(200), ctx.data(mockDataOwnerNotActivated))
-        }
-        return res(ctx.status(200), ctx.data(mockData))
+        return HttpResponse.json({ data: mockData })
       })
     )
   }
diff --git a/src/services/pathContents/pull/dir/useRepoPullContents.spec.tsx b/src/services/pathContents/pull/dir/useRepoPullContents.test.tsx
similarity index 85%
rename from src/services/pathContents/pull/dir/useRepoPullContents.spec.tsx
rename to src/services/pathContents/pull/dir/useRepoPullContents.test.tsx
index 188f827df3..7abc719cc8 100644
--- a/src/services/pathContents/pull/dir/useRepoPullContents.spec.tsx
+++ b/src/services/pathContents/pull/dir/useRepoPullContents.test.tsx
@@ -1,8 +1,9 @@
 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 { useRepoPullContents } from './useRepoPullContents'
 
@@ -140,23 +141,19 @@ describe('useRepoPullContents', () => {
     isUnknownPath = false,
   }) {
     server.use(
-      graphql.query('PullPathContents', (req, res, ctx) => {
+      graphql.query('PullPathContents', (info) => {
         if (invalidSchema) {
-          return res(ctx.status(200), ctx.data({}))
+          return HttpResponse.json({ data: {} })
+        } else if (repositoryNotFound) {
+          return HttpResponse.json({ data: mockDataRepositoryNotFound })
+        } else if (ownerNotActivated) {
+          return HttpResponse.json({ data: mockDataOwnerNotActivated })
+        } else if (isMissingCoverage) {
+          return HttpResponse.json({ data: mockDataMissingCoverage })
+        } else if (isUnknownPath) {
+          return HttpResponse.json({ data: mockDataUnknownPath })
         }
-        if (repositoryNotFound) {
-          return res(ctx.status(200), ctx.data(mockDataRepositoryNotFound))
-        }
-        if (ownerNotActivated) {
-          return res(ctx.status(200), ctx.data(mockDataOwnerNotActivated))
-        }
-        if (isMissingCoverage) {
-          return res(ctx.status(200), ctx.data(mockDataMissingCoverage))
-        }
-        if (isUnknownPath) {
-          return res(ctx.status(200), ctx.data(mockDataUnknownPath))
-        }
-        return res(ctx.status(200), ctx.data(mockData))
+        return HttpResponse.json({ data: mockData })
       })
     )
   }
@@ -272,6 +269,15 @@ describe('useRepoPullContents', () => {
     })
 
     describe('on invalid schema', () => {
+      let consoleSpy: MockInstance
+      beforeEach(() => {
+        consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+      })
+
+      afterEach(() => {
+        consoleSpy.mockRestore()
+      })
+
       it('returns 404', async () => {
         setup({ invalidSchema: true })
         const { result } = renderHook(
@@ -300,6 +306,15 @@ describe('useRepoPullContents', () => {
     })
 
     describe('on repository not found', () => {
+      let consoleSpy: MockInstance
+      beforeEach(() => {
+        consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+      })
+
+      afterEach(() => {
+        consoleSpy.mockRestore()
+      })
+
       it('returns 404', async () => {
         setup({ repositoryNotFound: true })
         const { result } = renderHook(
@@ -328,6 +343,15 @@ describe('useRepoPullContents', () => {
     })
 
     describe('on owner not activated', () => {
+      let consoleSpy: MockInstance
+      beforeEach(() => {
+        consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+      })
+
+      afterEach(() => {
+        consoleSpy.mockRestore()
+      })
+
       it('returns 403', async () => {
         setup({ ownerNotActivated: true })
         const { result } = renderHook(
diff --git a/src/services/pathContents/pull/file/usePrefetchPullFileEntry.spec.tsx b/src/services/pathContents/pull/file/usePrefetchPullFileEntry.test.tsx
similarity index 90%
rename from src/services/pathContents/pull/file/usePrefetchPullFileEntry.spec.tsx
rename to src/services/pathContents/pull/file/usePrefetchPullFileEntry.test.tsx
index b53b169093..c8238d3043 100644
--- a/src/services/pathContents/pull/file/usePrefetchPullFileEntry.spec.tsx
+++ b/src/services/pathContents/pull/file/usePrefetchPullFileEntry.test.tsx
@@ -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 { usePrefetchPullFileEntry } from './usePrefetchPullFileEntry'
@@ -31,12 +31,18 @@ const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
 )
 
 const server = setupServer()
-beforeAll(() => server.listen())
+beforeAll(() => {
+  server.listen()
+})
+
 beforeEach(() => {
   server.resetHandlers()
   queryClient.clear()
 })
-afterAll(() => server.close())
+
+afterAll(() => {
+  server.close()
+})
 
 const mockData = {
   owner: {
@@ -95,25 +101,17 @@ describe('usePrefetchPullFileEntry', () => {
     nullOwner = false,
   }) {
     server.use(
-      graphql.query('CoverageForFile', (req, res, ctx) => {
+      graphql.query('CoverageForFile', (info) => {
         if (invalidSchema) {
-          return res(ctx.status(200), ctx.data({}))
-        }
-        if (repositoryNotFound) {
-          return res(ctx.status(200), ctx.data(mockDataRepositoryNotFound))
-        }
-        if (ownerNotActivated) {
-          return res(ctx.status(200), ctx.data(mockDataOwnerNotActivated))
-        }
-        if (nullOwner) {
-          return res(
-            ctx.status(200),
-            ctx.data({
-              owner: null,
-            })
-          )
+          return HttpResponse.json({})
+        } else if (repositoryNotFound) {
+          return HttpResponse.json({ data: mockDataRepositoryNotFound })
+        } else if (ownerNotActivated) {
+          return HttpResponse.json({ data: mockDataOwnerNotActivated })
+        } else if (nullOwner) {
+          return HttpResponse.json({ data: { owner: null } })
         }
-        return res(ctx.status(200), ctx.data(mockData))
+        return HttpResponse.json({ data: mockData })
       })
     )
   }
diff --git a/src/services/pathContents/useFileWithMainCoverage.spec.tsx b/src/services/pathContents/useFileWithMainCoverage.test.tsx
similarity index 89%
rename from src/services/pathContents/useFileWithMainCoverage.spec.tsx
rename to src/services/pathContents/useFileWithMainCoverage.test.tsx
index 698a4e5bac..501ce71b0a 100644
--- a/src/services/pathContents/useFileWithMainCoverage.spec.tsx
+++ b/src/services/pathContents/useFileWithMainCoverage.test.tsx
@@ -2,9 +2,10 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { renderHook, waitFor } from '@testing-library/react'
 // eslint-disable-next-line no-restricted-imports
 import _ from 'lodash'
-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 { useFileWithMainCoverage } from 'services/pathContents'
 
@@ -112,15 +113,15 @@ describe('useFileWithMainCoverage', () => {
     isNullOwner = false,
   }: SetupArgs) {
     server.use(
-      graphql.query('CoverageForFile', (req, res, ctx) => {
+      graphql.query('CoverageForFile', (info) => {
         if (isNotFoundError) {
-          return res(ctx.status(200), ctx.data(mockNotFoundError))
+          return HttpResponse.json({ data: mockNotFoundError })
         } else if (isOwnerNotActivatedError) {
-          return res(ctx.status(200), ctx.data(mockOwnerNotActivatedError))
+          return HttpResponse.json({ data: mockOwnerNotActivatedError })
         } else if (isUnsuccessfulParseError) {
-          return res(ctx.status(200), ctx.data(mockUnsuccessfulParseError))
+          return HttpResponse.json({ data: mockUnsuccessfulParseError })
         } else if (isNullOwner) {
-          return res(ctx.status(200), ctx.data(mockNullOwner))
+          return HttpResponse.json({ data: mockNullOwner })
         } else {
           const mockCoverage = {
             owner: {
@@ -132,7 +133,7 @@ describe('useFileWithMainCoverage', () => {
             },
           }
 
-          return res(ctx.status(200), ctx.data(mockCoverage))
+          return HttpResponse.json({ data: mockCoverage })
         }
       })
     )
@@ -234,14 +235,13 @@ describe('useFileWithMainCoverage', () => {
   })
 
   describe('returns NotFoundError __typename', () => {
-    let oldConsoleError = console.error
-
+    let consoleSpy: MockInstance
     beforeEach(() => {
-      console.error = () => null
+      consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
     })
 
     afterEach(() => {
-      console.error = oldConsoleError
+      consoleSpy.mockRestore()
     })
 
     it('throws a 404', async () => {
@@ -273,14 +273,13 @@ describe('useFileWithMainCoverage', () => {
   })
 
   describe('returns OwnerNotActivatedError __typename', () => {
-    let oldConsoleError = console.error
-
+    let consoleSpy: MockInstance
     beforeEach(() => {
-      console.error = () => null
+      consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
     })
 
     afterEach(() => {
-      console.error = oldConsoleError
+      consoleSpy.mockRestore()
     })
 
     it('throws a 403', async () => {
@@ -312,14 +311,13 @@ describe('useFileWithMainCoverage', () => {
   })
 
   describe('unsuccessful parse of zod schema', () => {
-    let oldConsoleError = console.error
-
+    let consoleSpy: MockInstance
     beforeEach(() => {
-      console.error = () => null
+      consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
     })
 
     afterEach(() => {
-      console.error = oldConsoleError
+      consoleSpy.mockRestore()
     })
 
     it('throws a 404', async () => {