i am too lazy to commit the rest by themselves

src/pages/PullRequestPage/PullCoverage/Summary/CompareSummary/CompareSummary.spec.jsx → 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 })
+      })
     )
   }
 

src/pages/PullRequestPage/PullCoverage/Summary/CompareSummary/usePullForCompareSummary.spec.js → 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())
   }
 

src/pages/PullRequestPage/PullCoverage/Summary/Summary.spec.tsx → 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`

src/pages/PullRequestPage/PullCoverage/routes/FileViewer/FileViewer.spec.jsx → 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 } })
+      })
     )
   }
 

src/pages/PullRequestPage/PullCoverage/routes/IndirectChangesTab/IndirectChangedFiles/NameColumn/NameColumn.spec.jsx → 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 })