chore: Update pages/PlanPage tests to Vitest

src/pages/PlanPage/PlanPage.spec.jsx → src/pages/PlanPage/PlanPage.test.jsx

@@ -1,22 +1,30 @@
 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'
 
 import config from 'config'
 
 import PlanPage from './PlanPage'
 
-jest.mock('config')
-
-jest.mock('./Tabs', () => () => 'Tabs')
-jest.mock('./subRoutes/CancelPlanPage', () => () => 'CancelPlanPage')
-jest.mock('./subRoutes/CurrentOrgPlan', () => () => 'CurrentOrgPlan')
-jest.mock('./subRoutes/InvoicesPage', () => () => 'InvoicesPage')
-jest.mock('./subRoutes/InvoiceDetailsPage', () => () => 'InvoiceDetailsPage')
-jest.mock('./subRoutes/UpgradePlanPage', () => () => 'UpgradePlanPage')
+vi.mock('config')
+
+vi.mock('./Tabs', () => ({ default: () => 'Tabs' }))
+vi.mock('./subRoutes/CancelPlanPage', () => ({
+  default: () => 'CancelPlanPage',
+}))
+vi.mock('./subRoutes/CurrentOrgPlan', () => ({
+  default: () => 'CurrentOrgPlan',
+}))
+vi.mock('./subRoutes/InvoicesPage', () => ({ default: () => 'InvoicesPage' }))
+vi.mock('./subRoutes/InvoiceDetailsPage', () => ({
+  default: () => 'InvoiceDetailsPage',
+}))
+vi.mock('./subRoutes/UpgradePlanPage', () => ({
+  default: () => 'UpgradePlanPage',
+}))
 
 const server = setupServer()
 const queryClient = new QueryClient({
@@ -54,7 +62,7 @@ beforeAll(() => {
 afterEach(() => {
   queryClient.clear()
   server.resetHandlers()
-  jest.resetAllMocks()
+  vi.resetAllMocks()
 })
 afterAll(() => {
   server.close()
@@ -73,9 +81,9 @@ describe('PlanPage', () => {
     config.IS_SELF_HOSTED = isSelfHosted
 
     server.use(
-      graphql.query('PlanPageData', (req, res, ctx) =>
-        res(ctx.status(200), ctx.data({ owner }))
-      )
+      graphql.query('PlanPageData', (info) => {
+        return HttpResponse.json({ data: { owner } })
+      })
     )
   }
 

src/pages/PlanPage/Tabs/Tabs.spec.tsx → src/pages/PlanPage/Tabs/Tabs.test.tsx

@@ -1,47 +1,33 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { render, screen } from '@testing-library/react'
-import { setupServer } from 'msw/node'
 import { MemoryRouter, Route } from 'react-router-dom'
 
 import config from 'config'
 
-import { useFlags } from 'shared/featureFlags'
-
 import Tabs from './Tabs'
 
-jest.mock('config')
-
-jest.mock('shared/featureFlags')
-
-const mockedUseFlags = useFlags as jest.Mock
+const mocks = vi.hoisted(() => ({
+  useFlags: vi.fn(),
+}))
 
-const queryClient = new QueryClient()
-const server = setupServer()
+vi.mock('config')
+vi.mock('shared/featureFlags', async () => {
+  const actual = await vi.importActual('shared/featureFlags')
+  return {
+    ...actual,
+    useFlags: mocks.useFlags,
+  }
+})
 
-const wrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <QueryClientProvider client={queryClient}>
-    <MemoryRouter initialEntries={['/analytics/gh/codecov']}>
-      <Route path="/analytics/:provider/:owner">{children}</Route>
-    </MemoryRouter>
-  </QueryClientProvider>
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
+  <MemoryRouter initialEntries={['/analytics/gh/codecov']}>
+    <Route path="/analytics/:provider/:owner">{children}</Route>
+  </MemoryRouter>
 )
 
-beforeAll(() => {
-  server.listen({ onUnhandledRequest: 'warn' })
-  console.error = () => {}
-})
-beforeEach(() => {
-  queryClient.clear()
-  server.resetHandlers()
-})
-afterAll(() => {
-  server.close()
-})
-
 describe('Tabs', () => {
   function setup(isSelfHosted: boolean = false) {
     config.IS_SELF_HOSTED = isSelfHosted
-    mockedUseFlags.mockReturnValue({ codecovAiFeaturesTab: true })
+    mocks.useFlags.mockReturnValue({ codecovAiFeaturesTab: true })
   }
 
   describe('when user is part of the org', () => {
@@ -127,7 +113,7 @@ describe('Tabs', () => {
 
   describe('ai features tab', () => {
     it('does not render tab when flag is off', () => {
-      mockedUseFlags.mockReturnValue({ codecovAiFeaturesTab: false })
+      mocks.useFlags.mockReturnValue({ codecovAiFeaturesTab: false })
       render(<Tabs />, { wrapper })
 
       expect(

src/pages/PlanPage/hooks/usePlanPageData.spec.tsx → src/pages/PlanPage/hooks/usePlanPageData.test.tsx

@@ -1,13 +1,14 @@
 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 { usePlanPageData } from './usePlanPageData'
 
 const mockOwner = {
-  username: 'TerrySmithDC',
+  username: 'cool-user',
   isCurrentUserPartOfOrg: true,
   numberOfUploads: 30,
 }
@@ -35,11 +36,11 @@ afterAll(() => server.close())
 describe('usePlanPageData', () => {
   function setup({ invalidSchema = false }) {
     server.use(
-      graphql.query('PlanPageData', (req, res, ctx) => {
+      graphql.query('PlanPageData', (info) => {
         if (invalidSchema) {
-          return res(ctx.status(200), ctx.data({}))
+          return HttpResponse.json({ data: {} })
         }
-        return res(ctx.status(200), ctx.data({ owner: mockOwner }))
+        return HttpResponse.json({ data: { owner: mockOwner } })
       })
     )
   }
@@ -67,6 +68,15 @@ describe('usePlanPageData', () => {
   })
 
   describe('when schema parsing fails', () => {
+    let consoleSpy: MockInstance
+    beforeAll(() => {
+      consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    })
+
+    afterAll(() => {
+      consoleSpy.mockRestore()
+    })
+
     it('rejects with status 404', async () => {
       setup({ invalidSchema: true })
       const { result } = renderHook(

src/pages/PlanPage/subRoutes/CancelPlanPage/CancelPlanPage.spec.tsx → src/pages/PlanPage/subRoutes/CancelPlanPage/CancelPlanPage.test.tsx

@@ -1,7 +1,7 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { render, screen, waitFor } from '@testing-library/react'
-import { graphql, rest } from 'msw'
-import { setupServer } from 'msw/node'
+import { graphql, http, HttpResponse } from 'msw2'
+import { setupServer } from 'msw2/node'
 import { Suspense } from 'react'
 import { MemoryRouter, Route } from 'react-router-dom'
 
@@ -10,12 +10,11 @@ import { Plans } from 'shared/utils/billing'
 
 import CancelPlanPage from './CancelPlanPage'
 
-jest.mock('./subRoutes/SpecialOffer', () => () => 'SpecialOffer')
-jest.mock('./subRoutes/DowngradePlan', () => () => 'DowngradePlan')
-jest.mock(
-  './subRoutes/TeamPlanSpecialOffer',
-  () => () => 'TeamPlanSpecialOffer'
-)
+vi.mock('./subRoutes/SpecialOffer', () => ({ default: () => 'SpecialOffer' }))
+vi.mock('./subRoutes/DowngradePlan', () => ({ default: () => 'DowngradePlan' }))
+vi.mock('./subRoutes/TeamPlanSpecialOffer', () => ({
+  default: () => 'TeamPlanSpecialOffer',
+}))
 
 const teamPlans = [
   {
@@ -137,25 +136,15 @@ describe('CancelPlanPage', () => {
     hasTeamPlans = false,
   }: SetupProps = {}) {
     server.use(
-      rest.get('internal/gh/codecov/account-details/', (req, res, ctx) =>
-        res(
-          ctx.status(200),
-          ctx.json({
-            plan: {
-              value: planValue,
-            },
-            subscriptionDetail: {
-              customer: {
-                discount: hasDiscount,
-              },
-            },
-          })
-        )
-      ),
-      graphql.query('GetPlanData', (req, res, ctx) =>
-        res(
-          ctx.status(200),
-          ctx.data({
+      http.get('internal/gh/codecov/account-details/', (info) => {
+        return HttpResponse.json({
+          plan: { value: planValue },
+          subscriptionDetail: { customer: { discount: hasDiscount } },
+        })
+      }),
+      graphql.query('GetPlanData', (info) => {
+        return HttpResponse.json({
+          data: {
             owner: {
               hasPrivateRepos: true,
               plan: {
@@ -164,19 +153,18 @@ describe('CancelPlanPage', () => {
                 value: planValue,
               },
             },
-          })
-        )
-      ),
-      graphql.query('GetAvailablePlans', (req, res, ctx) =>
-        res(
-          ctx.status(200),
-          ctx.data({
+          },
+        })
+      }),
+      graphql.query('GetAvailablePlans', (info) => {
+        return HttpResponse.json({
+          data: {
             owner: {
               availablePlans: mockAvailablePlans({ hasTeamPlans }),
             },
-          })
-        )
-      )
+          },
+        })
+      })
     )
   }
 

src/pages/PlanPage/subRoutes/CancelPlanPage/subRoutes/DowngradePlan/CancelButton/CancelButton.spec.jsx → src/pages/PlanPage/subRoutes/CancelPlanPage/subRoutes/DowngradePlan/CancelButton/CancelButton.test.jsx

@@ -1,21 +1,48 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { act, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { MemoryRouter, Route, useParams } from 'react-router-dom'
-
-import { useCancelPlan } from 'services/account'
-import { useAddNotification } from 'services/toastNotification'
+import { MemoryRouter, Route } from 'react-router-dom'
 
 import CancelButton from './CancelButton'
-import { useBarecancel } from './useBarecancel'
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'), // import and retain the original functionalities
-  useParams: jest.fn(() => {}),
+const mocks = vi.hoisted(() => ({
+  useParams: vi.fn(),
+  useBarecancel: vi.fn(),
+  useCancelPlan: vi.fn(),
+  useAddNotification: vi.fn(),
 }))
-jest.mock('./useBarecancel')
-jest.mock('services/account')
-jest.mock('services/toastNotification')
+
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom')
+  return {
+    ...actual, // import and retain the original functionalities
+    useParams: mocks.useParams,
+  }
+})
+
+vi.mock('./useBarecancel', async () => {
+  const actual = await vi.importActual('./useBarecancel')
+  return {
+    ...actual,
+    useBarecancel: mocks.useBarecancel,
+  }
+})
+
+vi.mock('services/account', async () => {
+  const actual = await vi.importActual('services/account')
+  return {
+    ...actual,
+    useCancelPlan: mocks.useCancelPlan,
+  }
+})
+
+vi.mock('services/toastNotification', async () => {
+  const actual = await vi.importActual('services/toastNotification')
+  return {
+    ...actual,
+    useAddNotification: mocks.useAddNotification,
+  }
+})
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -47,17 +74,17 @@ const wrapper = ({ children }) => (
 describe('CancelButton', () => {
   function setup(baremetricsBlocked = false) {
     const user = userEvent.setup()
-    const mutate = jest.fn()
-    const addNotification = jest.fn()
+    const mutate = vi.fn()
+    const addNotification = vi.fn()
 
-    useAddNotification.mockReturnValue(addNotification)
-    useParams.mockReturnValue({ owner: 'Ollie', provider: 'gh' })
-    useCancelPlan.mockReturnValue({
+    mocks.useAddNotification.mockReturnValue(addNotification)
+    mocks.useParams.mockReturnValue({ owner: 'Ollie', provider: 'gh' })
+    mocks.useCancelPlan.mockReturnValue({
       isLoading: false,
       mutate,
-      onError: jest.fn(),
+      onError: vi.fn(),
     })
-    useBarecancel.mockReturnValue({ baremetricsBlocked })
+    mocks.useBarecancel.mockReturnValue({ baremetricsBlocked })
 
     return { mutate, addNotification, user }
   }