chore: Update layouts/shared tests to Vitest (#3214)

src/layouts/shared/ErrorBoundary/ErrorBoundary.spec.jsx → src/layouts/shared/ErrorBoundary/ErrorBoundary.test.jsx

@@ -1,6 +1,7 @@
 import * as Sentry from '@sentry/browser'
 import { render, screen } from '@testing-library/react'
 import { MemoryRouter, Route } from 'react-router-dom'
+import { vi } from 'vitest'
 
 import ErrorBoundary from './ErrorBoundary'
 
@@ -10,15 +11,14 @@ function BadComponent() {
 }
 
 // https://docs.sentry.io/platforms/javascript/guides/react/components/errorboundary/#using-multiple-error-boundaries
-const sentryMockScope = jest.fn()
+const sentryMockScope = vi.fn()
 
 describe('Error Boundary', () => {
   let mockError
-  beforeAll(() => jest.disableAutomock())
-  afterAll(() => jest.enableAutomock())
+
   beforeEach(() => {
-    mockError = jest.fn()
-    const spy = jest.spyOn(console, 'error')
+    mockError = vi.fn()
+    const spy = vi.spyOn(console, 'error')
     spy.mockImplementation(mockError)
   })
 

src/layouts/shared/NetworkErrorBoundary/NetworkErrorBoundary.spec.jsx → src/layouts/shared/NetworkErrorBoundary/NetworkErrorBoundary.test.jsx

@@ -4,14 +4,15 @@ import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { Component, useState } from 'react'
 import { MemoryRouter, useHistory } from 'react-router-dom'
+import { vi } from 'vitest'
 
 import config from 'config'
 
 import NetworkErrorBoundary from './NetworkErrorBoundary'
 
 // silence all verbose console.error
-jest.spyOn(console, 'error').mockImplementation()
-jest.mock('config')
+vi.spyOn(console, 'error').mockImplementation(() => undefined)
+vi.mock('config')
 
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
@@ -354,7 +355,7 @@ describe('NetworkErrorBoundary', () => {
       })
 
       // Mock the global fetch function
-      global.fetch = jest.fn(() =>
+      global.fetch = vi.fn(() =>
         Promise.resolve({
           ok: true,
           json: () => Promise.resolve({}),

src/layouts/shared/SilentNetworkError/SilentNetworkError.spec.jsx → src/layouts/shared/SilentNetworkError/SilentNetworkError.test.jsx

@@ -1,9 +1,10 @@
 import { render, screen } from '@testing-library/react'
+import { vi } from 'vitest'
 
 import SilentNetworkError from './SilentNetworkError'
 
 // silence all verbose console.error
-jest.spyOn(console, 'error').mockImplementation()
+vi.spyOn(console, 'error').mockImplementation(() => undefined)
 
 describe('SilentNetworkError', () => {
   function setup(ComponentToRender, props = {}) {

src/layouts/shared/SilentNetworkErrorWrapper/SilentNetworkErrorWrapper.spec.jsx → src/layouts/shared/SilentNetworkErrorWrapper/SilentNetworkErrorWrapper.test.tsx

@@ -3,15 +3,13 @@ import { render, screen } from '@testing-library/react'
 import SilentNetworkError from './SilentNetworkErrorWrapper'
 
 describe('SilentNetworkErrorWrapper', () => {
-  function setup(data) {
+  function setup() {
     render(<SilentNetworkError>Hi</SilentNetworkError>)
   }
 
-  beforeEach(() => {
+  it('renders children', async () => {
     setup()
-  })
 
-  it('renders children', async () => {
     const Hello = await screen.findByText(/Hi/)
     expect(Hello).toBeInTheDocument()
   })

src/layouts/shared/SilentNetworkErrorWrapper/SilentNetworkErrorWrapper.jsx → src/layouts/shared/SilentNetworkErrorWrapper/SilentNetworkErrorWrapper.tsx

@@ -3,7 +3,9 @@ import { Suspense } from 'react'
 import SilentNetworkError from 'layouts/shared/SilentNetworkError'
 
 // IMPORTANT! Make sure to lazy load the children component
-function SilentNetworkErrorWrapper({ children }) {
+const SilentNetworkErrorWrapper: React.FC<React.PropsWithChildren> = ({
+  children,
+}) => {
   return (
     <Suspense fallback={null}>
       <SilentNetworkError>{children}</SilentNetworkError>