95.2% of tests pass

components/package.json

@@ -69,11 +69,12 @@
     "@vanilla-extract/vite-plugin": "^3.9.0",
     "esbuild-darwin-arm64": "^0.14.27",
     "glob": "^7.2.0",
+    "jsdom": "^24.1.1",
     "rainbow-sprinkles": "0.17.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "typescript": "4.9.4",
-    "vite": "^3.2.5",
+    "vite": "^5.4.0",
     "vite-plugin-babel-macros": "^1.0.6",
     "vite-plugin-svgr": "^1.1.0",
     "vite-tsconfig-paths": "^4.0.1",

components/src/components/atoms/RecordItem/RecordItem.test.tsx

@@ -7,9 +7,9 @@ import { useCopied } from '@/src/hooks/useCopied'
 import { RecordItem } from './RecordItem'
 import { FlameSVG } from '../..'
 
-jest.mock('@/src/hooks/useCopied')
+vi.mock('@/src/hooks/useCopied')
 
-const mockCopied = jest.fn()
+const mockCopied = vi.fn()
 const mockUseCopied = mockFunction(useCopied)
 mockUseCopied.mockReturnValue({ copy: mockCopied, copied: false })
 

components/src/components/atoms/ScrollBox/ScrollBox.test.tsx

@@ -34,9 +34,9 @@ const Component = ({ onReachedTop }: { onReachedTop?: () => void }) => (
   </>
 )
 
-const mockIntersectionObserverCls = jest.fn()
-const mockObserve = jest.fn()
-const mockDisconnect = jest.fn()
+const mockIntersectionObserverCls = vi.fn()
+const mockObserve = vi.fn()
+const mockDisconnect = vi.fn()
 
 const mockIntersectionObserver = makeMockIntersectionObserver(
   mockIntersectionObserverCls,
@@ -124,7 +124,7 @@ describe('<ScrollBox />', () => {
   })
   it('should fire callback on intersection', () => {
     mockIntersectionObserver(true, false)
-    const onReachedTop = jest.fn()
+    const onReachedTop = vi.fn()
     render(<Component onReachedTop={onReachedTop} />)
     expect(onReachedTop).toHaveBeenCalled()
   })

components/src/components/molecules/Backdrop/Backdrop.test.tsx

@@ -4,7 +4,7 @@ import { cleanup, render, screen, waitFor } from '@/test'
 
 import { Backdrop } from './Backdrop'
 
-window.scroll = jest.fn()
+window.scroll = vi.fn()
 
 const Element = ({
   open = true,

components/src/components/molecules/CountdownCircle/CountdownCircle.test.tsx

@@ -6,16 +6,16 @@ import { CountdownCircle } from './CountdownCircle'
 
 const advanceTime = (ms: number) => {
   act(() => {
-    jest.advanceTimersByTime(ms)
+    vi.advanceTimersByTime(ms)
   })
 }
 
 describe('<CountdownCircle />', () => {
   beforeAll(() => {
-    jest.useFakeTimers()
+    vi.useFakeTimers()
   })
   afterAll(() => {
-    jest.useRealTimers()
+    vi.useRealTimers()
   })
   afterEach(cleanup)
 
@@ -38,7 +38,7 @@ describe('<CountdownCircle />', () => {
   })
 
   it('should call callback on 0', () => {
-    const mockCallback = jest.fn()
+    const mockCallback = vi.fn()
     render(<CountdownCircle callback={mockCallback} countdownSeconds={1} />)
     advanceTime(1000)
     expect(mockCallback).toHaveBeenCalled()

components/src/components/molecules/Dropdown/Dropdown.test.tsx

@@ -34,9 +34,9 @@ const DropdownHelper = ({ mockCallback, children, ...props }: any) => {
   )
 }
 
-const mockIntersectionObserverCls = jest.fn()
-const mockObserve = jest.fn()
-const mockDisconnect = jest.fn()
+const mockIntersectionObserverCls = vi.fn()
+const mockObserve = vi.fn()
+const mockDisconnect = vi.fn()
 
 const mockIntersectionObserver = makeMockIntersectionObserver(
   mockIntersectionObserverCls,
@@ -61,7 +61,7 @@ describe('<Dropdown />', () => {
   })
 
   it('should call dropdown item callback when clicked', async () => {
-    const mockCallback = jest.fn()
+    const mockCallback = vi.fn()
     render(<DropdownHelper {...{ mockCallback, label: 'Menu' }} />)
     userEvent.click(screen.getByText('Menu'))
     await waitFor(() => userEvent.click(screen.getByText('Dashboard')))

components/src/components/molecules/Input/Input.test.tsx

@@ -41,7 +41,7 @@ describe('<Input />', () => {
 
   it('should fire onChange if clear button is pressed', async () => {
     const ref = { current: null } as React.RefObject<any>
-    const handleOnChange = jest.fn()
+    const handleOnChange = vi.fn()
     render(
       <Input
         clearable

components/src/components/molecules/Modal/Modal.test.tsx

@@ -4,7 +4,7 @@ import { cleanup, render, screen, waitFor } from '@/test'
 
 import { Modal } from './Modal'
 
-window.scroll = jest.fn()
+window.scroll = vi.fn()
 
 describe('<Modal />', () => {
   afterEach(cleanup)

components/src/components/molecules/PageButtons/PageButtons.test.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react'
-
 import { cleanup, render, screen, userEvent, waitFor } from '@/test'
 
 import { PageButtons } from './PageButtons'
@@ -93,7 +92,7 @@ describe('<PageButtons />', () => {
     expect(screen.queryByText('101')).not.toBeInTheDocument()
   })
   it('should call onChange method when button is clicked', async () => {
-    const mockCallback = jest.fn()
+    const mockCallback = vi.fn()
     render(
       <ButtonsHelper current={1} mockCallback={mockCallback} total={100} />,
     )

components/src/components/molecules/RadioButtonGroup/RadioButtonGroup.test.tsx

@@ -70,7 +70,7 @@ describe('<RadioButtonGroup />', () => {
   })
 
   it('should fire onBlur when losing focus ', async () => {
-    const mockCallback = jest.fn()
+    const mockCallback = vi.fn()
     render(
       <>
         <div>outside</div>
@@ -93,7 +93,7 @@ describe('<RadioButtonGroup />', () => {
   })
 
   it('should fire onChange when checked value does not match value', () => {
-    const mockCallback = jest.fn((e: any) => {
+    const mockCallback = vi.fn((e: any) => {
       return e.target.value
     })
     render(

components/src/components/molecules/Select/Select.test.tsx

@@ -46,7 +46,7 @@ describe('<Select />', () => {
   })
 
   it('should call onChange when selection made', async () => {
-    const mockCallback = jest.fn((e: any) => [
+    const mockCallback = vi.fn((e: any) => [
       e.target.value,
       e.currentTarget.value,
     ])
@@ -99,7 +99,7 @@ describe('<Select />', () => {
   })
 
   it('should not allow disabled option to be selected', async () => {
-    const mockCallback = jest.fn()
+    const mockCallback = vi.fn()
     render(
       <Select
         label="select"
@@ -118,7 +118,7 @@ describe('<Select />', () => {
 
   // JS DOM doesn't support css variables
   it('should close dropdown when clicking outside of element', async () => {
-    const mockCallback = jest.fn()
+    const mockCallback = vi.fn()
     render(
       <div>
         <div>outside</div>
@@ -153,7 +153,7 @@ describe('<Select />', () => {
   /** Autocomplete */
 
   it('should filter options if autocomplete is true ', async () => {
-    const mockCallback = jest.fn()
+    const mockCallback = vi.fn()
     render(
       <div>
         <div>outside</div>
@@ -214,7 +214,7 @@ describe('<Select />', () => {
   /** Createable */
 
   it('should filter options if createable is true ', async () => {
-    const mockCallback = jest.fn()
+    const mockCallback = vi.fn()
     render(
       <div>
         <div>outside</div>
@@ -251,7 +251,7 @@ describe('<Select />', () => {
   })
 
   it('should show create options only if it is unique ', async () => {
-    const mockCallback = jest.fn()
+    const mockCallback = vi.fn()
     render(
       <div>
         <div>outside</div>
@@ -289,7 +289,7 @@ describe('<Select />', () => {
   })
 
   it('should call on create if create option is clicked', async () => {
-    const mockCallback = jest.fn()
+    const mockCallback = vi.fn()
     render(
       <div>
         <div>outside</div>
@@ -322,7 +322,7 @@ describe('<Select />', () => {
   })
 
   it('should call on create if create option is selected with arrows and enter is pressed', async () => {
-    const mockCallback = jest.fn()
+    const mockCallback = vi.fn()
     render(
       <div>
         <div>outside</div>

components/src/components/organisms/Dialog/Dialog.test.tsx

@@ -4,7 +4,7 @@ import { cleanup, render, screen, userEvent, waitFor } from '@/test'
 
 import { Dialog } from './Dialog'
 
-window.scroll = jest.fn()
+window.scroll = vi.fn()
 
 describe('<Modal />', () => {
   afterEach(cleanup)
@@ -33,7 +33,7 @@ describe('<Modal />', () => {
   })
 
   it('should display close icon if callback is provided', async () => {
-    const mockCallback = jest.fn()
+    const mockCallback = vi.fn()
     render(
       <Dialog open variant="closable" onDismiss={mockCallback}>
         Modal
@@ -48,7 +48,7 @@ describe('<Modal />', () => {
   })
 
   it('should call callback if close icon is clicked', async () => {
-    const mockCallback = jest.fn()
+    const mockCallback = vi.fn()
     render(
       <Dialog open variant="closable" onDismiss={mockCallback}>
         Modal

components/src/components/organisms/Toast/Toast.test.tsx

@@ -4,7 +4,7 @@ import { cleanup, render, screen, userEvent, waitFor } from '@/test'
 
 import { Toast } from './Toast'
 
-window.scroll = jest.fn()
+window.scroll = vi.fn()
 
 describe('<Toast />', () => {
   afterEach(cleanup)
@@ -41,7 +41,7 @@ describe('<Toast />', () => {
   })
 
   it('should call callback if close icon is clicked', () => {
-    const mockCallback = jest.fn()
+    const mockCallback = vi.fn()
     render(<Toast open title="Test" variant="desktop" onClose={mockCallback} />)
     waitFor(() => userEvent.click(screen.getByTestId('toast-close-icon')), {
       timeout: 300,

components/src/icons/index.tsx

@@ -1,4 +1,4 @@
-import { FC, SVGProps } from 'react'
+import React, { FC, SVGProps } from 'react'
 
 type Props = SVGProps<SVGSVGElement>
 

components/test/mocks/URL.js

@@ -1,6 +1,8 @@
+import { vi } from 'vitest'
+
 Object.defineProperty(window, 'URL', {
   writable: true,
   value: {
-    createObjectURL: jest.fn(),
+    createObjectURL: vi.fn(),
   },
 })

components/test/utils.ts

@@ -9,13 +9,13 @@ export type PartialMockedFunction<T extends (...args: any) => any> = (
 ) => DeepPartial<ReturnType<T>>
 
 export const mockFunction = <T extends (...args: any) => any>(func: T) =>
-  func as unknown as jest.MockedFunction<PartialMockedFunction<T>>
+  func as unknown as vi.MockedFunction<PartialMockedFunction<T>>
 
 export const makeMockIntersectionObserver
   = (
-    mockIntersectionObserverCls: jest.MockedFunction<any>,
-    mockObserve: jest.MockedFunction<any>,
-    mockDisconnect: jest.MockedFunction<any>,
+    mockIntersectionObserverCls: vi.MockedFunction<any>,
+    mockObserve: vi.MockedFunction<any>,
+    mockDisconnect: vi.MockedFunction<any>,
   ) =>
     (intersectTop: boolean, intersectBottom: boolean) => {
       let cb: (entries: any) => void

components/tsconfig.json

@@ -1,7 +1,7 @@
 {
     "extends":"../tsconfig.json",
     "compilerOptions": {
-        "types": ["vite/client", "vite-plugin-svgr/client", "node"],
+        "types": ["vite/client", "vite-plugin-svgr/client", "vitest/globals", "node"],
         "outDir": "dist",
         "declaration": true,
         "baseUrl": ".",
@@ -11,6 +11,5 @@
             "test-utils": ["./test"]
         },
     },
-    "exclude": ["test/**/*", "src/**/*.test.tsx", "src/**/*.test.ts"],
     "include": ["src/**/*"]
 }

components/vite.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vitest/config'
 import svgrPlugin from 'vite-plugin-svgr'
 import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'
 
@@ -70,4 +70,8 @@ export default defineConfig({
     }),
     // macrosPlugin(),
   ],
+  test: {
+    environment: 'jsdom',
+    globals: true,
+  },
 })