diff --git a/src/components/Dropdown/Dropdown.test.tsx b/src/components/Dropdown/Dropdown.test.tsx
index eef8fa0..4ddc2f8 100644
--- a/src/components/Dropdown/Dropdown.test.tsx
+++ b/src/components/Dropdown/Dropdown.test.tsx
@@ -1,4 +1,5 @@
-import { fireEvent, render } from '@testing-library/react'
+import { act, render } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
 import { describe, expect, it, vi } from 'vitest'
 import Dropdown from './Dropdown'
 import styles from './Dropdown.module.css'
@@ -14,7 +15,7 @@ describe('Dropdown Component', () => {
     expect(div?.classList).toContain(styles.dropdownLeft)
   })
 
-  it('toggles dropdown content on button click', () => {
+  it('toggles dropdown content on button click', async () => {
     const { container: { children: [ div ] }, getByRole } = render(
       <Dropdown label='go'>
         <div>Child 1</div>
@@ -24,15 +25,16 @@ describe('Dropdown Component', () => {
     const dropdownButton = getByRole('button')
 
     // open menu with click
-    fireEvent.click(dropdownButton)
+    const user = userEvent.setup()
+    await user.click(dropdownButton)
     expect(div?.children[0]?.getAttribute('aria-expanded')).toBe('true')
 
     // click again to close
-    fireEvent.click(dropdownButton)
+    await user.click(dropdownButton)
     expect(div?.children[0]?.getAttribute('aria-expanded')).toBe('false')
   })
 
-  it('closes dropdown when clicking outside', () => {
+  it('closes dropdown when clicking outside', async () => {
     const { container: { children: [ div ] }, getByRole } = render(
       <Dropdown>
         <div>Child 1</div>
@@ -41,15 +43,16 @@ describe('Dropdown Component', () => {
     )
 
     const dropdownButton = getByRole('button')
-    fireEvent.click(dropdownButton) // open dropdown
+    const user = userEvent.setup()
+    await user.click(dropdownButton) // open dropdown
     expect(div?.children[0]?.getAttribute('aria-expanded')).toBe('true')
 
     // Simulate a click outside
-    fireEvent.mouseDown(document)
+    await user.click(document.body)
     expect(div?.children[0]?.getAttribute('aria-expanded')).toBe('false')
   })
 
-  it('does not close dropdown when clicking inside', () => {
+  it('closes dropdown when clicking inside', async () => {
     const { container: { children: [ div ] }, getByRole, getByText } = render(
       <Dropdown>
         <div>Child 1</div>
@@ -58,16 +61,17 @@ describe('Dropdown Component', () => {
     )
 
     const dropdownButton = getByRole('button')
-    fireEvent.click(dropdownButton) // open dropdown
+    const user = userEvent.setup()
+    await user.click(dropdownButton) // open dropdown
     expect(div?.children[0]?.getAttribute('aria-expanded')).toBe('true')
 
     const dropdownContent = getByText('Child 1').parentElement
     if (!dropdownContent) throw new Error('Dropdown content not found')
-    fireEvent.mouseDown(dropdownContent)
-    expect(div?.children[0]?.getAttribute('aria-expanded')).toBe('true')
+    await user.click(dropdownContent)
+    expect(div?.children[0]?.getAttribute('aria-expanded')).toBe('false')
   })
 
-  it('closes dropdown on escape key press', () => {
+  it('closes dropdown on escape key press', async () => {
     const { container: { children: [ div ] }, getByRole } = render(
       <Dropdown>
         <div>Child 1</div>
@@ -76,11 +80,12 @@ describe('Dropdown Component', () => {
     )
 
     const dropdownButton = getByRole('button')
-    fireEvent.click(dropdownButton) // open dropdown
+    const user = userEvent.setup()
+    await user.click(dropdownButton) // open dropdown
     expect(div?.children[0]?.getAttribute('aria-expanded')).toBe('true')
 
     // Press escape key
-    fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+    await user.keyboard('{Escape}')
     expect(div?.children[0]?.getAttribute('aria-expanded')).toBe('false')
   })
 
@@ -107,7 +112,7 @@ describe('Dropdown Component', () => {
   })
 
   // Keyboard navigation tests
-  it('opens dropdown and focuses first item on ArrowDown when closed', () => {
+  it('opens dropdown and focuses first item on ArrowDown when closed', async () => {
     const { getByRole, getAllByRole } = render(
       <Dropdown label="Menu">
         <button role="menuitem">Item 1</button>
@@ -120,15 +125,20 @@ describe('Dropdown Component', () => {
     // initially closed
     expect(dropdownButton.getAttribute('aria-expanded')).toBe('false')
 
+    // focus the button
+    act(() => {
+      dropdownButton.focus()
+    })
     // down arrow to open menu
-    fireEvent.keyDown(dropdownButton, { key: 'ArrowDown', code: 'ArrowDown' })
+    const user = userEvent.setup()
+    await user.keyboard('{ArrowDown}')
     expect(dropdownButton.getAttribute('aria-expanded')).toBe('true')
 
     // first menu item should be focused
     expect(document.activeElement).toBe(menuItems[0])
   })
 
-  it('focuses the next item on ArrowDown and wraps to first item if at the end', () => {
+  it('focuses the next item on ArrowDown and wraps to first item if at the end', async () => {
     const { getByRole, getAllByRole } = render(
       <Dropdown label="Menu">
         <button role="menuitem">Item 1</button>
@@ -139,19 +149,20 @@ describe('Dropdown Component', () => {
     const dropdownButton = getByRole('button')
 
     // open menu, first item has focus
-    fireEvent.click(dropdownButton)
+    const user = userEvent.setup()
+    await user.click(dropdownButton)
     expect(document.activeElement).toBe(menuItems[0])
 
     // second item should be focused
-    fireEvent.keyDown(menuItems[0], { key: 'ArrowDown', code: 'ArrowDown' })
+    await user.keyboard('{ArrowDown}')
     expect(document.activeElement).toBe(menuItems[1])
 
     // wrap back to first item
-    fireEvent.keyDown(menuItems[1], { key: 'ArrowDown', code: 'ArrowDown' })
+    await user.keyboard('{ArrowDown}')
     expect(document.activeElement).toBe(menuItems[0])
   })
 
-  it('focuses the previous item on ArrowUp and wraps to the last item if at the top', () => {
+  it('focuses the previous item on ArrowUp and wraps to the last item if at the top', async () => {
     const { getByRole, getAllByRole } = render(
       <Dropdown label="Menu">
         <button role="menuitem">Item 1</button>
@@ -162,15 +173,16 @@ describe('Dropdown Component', () => {
     const dropdownButton = getByRole('button')
 
     // open menu, first item has focus
-    fireEvent.click(dropdownButton)
+    const user = userEvent.setup()
+    await user.click(dropdownButton)
     expect(document.activeElement).toBe(menuItems[0])
 
     // ArrowUp -> should wrap to last item
-    fireEvent.keyDown(menuItems[0], { key: 'ArrowUp', code: 'ArrowUp' })
+    await user.keyboard('{ArrowUp}')
     expect(document.activeElement).toBe(menuItems[1])
   })
 
-  it('focuses first item on Home key press', () => {
+  it('focuses first item on Home key press', async () => {
     const { getByRole, getAllByRole } = render(
       <Dropdown label="Menu">
         <button role="menuitem">Item 1</button>
@@ -182,19 +194,20 @@ describe('Dropdown Component', () => {
     const dropdownButton = getByRole('button')
 
     // open menu, first item has focus
-    fireEvent.click(dropdownButton)
+    const user = userEvent.setup()
+    await user.click(dropdownButton)
     expect(document.activeElement).toBe(menuItems[0])
 
     // move to the second item
-    fireEvent.keyDown(menuItems[0], { key: 'ArrowDown', code: 'ArrowDown' })
+    await user.keyboard('{ArrowDown}')
     expect(document.activeElement).toBe(menuItems[1])
 
     // Home key should focus first item
-    fireEvent.keyDown(menuItems[1], { key: 'Home', code: 'Home' })
+    await user.keyboard('{Home}')
     expect(document.activeElement).toBe(menuItems[0])
   })
 
-  it('focuses last item on End key press', () => {
+  it('focuses last item on End key press', async () => {
     const { getByRole, getAllByRole } = render(
       <Dropdown label="Menu">
         <button role="menuitem">Item 1</button>
@@ -206,15 +219,16 @@ describe('Dropdown Component', () => {
     const dropdownButton = getByRole('button')
 
     // open menu, first item has focus
-    fireEvent.click(dropdownButton)
+    const user = userEvent.setup()
+    await user.click(dropdownButton)
     expect(document.activeElement).toBe(menuItems[0])
 
     // End key should focus the last item
-    fireEvent.keyDown(menuItems[0], { key: 'End', code: 'End' })
+    await user.keyboard('{End}')
     expect(document.activeElement).toBe(menuItems[2])
   })
 
-  it('closes the menu and puts focus back on the button on Escape', () => {
+  it('closes the menu and puts focus back on the button on Escape', async () => {
     const { getByRole, getAllByRole } = render(
       <Dropdown label="Menu">
         <button role="menuitem">Item 1</button>
@@ -225,12 +239,13 @@ describe('Dropdown Component', () => {
     const dropdownButton = getByRole('button')
 
     // open menu, first item has focus
-    fireEvent.click(dropdownButton)
+    const user = userEvent.setup()
+    await user.click(dropdownButton)
     expect(document.activeElement).toBe(menuItems[0])
     expect(dropdownButton.getAttribute('aria-expanded')).toBe('true')
 
     // escape closes menu
-    fireEvent.keyDown(menuItems[0], { key: 'Escape', code: 'Escape' })
+    await user.keyboard('{Escape}')
     expect(dropdownButton.getAttribute('aria-expanded')).toBe('false')
 
     // focus returns to the button
diff --git a/src/components/File/File.test.tsx b/src/components/File/File.test.tsx
index 52044d0..7b36984 100644
--- a/src/components/File/File.test.tsx
+++ b/src/components/File/File.test.tsx
@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react'
 import { strict as assert } from 'assert'
 import { act } from 'react'
-import { describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { Config, ConfigProvider } from '../../hooks/useConfig.js'
 import { getHttpSource, getHyperparamSource } from '../../lib/sources/index.js'
 import File from './File.js'
@@ -21,6 +21,10 @@ const headers = { get: vi.fn() }
 globalThis.fetch = vi.fn(() => Promise.resolve({ text, headers } as unknown as Response))
 
 describe('File Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
   it('renders a local file path', async () => {
     text.mockResolvedValueOnce('test content')
     const source = getHyperparamSource('folder/subfolder/test.txt', { endpoint })
diff --git a/src/components/Folder/Folder.test.tsx b/src/components/Folder/Folder.test.tsx
index fb4d1d0..f7eb442 100644
--- a/src/components/Folder/Folder.test.tsx
+++ b/src/components/Folder/Folder.test.tsx
@@ -1,7 +1,8 @@
-import { fireEvent, render, waitFor } from '@testing-library/react'
+import { render, waitFor } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
 import { strict as assert } from 'assert'
 import { act } from 'react'
-import { describe, expect, it, test, vi } from 'vitest'
+import { beforeEach, describe, expect, it, test, vi } from 'vitest'
 import { Config, ConfigProvider } from '../../hooks/useConfig.js'
 import { DirSource, FileMetadata, HyperparamFileMetadata, getHyperparamSource } from '../../lib/sources/index.js'
 import Folder from './Folder.js'
@@ -21,6 +22,10 @@ const config: Config = {
 globalThis.fetch = vi.fn()
 
 describe('Folder Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
   test.for([
     '',
     'subfolder/',
@@ -99,9 +104,8 @@ describe('Folder Component', () => {
 
     // Type a search query
     const searchInput = getByPlaceholderText('Search...') as HTMLInputElement
-    act(() => {
-      fireEvent.keyUp(searchInput, { target: { value: 'file1' } })
-    })
+    const user = userEvent.setup()
+    await user.type(searchInput, 'file1')
 
     // Only matching files are displayed
     await findByText('file1.txt')
@@ -109,9 +113,7 @@ describe('Folder Component', () => {
     expect(queryByText('report.pdf')).toBeNull()
 
     // Clear search with escape key
-    act(() => {
-      fireEvent.keyUp(searchInput, { key: 'Escape' })
-    })
+    await user.type(searchInput, '{Escape}')
 
     await findByText('report.pdf')
     getByText('folder1/')
@@ -140,26 +142,24 @@ describe('Folder Component', () => {
 
     // Type a search query and hit enter
     const searchInput = getByPlaceholderText('Search...') as HTMLInputElement
-    act(() => {
-      fireEvent.keyUp(searchInput, { target: { value: 'file1' } })
-    })
-
+    const user = userEvent.setup()
+    await user.type(searchInput, 'file1')
     await findByText('file1.txt')
 
-    act(() => {
-      fireEvent.keyUp(searchInput, { key: 'Enter' })
-    })
-
+    await user.type(searchInput, '{Enter}')
     expect(location.href).toBe('/files?key=file1.txt')
   })
 
-  it('jumps to search box when user types /', async () => {
+  it('jumps to search box when user types / while the body is focused', async () => {
     const dirSource: DirSource = {
       sourceId: 'test-source',
       sourceParts: [{ text: 'test-source', sourceId: 'test-source' }],
       kind: 'directory',
       prefix: '',
-      listFiles: () => Promise.resolve([]),
+      listFiles: async () => {
+        await fetch('something') // to ensure we wait for loading
+        return []
+      },
     }
     const { getByPlaceholderText } = render(<Folder source={dirSource} />)
 
@@ -169,17 +169,13 @@ describe('Folder Component', () => {
     })
 
     const searchInput = getByPlaceholderText('Search...') as HTMLInputElement
+    const user = userEvent.setup()
 
-    // Typing / should focus the search box
-    act(() => {
-      fireEvent.keyDown(document.body, { key: '/' })
-    })
+    // By default, the search box is already focused in this test
     expect(document.activeElement).toBe(searchInput)
 
     // Typing inside the search box should work including /
-    act(() => {
-      fireEvent.keyUp(searchInput, { target: { value: 'file1/' } })
-    })
+    await user.type(searchInput, 'file1/')
     expect(searchInput.value).toBe('file1/')
 
     // Unfocus and re-focus should select all text in search box
@@ -187,12 +183,19 @@ describe('Folder Component', () => {
       searchInput.blur()
     })
     expect(document.activeElement).not.toBe(searchInput)
+    expect(document.activeElement).toBe(document.body)
 
-    act(() => {
-      fireEvent.keyDown(document.body, { key: '/' })
-    })
+    await user.keyboard('/')
     expect(document.activeElement).toBe(searchInput)
     expect(searchInput.selectionStart).toBe(0)
     expect(searchInput.selectionEnd).toBe(searchInput.value.length)
+
+    // Focus another element and try again: it does not focus the search box
+    await user.tab()
+    expect(document.activeElement).not.toBe(searchInput)
+    expect(document.activeElement).not.toBe(document.body)
+
+    await user.keyboard('/')
+    expect(document.activeElement).not.toBe(searchInput)
   })
 })
diff --git a/src/components/ImageView/ImageView.test.tsx b/src/components/ImageView/ImageView.test.tsx
index 95a82cc..05b0c17 100644
--- a/src/components/ImageView/ImageView.test.tsx
+++ b/src/components/ImageView/ImageView.test.tsx
@@ -1,12 +1,17 @@
 import { render } from '@testing-library/react'
 import { strict as assert } from 'assert'
-import { describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { getHyperparamSource } from '../../lib/sources/index.js'
 import ImageView from './ImageView.js'
 
 globalThis.fetch = vi.fn()
 
 describe('ImageView Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    // unnecessary for now because it has only one test, but safer for future tests
+  })
+
   it('renders the image correctly', async () => {
     const body = new ArrayBuffer(8)
     vi.mocked(fetch).mockResolvedValueOnce({
diff --git a/src/components/Json/Json.test.tsx b/src/components/Json/Json.test.tsx
index e7a1c37..a2351d7 100644
--- a/src/components/Json/Json.test.tsx
+++ b/src/components/Json/Json.test.tsx
@@ -1,4 +1,5 @@
-import { fireEvent, render } from '@testing-library/react'
+import { render } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
 import { describe, expect, it } from 'vitest'
 import Json from './Json.js'
 import { isPrimitive, shouldObjectCollapse } from './helpers.js'
@@ -89,13 +90,14 @@ describe('Json Component', () => {
   it.for([
     { obj: [314, null] },
     { obj: { nested: true } },
-  ])('hides the content and append number of entries when objects with non-primitive values are collapsed', (obj) => {
+  ])('hides the content and append number of entries when objects with non-primitive values are collapsed', async (obj) => {
     const { getAllByRole, getByText } = render(<Json json={obj} />)
     const root = getAllByRole('treeitem')[0]
     if (!root) { /* type assertion, getAllByRole would already have thrown */
       throw new Error('No root element found')
     }
-    fireEvent.click(root)
+    const user = userEvent.setup()
+    await user.click(root)
     expect(root.getAttribute('aria-expanded')).toBe('false')
     getByText('...')
     getByText(/entries/)
@@ -119,25 +121,27 @@ describe('Json Component', () => {
     getByText(/entries/)
   })
 
-  it('toggles array collapse state', () => {
+  it('toggles array collapse state', async () => {
     const longArray = Array.from({ length: 101 }, (_, i) => i)
     const { getByRole, getByText, queryByText } = render(<Json json={longArray} />)
     const treeItem = getByRole('treeitem')
     getByText('...')
-    fireEvent.click(treeItem)
+    const user = userEvent.setup()
+    await user.click(treeItem)
     expect(queryByText('...')).toBeNull()
-    fireEvent.click(treeItem)
+    await user.click(treeItem)
     getByText('...')
   })
 
-  it('toggles object collapse state', () => {
+  it('toggles object collapse state', async () => {
     const longObject = Object.fromEntries(Array.from({ length: 101 }, (_, i) => [`key${i}`, { nested: true }]))
     const { getByRole, getByText, queryByText } = render(<Json json={longObject} />)
     const treeItem = getByRole('treeitem') // only one treeitem because the inner objects are collapsed and not represented as treeitems
     getByText('...')
-    fireEvent.click(treeItem)
+    const user = userEvent.setup()
+    await user.click(treeItem)
     expect(queryByText('...')).toBeNull()
-    fireEvent.click(treeItem)
+    await user.click(treeItem)
     getByText('...')
   })
 })
diff --git a/src/components/JsonView/JsonView.test.tsx b/src/components/JsonView/JsonView.test.tsx
index 2993d8e..b9b88de 100644
--- a/src/components/JsonView/JsonView.test.tsx
+++ b/src/components/JsonView/JsonView.test.tsx
@@ -1,5 +1,5 @@
 import { render, waitFor } from '@testing-library/react'
-import { describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { FileSource } from '../../lib/sources/types.js'
 import JsonView from './JsonView.js'
 
@@ -11,6 +11,10 @@ vi.mock('../../../src/lib/utils.js', async () => {
 globalThis.fetch = vi.fn()
 
 describe('JsonView Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
   const encoder = new TextEncoder()
 
   it('renders json content as nested tree items (if not collapsed)', async () => {
diff --git a/src/components/MarkdownView/MarkdownView.test.tsx b/src/components/MarkdownView/MarkdownView.test.tsx
index 4be71d2..2d5e4c2 100644
--- a/src/components/MarkdownView/MarkdownView.test.tsx
+++ b/src/components/MarkdownView/MarkdownView.test.tsx
@@ -1,12 +1,17 @@
 import { render } from '@testing-library/react'
 import { strict as assert } from 'assert'
-import { describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { getHyperparamSource } from '../../lib/sources/index.js'
 import MarkdownView from './MarkdownView.js'
 
 globalThis.fetch = vi.fn()
 
 describe('MarkdownView Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    // unnecessary for now because it has only one test, but safer for future tests
+  })
+
   it('renders markdown correctly', async () => {
     const text = '# Markdown\n\nThis is a test of the markdown viewer.'
     vi.mocked(fetch).mockResolvedValueOnce({
diff --git a/src/components/SlidePanel/SlidePanel.test.tsx b/src/components/SlidePanel/SlidePanel.test.tsx
index 95abff2..6a7c609 100644
--- a/src/components/SlidePanel/SlidePanel.test.tsx
+++ b/src/components/SlidePanel/SlidePanel.test.tsx
@@ -1,5 +1,6 @@
 
-import { act, fireEvent, render } from '@testing-library/react'
+import { render } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { ConfigProvider } from '../../hooks/useConfig.js'
 import SlidePanel from './SlidePanel.js'
@@ -86,7 +87,7 @@ describe('SlidePanel', () => {
     expect(panel.style.width).toBe('400px')
   })
 
-  it('respects minWidth from config', () => {
+  it('respects minWidth from config', async () => {
     const { getByRole } = render(
       <ConfigProvider value={{ slidePanel: { minWidth: 300 } }}>
         <SlidePanel
@@ -100,22 +101,20 @@ describe('SlidePanel', () => {
     const panel = getByRole('complementary')
     expect(panel.style.width).toBe('400px')
 
-    // Simulate mousedown on resizer with clientX 800
-    act(() => {
-      fireEvent.mouseDown(resizer, { clientX: 800 })
-    })
-
-    // Simulate mousemove on document with clientX such that new width is less than minWidth
-    act(() => {
-      fireEvent.mouseMove(document, { clientX: 950 })
-      fireEvent.mouseUp(document)
-    })
+    const user = userEvent.setup()
+    await user.pointer([
+      // Simulate mousedown on resizer with clientX 800
+      { keys: '[MouseLeft>]', target: resizer, coords: { x: 800, y: 0 } },
+      // Simulate mousemove on document with clientX such that new width is less than minWidth
+      { coords: { x: 950, y: 0 } },
+      { keys: '[/MouseLeft]' },
+    ])
 
     // resizingClientX was set to 800 + 400 = 1200 so new width = max(300, 1200 - 950) = 300
     expect(panel.style.width).toBe('300px')
   })
 
-  it('handles dragging to resize', () => {
+  it('handles dragging to resize', async () => {
     const { getByRole } = render(
       <SlidePanel
         mainContent={<div>Main</div>}
@@ -130,20 +129,12 @@ describe('SlidePanel', () => {
     // Mock panel's offsetWidth to be 400px
     Object.defineProperty(panel, 'offsetWidth', { value: 400, configurable: true })
 
-    // Simulate mousedown
-    act(() => {
-      fireEvent.mouseDown(resizer, { clientX: 800 })
-    })
-
-    // Simulate dragging
-    act(() => {
-      fireEvent.mouseMove(document, { clientX: 750 })
-    })
-
-    // End dragging
-    act(() => {
-      fireEvent.mouseUp(document)
-    })
+    const user = userEvent.setup()
+    await user.pointer([
+      { keys: '[MouseLeft>]', target: resizer, coords: { x: 800, y: 0 } },
+      { coords: { x: 750, y: 0 } },
+      { keys: '[/MouseLeft]' },
+    ])
 
     // Expected new width = 1200 - 750 = 450
     expect(panel.style.width).toBe('450px')
diff --git a/src/components/Welcome/Welcome.test.tsx b/src/components/Welcome/Welcome.test.tsx
index ceb58fa..f9e2e09 100644
--- a/src/components/Welcome/Welcome.test.tsx
+++ b/src/components/Welcome/Welcome.test.tsx
@@ -1,11 +1,17 @@
-import { fireEvent, render } from '@testing-library/react'
-import { describe, expect, it, vi } from 'vitest'
+import { render } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { ConfigProvider } from '../../hooks/useConfig.js'
 import Welcome from './Welcome.js'
 
+const onClose = vi.fn()
+
 describe('Welcome Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
   it('renders welcome content', () => {
-    const onClose = vi.fn()
     const { getByRole, getByText } = render(<Welcome onClose={onClose} />)
 
     getByText('npx hyperparam')
@@ -14,56 +20,50 @@ describe('Welcome Component', () => {
     expect(button.textContent).toBe('Got it')
   })
 
-  it('calls onClose when button is clicked', () => {
-    const onClose = vi.fn()
+  it('calls onClose when button is clicked', async () => {
     const { getByRole } = render(<Welcome onClose={onClose} />)
 
-    fireEvent.click(getByRole('button'))
+    await userEvent.setup().click(getByRole('button'))
     expect(onClose).toHaveBeenCalledTimes(1)
   })
 
-  it('calls onClose when clicking outside the popup', () => {
-    const onClose = vi.fn()
+  it('calls onClose when clicking outside the popup', async () => {
     const { getByRole } = render(<Welcome onClose={onClose} />)
 
     // Find the backdrop element
     const backdropElement = getByRole('dialog')
 
-    fireEvent.click(backdropElement)
+    await userEvent.setup().click(backdropElement)
     expect(onClose).toHaveBeenCalledTimes(1)
   })
 
-  it('does not call onClose when clicking inside the popup', () => {
-    const onClose = vi.fn()
+  it('does not call onClose when clicking inside the popup', async () => {
     const { getByText } = render(<Welcome onClose={onClose} />)
 
     // Find and click on an element inside the popup content
     const paragraphElement = getByText('Supported file types include Parquet, CSV, JSON, Markdown, and Text.')
-    fireEvent.click(paragraphElement)
+    await userEvent.setup().click(paragraphElement)
 
     expect(onClose).not.toHaveBeenCalled()
   })
 
-  it('calls onClose when pressing Escape key', () => {
-    const onClose = vi.fn()
+  it('calls onClose when pressing Escape key', async () => {
     render(<Welcome onClose={onClose} />)
 
     // Simulate pressing the Escape key
-    fireEvent.keyDown(window, { key: 'Escape' })
+    await userEvent.setup().keyboard('{Escape}')
     expect(onClose).toHaveBeenCalledTimes(1)
   })
 
-  it('does not call onClose when pressing other keys', () => {
-    const onClose = vi.fn()
+  it('does not call onClose when pressing other keys', async () => {
     render(<Welcome onClose={onClose} />)
 
     // Simulate pressing a different key
-    fireEvent.keyDown(window, { key: 'Enter' })
+    await userEvent.setup().keyboard('{Enter}')
     expect(onClose).not.toHaveBeenCalled()
   })
 
   it('renders custom content and button text', () => {
-    const onClose = vi.fn()
     const customContent = <p>Custom welcome message</p>
     const customButtonText = 'Custom Got it'
     const { getByText } = render(
diff --git a/test/lib/sources/httpSource.test.ts b/test/lib/sources/httpSource.test.ts
index 9e1ba19..556871e 100644
--- a/test/lib/sources/httpSource.test.ts
+++ b/test/lib/sources/httpSource.test.ts
@@ -1,9 +1,13 @@
-import { describe, expect, it, test, vi } from 'vitest'
+import { beforeEach, describe, expect, it, test, vi } from 'vitest'
 import { getHttpSource } from '../../../src/lib/sources/httpSource.js'
 
 globalThis.fetch = vi.fn()
 
 describe('getHttpSource', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
   test.for([
     'http://example.com/test.txt',
     'https://example.com/test.txt',
diff --git a/test/lib/sources/hyperparamSource.test.ts b/test/lib/sources/hyperparamSource.test.ts
index 623ff6d..361b68c 100644
--- a/test/lib/sources/hyperparamSource.test.ts
+++ b/test/lib/sources/hyperparamSource.test.ts
@@ -1,9 +1,13 @@
-import { assert, describe, expect, it, test, vi } from 'vitest'
+import { assert, beforeEach, describe, expect, it, test, vi } from 'vitest'
 import { HyperparamFileMetadata, getHyperparamSource } from '../../../src/lib/sources/hyperparamSource.js'
 
 globalThis.fetch = vi.fn()
 
 describe('getHyperparamSource', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
   const endpoint = 'http://localhost:3000'
 
   it('recognizes local files', () => {