chore: Update layouts/SidebarLayout to Vitest (#3216)

src/layouts/SidebarLayout/SidebarLayout.spec.jsx → 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')
     })
   })
 })

src/layouts/SidebarLayout/SidebarLayout.jsx → 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