From 1ff723b61609e64b7d1b9cdbb2a5fa098f36427a Mon Sep 17 00:00:00 2001
From: nicholas-codecov <nicholas.deschenes@sentry.io>
Date: Fri, 20 Sep 2024 14:16:43 -0300
Subject: [PATCH 1/2] chore: Update layouts/shared tests to Vitest (#3214)

---
 .../{ErrorBoundary.spec.jsx => ErrorBoundary.test.jsx} | 10 +++++-----
 ...Boundary.spec.jsx => NetworkErrorBoundary.test.jsx} |  7 ++++---
 .../shared/NetworkErrorBoundary/{index.js => index.ts} |  0
 ...rrorMetrics.spec.ts => networkErrorMetrics.test.ts} |  0
 ...tworkError.spec.jsx => SilentNetworkError.test.jsx} |  3 ++-
 .../shared/SilentNetworkError/{index.js => index.ts}   |  0
 ...per.spec.jsx => SilentNetworkErrorWrapper.test.tsx} |  6 ++----
 ...kErrorWrapper.jsx => SilentNetworkErrorWrapper.tsx} |  4 +++-
 .../SilentNetworkErrorWrapper/{index.js => index.ts}   |  0
 9 files changed, 16 insertions(+), 14 deletions(-)
 rename src/layouts/shared/ErrorBoundary/{ErrorBoundary.spec.jsx => ErrorBoundary.test.jsx} (95%)
 rename src/layouts/shared/NetworkErrorBoundary/{NetworkErrorBoundary.spec.jsx => NetworkErrorBoundary.test.jsx} (99%)
 rename src/layouts/shared/NetworkErrorBoundary/{index.js => index.ts} (100%)
 rename src/layouts/shared/NetworkErrorBoundary/{networkErrorMetrics.spec.ts => networkErrorMetrics.test.ts} (100%)
 rename src/layouts/shared/SilentNetworkError/{SilentNetworkError.spec.jsx => SilentNetworkError.test.jsx} (95%)
 rename src/layouts/shared/SilentNetworkError/{index.js => index.ts} (100%)
 rename src/layouts/shared/SilentNetworkErrorWrapper/{SilentNetworkErrorWrapper.spec.jsx => SilentNetworkErrorWrapper.test.tsx} (87%)
 rename src/layouts/shared/SilentNetworkErrorWrapper/{SilentNetworkErrorWrapper.jsx => SilentNetworkErrorWrapper.tsx} (77%)
 rename src/layouts/shared/SilentNetworkErrorWrapper/{index.js => index.ts} (100%)

diff --git a/src/layouts/shared/ErrorBoundary/ErrorBoundary.spec.jsx b/src/layouts/shared/ErrorBoundary/ErrorBoundary.test.jsx
similarity index 95%
rename from src/layouts/shared/ErrorBoundary/ErrorBoundary.spec.jsx
rename to src/layouts/shared/ErrorBoundary/ErrorBoundary.test.jsx
index 9d2eb4970e..4461ee45b3 100644
--- a/src/layouts/shared/ErrorBoundary/ErrorBoundary.spec.jsx
+++ b/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)
   })
 
diff --git a/src/layouts/shared/NetworkErrorBoundary/NetworkErrorBoundary.spec.jsx b/src/layouts/shared/NetworkErrorBoundary/NetworkErrorBoundary.test.jsx
similarity index 99%
rename from src/layouts/shared/NetworkErrorBoundary/NetworkErrorBoundary.spec.jsx
rename to src/layouts/shared/NetworkErrorBoundary/NetworkErrorBoundary.test.jsx
index 775d45bca8..8f9f64250d 100644
--- a/src/layouts/shared/NetworkErrorBoundary/NetworkErrorBoundary.spec.jsx
+++ b/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({}),
diff --git a/src/layouts/shared/NetworkErrorBoundary/index.js b/src/layouts/shared/NetworkErrorBoundary/index.ts
similarity index 100%
rename from src/layouts/shared/NetworkErrorBoundary/index.js
rename to src/layouts/shared/NetworkErrorBoundary/index.ts
diff --git a/src/layouts/shared/NetworkErrorBoundary/networkErrorMetrics.spec.ts b/src/layouts/shared/NetworkErrorBoundary/networkErrorMetrics.test.ts
similarity index 100%
rename from src/layouts/shared/NetworkErrorBoundary/networkErrorMetrics.spec.ts
rename to src/layouts/shared/NetworkErrorBoundary/networkErrorMetrics.test.ts
diff --git a/src/layouts/shared/SilentNetworkError/SilentNetworkError.spec.jsx b/src/layouts/shared/SilentNetworkError/SilentNetworkError.test.jsx
similarity index 95%
rename from src/layouts/shared/SilentNetworkError/SilentNetworkError.spec.jsx
rename to src/layouts/shared/SilentNetworkError/SilentNetworkError.test.jsx
index fba96174a0..bcf9de68bf 100644
--- a/src/layouts/shared/SilentNetworkError/SilentNetworkError.spec.jsx
+++ b/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 = {}) {
diff --git a/src/layouts/shared/SilentNetworkError/index.js b/src/layouts/shared/SilentNetworkError/index.ts
similarity index 100%
rename from src/layouts/shared/SilentNetworkError/index.js
rename to src/layouts/shared/SilentNetworkError/index.ts
diff --git a/src/layouts/shared/SilentNetworkErrorWrapper/SilentNetworkErrorWrapper.spec.jsx b/src/layouts/shared/SilentNetworkErrorWrapper/SilentNetworkErrorWrapper.test.tsx
similarity index 87%
rename from src/layouts/shared/SilentNetworkErrorWrapper/SilentNetworkErrorWrapper.spec.jsx
rename to src/layouts/shared/SilentNetworkErrorWrapper/SilentNetworkErrorWrapper.test.tsx
index a0c79ee35f..f55bd3cd22 100644
--- a/src/layouts/shared/SilentNetworkErrorWrapper/SilentNetworkErrorWrapper.spec.jsx
+++ b/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()
   })
diff --git a/src/layouts/shared/SilentNetworkErrorWrapper/SilentNetworkErrorWrapper.jsx b/src/layouts/shared/SilentNetworkErrorWrapper/SilentNetworkErrorWrapper.tsx
similarity index 77%
rename from src/layouts/shared/SilentNetworkErrorWrapper/SilentNetworkErrorWrapper.jsx
rename to src/layouts/shared/SilentNetworkErrorWrapper/SilentNetworkErrorWrapper.tsx
index cfb2236aa6..89c0f9d94f 100644
--- a/src/layouts/shared/SilentNetworkErrorWrapper/SilentNetworkErrorWrapper.jsx
+++ b/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>
diff --git a/src/layouts/shared/SilentNetworkErrorWrapper/index.js b/src/layouts/shared/SilentNetworkErrorWrapper/index.ts
similarity index 100%
rename from src/layouts/shared/SilentNetworkErrorWrapper/index.js
rename to src/layouts/shared/SilentNetworkErrorWrapper/index.ts

From e82ef281c4d320aba8d27bf099588f9f24d80b02 Mon Sep 17 00:00:00 2001
From: nicholas-codecov <nicholas.deschenes@sentry.io>
Date: Fri, 20 Sep 2024 14:18:40 -0300
Subject: [PATCH 2/2] chore: Update layouts/SidebarLayout to Vitest (#3216)

---
 ...Layout.spec.jsx => SidebarLayout.test.tsx} | 74 ++++++++++---------
 .../{SidebarLayout.jsx => SidebarLayout.tsx}  | 16 ++--
 .../SidebarLayout/{index.js => index.ts}      |  0
 3 files changed, 51 insertions(+), 39 deletions(-)
 rename src/layouts/SidebarLayout/{SidebarLayout.spec.jsx => SidebarLayout.test.tsx} (53%)
 rename src/layouts/SidebarLayout/{SidebarLayout.jsx => SidebarLayout.tsx} (74%)
 rename src/layouts/SidebarLayout/{index.js => index.ts} (100%)

diff --git a/src/layouts/SidebarLayout/SidebarLayout.spec.jsx b/src/layouts/SidebarLayout/SidebarLayout.test.tsx
similarity index 53%
rename from src/layouts/SidebarLayout/SidebarLayout.spec.jsx
rename to src/layouts/SidebarLayout/SidebarLayout.test.tsx
index 7c11282cc0..49dc9c51d8 100644
--- a/src/layouts/SidebarLayout/SidebarLayout.spec.jsx
+++ b/src/layouts/SidebarLayout/SidebarLayout.test.tsx
@@ -3,74 +3,82 @@ import { MemoryRouter } from 'react-router-dom'
 
 import SidebarLayout from './SidebarLayout'
 
-jest.mock('../shared/ErrorBoundary', () => ({ children }) => <>{children}</>)
-jest.mock('layouts/Footer', () => () => 'Footer')
+vi.mock('../shared/ErrorBoundary', () => ({
+  default: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}))
+vi.mock('layouts/Footer', () => ({ default: () => 'Footer' }))
 
 const robinQuote = 'Holy Tintinnabulation!'
 const batmanQuote =
   'Why do we fall? So that we can learn to pick ourselves back up.'
 
 describe('SidebarLayout', () => {
-  function setup(content, overrideClass) {
-    render(
-      <SidebarLayout
-        className={overrideClass}
-        sidebar={<div>{robinQuote}</div>}
-      >
-        {content}
-      </SidebarLayout>,
-      {
-        wrapper: MemoryRouter,
-      }
-    )
-  }
-
   describe('it renders with no children', () => {
-    beforeEach(() => {
-      setup()
-    })
-
     it('renders the sidebar', () => {
+      render(
+        <SidebarLayout sidebar={<div>{robinQuote}</div>}></SidebarLayout>,
+        { wrapper: MemoryRouter }
+      )
+
       const sidebar = screen.getByText(robinQuote)
       expect(sidebar).toBeInTheDocument()
     })
   })
 
   describe('it renders with children', () => {
-    beforeEach(() => {
-      setup(<p>{batmanQuote}</p>)
-    })
-
     it('renders the sidebar', () => {
+      render(
+        <SidebarLayout sidebar={<div>{robinQuote}</div>}>
+          <p>{batmanQuote}</p>
+        </SidebarLayout>,
+        { wrapper: MemoryRouter }
+      )
+
       const sidebar = screen.getByText(robinQuote)
       expect(sidebar).toBeInTheDocument()
     })
 
     it('renders the content of the page (children)', () => {
+      render(
+        <SidebarLayout sidebar={<div>{robinQuote}</div>}>
+          <p>{batmanQuote}</p>
+        </SidebarLayout>,
+        { wrapper: MemoryRouter }
+      )
+
       const content = screen.getByText(batmanQuote)
       expect(content).toBeInTheDocument()
     })
   })
 
   describe('it renders the content with default styles', () => {
-    beforeEach(() => {
-      setup(<p>{batmanQuote}</p>)
-    })
-
     it('renders the sidebar', () => {
+      render(
+        <SidebarLayout sidebar={<div>{robinQuote}</div>}>
+          <p>{batmanQuote}</p>
+        </SidebarLayout>,
+        { wrapper: MemoryRouter }
+      )
+
       const content = screen.getByTestId('sidebar-content')
       expect(content).toHaveClass('pl-0 lg:pl-8')
     })
   })
 
   describe('it renders the content with custom styles', () => {
-    beforeEach(() => {
-      setup(<p>{batmanQuote}</p>, 'batcave')
-    })
-
     it('renders the sidebar', () => {
+      render(
+        <SidebarLayout
+          className="text-red-500"
+          sidebar={<div>{robinQuote}</div>}
+        >
+          <p>{batmanQuote}</p>
+        </SidebarLayout>,
+        { wrapper: MemoryRouter }
+      )
+
       const content = screen.getByTestId('sidebar-content')
-      expect(content).toHaveClass('batcave')
+      expect(content).toHaveClass('text-red-500')
     })
   })
 })
diff --git a/src/layouts/SidebarLayout/SidebarLayout.jsx b/src/layouts/SidebarLayout/SidebarLayout.tsx
similarity index 74%
rename from src/layouts/SidebarLayout/SidebarLayout.jsx
rename to src/layouts/SidebarLayout/SidebarLayout.tsx
index 417e1c189e..f08ec25002 100644
--- a/src/layouts/SidebarLayout/SidebarLayout.jsx
+++ b/src/layouts/SidebarLayout/SidebarLayout.tsx
@@ -1,10 +1,18 @@
 import cs from 'classnames'
-import PropType from 'prop-types'
 
 import ErrorBoundary from '../shared/ErrorBoundary'
 import NetworkErrorBoundary from '../shared/NetworkErrorBoundary'
 
-function SidebarLayout({ sidebar, children, className = '' }) {
+interface SidebarLayoutProps {
+  sidebar: React.ReactNode
+  className?: string
+}
+
+const SidebarLayout: React.FC<React.PropsWithChildren<SidebarLayoutProps>> = ({
+  sidebar,
+  children,
+  className = '',
+}) => {
   return (
     <div className="container flex flex-col lg:flex-row">
       <ErrorBoundary sentryScopes={[['layout', 'sidebar']]}>
@@ -22,8 +30,4 @@ function SidebarLayout({ sidebar, children, className = '' }) {
   )
 }
 
-SidebarLayout.propTypes = {
-  sidebar: PropType.element.isRequired,
-}
-
 export default SidebarLayout
diff --git a/src/layouts/SidebarLayout/index.js b/src/layouts/SidebarLayout/index.ts
similarity index 100%
rename from src/layouts/SidebarLayout/index.js
rename to src/layouts/SidebarLayout/index.ts