chore: Update services/charts tests to Vitest (#3299)

codecov.yml

@@ -49,6 +49,8 @@ ignore:
   - './src/**/*.svg'
   - './src/**/*.png'
   - './src/**/*.jpg'
+  - ./src/**/*.mocks.js
+  - ./src/**/*.mocks.ts
 
 component_management:
   default_rules:

src/services/charts/mocks.js → src/services/charts/mocks.ts

@@ -1,25 +1,25 @@
 /* eslint-disable camelcase */
-import { rest } from 'msw'
+import { http, HttpResponse } from 'msw2'
 
 const repoUri = '/internal/charts/:provider/:owner/coverage/repository'
 
-export const repoCoverageHandler = rest.post(repoUri, (req, res, ctx) => {
-  return res(ctx.status(200), ctx.json(exampleYearlyRes))
+export const repoCoverageHandler = http.post(repoUri, (info) => {
+  return HttpResponse.json(exampleYearlyRes)
 })
 
-export const repoCoverageHandler404 = rest.post(repoUri, (req, res, ctx) => {
-  return res(ctx.status(404), ctx.json({}))
+export const repoCoverageHandler404 = http.post(repoUri, (info) => {
+  return HttpResponse.json({}, { status: 404 })
 })
 
 const orgUri = '/internal/charts/:provider/:owner/coverage/organization'
 
-export const orgCoverageHandler = rest.get(orgUri, (req, res, ctx) => {
+export const orgCoverageHandler = http.get(orgUri, (info) => {
   // This is maybe a bit redundant atm but I would like to test some data mutation utils later
-  const query = req.url.searchParams
+  const query = new URL(info.request.url).searchParams
   if (query.get('grouping_unit') === 'yearly') {
-    return res(ctx.status(200), ctx.json(exampleYearlyRes))
+    return HttpResponse.json(exampleYearlyRes)
   } else if (query.get('grouping_unit') === 'quarterly') {
-    return res(ctx.status(200), ctx.json(exampleQuarterRes))
+    return HttpResponse.json(exampleQuarterRes)
   }
 })
 

src/services/charts/useBranchCoverageMeasurements.spec.tsx → src/services/charts/useBranchCoverageMeasurements.test.tsx

@@ -1,7 +1,8 @@
 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 { type MockInstance } from 'vitest'
 
 import { useBranchCoverageMeasurements } from './useBranchCoverageMeasurements'
 
@@ -96,17 +97,17 @@ describe('useBranchCoverageMeasurements', () => {
     isNullOwner = false,
   }: SetupArgs) {
     server.use(
-      graphql.query('GetBranchCoverageMeasurements', (req, res, ctx) => {
+      graphql.query('GetBranchCoverageMeasurements', (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 {
-          return res(ctx.status(200), ctx.data(mockBranchMeasurements))
+          return HttpResponse.json({ data: mockBranchMeasurements })
         }
       })
     )
@@ -184,14 +185,14 @@ describe('useBranchCoverageMeasurements', () => {
   })
 
   describe('returns NotFoundError __typename', () => {
-    let oldConsoleError = console.error
+    let consoleSpy: MockInstance
 
     beforeEach(() => {
-      console.error = () => null
+      consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => null)
     })
 
     afterEach(() => {
-      console.error = oldConsoleError
+      consoleSpy.mockRestore()
     })
 
     it('throws a 404', async () => {
@@ -222,14 +223,14 @@ describe('useBranchCoverageMeasurements', () => {
   })
 
   describe('returns OwnerNotActivatedError __typename', () => {
-    let oldConsoleError = console.error
+    let consoleSpy: MockInstance
 
     beforeEach(() => {
-      console.error = () => null
+      consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => null)
     })
 
     afterEach(() => {
-      console.error = oldConsoleError
+      consoleSpy.mockRestore()
     })
 
     it('throws a 403', async () => {
@@ -260,14 +261,14 @@ describe('useBranchCoverageMeasurements', () => {
   })
 
   describe('unsuccessful parse of zod schema', () => {
-    let oldConsoleError = console.error
+    let consoleSpy: MockInstance
 
     beforeEach(() => {
-      console.error = () => null
+      consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => null)
     })
 
     afterEach(() => {
-      console.error = oldConsoleError
+      consoleSpy.mockRestore()
     })
 
     it('throws a 404', async () => {

src/services/charts/useLegacyRepoCoverage.spec.js → src/services/charts/useLegacyRepoCoverage.test.jsx

@@ -1,6 +1,6 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { renderHook, waitFor } from '@testing-library/react'
-import { setupServer } from 'msw/node'
+import { setupServer } from 'msw2/node'
 
 import { repoCoverageHandler } from './mocks'
 
@@ -16,12 +16,18 @@ const wrapper = ({ children }) => (
 
 const server = setupServer()
 
-beforeAll(() => server.listen())
+beforeAll(() => {
+  server.listen()
+})
+
 afterEach(() => {
   server.resetHandlers()
   queryClient.clear()
 })
-afterAll(() => server.close())
+
+afterAll(() => {
+  server.close()
+})
 
 const exampleYearlyHookData = {
   coverage: [

src/services/charts/useReposCoverageMeasurements.spec.tsx → src/services/charts/useReposCoverageMeasurements.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 { useReposCoverageMeasurements } from './useReposCoverageMeasurements'
 
@@ -51,12 +51,12 @@ afterAll(() => {
 describe('useReposCoverageMeasurements', () => {
   function setup({ hasNoData = false }: { hasNoData: boolean }) {
     server.use(
-      graphql.query('GetReposCoverageMeasurements', (req, res, ctx) => {
+      graphql.query('GetReposCoverageMeasurements', (info) => {
         if (hasNoData) {
-          return res(ctx.status(200), ctx.data({}))
+          return HttpResponse.json({ data: {} })
         }
 
-        return res(ctx.status(200), ctx.data(mockReposMeasurements))
+        return HttpResponse.json({ data: mockReposMeasurements })
       })
     )
   }

src/services/charts/useSunburtsCoverage.spec.tsx → src/services/charts/useSunburstCoverage.test.tsx

@@ -1,7 +1,7 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { renderHook, waitFor } from '@testing-library/react'
-import { rest } from 'msw'
-import { setupServer } from 'msw/node'
+import { http, HttpResponse } from 'msw2'
+import { setupServer } from 'msw2/node'
 import { MemoryRouter, Route } from 'react-router-dom'
 
 import { useSunburstCoverage } from './index'
@@ -21,13 +21,18 @@ const wrapper =
   )
 
 const server = setupServer()
+beforeAll(() => {
+  server.listen()
+})
 
-beforeAll(() => server.listen())
 afterEach(() => {
   server.resetHandlers()
   queryClient.clear()
 })
-afterAll(() => server.close())
+
+afterAll(() => {
+  server.close()
+})
 
 const exampleResponse = [
   {
@@ -87,19 +92,17 @@ const filteredResponse = [
 describe('useSunburstCoverage', () => {
   beforeEach(() => {
     server.use(
-      rest.get(
-        '/internal/:provider/:owner/:repo/coverage/tree',
-        (req, res, ctx) => {
-          const flags = req.url.searchParams.getAll('flags')
-          const components = req.url.searchParams.getAll('components')
-
-          if (flags.length > 0 || components.length > 0) {
-            return res(ctx.status(200), ctx.json(filteredResponse))
-          } else {
-            return res(ctx.status(200), ctx.json(exampleResponse))
-          }
+      http.get('/internal/:provider/:owner/:repo/coverage/tree', (info) => {
+        const searchParams = new URL(info.request.url).searchParams
+        const flags = searchParams.getAll('flags')
+        const components = searchParams.getAll('components')
+
+        if (flags.length > 0 || components.length > 0) {
+          return HttpResponse.json(filteredResponse)
+        } else {
+          return HttpResponse.json(exampleResponse)
         }
-      )
+      })
     )
   })
 

vitest.config.mjs

@@ -14,6 +14,7 @@ const EXCLUDE_FROM_TESTING = [
   // Custom exclude patterns
   'src/**/*.spec.*',
   'src/**/*.stories.*',
+  'src/**/*.mocks.*',
 ]
 
 const EXCLUDE_FROM_COVERAGE = [