chore: Update shared/ContentsTable tests to Vitest

src/shared/ContentsTable/ContentsTableHeader/ContentsTableHeader.test.jsx

@@ -0,0 +1,26 @@
+import { render, screen } from '@testing-library/react'
+import { MemoryRouter, Route } from 'react-router-dom'
+
+import ContentsTableHeader from './ContentsTableHeader'
+
+const wrapper = ({ children }) => (
+  <MemoryRouter initialEntries={['/gh/owner/coolrepo/tree/main/src/tests']}>
+    <Route path="/:provider/:owner/:repo/tree/:branch/:path+">{children}</Route>
+  </MemoryRouter>
+)
+
+describe('ContentsTableHeader', () => {
+  describe('path is provided in route', () => {
+    it('renders the child', () => {
+      render(
+        <ContentsTableHeader>
+          <p>Hello World</p>
+        </ContentsTableHeader>,
+        { wrapper }
+      )
+
+      const wrappingDiv = screen.getByText('Hello World')
+      expect(wrappingDiv).toBeInTheDocument()
+    })
+  })
+})

src/shared/ContentsTable/DisplayTypeButton/DisplayTypeButton.spec.jsx → src/shared/ContentsTable/DisplayTypeButton/DisplayTypeButton.test.jsx

@@ -1,16 +1,18 @@
-import { render, screen } from 'custom-testing-library'
-
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
 import { useLocationParams } from 'services/navigation'
 
 import DisplayTypeButton from './DisplayTypeButton'
 
-jest.mock('services/navigation', () => ({
-  ...jest.requireActual('services/navigation'),
-  useLocationParams: jest.fn(),
-}))
+vi.mock('services/navigation', () => {
+  const originalModule = vi.importActual('services/navigation')
+  return {
+    ...originalModule,
+    useLocationParams: vi.fn(),
+  }
+})
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -53,7 +55,7 @@ describe('Coverage Tab', () => {
   function setup(urlParams = mockUrlParams) {
     const user = userEvent.setup()
     useLocationParams.mockReturnValue({
-      updateParams: jest.fn(),
+      updateParams: vi.fn(),
       params: urlParams,
     })
 

src/shared/ContentsTable/FileBreadcrumb/FileBreadcrumb.spec.jsx → src/shared/ContentsTable/FileBreadcrumb/FileBreadcrumb.test.jsx

@@ -1,6 +1,5 @@
-import { render, screen } from 'custom-testing-library'
-
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { render, screen } from '@testing-library/react'
 import { MemoryRouter, Route } from 'react-router-dom'
 
 import FileBreadcrumb from './FileBreadcrumb'
@@ -13,28 +12,21 @@ const queryClient = new QueryClient({
   },
 })
 
-describe('FileBreadcrumb', () => {
-  function setup({ entries, path }) {
-    render(
-      <QueryClientProvider client={queryClient}>
-        <MemoryRouter initialEntries={entries}>
-          <Route path={path}>
-            <FileBreadcrumb />
-          </Route>
-        </MemoryRouter>
-      </QueryClientProvider>
-    )
-  }
+const wrapper = ({ children }) => (
+  <QueryClientProvider client={queryClient}>
+    <MemoryRouter initialEntries={['/gh/owner/coolrepo/tree/main/src/tests']}>
+      <Route path="/:provider/:owner/:repo/tree/:branch/:path+">
+        {children}
+      </Route>
+    </MemoryRouter>
+  </QueryClientProvider>
+)
 
+describe('FileBreadcrumb', () => {
   describe('path is provided in route', () => {
-    beforeEach(() => {
-      setup({
-        entries: ['/gh/owner/coolrepo/tree/main/src/tests'],
-        path: '/:provider/:owner/:repo/tree/:branch/:path+',
-      })
-    })
-
     it('renders the breadcrumb', () => {
+      render(<FileBreadcrumb />, { wrapper })
+
       const repo = screen.getByRole('link', { name: 'coolrepo' })
       expect(repo).toBeInTheDocument()
       expect(repo).toHaveAttribute('href', '/gh/owner/coolrepo/tree/main/')

src/shared/ContentsTable/TableEntries/BaseEntries/DirEntry.spec.jsx → src/shared/ContentsTable/TableEntries/BaseEntries/DirEntry.test.jsx

@@ -12,7 +12,7 @@ const wrapper = ({ children }) => (
 
 describe('DirEntry', () => {
   it('displays the directory name', () => {
-    const runPrefetchMock = jest.fn()
+    const runPrefetchMock = vi.fn()
     render(
       <DirEntry
         linkRef="branch"
@@ -29,7 +29,7 @@ describe('DirEntry', () => {
 
   describe('path is given', () => {
     it('sets the correct href', () => {
-      const runPrefetchMock = jest.fn()
+      const runPrefetchMock = vi.fn()
       render(
         <DirEntry
           linkRef="branch"
@@ -50,7 +50,7 @@ describe('DirEntry', () => {
 
   describe('no path is given', () => {
     it('sets the correct href', () => {
-      const runPrefetchMock = jest.fn()
+      const runPrefetchMock = vi.fn()
       render(
         <DirEntry linkRef="branch" name="dir" runPrefetch={runPrefetchMock} />,
         { wrapper }
@@ -63,7 +63,7 @@ describe('DirEntry', () => {
 
   describe('query params value is passed', () => {
     it('sets the correct href', () => {
-      const runPrefetchMock = jest.fn()
+      const runPrefetchMock = vi.fn()
       render(
         <DirEntry
           linkRef="branch"
@@ -84,7 +84,7 @@ describe('DirEntry', () => {
 
   it('fires the prefetch function on hover', async () => {
     const user = userEvent.setup()
-    const runPrefetchMock = jest.fn()
+    const runPrefetchMock = vi.fn()
     render(
       <DirEntry
         linkRef="branch"
@@ -102,7 +102,7 @@ describe('DirEntry', () => {
 
   describe('pageName prop is passed', () => {
     it('sets the correct href', () => {
-      const runPrefetchMock = jest.fn()
+      const runPrefetchMock = vi.fn()
       render(
         <DirEntry
           commitSha="coolCommitSha"

src/shared/ContentsTable/TableEntries/BaseEntries/FileEntry.spec.jsx → src/shared/ContentsTable/TableEntries/BaseEntries/FileEntry.test.jsx

@@ -15,7 +15,7 @@ const wrapper = ({ children }) => (
 describe('FileEntry', () => {
   describe('checking properties on list display', () => {
     it('displays the file path', () => {
-      const runPrefetchMock = jest.fn()
+      const runPrefetchMock = vi.fn()
       render(
         <FileEntry
           linkRef="main"
@@ -35,7 +35,7 @@ describe('FileEntry', () => {
 
   describe('checking properties on tree display', () => {
     it('displays the file name', () => {
-      const runPrefetchMock = jest.fn()
+      const runPrefetchMock = vi.fn()
       render(
         <FileEntry
           linkRef="main"
@@ -53,7 +53,7 @@ describe('FileEntry', () => {
     })
 
     it('does not display the file name', () => {
-      const runPrefetchMock = jest.fn()
+      const runPrefetchMock = vi.fn()
       render(
         <FileEntry
           linkRef="main"
@@ -73,7 +73,7 @@ describe('FileEntry', () => {
 
   describe('file is a critical file', () => {
     it('displays critical file label', () => {
-      const runPrefetchMock = jest.fn()
+      const runPrefetchMock = vi.fn()
       render(
         <FileEntry
           linkRef="main"
@@ -93,7 +93,7 @@ describe('FileEntry', () => {
 
   describe('is displaying a list', () => {
     it('displays the file path label', () => {
-      const runPrefetchMock = jest.fn()
+      const runPrefetchMock = vi.fn()
       render(
         <FileEntry
           linkRef="main"
@@ -113,7 +113,7 @@ describe('FileEntry', () => {
 
   describe('prefetches data', () => {
     it('fires the prefetch function on hover', async () => {
-      const runPrefetchMock = jest.fn()
+      const runPrefetchMock = vi.fn()
       const user = userEvent.setup()
       render(
         <FileEntry
@@ -135,7 +135,7 @@ describe('FileEntry', () => {
   })
 
   describe('passed pageName commit props', () => {
-    const runPrefetchMock = jest.fn()
+    const runPrefetchMock = vi.fn()
     it('sets the correct href', () => {
       render(
         <FileEntry
@@ -161,7 +161,7 @@ describe('FileEntry', () => {
 
   describe('passed queryParams prop', () => {
     it('sets the correct href', () => {
-      const runPrefetchMock = jest.fn()
+      const runPrefetchMock = vi.fn()
       render(
         <FileEntry
           linkRef="main"

src/shared/ContentsTable/TableEntries/BranchEntries/BranchDirEntry.spec.jsx → src/shared/ContentsTable/TableEntries/BranchEntries/BranchDirEntry.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 BranchDirEntry from './BranchDirEntry'
@@ -70,9 +70,9 @@ describe('BranchDirEntry', () => {
     const user = userEvent.setup()
 
     server.use(
-      graphql.query('BranchContents', (req, res, ctx) =>
-        res(ctx.status(200), ctx.data(mockData))
-      )
+      graphql.query('BranchContents', (info) => {
+        return HttpResponse.json({ data: mockData })
+      })
     )
 
     return { user }

src/shared/ContentsTable/TableEntries/BranchEntries/BranchFileEntry.spec.jsx → src/shared/ContentsTable/TableEntries/BranchEntries/BranchFileEntry.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 BranchFileEntry from './BranchFileEntry'
@@ -82,13 +82,13 @@ afterAll(() => {
 describe('BranchFileEntry', () => {
   function setup() {
     const user = userEvent.setup()
-    const mockVars = jest.fn()
+    const mockVars = vi.fn()
 
     server.use(
-      graphql.query('CoverageForFile', (req, res, ctx) => {
-        mockVars(req.variables)
+      graphql.query('CoverageForFile', (info) => {
+        mockVars(info.variables)
 
-        return res(ctx.status(200), ctx.data(mockData))
+        return HttpResponse.json({ data: mockData })
       })
     )
 

src/shared/ContentsTable/TableEntries/CommitEntries/CommitDirEntry.spec.tsx → src/shared/ContentsTable/TableEntries/CommitEntries/CommitDirEntry.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 qs from 'qs'
 import { MemoryRouter, Route } from 'react-router-dom'
 
@@ -72,9 +72,9 @@ afterAll(() => {
 describe('CommitDirEntry', () => {
   function setup() {
     server.use(
-      graphql.query('CommitPathContents', (req, res, ctx) =>
-        res(ctx.status(200), ctx.data(mockData))
-      )
+      graphql.query('CommitPathContents', (info) => {
+        return HttpResponse.json({ data: mockData })
+      })
     )
   }