diff --git a/package-lock.json b/package-lock.json
index fc8d68c08c2..803b58ecae6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -56,7 +56,7 @@
         "@testing-library/jest-dom": "5.16.4",
         "@testing-library/react": "12.1.5",
         "@testing-library/react-hooks": "7.0.2",
-        "@testing-library/user-event": "13.1.9",
+        "@testing-library/user-event": "^14.3.0",
         "@types/chroma-js": "2.1.3",
         "@types/enzyme": "3.10.9",
         "@types/jest": "27.0.2",
@@ -9817,15 +9817,12 @@
       }
     },
     "node_modules/@testing-library/user-event": {
-      "version": "13.1.9",
-      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.1.9.tgz",
-      "integrity": "sha512-NZr0zL2TMOs2qk+dNlqrAdbaRW5dAmYwd1yuQ4r7HpkVEOj0MWuUjDWwKhcLd/atdBy8ZSMHSKp+kXSQe47ezg==",
+      "version": "14.3.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.3.0.tgz",
+      "integrity": "sha512-P02xtBBa8yMaLhK8CzJCIns8rqwnF6FxhR9zs810flHOBXUYCFjLd8Io1rQrAkQRWEmW2PGdZIEdMxf/KLsqFA==",
       "dev": true,
-      "dependencies": {
-        "@babel/runtime": "^7.12.5"
-      },
       "engines": {
-        "node": ">=10",
+        "node": ">=12",
         "npm": ">=6"
       },
       "peerDependencies": {
@@ -44445,13 +44442,11 @@
       }
     },
     "@testing-library/user-event": {
-      "version": "13.1.9",
-      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.1.9.tgz",
-      "integrity": "sha512-NZr0zL2TMOs2qk+dNlqrAdbaRW5dAmYwd1yuQ4r7HpkVEOj0MWuUjDWwKhcLd/atdBy8ZSMHSKp+kXSQe47ezg==",
+      "version": "14.3.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.3.0.tgz",
+      "integrity": "sha512-P02xtBBa8yMaLhK8CzJCIns8rqwnF6FxhR9zs810flHOBXUYCFjLd8Io1rQrAkQRWEmW2PGdZIEdMxf/KLsqFA==",
       "dev": true,
-      "requires": {
-        "@babel/runtime": "^7.12.5"
-      }
+      "requires": {}
     },
     "@tootallnate/once": {
       "version": "1.1.2",
diff --git a/package.json b/package.json
index 454d803afb1..0c94d02cdf3 100644
--- a/package.json
+++ b/package.json
@@ -126,7 +126,7 @@
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "12.1.5",
     "@testing-library/react-hooks": "7.0.2",
-    "@testing-library/user-event": "13.1.9",
+    "@testing-library/user-event": "^14.3.0",
     "@types/chroma-js": "2.1.3",
     "@types/enzyme": "3.10.9",
     "@types/jest": "27.0.2",
diff --git a/src/SegmentedControl/SegmentedControl.test.tsx b/src/SegmentedControl/SegmentedControl.test.tsx
index cc41d98004f..67eb0f5c02d 100644
--- a/src/SegmentedControl/SegmentedControl.test.tsx
+++ b/src/SegmentedControl/SegmentedControl.test.tsx
@@ -153,7 +153,8 @@ describe('SegmentedControl', () => {
     }
   })
 
-  it('calls onChange with index of clicked segment button', () => {
+  it('calls onChange with index of clicked segment button', async () => {
+    const user = userEvent.setup()
     const handleChange = jest.fn()
     const {getByText} = render(
       <SegmentedControl aria-label="File view" onChange={handleChange}>
@@ -169,12 +170,13 @@ describe('SegmentedControl', () => {
 
     expect(handleChange).not.toHaveBeenCalled()
     if (buttonToClick) {
-      userEvent.click(buttonToClick)
+      await user.click(buttonToClick)
     }
     expect(handleChange).toHaveBeenCalledWith(1)
   })
 
-  it('calls segment button onClick if it is passed', () => {
+  it('calls segment button onClick if it is passed', async () => {
+    const user = userEvent.setup()
     const handleClick = jest.fn()
     const {getByText} = render(
       <SegmentedControl aria-label="File view">
@@ -190,12 +192,13 @@ describe('SegmentedControl', () => {
 
     expect(handleClick).not.toHaveBeenCalled()
     if (buttonToClick) {
-      userEvent.click(buttonToClick)
+      await user.click(buttonToClick)
     }
     expect(handleClick).toHaveBeenCalled()
   })
 
-  it('focuses the selected button first', () => {
+  it('focuses the selected button first', async () => {
+    const user = userEvent.setup()
     const {getByRole} = render(
       <>
         <button>Before</button>
@@ -212,8 +215,8 @@ describe('SegmentedControl', () => {
 
     expect(document.activeElement?.id).not.toEqual(initialFocusButtonNode.id)
 
-    userEvent.tab() // focus the button before the segmented control
-    userEvent.tab() // move focus into the segmented control
+    await user.tab() // focus the button before the segmented control
+    await user.tab() // move focus into the segmented control
 
     expect(document.activeElement?.id).toEqual(initialFocusButtonNode.id)
   })
diff --git a/src/__tests__/Autocomplete.test.tsx b/src/__tests__/Autocomplete.test.tsx
index 487c936d591..384b7faadc7 100644
--- a/src/__tests__/Autocomplete.test.tsx
+++ b/src/__tests__/Autocomplete.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import {render} from '../utils/testing'
-import {render as HTMLRender, fireEvent} from '@testing-library/react'
+import {render as HTMLRender, fireEvent, waitFor} from '@testing-library/react'
 import {toHaveNoViolations} from 'jest-axe'
 import 'babel-polyfill'
 import Autocomplete, {AutocompleteInputProps} from '../Autocomplete'
@@ -193,7 +193,8 @@ describe('Autocomplete', () => {
   })
 
   describe('Autocomplete.Input', () => {
-    it('calls onChange', () => {
+    it('calls onChange', async () => {
+      const user = userEvent.setup()
       const onChangeMock = jest.fn()
       const {container} = HTMLRender(
         <LabelledAutocomplete
@@ -204,7 +205,7 @@ describe('Autocomplete', () => {
       const inputNode = container.querySelector('#autocompleteInput')
 
       expect(onChangeMock).not.toHaveBeenCalled()
-      inputNode && userEvent.type(inputNode, 'z')
+      inputNode && (await user.type(inputNode, 'z'))
       expect(onChangeMock).toHaveBeenCalled()
     })
 
@@ -244,7 +245,8 @@ describe('Autocomplete', () => {
       expect(onKeyUpMock).toHaveBeenCalled()
     })
 
-    it('calls onKeyPress', () => {
+    it('calls onKeyPress', async () => {
+      const user = userEvent.setup()
       const onKeyPressMock = jest.fn()
       const {getByLabelText} = HTMLRender(
         <LabelledAutocomplete inputProps={{onKeyPress: onKeyPressMock}} menuProps={{items: [], selectedItemIds: []}} />
@@ -252,7 +254,7 @@ describe('Autocomplete', () => {
       const inputNode = getByLabelText(AUTOCOMPLETE_LABEL)
 
       expect(onKeyPressMock).not.toHaveBeenCalled()
-      userEvent.type(inputNode, '{enter}')
+      await user.type(inputNode, '{enter}')
       expect(onKeyPressMock).toHaveBeenCalled()
     })
 
@@ -265,7 +267,7 @@ describe('Autocomplete', () => {
       expect(inputNode.getAttribute('aria-expanded')).toBe('true')
     })
 
-    it('closes the menu when the input is blurred', () => {
+    it('closes the menu when the input is blurred', async () => {
       const {getByLabelText} = HTMLRender(<LabelledAutocomplete menuProps={{items: [], selectedItemIds: []}} />)
       const inputNode = getByLabelText(AUTOCOMPLETE_LABEL)
 
@@ -276,49 +278,50 @@ describe('Autocomplete', () => {
       fireEvent.blur(inputNode)
 
       // wait a tick for blur to finish
-      setTimeout(() => {
-        expect(inputNode.getAttribute('aria-expanded')).not.toBe('true')
-      }, 0)
+      await waitFor(() => expect(inputNode.getAttribute('aria-expanded')).not.toBe('true'))
     })
 
-    it('sets the input value to the suggested item text and highlights the untyped part of the word', () => {
+    it('sets the input value to the suggested item text and highlights the untyped part of the word', async () => {
+      const user = userEvent.setup()
       const {container, getByDisplayValue} = HTMLRender(
         <LabelledAutocomplete menuProps={{items: mockItems, selectedItemIds: []}} />
       )
       const inputNode = container.querySelector('#autocompleteInput')
 
-      inputNode && userEvent.type(inputNode, 'ze')
+      inputNode && (await user.type(inputNode, 'ze'))
       expect(getByDisplayValue('zero')).toBeDefined()
     })
 
-    it('does not show or highlight suggestion text after the user hits Backspace until they hit another key', () => {
+    it('does not show or highlight suggestion text after the user hits Backspace until they hit another key', async () => {
+      const user = userEvent.setup()
       const {container, getByDisplayValue} = HTMLRender(
         <LabelledAutocomplete menuProps={{items: mockItems, selectedItemIds: []}} />
       )
       const inputNode = container.querySelector('#autocompleteInput')
 
       expect((inputNode as HTMLInputElement).selectionStart).toBe(0)
-      inputNode && userEvent.type(inputNode, 'ze')
+      inputNode && (await user.type(inputNode, 'ze'))
       expect(getByDisplayValue('zero')).toBeDefined()
       expect((inputNode as HTMLInputElement).selectionStart).toBe(2)
       expect((inputNode as HTMLInputElement).selectionEnd).toBe(4)
-      inputNode && userEvent.type(inputNode, '{backspace}')
+      inputNode && (await user.keyboard('{backspace}'))
       expect((inputNode as HTMLInputElement).selectionStart).toBe(2)
       expect(getByDisplayValue('ze')).toBeDefined()
-      inputNode && userEvent.type(inputNode, 'r')
+      inputNode && (await user.keyboard('r'))
       expect((inputNode as HTMLInputElement).selectionStart).toBe(3)
       expect((inputNode as HTMLInputElement).selectionEnd).toBe(4)
       expect(getByDisplayValue('zero')).toBeDefined()
     })
 
-    it('clears the input value when the user hits Escape', () => {
+    it('clears the input value when the user hits Escape', async () => {
+      const user = userEvent.setup()
       const {container} = HTMLRender(<LabelledAutocomplete menuProps={{items: mockItems, selectedItemIds: []}} />)
       const inputNode = container.querySelector('#autocompleteInput')
 
       expect(inputNode?.getAttribute('aria-expanded')).not.toBe('true')
-      inputNode && userEvent.type(inputNode, 'ze')
+      inputNode && (await user.type(inputNode, 'ze'))
       expect(inputNode?.getAttribute('aria-expanded')).toBe('true')
-      inputNode && userEvent.type(inputNode, '{esc}')
+      inputNode && (await user.keyboard('{escape}'))
       expect(inputNode?.getAttribute('aria-expanded')).not.toBe('true')
     })
 
@@ -332,18 +335,20 @@ describe('Autocomplete', () => {
   })
 
   describe('Autocomplete.Menu', () => {
-    it('calls a custom filter function', () => {
+    it('calls a custom filter function', async () => {
+      const user = userEvent.setup()
       const filterFnMock = jest.fn()
       const {container} = HTMLRender(
         <LabelledAutocomplete menuProps={{items: mockItems, selectedItemIds: [], filterFn: filterFnMock}} />
       )
       const inputNode = container.querySelector('#autocompleteInput')
 
-      inputNode && userEvent.type(inputNode, 'ze')
+      inputNode && (await user.type(inputNode, 'ze'))
       expect(filterFnMock).toHaveBeenCalled()
     })
 
-    it('calls a custom sort function when the menu closes', () => {
+    it('calls a custom sort function when the menu closes', async () => {
+      const user = userEvent.setup()
       const sortOnCloseFnMock = jest.fn()
       const {container} = HTMLRender(
         <LabelledAutocomplete menuProps={{items: mockItems, selectedItemIds: [], sortOnCloseFn: sortOnCloseFnMock}} />
@@ -354,29 +359,29 @@ describe('Autocomplete', () => {
       // current sort order matches the result of `sortOnCloseFnMock`
       expect(sortOnCloseFnMock).toHaveBeenCalledTimes(mockItems.length - 1)
       if (inputNode) {
-        userEvent.type(inputNode, 'ze')
+        await user.type(inputNode, 'ze')
         // eslint-disable-next-line github/no-blur
         fireEvent.blur(inputNode)
       }
 
       // wait a tick for blur to finish
-      setTimeout(() => {
-        expect(sortOnCloseFnMock).toHaveBeenCalledTimes(mockItems.length)
-      }, 0)
+      await waitFor(() => expect(sortOnCloseFnMock).toHaveBeenCalled())
     })
 
-    it("calls onOpenChange with the menu's open state", () => {
+    it("calls onOpenChange with the menu's open state", async () => {
+      const user = userEvent.setup()
       const onOpenChangeMock = jest.fn()
       const {container} = HTMLRender(
         <LabelledAutocomplete menuProps={{items: mockItems, selectedItemIds: [], onOpenChange: onOpenChangeMock}} />
       )
       const inputNode = container.querySelector('#autocompleteInput')
 
-      inputNode && userEvent.type(inputNode, 'ze')
+      inputNode && (await user.type(inputNode, 'ze'))
       expect(onOpenChangeMock).toHaveBeenCalled()
     })
 
-    it('calls onSelectedChange with the data for the selected items', () => {
+    it('calls onSelectedChange with the data for the selected items', async () => {
+      const user = userEvent.setup()
       const onSelectedChangeMock = jest.fn()
       const {container} = HTMLRender(
         <LabelledAutocomplete
@@ -388,7 +393,7 @@ describe('Autocomplete', () => {
       expect(onSelectedChangeMock).not.toHaveBeenCalled()
       if (inputNode) {
         fireEvent.focus(inputNode)
-        userEvent.type(inputNode, '{enter}')
+        await user.type(inputNode, '{enter}')
       }
 
       // wait a tick for the keyboard event to be dispatched to the menu item
@@ -397,7 +402,8 @@ describe('Autocomplete', () => {
       }, 0)
     })
 
-    it('does not close the menu when clicking an item in the menu if selectionVariant=multiple', () => {
+    it('does not close the menu when clicking an item in the menu if selectionVariant=multiple', async () => {
+      const user = userEvent.setup()
       const {getByText, container} = HTMLRender(
         <LabelledAutocomplete menuProps={{items: mockItems, selectedItemIds: [], selectionVariant: 'multiple'}} />
       )
@@ -408,7 +414,7 @@ describe('Autocomplete', () => {
       inputNode && fireEvent.focus(inputNode)
       expect(inputNode?.getAttribute('aria-expanded')).toBe('true')
       fireEvent.click(itemToClickNode)
-      inputNode && userEvent.type(inputNode, '{enter}')
+      inputNode && (await user.type(inputNode, '{enter}'))
       expect(inputNode?.getAttribute('aria-expanded')).toBe('true')
     })
 
diff --git a/src/__tests__/Checkbox.test.tsx b/src/__tests__/Checkbox.test.tsx
index 4a7371959b2..3fe94e094bf 100644
--- a/src/__tests__/Checkbox.test.tsx
+++ b/src/__tests__/Checkbox.test.tsx
@@ -45,7 +45,8 @@ describe('Checkbox', () => {
     expect(checkbox.checked).toEqual(true)
   })
 
-  it('accepts a change handler that can alter the checkbox state', () => {
+  it('accepts a change handler that can alter the checkbox state', async () => {
+    const user = userEvent.setup()
     const handleChange = jest.fn()
     const {getByRole} = render(<Checkbox onChange={handleChange} />)
 
@@ -53,11 +54,11 @@ describe('Checkbox', () => {
 
     expect(checkbox.checked).toEqual(false)
 
-    userEvent.click(checkbox)
+    await user.click(checkbox)
     expect(handleChange).toHaveBeenCalled()
     expect(checkbox.checked).toEqual(true)
 
-    userEvent.click(checkbox)
+    await user.click(checkbox)
     expect(handleChange).toHaveBeenCalled()
     expect(checkbox.checked).toEqual(false)
   })
@@ -72,7 +73,8 @@ describe('Checkbox', () => {
     expect(checkbox.checked).toEqual(false)
   })
 
-  it('renders an inactive checkbox state correctly', () => {
+  it('renders an inactive checkbox state correctly', async () => {
+    const user = userEvent.setup()
     const handleChange = jest.fn()
     const {getByRole, rerender} = render(<Checkbox disabled onChange={handleChange} />)
 
@@ -82,7 +84,7 @@ describe('Checkbox', () => {
     expect(checkbox.checked).toEqual(false)
     expect(checkbox).toHaveAttribute('aria-disabled', 'true')
 
-    userEvent.click(checkbox)
+    await user.click(checkbox)
 
     expect(checkbox.disabled).toEqual(true)
     expect(checkbox.checked).toEqual(false)
@@ -94,14 +96,15 @@ describe('Checkbox', () => {
     expect(checkbox).toHaveAttribute('aria-disabled', 'false')
   })
 
-  it('renders an uncontrolled component correctly', () => {
+  it('renders an uncontrolled component correctly', async () => {
+    const user = userEvent.setup()
     const {getByRole} = render(<Checkbox defaultChecked />)
 
     const checkbox = getByRole('checkbox') as HTMLInputElement
 
     expect(checkbox.checked).toEqual(true)
 
-    userEvent.click(checkbox)
+    await user.click(checkbox)
 
     expect(checkbox.checked).toEqual(false)
   })
diff --git a/src/__tests__/CheckboxGroup.test.tsx b/src/__tests__/CheckboxGroup.test.tsx
index a7c99427bef..36826e8e2cd 100644
--- a/src/__tests__/CheckboxGroup.test.tsx
+++ b/src/__tests__/CheckboxGroup.test.tsx
@@ -91,7 +91,8 @@ describe('CheckboxGroup', () => {
 
     expect(requiredIndicator).toBeInTheDocument()
   })
-  it('calls onChange handlers passed to CheckboxGroup and Checkbox', () => {
+  it('calls onChange handlers passed to CheckboxGroup and Checkbox', async () => {
+    const user = userEvent.setup()
     const handleParentChange = jest.fn()
     const handleCheckboxChange = jest.fn()
     const {getByLabelText} = render(
@@ -115,11 +116,12 @@ describe('CheckboxGroup', () => {
 
     expect(handleParentChange).not.toHaveBeenCalled()
     expect(handleCheckboxChange).not.toHaveBeenCalled()
-    userEvent.click(checkbox)
+    await user.click(checkbox)
     expect(handleParentChange).toHaveBeenCalled()
     expect(handleCheckboxChange).toHaveBeenCalled()
   })
-  it('calls onChange handler on CheckboxGroup with selected values', () => {
+  it('calls onChange handler on CheckboxGroup with selected values', async () => {
+    const user = userEvent.setup()
     const handleParentChange = jest.fn()
     const {getByLabelText} = render(
       <CheckboxGroup onChange={handleParentChange}>
@@ -142,7 +144,7 @@ describe('CheckboxGroup', () => {
     const checkbox = getByLabelText('Choice one') as HTMLInputElement
 
     expect(handleParentChange).not.toHaveBeenCalled()
-    userEvent.click(checkbox)
+    await user.click(checkbox)
     expect(handleParentChange).toHaveBeenCalledWith(
       ['two', 'one'],
       expect.objectContaining({
@@ -151,7 +153,7 @@ describe('CheckboxGroup', () => {
         })
       })
     )
-    userEvent.click(checkbox)
+    await user.click(checkbox)
     expect(handleParentChange).toHaveBeenCalledWith(
       ['two'],
       expect.objectContaining({
diff --git a/src/__tests__/Overlay.test.tsx b/src/__tests__/Overlay.test.tsx
index 7cc6e7de4fe..dcda9518a79 100644
--- a/src/__tests__/Overlay.test.tsx
+++ b/src/__tests__/Overlay.test.tsx
@@ -1,7 +1,7 @@
 import React, {useRef, useState} from 'react'
 import {Overlay, Box, Text} from '..'
 import {ButtonDanger, Button} from '../deprecated'
-import {render, cleanup, waitFor, fireEvent, act} from '@testing-library/react'
+import {render, cleanup, waitFor, fireEvent} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import {axe, toHaveNoViolations} from 'jest-axe'
 import '@testing-library/jest-dom'
@@ -68,35 +68,39 @@ describe('Overlay', () => {
   })
 
   it('should focus element passed into function', async () => {
+    const user = userEvent.setup()
     const {getByText} = render(<TestComponent initialFocus="button" />)
-    userEvent.click(getByText('open overlay'))
+    await user.click(getByText('open overlay'))
     await waitFor(() => getByText('Confirm'))
     const confirmButton = getByText('Confirm')
     expect(document.activeElement).toEqual(confirmButton)
   })
 
   it('should focus first element when nothing is passed', async () => {
+    const user = userEvent.setup()
     const {getByText} = render(<TestComponent />)
-    userEvent.click(getByText('open overlay'))
+    await user.click(getByText('open overlay'))
     await waitFor(() => getByText('Cancel'))
     const cancelButton = getByText('Cancel')
     expect(document.activeElement).toEqual(cancelButton)
   })
 
-  it('should call function when user clicks outside container', () => {
+  it('should call function when user clicks outside container', async () => {
+    const user = userEvent.setup()
     const mockFunction = jest.fn()
     const {getByText, queryAllByText} = render(<TestComponent callback={mockFunction} />)
-    act(() => userEvent.click(getByText('open overlay')))
-    act(() => userEvent.click(getByText('outside')))
+    await user.click(getByText('open overlay'))
+    await user.click(getByText('outside'))
     expect(mockFunction).toHaveBeenCalledTimes(1)
     const cancelButtons = queryAllByText('Cancel')
     expect(cancelButtons).toHaveLength(0)
   })
 
-  it('should call function when user presses escape', () => {
+  it('should call function when user presses escape', async () => {
+    const user = userEvent.setup()
     const mockFunction = jest.fn()
     const {getByText, queryAllByText} = render(<TestComponent callback={mockFunction} />)
-    act(() => userEvent.click(getByText('open overlay')))
+    await user.click(getByText('open overlay'))
     const domNode = getByText('Are you sure?')
     fireEvent.keyDown(domNode, {key: 'Escape', code: 'Escape', keyCode: 27, charCode: 27})
     expect(mockFunction).toHaveBeenCalledTimes(1)
@@ -104,7 +108,8 @@ describe('Overlay', () => {
     expect(cancelButtons).toHaveLength(0)
   })
 
-  it('should close the top most overlay on escape', () => {
+  it('should close the top most overlay on escape', async () => {
+    const user = userEvent.setup()
     const container = render(
       <ThemeProvider>
         <NestedOverlays />
@@ -112,11 +117,11 @@ describe('Overlay', () => {
     )
 
     // open first menu
-    userEvent.click(container.getByLabelText('Add this repository to a list'))
+    await user.click(container.getByLabelText('Add this repository to a list'))
     expect(container.getByText('Add to list')).toBeInTheDocument()
 
     // open second menu
-    userEvent.click(container.getByText('Create list'))
+    await user.click(container.getByText('Create list'))
     expect(container.getByPlaceholderText('Name this list')).toBeInTheDocument()
 
     // hitting escape on input should close the second menu but not the first
@@ -130,7 +135,8 @@ describe('Overlay', () => {
     expect(container.queryByText('Add to list')).not.toBeInTheDocument()
   })
 
-  it('memex repro: should only close the dropdown when escape is pressed', () => {
+  it('memex repro: should only close the dropdown when escape is pressed', async () => {
+    const user = userEvent.setup()
     const container = render(
       <ThemeProvider>
         <MemexNestedOverlays />
@@ -138,11 +144,11 @@ describe('Overlay', () => {
     )
 
     // open first menu
-    userEvent.click(container.getByLabelText('Add custom iteration'))
+    await user.click(container.getByLabelText('Add custom iteration'))
     expect(container.getByLabelText('Change duration unit')).toBeInTheDocument()
 
     // open dropdown menu
-    userEvent.click(container.getByLabelText('Change duration unit'))
+    await user.click(container.getByLabelText('Change duration unit'))
     expect(container.getByRole('menu')).toBeInTheDocument()
 
     // hitting escape on menu item should close the dropdown menu but not the overlay
@@ -152,7 +158,8 @@ describe('Overlay', () => {
     expect(container.getByLabelText('Change duration unit')).toBeInTheDocument()
   })
 
-  it('memex repro: should not close overlay when input has event.preventDefault', () => {
+  it('memex repro: should not close overlay when input has event.preventDefault', async () => {
+    const user = userEvent.setup()
     const container = render(
       <ThemeProvider>
         <MemexIssueOverlay />
@@ -160,11 +167,11 @@ describe('Overlay', () => {
     )
 
     // clicking the title opens overlay
-    userEvent.click(container.getByText('Implement draft issue editor'))
+    await user.click(container.getByText('Implement draft issue editor'))
     expect(container.getByLabelText('Change issue title')).toBeInTheDocument()
 
     // clicking the button changes to input
-    userEvent.click(container.getByLabelText('Change issue title'))
+    await user.click(container.getByLabelText('Change issue title'))
     expect(container.getByDisplayValue('Implement draft issue editor')).toBeInTheDocument()
 
     // pressing Escape inside input brings back the button but does not close the overlay
@@ -178,7 +185,8 @@ describe('Overlay', () => {
 
   // https://github.com/primer/react/issues/1802
   // eslint-disable-next-line jest/no-disabled-tests
-  it.skip('memex repro: should not leak overlay events to the document', () => {
+  it.skip('memex repro: should not leak overlay events to the document', async () => {
+    const user = userEvent.setup()
     const mockHandler = jest.fn()
     const BugRepro1802 = () => {
       const [isOpen, setIsOpen] = useState(false)
@@ -208,7 +216,7 @@ describe('Overlay', () => {
 
     const container = render(<BugRepro1802 />)
 
-    userEvent.click(container.getByText('open overlay'))
+    await user.click(container.getByText('open overlay'))
     fireEvent.keyDown(container.getByText('Text inside Overlay'), {key: 'Escape', code: 'Escape'})
 
     // if stopPropagation worked, mockHandler would not have been called
diff --git a/src/__tests__/RadioGroup.test.tsx b/src/__tests__/RadioGroup.test.tsx
index 037a0d0369e..6cd890b221c 100644
--- a/src/__tests__/RadioGroup.test.tsx
+++ b/src/__tests__/RadioGroup.test.tsx
@@ -91,7 +91,8 @@ describe('RadioGroup', () => {
 
     expect(requiredIndicator).toBeInTheDocument()
   })
-  it('calls onChange handlers passed to RadioGroup and Radio', () => {
+  it('calls onChange handlers passed to RadioGroup and Radio', async () => {
+    const user = userEvent.setup()
     const handleParentChange = jest.fn()
     const handleRadioChange = jest.fn()
     const {getByLabelText} = render(
@@ -115,11 +116,12 @@ describe('RadioGroup', () => {
 
     expect(handleParentChange).not.toHaveBeenCalled()
     expect(handleRadioChange).not.toHaveBeenCalled()
-    userEvent.click(checkbox)
+    await user.click(checkbox)
     expect(handleParentChange).toHaveBeenCalled()
     expect(handleRadioChange).toHaveBeenCalled()
   })
-  it('calls onChange handler on RadioGroup with selected value', () => {
+  it('calls onChange handler on RadioGroup with selected value', async () => {
+    const user = userEvent.setup()
     const handleParentChange = jest.fn()
     const {getByLabelText} = render(
       <RadioGroup name="choices" onChange={handleParentChange}>
@@ -142,7 +144,7 @@ describe('RadioGroup', () => {
     const checkbox = getByLabelText('Choice one') as HTMLInputElement
 
     expect(handleParentChange).not.toHaveBeenCalled()
-    userEvent.click(checkbox)
+    await user.click(checkbox)
     expect(handleParentChange).toHaveBeenCalledWith(
       'one',
       expect.objectContaining({
diff --git a/src/__tests__/TabNav.test.tsx b/src/__tests__/TabNav.test.tsx
index b51e7e7b8a6..7e424b260ce 100644
--- a/src/__tests__/TabNav.test.tsx
+++ b/src/__tests__/TabNav.test.tsx
@@ -100,26 +100,28 @@ describe('TabNav', () => {
     expect(firstTab).toHaveFocus()
   })
 
-  it('moves focus away from TabNav when pressing tab', () => {
+  it('moves focus away from TabNav when pressing tab', async () => {
+    const user = userEvent.setup()
     const {getByText, getByRole} = HTMLRender(tabNavMarkup)
     const middleTab = getByText('Middle')
     const button = getByRole('button')
 
-    userEvent.click(middleTab)
+    await user.click(middleTab)
     expect(middleTab).toHaveFocus()
-    userEvent.tab()
+    await user.tab()
 
     expect(button).toHaveFocus()
   })
 
-  it('moves focus to selected tab when TabNav regains focus', () => {
+  it('moves focus to selected tab when TabNav regains focus', async () => {
+    const user = userEvent.setup()
     const {getByText, getByRole} = HTMLRender(tabNavMarkup)
     const middleTab = getByText('Middle')
     const button = getByRole('button')
 
-    userEvent.click(button)
+    await user.click(button)
     expect(button).toHaveFocus()
-    userEvent.tab({shift: true})
+    await user.tab({shift: true})
 
     expect(middleTab).toHaveFocus()
   })
diff --git a/src/__tests__/Textarea.test.tsx b/src/__tests__/Textarea.test.tsx
index a035e71a3c3..735509dd0a5 100644
--- a/src/__tests__/Textarea.test.tsx
+++ b/src/__tests__/Textarea.test.tsx
@@ -104,7 +104,8 @@ describe('Textarea', () => {
     expect(textareaElement.value).toEqual(mockValue)
   })
 
-  it('can render an inactive textarea', () => {
+  it('can render an inactive textarea', async () => {
+    const user = userEvent.setup()
     const handleChange = jest.fn()
     const {getByRole, rerender} = render(<Textarea disabled onChange={handleChange} />)
 
@@ -112,7 +113,7 @@ describe('Textarea', () => {
     expect(textareaElement.disabled).toEqual(true)
     expect(textareaElement).toHaveAttribute('disabled')
 
-    userEvent.click(textareaElement)
+    user.click(textareaElement)
 
     expect(handleChange).not.toHaveBeenCalled()
 
diff --git a/src/__tests__/ToggleSwitch.test.tsx b/src/__tests__/ToggleSwitch.test.tsx
index 65816bae599..5d38ceb6e4a 100644
--- a/src/__tests__/ToggleSwitch.test.tsx
+++ b/src/__tests__/ToggleSwitch.test.tsx
@@ -36,7 +36,8 @@ it('renders a switch that is turned on', () => {
 
   expect(toggleSwitch).toHaveAttribute('aria-checked', 'true')
 })
-it('renders a switch that is disabled', () => {
+it('renders a switch that is disabled', async () => {
+  const user = userEvent.setup()
   const {getByLabelText} = render(
     <>
       <div id="switchLabel">{SWITCH_LABEL_TEXT}</div>
@@ -47,10 +48,11 @@ it('renders a switch that is disabled', () => {
 
   expect(toggleSwitch).toHaveAttribute('aria-disabled', 'true')
   expect(toggleSwitch).toHaveAttribute('aria-checked', 'false')
-  userEvent.click(toggleSwitch)
+  await user.click(toggleSwitch)
   expect(toggleSwitch).toHaveAttribute('aria-checked', 'false')
 })
-it("renders a switch who's state is loading", () => {
+it("renders a switch who's state is loading", async () => {
+  const user = userEvent.setup()
   const {getByLabelText, container} = render(
     <>
       <div id="switchLabel">{SWITCH_LABEL_TEXT}</div>
@@ -63,10 +65,11 @@ it("renders a switch who's state is loading", () => {
   expect(loadingSpinner).toBeDefined()
   expect(toggleSwitch).toHaveAttribute('aria-disabled', 'true')
   expect(toggleSwitch).toHaveAttribute('aria-checked', 'false')
-  userEvent.click(toggleSwitch)
+  await user.click(toggleSwitch)
   expect(toggleSwitch).toHaveAttribute('aria-checked', 'false')
 })
-it('switches from off to on uncontrolled', () => {
+it('switches from off to on uncontrolled', async () => {
+  const user = userEvent.setup()
   const {getByLabelText} = render(
     <>
       <div id="switchLabel">{SWITCH_LABEL_TEXT}</div>
@@ -76,10 +79,11 @@ it('switches from off to on uncontrolled', () => {
   const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
 
   expect(toggleSwitch).toHaveAttribute('aria-checked', 'false')
-  userEvent.click(toggleSwitch)
+  await user.click(toggleSwitch)
   expect(toggleSwitch).toHaveAttribute('aria-checked', 'true')
 })
-it('switches from off to on with a controlled prop', () => {
+it('switches from off to on with a controlled prop', async () => {
+  const user = userEvent.setup()
   const ControlledSwitchComponent = () => {
     const [isOn, setIsOn] = React.useState(false)
 
@@ -98,10 +102,11 @@ it('switches from off to on with a controlled prop', () => {
   const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
 
   expect(toggleSwitch).toHaveAttribute('aria-checked', 'false')
-  userEvent.click(toggleSwitch)
+  await user.click(toggleSwitch)
   expect(toggleSwitch).toHaveAttribute('aria-checked', 'true')
 })
-it('calls onChange when the switch is toggled', () => {
+it('calls onChange when the switch is toggled', async () => {
+  const user = userEvent.setup()
   const handleChange = jest.fn()
   const ControlledSwitchComponent = ({handleSwitchChange}: {handleSwitchChange: (on: boolean) => void}) => {
     const [isOn, setIsOn] = React.useState(false)
@@ -120,7 +125,7 @@ it('calls onChange when the switch is toggled', () => {
   const {getByLabelText} = render(<ControlledSwitchComponent handleSwitchChange={handleChange} />)
   const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
 
-  userEvent.click(toggleSwitch)
+  await user.click(toggleSwitch)
   expect(handleChange).toHaveBeenCalledWith(true)
 })
 
diff --git a/src/__tests__/deprecated/ChoiceFieldset.test.tsx b/src/__tests__/deprecated/ChoiceFieldset.test.tsx
index fd89b97e8d5..f095165f459 100644
--- a/src/__tests__/deprecated/ChoiceFieldset.test.tsx
+++ b/src/__tests__/deprecated/ChoiceFieldset.test.tsx
@@ -257,17 +257,19 @@ describe('ChoiceFieldset', () => {
     expect(errorValidationMessage).not.toBeNull()
     expect(successValidationMessage).toBeNull()
   })
-  it('calls onSelect with the values of the selected item (single selection)', () => {
+  it('calls onSelect with the values of the selected item (single selection)', async () => {
+    const user = userEvent.setup()
     const onSelectHandler = jest.fn()
     const {getByLabelText} = HTMLRender(
       <SelectableChoicelistFieldset onSelect={onSelectHandler} selectionVariant="single" />
     )
     const labelOneInputNode = getByLabelText('Label one')
 
-    userEvent.click(labelOneInputNode)
+    await user.click(labelOneInputNode)
     expect(onSelectHandler).toHaveBeenCalledWith(['labelOne'])
   })
-  it('calls onSelect with the values of the selected items (multiple selections)', () => {
+  it('calls onSelect with the values of the selected items (multiple selections)', async () => {
+    const user = userEvent.setup()
     const onSelectHandler = jest.fn()
 
     const {getByLabelText} = HTMLRender(
@@ -275,10 +277,11 @@ describe('ChoiceFieldset', () => {
     )
     const labelTwoInputNode = getByLabelText('Label two')
 
-    userEvent.click(labelTwoInputNode)
+    await user.click(labelTwoInputNode)
     expect(onSelectHandler).toHaveBeenCalledWith(['labelOne', 'labelTwo'])
   })
-  it('calls onSelect with an empty array if all values have be de-selected', () => {
+  it('calls onSelect with an empty array if all values have be de-selected', async () => {
+    const user = userEvent.setup()
     const onSelectHandler = jest.fn()
 
     const {getByLabelText} = HTMLRender(
@@ -286,7 +289,7 @@ describe('ChoiceFieldset', () => {
     )
     const labelTwoInputNode = getByLabelText('Label two')
 
-    userEvent.click(labelTwoInputNode)
+    await user.click(labelTwoInputNode)
     expect(onSelectHandler).toHaveBeenCalledWith([])
   })
   it('generates a name attribute for radio groups if one is not provided', () => {
diff --git a/src/__tests__/hooks/useOnOutsideClick.test.tsx b/src/__tests__/hooks/useOnOutsideClick.test.tsx
index 041c295c40d..f3c4d711d20 100644
--- a/src/__tests__/hooks/useOnOutsideClick.test.tsx
+++ b/src/__tests__/hooks/useOnOutsideClick.test.tsx
@@ -19,30 +19,35 @@ const Component = ({callback}: ComponentProps) => {
     </div>
   )
 }
-it('should call function when user clicks outside container', () => {
+it('should call function when user clicks outside container', async () => {
+  const user = userEvent.setup()
   const mockFunction = jest.fn()
   const {getByText} = render(<Component callback={mockFunction} />)
-  userEvent.click(getByText('button'))
+  await user.click(getByText('button'))
   expect(mockFunction).toHaveBeenCalledTimes(1)
 })
 
-it('should not call function when user right clicks', () => {
+it('should not call function when user right clicks', async () => {
+  const user = userEvent.setup()
   const mockFunction = jest.fn()
   const {getByText} = render(<Component callback={mockFunction} />)
-  userEvent.click(getByText('button'), {button: 1})
+  const button = getByText('button')
+  await user.pointer([{target: button}, {keys: '[MouseRight]', target: button}])
   expect(mockFunction).toHaveBeenCalledTimes(0)
 })
 
-it('should not call function when clicking on ignored refs', () => {
+it('should not call function when clicking on ignored refs', async () => {
+  const user = userEvent.setup()
   const mockFunction = jest.fn()
   const {getByText} = render(<Component callback={mockFunction} />)
-  userEvent.click(getByText('button two'))
+  await user.click(getByText('button two'))
   expect(mockFunction).toHaveBeenCalledTimes(0)
 })
 
-it('should not call function when clicking inside container', () => {
+it('should not call function when clicking inside container', async () => {
+  const user = userEvent.setup()
   const mockFunction = jest.fn()
   const {getByText} = render(<Component callback={mockFunction} />)
-  userEvent.click(getByText('content'))
+  await user.click(getByText('content'))
   expect(mockFunction).toHaveBeenCalledTimes(0)
 })