chore: Update pages/RepoPage/CoverageOnboarding tests to Vitest (#3333)

src/pages/RepoPage/CoverageOnboarding/ActivationBanner/ActivationBanner.spec.tsx → src/pages/RepoPage/CoverageOnboarding/ActivationBanner/ActivationBanner.test.tsx

@@ -1,15 +1,23 @@
 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 { MemoryRouter, Route } from 'react-router-dom'
 
 import ActivationBanner from './ActivationBanner'
 
-jest.mock('./TrialEligibleBanner', () => () => 'TrialEligibleBanner')
-jest.mock('./ActivationRequiredBanner', () => () => 'ActivationRequiredBanner')
-jest.mock('./FreePlanSeatsLimitBanner', () => () => 'FreePlanSeatsLimitBanner')
-jest.mock('./PaidPlanSeatsLimitBanner', () => () => 'PaidPlanSeatsLimitBanner')
+vi.mock('./TrialEligibleBanner', () => ({
+  default: () => 'TrialEligibleBanner',
+}))
+vi.mock('./ActivationRequiredBanner', () => ({
+  default: () => 'ActivationRequiredBanner',
+}))
+vi.mock('./FreePlanSeatsLimitBanner', () => ({
+  default: () => 'FreePlanSeatsLimitBanner',
+}))
+vi.mock('./PaidPlanSeatsLimitBanner', () => ({
+  default: () => 'PaidPlanSeatsLimitBanner',
+}))
 
 const queryClient = new QueryClient()
 
@@ -58,10 +66,9 @@ describe('ActivationBanner', () => {
     hasSeatsLeft = true
   ) {
     server.use(
-      graphql.query('GetPlanData', (req, res, ctx) => {
-        return res(
-          ctx.status(200),
-          ctx.data({
+      graphql.query('GetPlanData', (info) => {
+        return HttpResponse.json({
+          data: {
             owner: {
               hasPrivateRepos: privateRepos,
               plan: {
@@ -79,8 +86,8 @@ describe('ActivationBanner', () => {
                 value: 'users-basic',
               },
             },
-          })
-        )
+          },
+        })
       })
     )
   }

src/pages/RepoPage/CoverageOnboarding/ActivationBanner/TrialEligibleBanner/TrialEligibleBanner.spec.tsx → src/pages/RepoPage/CoverageOnboarding/ActivationBanner/TrialEligibleBanner/TrialEligibleBanner.test.tsx

@@ -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 TrialEligibleBanner from './TrialEligibleBanner'
@@ -35,10 +35,10 @@ describe('TrialEligibleBanner', () => {
     const mockTrialMutationVariables = jest.fn()
     const user = userEvent.setup()
     server.use(
-      graphql.mutation('startTrial', (req, res, ctx) => {
-        mockTrialMutationVariables(req?.variables)
+      graphql.mutation('startTrial', (info) => {
+        mockTrialMutationVariables(info?.variables)
 
-        return res(ctx.status(200))
+        return HttpResponse.json({ data: { startTrial: null } })
       })
     )
 

src/pages/RepoPage/CoverageOnboarding/CircleCI/CircleCI.spec.tsx → src/pages/RepoPage/CoverageOnboarding/CircleCI/CircleCI.test.tsx

@@ -1,19 +1,24 @@
 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 { Suspense } from 'react'
 import { MemoryRouter, Route } from 'react-router-dom'
 
-import { useFlags } from 'shared/featureFlags'
-
 import CircleCI from './CircleCI'
 
-jest.mock('shared/featureFlags')
-const mockedUseFlags = useFlags as jest.Mock<{
-  newRepoFlag: boolean
-}>
+const mocks = vi.hoisted(() => ({
+  useFlags: vi.fn(),
+}))
+
+vi.mock('shared/featureFlags', async () => {
+  const actual = await vi.importActual('shared/featureFlags')
+  return {
+    ...actual,
+    useFlags: mocks.useFlags,
+  }
+})
 
 const mockGetRepo = {
   owner: {
@@ -80,23 +85,23 @@ interface SetupArgs {
 
 describe('CircleCI', () => {
   function setup({ hasOrgUploadToken = false }: SetupArgs) {
-    mockedUseFlags.mockReturnValue({
+    mocks.useFlags.mockReturnValue({
       newRepoFlag: hasOrgUploadToken,
     })
-    const mockMetricMutationVariables = jest.fn()
-    const mockGetItem = jest.spyOn(window.localStorage.__proto__, 'getItem')
+    const mockMetricMutationVariables = vi.fn()
+    const mockGetItem = vi.spyOn(window.localStorage.__proto__, 'getItem')
     mockGetItem.mockReturnValue(null)
 
     server.use(
-      graphql.query('GetRepo', (req, res, ctx) =>
-        res(ctx.status(200), ctx.data(mockGetRepo))
-      ),
-      graphql.query('GetOrgUploadToken', (req, res, ctx) => {
-        return res(ctx.status(200), ctx.data(mockGetOrgUploadToken))
+      graphql.query('GetRepo', (info) => {
+        return HttpResponse.json({ data: mockGetRepo })
+      }),
+      graphql.query('GetOrgUploadToken', (info) => {
+        return HttpResponse.json({ data: mockGetOrgUploadToken })
       }),
-      graphql.mutation('storeEventMetric', (req, res, ctx) => {
-        mockMetricMutationVariables(req?.variables)
-        return res(ctx.status(200), ctx.data({ storeEventMetric: null }))
+      graphql.mutation('storeEventMetric', (info) => {
+        mockMetricMutationVariables(info?.variables)
+        return HttpResponse.json({ data: { storeEventMetric: null } })
       })
     )
     return { mockMetricMutationVariables }

src/pages/RepoPage/CoverageOnboarding/ExampleBlurb/ExampleBlurb.spec.tsx → src/pages/RepoPage/CoverageOnboarding/ExampleBlurb/ExampleBlurb.test.tsx

@@ -1,27 +1,12 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { render, screen } from '@testing-library/react'
-import { Suspense } from 'react'
 import { MemoryRouter, Route } from 'react-router-dom'
 
 import ExampleBlurb from './ExampleBlurb'
 
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      suspense: true,
-      retry: false,
-    },
-  },
-})
-
 const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
-  <QueryClientProvider client={queryClient}>
-    <MemoryRouter initialEntries={['/gh/codecov/cool-repo/new']}>
-      <Route path={['/:provider/:owner/:repo/new']}>
-        <Suspense fallback={null}>{children}</Suspense>
-      </Route>
-    </MemoryRouter>
-  </QueryClientProvider>
+  <MemoryRouter initialEntries={['/gh/codecov/cool-repo/new']}>
+    <Route path={['/:provider/:owner/:repo/new']}>{children}</Route>
+  </MemoryRouter>
 )
 
 describe('ExampleBlurb', () => {

src/pages/RepoPage/CoverageOnboarding/GitHubActions/GitHubActions.spec.tsx → src/pages/RepoPage/CoverageOnboarding/GitHubActions/GitHubActions.test.tsx

@@ -1,19 +1,24 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { render, screen } 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 { Suspense } from 'react'
 import { MemoryRouter, Route } from 'react-router-dom'
 
-import { useFlags } from 'shared/featureFlags'
-
 import GitHubActions from './GitHubActions'
 
-jest.mock('shared/featureFlags')
-const mockedUseFlags = useFlags as jest.Mock<{
-  newRepoFlag: boolean
-}>
+const mocks = vi.hoisted(() => ({
+  useFlags: vi.fn(),
+}))
+
+vi.mock('shared/featureFlags', async () => {
+  const actual = await vi.importActual('shared/featureFlags')
+  return {
+    ...actual,
+    useFlags: mocks.useFlags,
+  }
+})
 
 const mockGetRepo = {
   owner: {
@@ -81,24 +86,24 @@ interface SetupArgs {
 
 describe('GitHubActions', () => {
   function setup({ hasOrgUploadToken = false }: SetupArgs) {
-    mockedUseFlags.mockReturnValue({
+    mocks.useFlags.mockReturnValue({
       newRepoFlag: hasOrgUploadToken,
     })
 
-    const mockMetricMutationVariables = jest.fn()
-    const mockGetItem = jest.spyOn(window.localStorage.__proto__, 'getItem')
+    const mockMetricMutationVariables = vi.fn()
+    const mockGetItem = vi.spyOn(window.localStorage.__proto__, 'getItem')
     mockGetItem.mockReturnValue(null)
 
     server.use(
-      graphql.query('GetRepo', (req, res, ctx) =>
-        res(ctx.status(200), ctx.data(mockGetRepo))
-      ),
-      graphql.query('GetOrgUploadToken', (req, res, ctx) => {
-        return res(ctx.status(200), ctx.data(mockGetOrgUploadToken))
+      graphql.query('GetRepo', (info) => {
+        return HttpResponse.json({ data: mockGetRepo })
+      }),
+      graphql.query('GetOrgUploadToken', (info) => {
+        return HttpResponse.json({ data: mockGetOrgUploadToken })
       }),
-      graphql.mutation('storeEventMetric', (req, res, ctx) => {
-        mockMetricMutationVariables(req?.variables)
-        return res(ctx.status(200), ctx.data({ storeEventMetric: null }))
+      graphql.mutation('storeEventMetric', (info) => {
+        mockMetricMutationVariables(info?.variables)
+        return HttpResponse.json({ data: { storeEventMetric: null } })
       })
     )
     const user = userEvent.setup()

src/pages/RepoPage/CoverageOnboarding/NewRepoTab.spec.tsx → src/pages/RepoPage/CoverageOnboarding/NewRepoTab.test.tsx

@@ -1,21 +1,29 @@
 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 { PropsWithChildren, Suspense } from 'react'
 import { MemoryRouter, Route, useLocation } from 'react-router-dom'
 
-import { useRedirect } from 'shared/useRedirect'
-
 import NewRepoTab from './NewRepoTab'
 
-jest.mock('shared/useRedirect')
-const mockedUseRedirect = useRedirect as jest.Mock
-jest.mock('./GitHubActions', () => () => 'GitHubActions')
-jest.mock('./CircleCI', () => () => 'CircleCI')
-jest.mock('./OtherCI', () => () => 'OtherCI')
-jest.mock('./ActivationBanner', () => () => 'ActivationBanner')
+const mocks = vi.hoisted(() => ({
+  useRedirect: vi.fn(),
+}))
+
+vi.mock('shared/useRedirect', async () => {
+  const actual = await vi.importActual('shared/useRedirect')
+  return {
+    ...actual,
+    useRedirect: mocks.useRedirect,
+  }
+})
+
+vi.mock('./GitHubActions', () => ({ default: () => 'GitHubActions' }))
+vi.mock('./CircleCI', () => ({ default: () => 'CircleCI' }))
+vi.mock('./OtherCI', () => ({ default: () => 'OtherCI' }))
+vi.mock('./ActivationBanner', () => ({ default: () => 'ActivationBanner' }))
 
 const mockCurrentUser = {
   me: {
@@ -112,34 +120,31 @@ describe('NewRepoTab', () => {
     isPrivate = false,
   }: SetupArgs) {
     const user = userEvent.setup()
-    const hardRedirect = jest.fn()
-    mockedUseRedirect.mockImplementation((data) => ({
+    const hardRedirect = vi.fn()
+    mocks.useRedirect.mockImplementation((data) => ({
       hardRedirect: () => hardRedirect(data),
     }))
-    const mockMetricMutationVariables = jest.fn()
-    const mockGetItem = jest.spyOn(window.localStorage.__proto__, 'getItem')
+    const mockMetricMutationVariables = vi.fn()
+    const mockGetItem = vi.spyOn(window.localStorage.__proto__, 'getItem')
     mockGetItem.mockReturnValue(null)
 
     server.use(
-      graphql.query('GetRepo', (req, res, ctx) =>
-        res(
-          ctx.status(200),
-          ctx.data(
-            mockGetRepo(
-              noUploadToken,
-              hasCommits,
-              isCurrentUserActivated,
-              isPrivate
-            )
-          )
-        )
-      ),
-      graphql.query('CurrentUser', (req, res, ctx) =>
-        res(ctx.status(200), ctx.data(mockCurrentUser))
-      ),
-      graphql.mutation('storeEventMetric', (req, res, ctx) => {
-        mockMetricMutationVariables(req?.variables)
-        return res(ctx.status(200), ctx.data({ storeEventMetric: null }))
+      graphql.query('GetRepo', (info) => {
+        return HttpResponse.json({
+          data: mockGetRepo(
+            noUploadToken,
+            hasCommits,
+            isCurrentUserActivated,
+            isPrivate
+          ),
+        })
+      }),
+      graphql.query('CurrentUser', (info) => {
+        return HttpResponse.json({ data: mockCurrentUser })
+      }),
+      graphql.mutation('storeEventMetric', (info) => {
+        mockMetricMutationVariables(info?.variables)
+        return HttpResponse.json({ data: { storeEventMetric: null } })
       })
     )
 

src/pages/RepoPage/CoverageOnboarding/OtherCI/OtherCI.spec.tsx → src/pages/RepoPage/CoverageOnboarding/OtherCI/OtherCI.test.tsx

@@ -1,18 +1,23 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { render, screen } 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 { useFlags } from 'shared/featureFlags'
-
 import OtherCI from './OtherCI'
 
-jest.mock('shared/featureFlags')
-const mockedUseFlags = useFlags as jest.Mock<{
-  newRepoFlag: boolean
-}>
+const mocks = vi.hoisted(() => ({
+  useFlags: vi.fn(),
+}))
+
+vi.mock('shared/featureFlags', async () => {
+  const actual = await vi.importActual('shared/featureFlags')
+  return {
+    ...actual,
+    useFlags: mocks.useFlags,
+  }
+})
 
 const mockGetRepo = {
   owner: {
@@ -81,16 +86,16 @@ interface SetupArgs {
 describe('OtherCI', () => {
   function setup({ hasOrgUploadToken = false }: SetupArgs) {
     const user = userEvent.setup()
-
-    mockedUseFlags.mockReturnValue({
+    mocks.useFlags.mockReturnValue({
       newRepoFlag: hasOrgUploadToken,
     })
+
     server.use(
-      graphql.query('GetRepo', (req, res, ctx) =>
-        res(ctx.status(200), ctx.data(mockGetRepo))
-      ),
-      graphql.query('GetOrgUploadToken', (req, res, ctx) => {
-        return res(ctx.status(200), ctx.data(mockGetOrgUploadToken))
+      graphql.query('GetRepo', (info) => {
+        return HttpResponse.json({ data: mockGetRepo })
+      }),
+      graphql.query('GetOrgUploadToken', (info) => {
+        return HttpResponse.json({ data: mockGetOrgUploadToken })
       })
     )