diff --git a/src/pages/PullRequestPage/Header/HeaderDefault/hooks/index.js b/src/pages/PullRequestPage/Header/HeaderDefault/hooks/index.ts
similarity index 100%
rename from src/pages/PullRequestPage/Header/HeaderDefault/hooks/index.js
rename to src/pages/PullRequestPage/Header/HeaderDefault/hooks/index.ts
diff --git a/src/pages/PullRequestPage/Header/HeaderTeam/hooks/index.js b/src/pages/PullRequestPage/Header/HeaderTeam/hooks/index.ts
similarity index 100%
rename from src/pages/PullRequestPage/Header/HeaderTeam/hooks/index.js
rename to src/pages/PullRequestPage/Header/HeaderTeam/hooks/index.ts
diff --git a/src/pages/PullRequestPage/Header/index.js b/src/pages/PullRequestPage/Header/index.ts
similarity index 100%
rename from src/pages/PullRequestPage/Header/index.js
rename to src/pages/PullRequestPage/Header/index.ts
diff --git a/src/pages/PullRequestPage/PullCoverage/Summary/CompareSummary/CompareSummary.spec.jsx b/src/pages/PullRequestPage/PullCoverage/Summary/CompareSummary/CompareSummary.test.jsx
similarity index 98%
rename from src/pages/PullRequestPage/PullCoverage/Summary/CompareSummary/CompareSummary.spec.jsx
rename to src/pages/PullRequestPage/PullCoverage/Summary/CompareSummary/CompareSummary.test.jsx
index f7e8044fb1..e48b2db6cf 100644
--- a/src/pages/PullRequestPage/PullCoverage/Summary/CompareSummary/CompareSummary.spec.jsx
+++ b/src/pages/PullRequestPage/PullCoverage/Summary/CompareSummary/CompareSummary.test.jsx
@@ -1,8 +1,7 @@
-import { render, screen } from 'custom-testing-library'
-
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { graphql } from 'msw'
-import { setupServer } from 'msw/node'
+import { render, screen } from '@testing-library/react'
+import { graphql, HttpResponse } from 'msw2'
+import { setupServer } from 'msw2/node'
 import { MemoryRouter, Route } from 'react-router-dom'
 
 import CompareSummary from './CompareSummary'
@@ -200,9 +199,9 @@ afterAll(() => {
 describe('CompareSummary', () => {
   function setup({ pullData }) {
     server.use(
-      graphql.query('Pull', (req, res, ctx) =>
-        res(ctx.status(200), ctx.data(pullData))
-      )
+      graphql.query('Pull', (info) => {
+        return HttpResponse.json({ data: pullData })
+      })
     )
   }
 
diff --git a/src/pages/PullRequestPage/PullCoverage/Summary/CompareSummary/CompareSummarySkeleton.spec.jsx b/src/pages/PullRequestPage/PullCoverage/Summary/CompareSummary/CompareSummarySkeleton.test.jsx
similarity index 100%
rename from src/pages/PullRequestPage/PullCoverage/Summary/CompareSummary/CompareSummarySkeleton.spec.jsx
rename to src/pages/PullRequestPage/PullCoverage/Summary/CompareSummary/CompareSummarySkeleton.test.jsx
diff --git a/src/pages/PullRequestPage/PullCoverage/Summary/CompareSummary/usePullForCompareSummary.spec.js b/src/pages/PullRequestPage/PullCoverage/Summary/CompareSummary/usePullForCompareSummary.test.js
similarity index 85%
rename from src/pages/PullRequestPage/PullCoverage/Summary/CompareSummary/usePullForCompareSummary.spec.js
rename to src/pages/PullRequestPage/PullCoverage/Summary/CompareSummary/usePullForCompareSummary.test.js
index 9afc60f9c4..a1e4954cd7 100644
--- a/src/pages/PullRequestPage/PullCoverage/Summary/CompareSummary/usePullForCompareSummary.spec.js
+++ b/src/pages/PullRequestPage/PullCoverage/Summary/CompareSummary/usePullForCompareSummary.test.js
@@ -1,18 +1,29 @@
 import { renderHook } from '@testing-library/react'
-import { useParams } from 'react-router-dom'
-
-import { usePull } from 'services/pull'
 
 import {
   getPullDataForCompareSummary,
   usePullForCompareSummary,
 } from './usePullForCompareSummary'
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'), // import and retain the original functionalities
-  useParams: jest.fn(() => {}),
+const mocks = vi.hoisted(() => ({
+  usePull: vi.fn(),
+  useParams: vi.fn(),
 }))
-jest.mock('services/pull')
+
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom')
+  return {
+    ...actual,
+    useParams: mocks.useParams,
+  }
+})
+vi.mock('services/pull', async () => {
+  const actual = await vi.importActual('services/pull')
+  return {
+    ...actual,
+    usePull: mocks.usePull,
+  }
+})
 
 const pull = {
   pullId: 5,
@@ -88,13 +99,13 @@ describe('usePullForCompareSummary', () => {
   let hookData
 
   function setup() {
-    useParams.mockReturnValue({
+    mocks.useParams.mockReturnValue({
       owner: 'caleb',
       provider: 'gh',
       repo: 'mighty-nein',
       pullId: '9',
     })
-    usePull.mockReturnValue({ data: { pull } })
+    mocks.usePull.mockReturnValue({ data: { pull } })
     hookData = renderHook(() => usePullForCompareSummary())
   }
 
diff --git a/src/pages/PullRequestPage/PullCoverage/Summary/Summary.spec.tsx b/src/pages/PullRequestPage/PullCoverage/Summary/Summary.test.tsx
similarity index 89%
rename from src/pages/PullRequestPage/PullCoverage/Summary/Summary.spec.tsx
rename to src/pages/PullRequestPage/PullCoverage/Summary/Summary.test.tsx
index 61620d9292..07f8917a96 100644
--- a/src/pages/PullRequestPage/PullCoverage/Summary/Summary.spec.tsx
+++ b/src/pages/PullRequestPage/PullCoverage/Summary/Summary.test.tsx
@@ -1,7 +1,7 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { render, screen, 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 { Suspense } from 'react'
 import { MemoryRouter, Route } from 'react-router-dom'
 
@@ -52,18 +52,16 @@ describe('Summary', () => {
     }
   ) {
     server.use(
-      graphql.query('OwnerTier', (req, res, ctx) =>
-        res(
-          ctx.status(200),
-          ctx.data({
+      graphql.query('OwnerTier', (info) => {
+        return HttpResponse.json({
+          data: {
             owner: { plan: { tierName: tierValue.toLowerCase() } },
-          })
-        )
-      ),
-      graphql.query('GetRepoSettingsTeam', (req, res, ctx) =>
-        res(
-          ctx.status(200),
-          ctx.data({
+          },
+        })
+      }),
+      graphql.query('GetRepoSettingsTeam', (info) => {
+        return HttpResponse.json({
+          data: {
             owner: {
               isCurrentUserPartOfOrg: true,
               repository: {
@@ -79,9 +77,9 @@ describe('Summary', () => {
                 activated: true,
               },
             },
-          })
-        )
-      )
+          },
+        })
+      })
     )
   }
   describe.each`
diff --git a/src/pages/PullRequestPage/PullCoverage/routes/ComponentsSelector/index.js b/src/pages/PullRequestPage/PullCoverage/routes/ComponentsSelector/index.ts
similarity index 100%
rename from src/pages/PullRequestPage/PullCoverage/routes/ComponentsSelector/index.js
rename to src/pages/PullRequestPage/PullCoverage/routes/ComponentsSelector/index.ts
diff --git a/src/pages/PullRequestPage/PullCoverage/routes/ComponentsTab/hooks/index.js b/src/pages/PullRequestPage/PullCoverage/routes/ComponentsTab/hooks/index.ts
similarity index 100%
rename from src/pages/PullRequestPage/PullCoverage/routes/ComponentsTab/hooks/index.js
rename to src/pages/PullRequestPage/PullCoverage/routes/ComponentsTab/hooks/index.ts
diff --git a/src/pages/PullRequestPage/PullCoverage/routes/ComponentsTab/index.js b/src/pages/PullRequestPage/PullCoverage/routes/ComponentsTab/index.ts
similarity index 100%
rename from src/pages/PullRequestPage/PullCoverage/routes/ComponentsTab/index.js
rename to src/pages/PullRequestPage/PullCoverage/routes/ComponentsTab/index.ts
diff --git a/src/pages/PullRequestPage/PullCoverage/routes/FileViewer/FileViewer.spec.jsx b/src/pages/PullRequestPage/PullCoverage/routes/FileViewer/FileViewer.test.jsx
similarity index 75%
rename from src/pages/PullRequestPage/PullCoverage/routes/FileViewer/FileViewer.spec.jsx
rename to src/pages/PullRequestPage/PullCoverage/routes/FileViewer/FileViewer.test.jsx
index 7c01815f30..27f5fa6e6f 100644
--- a/src/pages/PullRequestPage/PullCoverage/routes/FileViewer/FileViewer.spec.jsx
+++ b/src/pages/PullRequestPage/PullCoverage/routes/FileViewer/FileViewer.test.jsx
@@ -1,15 +1,26 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { render, screen } 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 { useScrollToLine } from 'ui/CodeRenderer/hooks/useScrollToLine'
-
 import FileViewer from './FileViewer'
 
-jest.mock('ui/CodeRenderer/hooks/useScrollToLine')
-jest.mock('../ComponentsSelector', () => () => 'ComponentsSelector')
+const mocks = vi.hoisted(() => ({
+  useScrollToLine: vi.fn(),
+}))
+
+vi.mock('ui/CodeRenderer/hooks/useScrollToLine', async () => {
+  const actual = await vi.importActual('ui/CodeRenderer/hooks/useScrollToLine')
+  return {
+    ...actual,
+    useScrollToLine: mocks.useScrollToLine,
+  }
+})
+
+vi.mock('../ComponentsSelector', () => ({
+  default: () => 'ComponentsSelector',
+}))
 
 const mockOwner = {
   username: 'cool-user',
@@ -96,31 +107,33 @@ afterAll(() => {
 
 describe('FileViewer', () => {
   function setup() {
-    useScrollToLine.mockImplementation(() => ({
+    mocks.useScrollToLine.mockImplementation(() => ({
       lineRef: () => {},
-      handleClick: jest.fn(),
+      handleClick: vi.fn(),
       targeted: false,
     }))
 
     server.use(
-      graphql.query('DetailOwner', (req, res, ctx) =>
-        res(ctx.status(200), ctx.data({ owner: mockOwner }))
-      ),
-      graphql.query('CoverageForFile', (req, res, ctx) =>
-        res(ctx.status(200), ctx.data({ owner: { repository: mockCoverage } }))
-      ),
-      graphql.query('PullPageData', (req, res, ctx) =>
-        res(ctx.status(200), ctx.data({ owner: mockPullData }))
-      ),
-      graphql.query('BackfillFlagMemberships', (req, res, ctx) =>
-        res(ctx.status(200), ctx.data({ owner: null }))
-      ),
-      graphql.query('OwnerTier', (req, res, ctx) =>
-        res(ctx.status(200), ctx.data({ owner: null }))
-      ),
-      graphql.query('GetRepoOverview', (req, res, ctx) =>
-        res(ctx.status(200), ctx.data({ owner: null }))
-      )
+      graphql.query('DetailOwner', (req, res, ctx) => {
+        return HttpResponse.json({ data: { owner: mockOwner } })
+      }),
+      graphql.query('CoverageForFile', (req, res, ctx) => {
+        return HttpResponse.json({
+          data: { owner: { repository: mockCoverage } },
+        })
+      }),
+      graphql.query('PullPageData', (req, res, ctx) => {
+        return HttpResponse.json({ data: { owner: mockPullData } })
+      }),
+      graphql.query('BackfillFlagMemberships', (req, res, ctx) => {
+        return HttpResponse.json({ data: { owner: null } })
+      }),
+      graphql.query('OwnerTier', (req, res, ctx) => {
+        return HttpResponse.json({ data: { owner: null } })
+      }),
+      graphql.query('GetRepoOverview', (req, res, ctx) => {
+        return HttpResponse.json({ data: { owner: null } })
+      })
     )
   }
 
diff --git a/src/pages/PullRequestPage/PullCoverage/routes/FilesChangedTab/FilesChanged/FilesChangedTable/index.js b/src/pages/PullRequestPage/PullCoverage/routes/FilesChangedTab/FilesChanged/FilesChangedTable/index.ts
similarity index 100%
rename from src/pages/PullRequestPage/PullCoverage/routes/FilesChangedTab/FilesChanged/FilesChangedTable/index.js
rename to src/pages/PullRequestPage/PullCoverage/routes/FilesChangedTab/FilesChanged/FilesChangedTable/index.ts
diff --git a/src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/IndirectChangedFiles/NameColumn/NameColumn.spec.jsx b/src/pages/PullRequestPage/PullCoverage/routes/FilesChangedTab/FilesChanged/NameColumn/NameColumn.test.jsx
similarity index 85%
rename from src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/IndirectChangedFiles/NameColumn/NameColumn.spec.jsx
rename to src/pages/PullRequestPage/PullCoverage/routes/FilesChangedTab/FilesChanged/NameColumn/NameColumn.test.jsx
index c18e70f9cb..8f5558bffb 100644
--- a/src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/IndirectChangedFiles/NameColumn/NameColumn.spec.jsx
+++ b/src/pages/PullRequestPage/PullCoverage/routes/FilesChangedTab/FilesChanged/NameColumn/NameColumn.test.jsx
@@ -1,8 +1,8 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { 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 } from 'react-router-dom'
 
 import NameColumn from './NameColumn'
@@ -26,6 +26,7 @@ const mockSingularImpactedFilesData = {
             isRenamedFile: false,
             isDeletedFile: false,
             isCriticalFile: false,
+            changeCoverage: 58.333333333333336,
             headCoverage: {
               percentCovered: 90.23,
             },
@@ -35,7 +36,6 @@ const mockSingularImpactedFilesData = {
             patchCoverage: {
               percentCovered: 27.43,
             },
-            changeCoverage: 58.333333333333336,
             segments: {
               results: [
                 {
@@ -84,9 +84,9 @@ describe('NameColumn', () => {
     const user = userEvent.setup()
 
     server.use(
-      graphql.query('ImpactedFileComparison', (req, res, ctx) =>
-        res(ctx.status(200), ctx.data(mockSingularImpactedFilesData))
-      )
+      graphql.query('ImpactedFileComparison', (info) => {
+        return HttpResponse.json({ data: mockSingularImpactedFilesData })
+      })
     )
 
     return { user }
@@ -95,16 +95,16 @@ describe('NameColumn', () => {
   describe('when component is not expanded', () => {
     it('renders value', async () => {
       setup()
-      const getValue = jest.fn()
+      const getValue = vi.fn()
       getValue.mockImplementation(() => 'file.ts')
 
       const row = {
-        getValue: jest.fn().mockImplementation(() => ({
+        getValue: vi.fn().mockImplementation(() => ({
           props: {
             children: ['file.ts'],
           },
         })),
-        getIsExpanded: jest.fn().mockImplementation(() => false),
+        getIsExpanded: vi.fn().mockImplementation(() => false),
       }
 
       render(<NameColumn row={row} getValue={getValue} />, { wrapper })
@@ -115,16 +115,17 @@ describe('NameColumn', () => {
 
     it('prefetches query data', async () => {
       const { user } = setup()
-      const getValue = jest.fn()
+
+      const getValue = vi.fn()
       getValue.mockImplementation(() => 'file.ts')
 
       const row = {
-        getValue: jest.fn().mockImplementation(() => ({
+        getValue: vi.fn().mockImplementation(() => ({
           props: {
             children: ['file.ts'],
           },
         })),
-        getIsExpanded: jest.fn().mockImplementation(() => false),
+        getIsExpanded: vi.fn().mockImplementation(() => false),
       }
 
       render(<NameColumn row={row} getValue={getValue} />, { wrapper })
@@ -164,16 +165,16 @@ describe('NameColumn', () => {
   describe('when component is expanded', () => {
     it('renders value', async () => {
       setup()
-      const getValue = jest.fn()
+      const getValue = vi.fn()
       getValue.mockImplementation(() => 'file.ts')
 
       const row = {
-        getValue: jest.fn().mockImplementation(() => ({
+        getValue: vi.fn().mockImplementation(() => ({
           props: {
             children: ['file.ts'],
           },
         })),
-        getIsExpanded: jest.fn().mockImplementation(() => true),
+        getIsExpanded: vi.fn().mockImplementation(() => true),
       }
 
       render(<NameColumn row={row} getValue={getValue} />, { wrapper })
@@ -184,16 +185,16 @@ describe('NameColumn', () => {
 
     it('prefetches query data', async () => {
       const { user } = setup()
-      const getValue = jest.fn()
+      const getValue = vi.fn()
       getValue.mockImplementation(() => 'file.ts')
 
       const row = {
-        getValue: jest.fn().mockImplementation(() => ({
+        getValue: vi.fn().mockImplementation(() => ({
           props: {
             children: ['file.ts'],
           },
         })),
-        getIsExpanded: jest.fn().mockImplementation(() => true),
+        getIsExpanded: vi.fn().mockImplementation(() => true),
       }
 
       render(<NameColumn row={row} getValue={getValue} />, { wrapper })
diff --git a/src/pages/PullRequestPage/PullCoverage/routes/FilesChangedTab/FilesChanged/TableTeam/TableTeam.spec.tsx b/src/pages/PullRequestPage/PullCoverage/routes/FilesChangedTab/FilesChanged/TableTeam/TableTeam.test.tsx
similarity index 91%
rename from src/pages/PullRequestPage/PullCoverage/routes/FilesChangedTab/FilesChanged/TableTeam/TableTeam.spec.tsx
rename to src/pages/PullRequestPage/PullCoverage/routes/FilesChangedTab/FilesChanged/TableTeam/TableTeam.test.tsx
index a36eaae081..6880d6fbb5 100644
--- a/src/pages/PullRequestPage/PullCoverage/routes/FilesChangedTab/FilesChanged/TableTeam/TableTeam.spec.tsx
+++ b/src/pages/PullRequestPage/PullCoverage/routes/FilesChangedTab/FilesChanged/TableTeam/TableTeam.test.tsx
@@ -1,15 +1,15 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { 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 } from 'react-router-dom'
 
 import { OrderingDirection, OrderingParameter } from 'services/pull/usePullTeam'
 
 import TableTeam, { getFilter } from './TableTeam'
 
-jest.mock('../FileDiff', () => () => 'FileDiff')
+vi.mock('../FileDiff', () => ({ default: () => 'FileDiff' }))
 
 const mockComparisonTeamData = {
   owner: {
@@ -271,7 +271,7 @@ describe('TableTeam', () => {
     }
   ) {
     const user = userEvent.setup()
-    const mockVars = jest.fn()
+    const mockVars = vi.fn()
 
     const queryClient = new QueryClient({
       defaultOptions: {
@@ -282,47 +282,35 @@ describe('TableTeam', () => {
     })
 
     server.use(
-      graphql.query('GetPullTeam', (req, res, ctx) => {
-        mockVars(req.variables?.filters)
+      graphql.query('GetPullTeam', (info) => {
+        mockVars(info.variables?.filters)
 
         if (pendingPull) {
-          return res(ctx.status(200), ctx.data(mockPendingPull))
+          return HttpResponse.json({ data: mockPendingPull })
+        } else if (noCoveredFiles) {
+          return HttpResponse.json({ data: mockEmptyFilesPull })
+        } else if (criticalFile) {
+          return HttpResponse.json({ data: mockPullCriticalFileData })
+        } else if (noChange) {
+          return HttpResponse.json({ data: mockNoChangeFileData })
         }
 
-        if (noCoveredFiles) {
-          return res(ctx.status(200), ctx.data(mockEmptyFilesPull))
-        }
-
-        if (criticalFile) {
-          return res(ctx.status(200), ctx.data(mockPullCriticalFileData))
-        }
-
-        if (noChange) {
-          return res(ctx.status(200), ctx.data(mockNoChangeFileData))
-        }
-
-        return res(ctx.status(200), ctx.data(mockPullTeamData))
+        return HttpResponse.json({ data: mockPullTeamData })
       }),
-      graphql.query('GetPullCompareTotalsTeam', (req, res, ctx) => {
-        mockVars(req.variables)
+      graphql.query('GetPullCompareTotalsTeam', (info) => {
+        mockVars(info.variables)
 
         if (pendingPull) {
-          return res(ctx.status(200), ctx.data(mockPendingComparison))
-        }
-
-        if (noCoveredFiles) {
-          return res(ctx.status(200), ctx.data(mockEmptyFilesComparison))
-        }
-
-        if (criticalFile) {
-          return res(ctx.status(200), ctx.data(mockPullCriticalFileData))
-        }
-
-        if (noChange) {
-          return res(ctx.status(200), ctx.data(mockNoChangeFileData))
+          return HttpResponse.json({ data: mockPendingComparison })
+        } else if (noCoveredFiles) {
+          return HttpResponse.json({ data: mockEmptyFilesComparison })
+        } else if (criticalFile) {
+          return HttpResponse.json({ data: mockPullCriticalFileData })
+        } else if (noChange) {
+          return HttpResponse.json({ data: mockNoChangeFileData })
         }
 
-        return res(ctx.status(200), ctx.data(mockComparisonTeamData))
+        return HttpResponse.json({ data: mockComparisonTeamData })
       })
     )
 
diff --git a/src/pages/PullRequestPage/PullCoverage/routes/FlagsTab/FlagsTab.spec.tsx b/src/pages/PullRequestPage/PullCoverage/routes/FlagsTab/FlagsTab.test.tsx
similarity index 94%
rename from src/pages/PullRequestPage/PullCoverage/routes/FlagsTab/FlagsTab.spec.tsx
rename to src/pages/PullRequestPage/PullCoverage/routes/FlagsTab/FlagsTab.test.tsx
index 34f890cbd4..8e51d92a46 100644
--- a/src/pages/PullRequestPage/PullCoverage/routes/FlagsTab/FlagsTab.spec.tsx
+++ b/src/pages/PullRequestPage/PullCoverage/routes/FlagsTab/FlagsTab.test.tsx
@@ -1,8 +1,7 @@
-import { render, screen } from 'custom-testing-library'
-
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { graphql } from 'msw'
-import { setupServer } from 'msw/node'
+import { render, screen } from '@testing-library/react'
+import { graphql, HttpResponse } from 'msw2'
+import { setupServer } from 'msw2/node'
 import { MemoryRouter, Route } from 'react-router-dom'
 
 import { PullComparison } from 'services/pull'
@@ -171,11 +170,11 @@ describe('FlagsTab', () => {
   function setup({
     overrideComparison,
   }: { overrideComparison?: PullComparison } = {}) {
-    const variablesPassed = jest.fn()
+    const variablesPassed = vi.fn()
     server.use(
-      graphql.query('Pull', (req, res, ctx) => {
-        variablesPassed(req.variables)
-        return res(ctx.status(200), ctx.data(mockPull({ overrideComparison })))
+      graphql.query('Pull', (info) => {
+        variablesPassed(info.variables)
+        return HttpResponse.json({ data: mockPull({ overrideComparison }) })
       })
     )
 
@@ -229,7 +228,10 @@ describe('FlagsTab', () => {
         name: /Flags feature not configured/,
       })
       expect(flagsMarketingImg).toBeInTheDocument()
-      expect(flagsMarketingImg).toHaveAttribute('src', 'flagManagement.svg')
+      expect(flagsMarketingImg).toHaveAttribute(
+        'src',
+        '/src/assets/flagManagement.svg'
+      )
       expect(flagsMarketingImg).toHaveAttribute(
         'alt',
         'Flags feature not configured'
diff --git a/src/pages/PullRequestPage/PullCoverage/routes/FlagsTab/index.js b/src/pages/PullRequestPage/PullCoverage/routes/FlagsTab/index.ts
similarity index 100%
rename from src/pages/PullRequestPage/PullCoverage/routes/FlagsTab/index.js
rename to src/pages/PullRequestPage/PullCoverage/routes/FlagsTab/index.ts
diff --git a/src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/FileDiff/FileDiff.spec.jsx b/src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/FileDiff/FileDiff.test.jsx
similarity index 89%
rename from src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/FileDiff/FileDiff.spec.jsx
rename to src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/FileDiff/FileDiff.test.jsx
index 445254bf46..53b200d695 100644
--- a/src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/FileDiff/FileDiff.spec.jsx
+++ b/src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/FileDiff/FileDiff.test.jsx
@@ -1,14 +1,22 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { render, screen } 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 { useScrollToLine } from 'ui/CodeRenderer/hooks/useScrollToLine'
-
 import FileDiff from './FileDiff'
 
-jest.mock('ui/CodeRenderer/hooks/useScrollToLine')
+const mocks = vi.hoisted(() => ({
+  useScrollToLine: vi.fn(),
+}))
+
+vi.mock('ui/CodeRenderer/hooks/useScrollToLine', async () => {
+  const actual = await vi.importActual('ui/CodeRenderer/hooks/useScrollToLine')
+  return {
+    ...actual,
+    useScrollToLine: mocks.useScrollToLine,
+  }
+})
 window.requestAnimationFrame = (cb) => cb()
 window.cancelAnimationFrame = () => {}
 
@@ -109,21 +117,18 @@ describe('FileDiff', () => {
       bundleAnalysisEnabled: false,
     }
   ) {
-    useScrollToLine.mockImplementation(() => ({
+    mocks.useScrollToLine.mockImplementation(() => ({
       lineRef: () => {},
-      handleClick: jest.fn(),
+      handleClick: vi.fn(),
       targeted: false,
     }))
 
     server.use(
-      graphql.query('ImpactedFileComparison', (req, res, ctx) =>
-        res(ctx.status(200), ctx.data(baseMock(impactedFile)))
-      ),
-      graphql.query('GetRepoOverview', (req, res, ctx) => {
-        return res(
-          ctx.status(200),
-          ctx.data(mockOverview(bundleAnalysisEnabled))
-        )
+      graphql.query('ImpactedFileComparison', (info) => {
+        return HttpResponse.json({ data: baseMock(impactedFile) })
+      }),
+      graphql.query('GetRepoOverview', (info) => {
+        return HttpResponse.json({ data: mockOverview(bundleAnalysisEnabled) })
       })
     )
   }
diff --git a/src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/IndirectChangedFiles/IndirectChangedFiles.spec.tsx b/src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/IndirectChangedFiles/IndirectChangedFiles.test.tsx
similarity index 96%
rename from src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/IndirectChangedFiles/IndirectChangedFiles.spec.tsx
rename to src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/IndirectChangedFiles/IndirectChangedFiles.test.tsx
index 7d5baa071d..a3e71516c6 100644
--- a/src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/IndirectChangedFiles/IndirectChangedFiles.spec.tsx
+++ b/src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/IndirectChangedFiles/IndirectChangedFiles.test.tsx
@@ -1,10 +1,8 @@
-import { render, screen } from 'custom-testing-library'
-
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { waitFor } from '@testing-library/react'
+import { 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 } from 'react-router-dom'
 
 import { PullComparison } from 'services/pull'
@@ -12,7 +10,7 @@ import { UploadTypeEnum } from 'shared/utils/commit'
 
 import IndirectChangedFiles from './IndirectChangedFiles'
 
-jest.mock('../FileDiff', () => () => 'FileDiff Component')
+vi.mock('../FileDiff', () => ({ default: () => 'FileDiff Component' }))
 
 const mockImpactedFiles = [
   {
@@ -210,19 +208,18 @@ const wrapper: WrapperClosure =
 
 describe('IndirectChangedFiles', () => {
   function setup(overrideComparison?: PullComparison) {
-    const mockVars = jest.fn()
+    const mockVars = vi.fn()
 
     server.use(
-      graphql.query('Pull', (req, res, ctx) => {
-        mockVars(req.variables)
-        return res(ctx.status(200), ctx.data(mockPull(overrideComparison)))
+      graphql.query('Pull', (info) => {
+        mockVars(info.variables)
+        return HttpResponse.json({ data: mockPull(overrideComparison) })
       }),
-
-      graphql.query('ImpactedFileComparison', (req, res, ctx) =>
-        res(ctx.status(200), ctx.data(mockSingularImpactedFilesData))
+      graphql.query('ImpactedFileComparison', (info) =>
+        HttpResponse.json({ data: mockSingularImpactedFilesData })
       ),
-      graphql.query('GetRepoOverview', (req, res, ctx) => {
-        return res(ctx.status(200), ctx.data(mockOverview))
+      graphql.query('GetRepoOverview', (info) => {
+        return HttpResponse.json({ data: mockOverview })
       })
     )
 
diff --git a/src/pages/PullRequestPage/PullCoverage/routes/FilesChangedTab/FilesChanged/NameColumn/NameColumn.spec.jsx b/src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/IndirectChangedFiles/NameColumn/NameColumn.test.jsx
similarity index 96%
rename from src/pages/PullRequestPage/PullCoverage/routes/FilesChangedTab/FilesChanged/NameColumn/NameColumn.spec.jsx
rename to src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/IndirectChangedFiles/NameColumn/NameColumn.test.jsx
index 99ecf57454..5dcf501e43 100644
--- a/src/pages/PullRequestPage/PullCoverage/routes/FilesChangedTab/FilesChanged/NameColumn/NameColumn.spec.jsx
+++ b/src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/IndirectChangedFiles/NameColumn/NameColumn.test.jsx
@@ -1,8 +1,8 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { 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 } from 'react-router-dom'
 
 import NameColumn from './NameColumn'
@@ -26,7 +26,6 @@ const mockSingularImpactedFilesData = {
             isRenamedFile: false,
             isDeletedFile: false,
             isCriticalFile: false,
-            changeCoverage: 58.333333333333336,
             headCoverage: {
               percentCovered: 90.23,
             },
@@ -36,6 +35,7 @@ const mockSingularImpactedFilesData = {
             patchCoverage: {
               percentCovered: 27.43,
             },
+            changeCoverage: 58.333333333333336,
             segments: {
               results: [
                 {
@@ -84,9 +84,9 @@ describe('NameColumn', () => {
     const user = userEvent.setup()
 
     server.use(
-      graphql.query('ImpactedFileComparison', (req, res, ctx) =>
-        res(ctx.status(200), ctx.data(mockSingularImpactedFilesData))
-      )
+      graphql.query('ImpactedFileComparison', (info) => {
+        return HttpResponse.json({ data: mockSingularImpactedFilesData })
+      })
     )
 
     return { user }
@@ -115,7 +115,6 @@ describe('NameColumn', () => {
 
     it('prefetches query data', async () => {
       const { user } = setup()
-
       const getValue = jest.fn()
       getValue.mockImplementation(() => 'file.ts')
 
diff --git a/src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/IndirectChangedFiles/hooks/index.js b/src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/IndirectChangedFiles/hooks/index.ts
similarity index 100%
rename from src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/IndirectChangedFiles/hooks/index.js
rename to src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/IndirectChangedFiles/hooks/index.ts
diff --git a/src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/IndirectChangedFiles/hooks/useIndirectChangedFilesTable.spec.tsx b/src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/IndirectChangedFiles/hooks/useIndirectChangedFilesTable.test.tsx
similarity index 96%
rename from src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/IndirectChangedFiles/hooks/useIndirectChangedFilesTable.spec.tsx
rename to src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/IndirectChangedFiles/hooks/useIndirectChangedFilesTable.test.tsx
index a2fc624d9b..b27a8433a5 100644
--- a/src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/IndirectChangedFiles/hooks/useIndirectChangedFilesTable.spec.tsx
+++ b/src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/IndirectChangedFiles/hooks/useIndirectChangedFilesTable.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 qs from 'qs'
 import { MemoryRouter, Route } from 'react-router-dom'
 
@@ -171,12 +171,12 @@ afterAll(() => {
 
 describe('useIndirectChangedFilesTable', () => {
   function setup() {
-    const variablesPassed = jest.fn()
+    const variablesPassed = vi.fn()
 
     server.use(
-      graphql.query('Pull', (req, res, ctx) => {
-        variablesPassed(req.variables)
-        return res(ctx.status(200), ctx.data(mockPull))
+      graphql.query('Pull', (info) => {
+        variablesPassed(info.variables)
+        return HttpResponse.json({ data: mockPull })
       })
     )
 
diff --git a/src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/IndirectChangesInfo/IndirectChangesInfo.spec.jsx b/src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/IndirectChangesInfo/IndirectChangesInfo.test.jsx
similarity index 89%
rename from src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/IndirectChangesInfo/IndirectChangesInfo.spec.jsx
rename to src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/IndirectChangesInfo/IndirectChangesInfo.test.jsx
index 4a524c048c..a5264fc245 100644
--- a/src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/IndirectChangesInfo/IndirectChangesInfo.spec.jsx
+++ b/src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/IndirectChangesInfo/IndirectChangesInfo.test.jsx
@@ -1,10 +1,11 @@
-import { render, screen } from 'custom-testing-library'
-
+import { render, screen } from '@testing-library/react'
 import { MemoryRouter, Route } from 'react-router-dom'
 
 import IndirectChangesInfo from './IndirectChangesInfo'
 
-jest.mock('../../ComponentsSelector', () => () => 'ComponentsSelector')
+vi.mock('../../ComponentsSelector', () => ({
+  default: () => 'ComponentsSelector',
+}))
 
 describe('Indiret changes Info', () => {
   it('renders the expected copy', () => {
diff --git a/src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/IndirectChangesTab.spec.jsx b/src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/IndirectChangesTab.test.jsx
similarity index 95%
rename from src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/IndirectChangesTab.spec.jsx
rename to src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/IndirectChangesTab.test.jsx
index 79137c6fde..5b8602835e 100644
--- a/src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/IndirectChangesTab.spec.jsx
+++ b/src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/IndirectChangesTab.test.jsx
@@ -1,8 +1,7 @@
-import { render, screen } from 'custom-testing-library'
-
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { graphql } from 'msw'
-import { setupServer } from 'msw/node'
+import { render, screen } from '@testing-library/react'
+import { graphql, HttpResponse } from 'msw2'
+import { setupServer } from 'msw2/node'
 import { MemoryRouter, Route } from 'react-router-dom'
 
 import { CommitStateEnum, UploadTypeEnum } from 'shared/utils/commit'
@@ -11,10 +10,9 @@ import { ImpactedFilesReturnType } from 'shared/utils/impactedFiles'
 
 import IndirectChangesTab from './IndirectChangesTab'
 
-jest.mock(
-  './IndirectChangedFiles/IndirectChangedFiles',
-  () => () => 'IndirectChangedFiles Component'
-)
+vi.mock('./IndirectChangedFiles/IndirectChangedFiles', () => ({
+  default: () => 'IndirectChangedFiles Component',
+}))
 
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
@@ -173,11 +171,10 @@ afterAll(() => server.close())
 describe('IndirectChangesTab', () => {
   function setup({ overrideComparison, headState } = {}) {
     server.use(
-      graphql.query('Pull', (_, res, ctx) => {
-        return res(
-          ctx.status(200),
-          ctx.data(mockPull({ overrideComparison, headState }))
-        )
+      graphql.query('Pull', (info) => {
+        return HttpResponse.json({
+          data: mockPull({ overrideComparison, headState }),
+        })
       })
     )
   }
diff --git a/src/pages/PullRequestPage/hooks/index.js b/src/pages/PullRequestPage/hooks/index.ts
similarity index 100%
rename from src/pages/PullRequestPage/hooks/index.js
rename to src/pages/PullRequestPage/hooks/index.ts
diff --git a/src/pages/PullRequestPage/index.js b/src/pages/PullRequestPage/index.ts
similarity index 100%
rename from src/pages/PullRequestPage/index.js
rename to src/pages/PullRequestPage/index.ts
diff --git a/src/pages/PullRequestPage/utils/paths.spec.js b/src/pages/PullRequestPage/utils/paths.test.js
similarity index 100%
rename from src/pages/PullRequestPage/utils/paths.spec.js
rename to src/pages/PullRequestPage/utils/paths.test.js