From 66c510cde663609c42f6fe393852c02355dfb45b Mon Sep 17 00:00:00 2001
From: Braden MacDonald <braden@opencraft.com>
Date: Thu, 16 Jan 2025 11:21:08 -0800
Subject: [PATCH] test: update test cases (@testing-library/react bumped from
 v12 to v16)

---
 src/Breadcrumb/Breadcrumb.test.jsx            |   5 +-
 src/Button/deprecated/Button.test.jsx         |  10 +-
 .../tests/CardCarouselControls.test.jsx       |  10 +-
 src/Collapsible/Collapsible.test.jsx          |  22 ++-
 src/ColorPicker/ColorPicker.test.jsx          |  25 ++--
 .../tests/ControlledSelectHeader.test.jsx     |  10 +-
 src/DataTable/tests/BulkActions.test.jsx      |   4 +-
 src/DataTable/tests/DataViewToggle.test.jsx   |  10 +-
 src/DataTable/tests/utils.js                  |   9 --
 src/Dropdown/deprecated/Dropdown.test.jsx     |  70 +++++----
 .../__snapshots__/Dropzone.test.jsx.snap      |  11 +-
 src/Form/tests/FormAutosuggest.test.jsx       | 133 ++++++++++--------
 src/Form/tests/FormCheckboxSet.test.jsx       |   5 +-
 src/Form/tests/FormControl.test.jsx           |  15 +-
 src/Form/tests/FormRadioSet.test.jsx          |   5 +-
 .../IconButtonToggle.test.jsx                 |   5 +-
 src/ListBox/ListBox.test.jsx                  |  12 +-
 src/Menu/Menu.test.jsx                        |  25 ++--
 src/Modal/tests/ModalLayer.test.tsx           |   5 +-
 .../data/tests/useOverflowScroll.test.jsx     |   3 +-
 .../tests/useOverflowScrollActions.test.jsx   |   2 +-
 ...seOverflowScrollElementAttributes.test.jsx |   2 +-
 .../useOverflowScrollEventListeners.test.jsx  |   3 +-
 src/Pagination/Pagination.test.jsx            |  64 +++++----
 src/ProductTour/Checkpoint.test.jsx           |   5 +-
 src/ProductTour/ProductTour.test.jsx          |  35 ++---
 src/ProductTour/index.jsx                     |   2 +-
 .../tests/SelectableBox.test.jsx              |   5 +-
 src/StatusAlert/StatusAlert.test.jsx          |   8 +-
 src/Tabs/deprecated/Tabs.test.jsx             |  10 +-
 30 files changed, 292 insertions(+), 238 deletions(-)
 delete mode 100644 src/DataTable/tests/utils.js

diff --git a/src/Breadcrumb/Breadcrumb.test.jsx b/src/Breadcrumb/Breadcrumb.test.jsx
index 2b8c93b8f8..3b402d971e 100644
--- a/src/Breadcrumb/Breadcrumb.test.jsx
+++ b/src/Breadcrumb/Breadcrumb.test.jsx
@@ -48,7 +48,8 @@ describe('<Breadcrumb />', () => {
     expect(screen.getAllByRole('presentation').length).toBe(2);
   });
 
-  it('fires the passed in click handler', () => {
+  it('fires the passed in click handler', async () => {
+    const user = userEvent.setup();
     const clickHandler = jest.fn();
     render(<Breadcrumb {...baseProps} clickHandler={clickHandler} />);
 
@@ -56,7 +57,7 @@ describe('<Breadcrumb />', () => {
     const links = screen.queryAllByRole('link');
     expect(listItems.length).toBe(baseProps.links.length);
 
-    userEvent.click(links[0]);
+    await user.click(links[0]);
     expect(clickHandler).toHaveBeenCalled();
   });
 
diff --git a/src/Button/deprecated/Button.test.jsx b/src/Button/deprecated/Button.test.jsx
index cb8fa7cfea..1a34c4dcee 100644
--- a/src/Button/deprecated/Button.test.jsx
+++ b/src/Button/deprecated/Button.test.jsx
@@ -14,21 +14,23 @@ describe('<Button />', () => {
     expect(button).toBeInTheDocument();
   });
 
-  it('puts focus on button on click', () => {
+  it('puts focus on button on click', async () => {
+    const user = userEvent.setup();
     const { getByText } = render(<Button {...defaultProps} />);
     const button = getByText(defaultProps.label);
 
     expect(button).not.toHaveFocus();
-    userEvent.click(button);
+    await user.click(button);
     expect(button).toHaveFocus();
   });
 
-  it('calls onClick prop on click', () => {
+  it('calls onClick prop on click', async () => {
+    const user = userEvent.setup();
     const onClickSpy = jest.fn();
     const { getByText } = render(<Button {...defaultProps} onClick={onClickSpy} />);
     const button = getByText(defaultProps.label);
 
-    userEvent.click(button);
+    await user.click(button);
     expect(onClickSpy).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/src/Card/CardCarousel/tests/CardCarouselControls.test.jsx b/src/Card/CardCarousel/tests/CardCarouselControls.test.jsx
index 0a8c63c66c..a711a9e83b 100644
--- a/src/Card/CardCarousel/tests/CardCarouselControls.test.jsx
+++ b/src/Card/CardCarousel/tests/CardCarouselControls.test.jsx
@@ -88,7 +88,8 @@ describe('<CardCarouselControls />', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it('handles scroll to previous click', () => {
+  it('handles scroll to previous click', async () => {
+    const user = userEvent.setup();
     const contextValue = {
       ...defaultCardCarouselContextValue,
       isScrolledToStart: false,
@@ -96,11 +97,12 @@ describe('<CardCarouselControls />', () => {
     render((
       <CardCarouselControlsWrapper cardCarouselContextValue={contextValue} />
     ));
-    userEvent.click(screen.getByLabelText('Scroll to previous'));
+    await user.click(screen.getByLabelText('Scroll to previous'));
     expect(mockScrollToPrevious).toHaveBeenCalledTimes(1);
   });
 
-  it('handles scroll to next click', () => {
+  it('handles scroll to next click', async () => {
+    const user = userEvent.setup();
     const contextValue = {
       ...defaultCardCarouselContextValue,
       isScrolledToEnd: false,
@@ -108,7 +110,7 @@ describe('<CardCarouselControls />', () => {
     render((
       <CardCarouselControlsWrapper cardCarouselContextValue={contextValue} />
     ));
-    userEvent.click(screen.getByLabelText('Scroll to next'));
+    await user.click(screen.getByLabelText('Scroll to next'));
     expect(mockScrollToNext).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/src/Collapsible/Collapsible.test.jsx b/src/Collapsible/Collapsible.test.jsx
index f4fbd3634a..d64d9103d2 100644
--- a/src/Collapsible/Collapsible.test.jsx
+++ b/src/Collapsible/Collapsible.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import renderer from 'react-test-renderer';
 import userEvent from '@testing-library/user-event';
 
@@ -75,17 +75,23 @@ describe('<Collapsible />', () => {
         <Collapsible.Advanced ref={ref}>{collapsibleContent}</Collapsible.Advanced>,
       );
     });
-    it('opens on .open()', () => {
+    it('opens on .open()', async () => {
       expect(screen.queryByText(EXAMPLE_CONTENT)).not.toBeInTheDocument();
       ref.current.open();
-      expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument();
+      await waitFor(() => {
+        expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument();
+      });
     });
 
-    it('closes on .close()', () => {
+    it('closes on .close()', async () => {
       ref.current.open();
-      expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument();
+      await waitFor(() => {
+        expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument();
+      });
       ref.current.close();
-      expect(screen.queryByText(EXAMPLE_CONTENT)).not.toBeInTheDocument();
+      await waitFor(() => {
+        expect(screen.queryByText(EXAMPLE_CONTENT)).not.toBeInTheDocument();
+      });
     });
 
     it('correct behavior with unmountOnExit', () => {
@@ -127,7 +133,9 @@ describe('<Collapsible />', () => {
 
     it('closes on trigger click', async () => {
       collapsible.open();
-      expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument();
+      await waitFor(() => {
+        expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument();
+      });
       await userEvent.click(screen.getAllByRole('button')[0]); // Close
       expect(screen.queryByText(EXAMPLE_CONTENT)).not.toBeInTheDocument();
     });
diff --git a/src/ColorPicker/ColorPicker.test.jsx b/src/ColorPicker/ColorPicker.test.jsx
index 7f156f51ea..f5247fe845 100644
--- a/src/ColorPicker/ColorPicker.test.jsx
+++ b/src/ColorPicker/ColorPicker.test.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import userEvent from '@testing-library/user-event';
-import { render, screen, act } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 import ColorPicker from '.';
 
@@ -29,33 +29,26 @@ describe('picker works as expected', () => {
   const color = 'wassap';
   const setColor = jest.fn();
   it('validates hex color', async () => {
+    const user = userEvent.setup();
     render(<ColorPicker color={color} setColor={setColor} />);
 
-    await act(async () => {
-      await userEvent.click(screen.getByRole('button'));
-    });
+    await user.click(screen.getByRole('button'));
     expect(screen.queryByTestId('hex-input').value).toEqual('#wassap');
     expect(screen.queryByText('Colors must be in hexadecimal format.')).toBeInTheDocument();
 
-    await act(async () => {
-      await userEvent.clear(screen.getByTestId('hex-input'));
-      await userEvent.paste(screen.getByTestId('hex-input'), '32116c');
-    });
+    await user.clear(screen.getByTestId('hex-input')); // clear() will keep focus on the element, so we can paste
+    await user.paste('32116c');
     expect(screen.queryByTestId('hex-input').value).toEqual('#32116c');
     expect(screen.queryByText('Colors must be in hexadecimal format.')).not.toBeInTheDocument();
 
-    await act(async () => {
-      await userEvent.clear(screen.getByTestId('hex-input'));
-      await userEvent.paste(screen.getByTestId('hex-input'), 'yuk');
-    });
+    await user.clear(screen.getByTestId('hex-input'));
+    await user.paste('yuk');
 
     expect(screen.queryByTestId('hex-input').value).toEqual('#yuk');
     expect(screen.queryByText('Colors must be in hexadecimal format.')).toBeInTheDocument();
 
-    await act(async () => {
-      await userEvent.clear(screen.getByTestId('hex-input'));
-      await userEvent.paste(screen.getByTestId('hex-input'), '#fad');
-    });
+    await user.clear(screen.getByTestId('hex-input'));
+    await user.paste('#fad');
 
     expect(screen.queryByTestId('hex-input').value).toEqual('#fad');
     expect(screen.queryByText('Colors must be in hexadecimal format.')).not.toBeInTheDocument();
diff --git a/src/DataTable/selection/tests/ControlledSelectHeader.test.jsx b/src/DataTable/selection/tests/ControlledSelectHeader.test.jsx
index 2af2b283ba..c2b48bf5d4 100644
--- a/src/DataTable/selection/tests/ControlledSelectHeader.test.jsx
+++ b/src/DataTable/selection/tests/ControlledSelectHeader.test.jsx
@@ -42,7 +42,8 @@ describe('<ControlledSelectHeader />', () => {
     jest.resetAllMocks();
   });
 
-  it('correctly selects all page rows', () => {
+  it('correctly selects all page rows', async () => {
+    const user = userEvent.setup();
     const isChecked = true;
     mockToggleAllPageRowsSelectedProps.mockReturnValue({
       checked: isChecked,
@@ -53,13 +54,14 @@ describe('<ControlledSelectHeader />', () => {
     render(<ControlledSelectHeaderWrapper tableProps={tableProps} selectProps={selectProps} />);
 
     const checkbox = screen.getByRole('checkbox');
-    userEvent.click(checkbox);
+    await user.click(checkbox);
 
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy).toHaveBeenCalledWith(rows, tableProps.itemCount);
   });
 
-  it('correctly unselects all page rows', () => {
+  it('correctly unselects all page rows', async () => {
+    const user = userEvent.setup();
     const spy = jest.spyOn(selectActions, 'clearPageSelectionAction');
     mockToggleAllPageRowsSelectedProps.mockReturnValue({
       checked: false,
@@ -78,7 +80,7 @@ describe('<ControlledSelectHeader />', () => {
     render(<ControlledSelectHeaderWrapper tableProps={newTableProps} selectProps={selectProps} />);
 
     const checkbox = screen.getByRole('checkbox');
-    userEvent.click(checkbox);
+    await user.click(checkbox);
 
     expect(spy).toHaveBeenCalledTimes(1);
     const rowIds = getRowIds(rows).map(id => id.toString());
diff --git a/src/DataTable/tests/BulkActions.test.jsx b/src/DataTable/tests/BulkActions.test.jsx
index 4aea99cbb9..27b3793428 100644
--- a/src/DataTable/tests/BulkActions.test.jsx
+++ b/src/DataTable/tests/BulkActions.test.jsx
@@ -10,7 +10,6 @@ import {
 } from '../CollapsibleButtonGroup';
 import { useWindowSize, Button } from '../..';
 import DataTableContext from '../DataTableContext';
-import { waitForComponentToPaint } from './utils';
 
 jest.mock('../../hooks/useWindowSizeHook');
 useWindowSize.mockReturnValue({ width: 800 });
@@ -199,8 +198,7 @@ describe('<BulkActions />', () => {
     });
 
     it('displays the user\'s second button as an outline button', () => {
-      const { container } = render(<BulkActionsWrapper />);
-      waitForComponentToPaint(container);
+      render(<BulkActionsWrapper />);
       const buttons = screen.getAllByTestId('action');
       expect(buttons[0].textContent).toBe(SECOND_ACTION);
     });
diff --git a/src/DataTable/tests/DataViewToggle.test.jsx b/src/DataTable/tests/DataViewToggle.test.jsx
index 8c10e83ba4..24535e8332 100644
--- a/src/DataTable/tests/DataViewToggle.test.jsx
+++ b/src/DataTable/tests/DataViewToggle.test.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { act } from 'react-dom/test-utils';
 
 import userEvent from '@testing-library/user-event';
 import DataTableContext from '../DataTableContext';
@@ -78,6 +77,7 @@ describe('data view toggle behavior', () => {
   });
 
   test('onDataViewToggle is invoked when clicking on buttons', async () => {
+    const user = userEvent.setup();
     const onDataViewToggle = jest.fn();
     render(
       <DataTableContext.Provider
@@ -95,15 +95,11 @@ describe('data view toggle behavior', () => {
     );
     expect(screen.queryByRole('group')).toBeInTheDocument();
     const cardButton = screen.getByLabelText(DATA_VIEW_TOGGLE_VALUES.card.alt);
-    await act(async () => {
-      userEvent.click(cardButton);
-    });
+    await user.click(cardButton);
     expect(onDataViewToggle).toHaveBeenCalledWith(DATA_VIEW_TOGGLE_VALUES.card.value);
 
     const listButton = screen.getByLabelText(DATA_VIEW_TOGGLE_VALUES.list.alt);
-    await act(async () => {
-      userEvent.click(listButton);
-    });
+    await user.click(listButton);
     expect(onDataViewToggle).toHaveBeenCalledWith(DATA_VIEW_TOGGLE_VALUES.list.value);
   });
 });
diff --git a/src/DataTable/tests/utils.js b/src/DataTable/tests/utils.js
deleted file mode 100644
index a3f3c47aba..0000000000
--- a/src/DataTable/tests/utils.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { act } from 'react-dom/test-utils';
-
-// eslint-disable-next-line import/prefer-default-export
-export const waitForComponentToPaint = async (wrapper) => {
-  await act(async () => {
-    await new Promise(resolve => { setTimeout(resolve); });
-    wrapper.update();
-  });
-};
diff --git a/src/Dropdown/deprecated/Dropdown.test.jsx b/src/Dropdown/deprecated/Dropdown.test.jsx
index e95bbc1045..6e682c4935 100644
--- a/src/Dropdown/deprecated/Dropdown.test.jsx
+++ b/src/Dropdown/deprecated/Dropdown.test.jsx
@@ -62,37 +62,43 @@ describe('<Dropdown />', () => {
     });
 
     it('opens on trigger click', async () => {
-      await userEvent.click(wrapper.getByRole('button', { name: 'Search Engines' }));
+      const user = userEvent.setup();
+      await user.click(wrapper.getByRole('button', { name: 'Search Engines' }));
       menuOpen(true, wrapper);
     });
 
     it('should focus on the first item after opening', async () => {
-      await userEvent.click(wrapper.getByRole('button', { name: 'Search Engines' }));
+      const user = userEvent.setup();
+      await user.click(wrapper.getByRole('button', { name: 'Search Engines' }));
       expect(wrapper.getByText('Google')).toHaveFocus();
     });
 
     it('does not close on click inside the menu', async () => {
-      await userEvent.click(wrapper.getByRole('button', { name: 'Search Engines' }));
-      await userEvent.click(wrapper.getByText('Google')); // Do nothing
+      const user = userEvent.setup();
+      await user.click(wrapper.getByRole('button', { name: 'Search Engines' }));
+      await user.click(wrapper.getByText('Google')); // Do nothing
       menuOpen(true, wrapper);
     });
 
     it('closes on trigger click', async () => {
-      await userEvent.click(wrapper.getByRole('button', { name: 'Search Engines' }));
-      await userEvent.click(wrapper.getByRole('button', { name: 'Search Engines' })); // Close
+      const user = userEvent.setup();
+      await user.click(wrapper.getByRole('button', { name: 'Search Engines' }));
+      await user.click(wrapper.getByRole('button', { name: 'Search Engines' })); // Close
       menuOpen(false, wrapper);
     });
 
     it('should focus on the trigger button after closing', async () => {
-      await userEvent.click(wrapper.getByRole('button', { name: 'Search Engines' }));
-      await userEvent.click(wrapper.getByRole('button', { name: 'Search Engines' })); // Close
+      const user = userEvent.setup();
+      await user.click(wrapper.getByRole('button', { name: 'Search Engines' }));
+      await user.click(wrapper.getByRole('button', { name: 'Search Engines' })); // Close
       expect(wrapper.getByRole('button', { name: 'Search Engines' })).toHaveFocus();
     });
 
     it('closes on document click when open', async () => {
-      await userEvent.click(wrapper.getByRole('button', { name: 'Search Engines' }));
+      const user = userEvent.setup();
+      await user.click(wrapper.getByRole('button', { name: 'Search Engines' }));
       menuOpen(true, wrapper);
-      document.dispatchEvent(new MouseEvent('click'));
+      await user.click(document.body);
       menuOpen(false, wrapper);
     });
   });
@@ -105,72 +111,82 @@ describe('<Dropdown />', () => {
     });
 
     it('opens on Enter keyDown', async () => {
+      const user = userEvent.setup();
       wrapper.getByRole('button', { name: 'Search Engines' }).focus();
-      await userEvent.keyboard('{Enter}');
+      await user.keyboard('{Enter}');
       menuOpen(true, wrapper);
     });
 
     it('opens on Space keyDown', async () => {
+      const user = userEvent.setup();
       wrapper.getByRole('button', { name: 'Search Engines' }).focus();
-      await userEvent.keyboard('{space}');
+      await user.keyboard(' ');
       menuOpen(true, wrapper);
     });
 
     it('should focus on the first item after opening', async () => {
+      const user = userEvent.setup();
       wrapper.getByRole('button', { name: 'Search Engines' }).focus();
-      await userEvent.keyboard('{Enter}');
+      await user.keyboard('{Enter}');
       expect(wrapper.getByText('Google')).toHaveFocus();
     });
 
     it('should focus the next item after ArrowDown keyDown', async () => {
+      const user = userEvent.setup();
       wrapper.getByRole('button', { name: 'Search Engines' }).focus();
-      await userEvent.keyboard('{Enter}');
-      await userEvent.keyboard('{arrowdown}');
+      await user.keyboard('{Enter}');
+      await user.keyboard('{arrowdown}');
       expect(wrapper.getByText('DuckDuckGo')).toHaveFocus();
     });
 
     it('should focus the next item after Tab keyDown', async () => {
+      const user = userEvent.setup();
       wrapper.getByRole('button', { name: 'Search Engines' }).focus();
-      await userEvent.keyboard('{Enter}');
-      await userEvent.tab();
+      await user.keyboard('{Enter}');
+      await user.tab();
       expect(wrapper.getByText('DuckDuckGo')).toHaveFocus();
     });
 
     it('should loop focus to the first item after Tab keyDown on last item', async () => {
+      const user = userEvent.setup();
       wrapper.getByRole('button', { name: 'Search Engines' }).focus();
-      await userEvent.keyboard('{Enter}');
+      await user.keyboard('{Enter}');
       wrapper.getByRole('link', { name: 'Yahoo' }).focus();
-      await userEvent.tab();
+      await user.tab();
       expect(wrapper.getByText('Google')).toHaveFocus();
     });
 
     it('should loop focus to the last item after ArrowUp keyDown on first item', async () => {
+      const user = userEvent.setup();
       wrapper.getByRole('button', { name: 'Search Engines' }).focus();
-      await userEvent.keyboard('{Enter}');
+      await user.keyboard('{Enter}');
       wrapper.getByRole('link', { name: 'Google' }).focus();
-      await userEvent.keyboard('{arrowup}');
+      await user.keyboard('{arrowup}');
       expect(wrapper.getByText('Yahoo')).toHaveFocus();
     });
 
     it('should focus the previous item after Shift + Tab keyDown', async () => {
+      const user = userEvent.setup();
       wrapper.getByRole('button', { name: 'Search Engines' }).focus();
-      await userEvent.keyboard('{Enter}');
+      await user.keyboard('{Enter}');
       wrapper.getByRole('link', { name: 'Yahoo' }).focus();
-      await userEvent.keyboard('{Shift>}{Tab}');
+      await user.keyboard('{Shift>}{Tab}');
       expect(wrapper.getByText('DuckDuckGo')).toHaveFocus();
     });
 
     it('should close the menu on Escape keyDown', async () => {
+      const user = userEvent.setup();
       wrapper.getByRole('button', { name: 'Search Engines' }).focus();
-      await userEvent.keyboard('{Enter}');
-      await userEvent.keyboard('{escape}');
+      await user.keyboard('{Enter}');
+      await user.keyboard('{escape}');
       menuOpen(false, wrapper);
     });
 
     it('should focus on the trigger button after closing', async () => {
+      const user = userEvent.setup();
       wrapper.getByRole('button', { name: 'Search Engines' }).focus();
-      await userEvent.keyboard('{Enter}');
-      await userEvent.keyboard('{escape}');
+      await user.keyboard('{Enter}');
+      await user.keyboard('{escape}');
       expect(wrapper.getByRole('button', { name: 'Search Engines' })).toHaveFocus();
     });
   });
diff --git a/src/Dropzone/tests/__snapshots__/Dropzone.test.jsx.snap b/src/Dropzone/tests/__snapshots__/Dropzone.test.jsx.snap
index 765473643d..d549afd68c 100644
--- a/src/Dropzone/tests/__snapshots__/Dropzone.test.jsx.snap
+++ b/src/Dropzone/tests/__snapshots__/Dropzone.test.jsx.snap
@@ -21,7 +21,16 @@ exports[`<Dropzone /> successfully renders 1`] = `
     onClick={[Function]}
     style={
       {
-        "display": "none",
+        "border": 0,
+        "clip": "rect(0, 0, 0, 0)",
+        "clipPath": "inset(50%)",
+        "height": "1px",
+        "margin": "0 -1px -1px 0",
+        "overflow": "hidden",
+        "padding": 0,
+        "position": "absolute",
+        "whiteSpace": "nowrap",
+        "width": "1px",
       }
     }
     tabIndex={-1}
diff --git a/src/Form/tests/FormAutosuggest.test.jsx b/src/Form/tests/FormAutosuggest.test.jsx
index ead36d88cb..80b40f0041 100644
--- a/src/Form/tests/FormAutosuggest.test.jsx
+++ b/src/Form/tests/FormAutosuggest.test.jsx
@@ -89,59 +89,64 @@ describe('render behavior', () => {
     expect(screen.getByDisplayValue('Test Value')).toBeInTheDocument();
   });
 
-  it('renders component with options', () => {
+  it('renders component with options', async () => {
+    const user = userEvent.setup();
     const { getByTestId, queryAllByTestId } = render(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
-    userEvent.click(input);
+    await user.click(input);
     const list = queryAllByTestId('autosuggest-optionitem');
     expect(list.length).toBe(3);
   });
 
-  it('renders with value required error msg', () => {
+  it('renders with value required error msg', async () => {
+    const user = userEvent.setup();
     const { getByText, getByTestId } = render(<FormAutosuggestTestComponent isValueRequired />);
     const input = getByTestId('autosuggest-textbox-input');
 
     // if you click into the input and click outside, you should see the error message
-    userEvent.click(input);
-    userEvent.click(document.body);
+    await user.click(input);
+    await user.click(document.body);
 
     const formControlFeedback = getByText('Example value required error message');
 
     expect(formControlFeedback).toBeInTheDocument();
   });
 
-  it('renders with selection required error msg', () => {
+  it('renders with selection required error msg', async () => {
+    const user = userEvent.setup();
     const { getByText, getByTestId } = render(<FormAutosuggestTestComponent isSelectionRequired />);
     const input = getByTestId('autosuggest-textbox-input');
 
     // if you click into the input and click outside, you should see the error message
-    userEvent.click(input);
-    userEvent.type(input, '1');
-    userEvent.click(document.body);
+    await user.click(input);
+    await user.type(input, '1');
+    await user.click(document.body);
 
     const formControlFeedback = getByText('Example selection required error message');
 
     expect(formControlFeedback).toBeInTheDocument();
   });
 
-  it('renders with custom error msg', () => {
+  it('renders with custom error msg', async () => {
+    const user = userEvent.setup();
     const { getByText, getByTestId } = render(<FormAutosuggestTestComponent hasCustomError />);
     const input = getByTestId('autosuggest-textbox-input');
 
     // if you click into the input and click outside, you should see the error message
-    userEvent.click(input);
-    userEvent.click(document.body);
+    await user.click(input);
+    await user.click(document.body);
 
     const formControlFeedback = getByText('Example custom error message');
 
     expect(formControlFeedback).toBeInTheDocument();
   });
 
-  it('renders component with options that all have IDs', () => {
+  it('renders component with options that all have IDs', async () => {
+    const user = userEvent.setup();
     const { getByTestId, getAllByTestId } = render(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
+    await user.click(input);
     const optionItemIds = getAllByTestId('autosuggest-optionitem').map(item => item.id);
 
     expect(optionItemIds).not.toContain(null);
@@ -154,12 +159,13 @@ describe('render behavior', () => {
     expect(getByTestId('autosuggest-screen-reader-options-count').getAttribute('aria-live')).toEqual('assertive');
   });
 
-  it('displays correct amount of options found to screen readers', () => {
+  it('displays correct amount of options found to screen readers', async () => {
+    const user = userEvent.setup();
     const { getByText, getByTestId } = render(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
     expect(getByText('0 options found')).toBeInTheDocument();
-    userEvent.click(input);
+    await user.click(input);
 
     expect(getByText('3 options found')).toBeInTheDocument();
   });
@@ -172,167 +178,180 @@ describe('render behavior', () => {
 });
 
 describe('controlled behavior', () => {
-  it('sets input value based on clicked option', () => {
+  it('sets input value based on clicked option', async () => {
+    const user = userEvent.setup();
     const { getByText, getByTestId } = render(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
+    await user.click(input);
     const menuItem = getByText('Option 1');
-    userEvent.click(menuItem);
+    await user.click(menuItem);
 
     expect(input.value).toEqual('Option 1');
   });
 
-  it('calls onChange based on clicked option', () => {
+  it('calls onChange based on clicked option', async () => {
+    const user = userEvent.setup();
     const onChange = jest.fn();
     const { getByText, getByTestId } = render(<FormAutosuggestTestComponent onChange={onChange} />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
+    await user.click(input);
     const menuItem = getByText('Option 1');
-    userEvent.click(menuItem);
+    await user.click(menuItem);
 
     expect(onChange).toHaveBeenCalledWith({ selectionId: 'option-1-id', selectionValue: 'Option 1', userProvidedText: 'Option 1' });
     expect(onChange).toHaveBeenCalledTimes(1);
   });
 
-  it('calls onChange when the textbox is cleared', () => {
+  it('calls onChange when the textbox is cleared', async () => {
+    const user = userEvent.setup();
     const onChange = jest.fn();
     const { getByTestId } = render(<FormAutosuggestTestComponent onChange={onChange} />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.type(input, '1');
-    userEvent.type(input, '{backspace}');
+    await user.type(input, '1');
+    await user.type(input, '{backspace}');
 
     expect(onChange).toHaveBeenCalledWith({ selectionId: '', selectionValue: '', userProvidedText: '' });
   });
 
-  it('calls the function passed to onClick when an option with it is selected', () => {
+  it('calls the function passed to onClick when an option with it is selected', async () => {
+    const user = userEvent.setup();
     const onClick = jest.fn();
     const { getByText, getByTestId } = render(<FormAutosuggestTestComponent onClick={onClick} />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
+    await user.click(input);
     const menuItem = getByText('Option 2');
-    userEvent.click(menuItem);
+    await user.click(menuItem);
 
     expect(onClick).toHaveBeenCalledTimes(1);
   });
 
-  it('does not call onClick when an option without it is selected', () => {
+  it('does not call onClick when an option without it is selected', async () => {
+    const user = userEvent.setup();
     const onClick = jest.fn();
     const { getByText, getByTestId } = render(<FormAutosuggestTestComponent onClick={onClick} />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
+    await user.click(input);
     const menuItem = getByText('Option 1');
-    userEvent.click(menuItem);
+    await user.click(menuItem);
 
     expect(onClick).toHaveBeenCalledTimes(0);
   });
 
-  it('should set the correct activedescendant', () => {
+  it('should set the correct activedescendant', async () => {
+    const user = userEvent.setup();
     const { getByTestId, getAllByTestId } = render(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
+    await user.click(input);
     const expectedOptionId = getAllByTestId('autosuggest-optionitem')[0].id;
-    userEvent.keyboard('{arrowdown}');
+    await user.keyboard('{arrowdown}');
 
     expect(input.getAttribute('aria-activedescendant')).toEqual(expectedOptionId);
   });
 
-  it('filters dropdown based on typed field value with one match', () => {
+  it('filters dropdown based on typed field value with one match', async () => {
+    const user = userEvent.setup();
     const { getByTestId, queryAllByTestId } = render(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
-    userEvent.type(input, 'Option 1');
+    await user.click(input);
+    await user.type(input, 'Option 1');
 
     const list = queryAllByTestId('autosuggest-optionitem');
     expect(list.length).toBe(1);
   });
 
-  it('toggles options list', () => {
+  it('toggles options list', async () => {
+    const user = userEvent.setup();
     const { getByTestId, queryAllByTestId } = render(<FormAutosuggestTestComponent />);
     const dropdownBtn = getByTestId('autosuggest-iconbutton');
 
-    userEvent.click(dropdownBtn);
+    await user.click(dropdownBtn);
     const list = queryAllByTestId('autosuggest-optionitem');
     expect(list.length).toBe(3);
 
-    userEvent.click(dropdownBtn);
+    await user.click(dropdownBtn);
     const updatedList = queryAllByTestId('autosuggest-optionitem');
     expect(updatedList.length).toBe(0);
 
-    userEvent.click(dropdownBtn);
+    await user.click(dropdownBtn);
     const reopenedList = queryAllByTestId('autosuggest-optionitem');
     expect(reopenedList.length).toBe(3);
   });
 
-  it('filters dropdown based on typed field value with multiple matches', () => {
+  it('filters dropdown based on typed field value with multiple matches', async () => {
+    const user = userEvent.setup();
     const { getByTestId, queryAllByTestId } = render(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
-    userEvent.type(input, '1');
+    await user.click(input);
+    await user.type(input, '1');
 
     const list = queryAllByTestId('autosuggest-optionitem');
     expect(list.length).toBe(2);
   });
 
-  it('closes options list on click outside', () => {
+  it('closes options list on click outside', async () => {
+    const user = userEvent.setup();
     const { getByTestId, queryAllByTestId } = render(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
+    await user.click(input);
     const list = queryAllByTestId('autosuggest-optionitem');
     expect(list.length).toBe(3);
 
-    userEvent.click(document.body);
+    await user.click(document.body);
     const updatedList = queryAllByTestId('autosuggest-optionitem');
     expect(updatedList.length).toBe(0);
   });
 
-  it('updates screen reader option count based on typed field value with multiple matches', () => {
+  it('updates screen reader option count based on typed field value with multiple matches', async () => {
+    const user = userEvent.setup();
     const { getByText, getByTestId } = render(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
     expect(getByText('0 options found')).toBeInTheDocument();
-    userEvent.click(input);
+    await user.click(input);
 
     expect(getByText('3 options found')).toBeInTheDocument();
 
-    userEvent.click(input);
-    userEvent.type(input, '1');
+    await user.click(input);
+    await user.type(input, '1');
 
     expect(getByText('2 options found')).toBeInTheDocument();
   });
 
-  it('closes options list when tabbed out and the input is no longer active', () => {
+  it('closes options list when tabbed out and the input is no longer active', async () => {
+    const user = userEvent.setup();
     const { getByTestId, queryAllByTestId } = render(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
+    await user.click(input);
     expect(document.activeElement).toBe(getByTestId('autosuggest-textbox-input'));
 
     const list = queryAllByTestId('autosuggest-optionitem');
     expect(list.length).toBe(3);
 
-    userEvent.tab();
+    await user.tab();
     expect(document.activeElement).not.toBe(getByTestId('autosuggest-textbox-input'));
 
     const updatedList = queryAllByTestId('autosuggest-optionitem');
     expect(updatedList.length).toBe(0);
   });
 
-  it('check focus on input after esc', () => {
+  it('check focus on input after esc', async () => {
+    const user = userEvent.setup();
     const { getByTestId } = render(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
     const dropdownBtn = getByTestId('autosuggest-iconbutton');
-    userEvent.click(dropdownBtn);
+    await user.click(dropdownBtn);
 
-    userEvent.keyboard('{esc}');
+    await user.keyboard('{Escape}');
 
     expect(input.matches(':focus')).toBe(true);
   });
diff --git a/src/Form/tests/FormCheckboxSet.test.jsx b/src/Form/tests/FormCheckboxSet.test.jsx
index 393364f6e3..8409077432 100644
--- a/src/Form/tests/FormCheckboxSet.test.jsx
+++ b/src/Form/tests/FormCheckboxSet.test.jsx
@@ -166,7 +166,8 @@ describe('FormCheckboxSet', () => {
     });
   });
 
-  it('checks if onClick is called once in FormCheckboxSet', () => {
+  it('checks if onClick is called once in FormCheckboxSet', async () => {
+    const user = userEvent.setup();
     const handleChange = jest.fn();
     const { getByLabelText } = render(
       <FormGroup controlId="my-field">
@@ -181,7 +182,7 @@ describe('FormCheckboxSet', () => {
       </FormGroup>,
     );
 
-    userEvent.click(getByLabelText('Red'));
+    await user.click(getByLabelText('Red'));
     expect(handleChange).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/src/Form/tests/FormControl.test.jsx b/src/Form/tests/FormControl.test.jsx
index 3388013bd6..1e01ab8371 100644
--- a/src/Form/tests/FormControl.test.jsx
+++ b/src/Form/tests/FormControl.test.jsx
@@ -28,7 +28,8 @@ function Component({ isClearValue }) {
 }
 
 describe('FormControl', () => {
-  it('textarea changes its height with autoResize prop', () => {
+  it('textarea changes its height with autoResize prop', async () => {
+    const user = userEvent.setup();
     const useReferenceSpy = jest.spyOn(React, 'useRef').mockReturnValue(ref);
     const onChangeFunc = jest.fn();
     const inputText = 'new text';
@@ -45,25 +46,27 @@ describe('FormControl', () => {
     expect(useReferenceSpy).toHaveBeenCalledTimes(1);
     expect(ref.current.style.height).toBe('0px');
 
-    userEvent.type(textarea, inputText);
+    await user.type(textarea, inputText);
 
     expect(onChangeFunc).toHaveBeenCalledTimes(inputText.length);
     expect(ref.current.style.height).toEqual(`${ref.current.scrollHeight + ref.current.offsetHeight}px`);
   });
 
-  it('should apply and accept input mask for phone numbers', () => {
+  it('should apply and accept input mask for phone numbers', async () => {
+    const user = userEvent.setup();
     render(<Component />);
 
     const input = screen.getByTestId('form-control-with-mask');
-    userEvent.type(input, '5555555555');
+    await user.type(input, '5555555555');
     expect(input.value).toBe('+1 (555) 555-5555');
   });
 
-  it('should be cleared from the mask elements value', () => {
+  it('should be cleared from the mask elements value', async () => {
+    const user = userEvent.setup();
     render(<Component isClearValue />);
 
     const input = screen.getByTestId('form-control-with-mask');
-    userEvent.type(input, '5555555555');
+    await user.type(input, '5555555555');
 
     expect(input.value).toBe('+1 (555) 555-5555');
     expect(unmaskedInputValue).toBe('15555555555');
diff --git a/src/Form/tests/FormRadioSet.test.jsx b/src/Form/tests/FormRadioSet.test.jsx
index 23cf96dd23..5f1e269604 100644
--- a/src/Form/tests/FormRadioSet.test.jsx
+++ b/src/Form/tests/FormRadioSet.test.jsx
@@ -109,7 +109,8 @@ describe('FormRadioSet', () => {
     expect(deciduousRadio).toHaveAttribute('name', 'trees');
   });
 
-  it('checks if onClick is called once in FormRadioSet', () => {
+  it('checks if onClick is called once in FormRadioSet', async () => {
+    const user = userEvent.setup();
     const handleChange = jest.fn();
     const { getByLabelText } = render(
       <FormGroup>
@@ -124,7 +125,7 @@ describe('FormRadioSet', () => {
       </FormGroup>,
     );
 
-    userEvent.click(getByLabelText('Red'));
+    await user.click(getByLabelText('Red'));
     expect(handleChange).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/src/IconButtonToggle/IconButtonToggle.test.jsx b/src/IconButtonToggle/IconButtonToggle.test.jsx
index e7ef9fe6d1..1b664e44dc 100644
--- a/src/IconButtonToggle/IconButtonToggle.test.jsx
+++ b/src/IconButtonToggle/IconButtonToggle.test.jsx
@@ -21,7 +21,8 @@ describe('IconButtonToggle tests', () => {
     expect(btnAbc).toHaveClass('btn-icon-primary-active');
     expect(btnAbc).toHaveAttribute('aria-selected', 'true');
   });
-  test('switching activeValue works as expected', () => {
+  test('switching activeValue works as expected', async () => {
+    const user = userEvent.setup();
     const spyChanger = jest.fn();
     render(
       <IconButtonToggle activeValue="abc" onChange={spyChanger}>
@@ -38,7 +39,7 @@ describe('IconButtonToggle tests', () => {
     expect(btnAbc).toHaveClass('btn-icon-primary-active');
     expect(btnAbc).toHaveAttribute('aria-selected', 'true');
 
-    userEvent.click(btnDef);
+    await user.click(btnDef);
 
     waitFor(() => {
       expect(btnDef).toHaveClass('btn-icon-primary-active');
diff --git a/src/ListBox/ListBox.test.jsx b/src/ListBox/ListBox.test.jsx
index 19da147012..c95aca44e3 100644
--- a/src/ListBox/ListBox.test.jsx
+++ b/src/ListBox/ListBox.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import ListBox from '.';
@@ -82,15 +82,18 @@ describe('ListBox', () => {
 
     listBoxElement.focus();
 
-    expect(listBoxElement.getAttribute('aria-activedescendant')).toEqual('list-box-option-0');
+    await waitFor(() => {
+      expect(listBoxElement.getAttribute('aria-activedescendant')).toEqual('list-box-option-0');
+    });
   });
 
   it('should not select first ListBoxOption on focus if ListBoxOption selected', async () => {
+    const user = userEvent.setup();
     const listBoxElement = screen.getByRole('listbox');
 
     listBoxElement.focus();
 
-    await userEvent.keyboard('{arrowdown}');
+    await user.keyboard('{arrowdown}');
 
     listBoxElement.focus();
 
@@ -98,11 +101,12 @@ describe('ListBox', () => {
   });
 
   it('should select next ListBoxOption on down arrow key', async () => {
+    const user = userEvent.setup();
     const listBoxElement = screen.getByRole('listbox');
 
     listBoxElement.focus();
 
-    await userEvent.keyboard('{arrowdown}');
+    await user.keyboard('{arrowdown}');
 
     expect(listBoxElement.getAttribute('aria-activedescendant')).toEqual('list-box-option-1');
   });
diff --git a/src/Menu/Menu.test.jsx b/src/Menu/Menu.test.jsx
index c2cdad5f98..2f930c2d39 100644
--- a/src/Menu/Menu.test.jsx
+++ b/src/Menu/Menu.test.jsx
@@ -71,48 +71,53 @@ describe('Keyboard Interactions', () => {
     expect(defaultItem).toHaveFocus();
   });
 
-  it('should focus the next item after ArrowDown keyDown', () => {
+  it('should focus the next item after ArrowDown keyDown', async () => {
+    const user = userEvent.setup();
     const defaultItem = screen.getByText('Default');
     const cantTouchThisItem = screen.getByText(MENU_ITEM_TEXT).parentElement;
 
-    userEvent.type(defaultItem, '{arrowdown}');
+    await user.type(defaultItem, '{arrowdown}');
 
     expect(cantTouchThisItem).toHaveFocus();
   });
 
-  it('should focus the next item after Tab keyDown', () => {
+  it('should focus the next item after Tab keyDown', async () => {
+    const user = userEvent.setup();
     const defaultItem = screen.getByText('Default').parentElement;
     const cantTouchThisItem = screen.getByText(MENU_ITEM_TEXT).parentElement;
     defaultItem.focus();
-    userEvent.tab();
+    await user.tab();
 
     expect(cantTouchThisItem).toHaveFocus();
   });
 
-  it('should loop focus to the first item after Tab keyDown on last item', () => {
+  it('should loop focus to the first item after Tab keyDown on last item', async () => {
+    const user = userEvent.setup();
     const defaultItem = screen.getByText('Default').parentElement;
     const iconBeforeItem = screen.getByText('Icon Before');
     iconBeforeItem.focus();
-    userEvent.tab();
+    await user.tab();
 
     expect(defaultItem).toHaveFocus();
   });
 
-  it('should loop focus to the last item after ArrowUp keyDown on first item', () => {
+  it('should loop focus to the last item after ArrowUp keyDown on first item', async () => {
+    const user = userEvent.setup();
     const defaultItem = screen.getByText('Default').parentElement;
     const iconBeforeItem = screen.getByText('Icon Before').parentElement;
     defaultItem.focus();
-    userEvent.type(defaultItem, '{arrowup}');
+    await user.type(defaultItem, '{arrowup}');
 
     expect(iconBeforeItem).toHaveFocus();
   });
 
-  it('should focus the previous item after Shift + Tab keyDown', () => {
+  it('should focus the previous item after Shift + Tab keyDown', async () => {
+    const user = userEvent.setup();
     const button1 = screen.getAllByRole('button')[0];
     const button2 = screen.getAllByRole('button')[1];
 
     button2.focus();
-    userEvent.tab({ shift: true });
+    await user.tab({ shift: true });
 
     expect(button1).toHaveFocus();
   });
diff --git a/src/Modal/tests/ModalLayer.test.tsx b/src/Modal/tests/ModalLayer.test.tsx
index f316086cea..974da3a770 100644
--- a/src/Modal/tests/ModalLayer.test.tsx
+++ b/src/Modal/tests/ModalLayer.test.tsx
@@ -78,7 +78,8 @@ describe('<ModalLayer />', () => {
   });
 
   describe('Dismiss modal', () => {
-    it('closes a non-blocking modal layer when backdrop is clicked', () => {
+    it('closes a non-blocking modal layer when backdrop is clicked', async () => {
+      const user = userEvent.setup();
       const closeFn = jest.fn();
       render(
         <ModalLayer isOpen onClose={closeFn} isBlocking={false}>
@@ -86,7 +87,7 @@ describe('<ModalLayer />', () => {
         </ModalLayer>,
       );
       const backdrop = screen.getByTestId('modal-backdrop');
-      userEvent.click(backdrop);
+      await user.click(backdrop);
       expect(closeFn).toHaveBeenCalled();
     });
 
diff --git a/src/OverflowScroll/data/tests/useOverflowScroll.test.jsx b/src/OverflowScroll/data/tests/useOverflowScroll.test.jsx
index 9240f8fcbe..90745690b0 100644
--- a/src/OverflowScroll/data/tests/useOverflowScroll.test.jsx
+++ b/src/OverflowScroll/data/tests/useOverflowScroll.test.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { renderHook } from '@testing-library/react-hooks/dom';
-import { act } from '@testing-library/react';
+import { act, renderHook } from '@testing-library/react';
 import useOverflowScroll from '../useOverflowScroll';
 import useOverflowScrollActions from '../useOverflowScrollActions';
 import getChildrenElements from '../getChildrenElements';
diff --git a/src/OverflowScroll/data/tests/useOverflowScrollActions.test.jsx b/src/OverflowScroll/data/tests/useOverflowScrollActions.test.jsx
index 0443428105..c488e77958 100644
--- a/src/OverflowScroll/data/tests/useOverflowScrollActions.test.jsx
+++ b/src/OverflowScroll/data/tests/useOverflowScrollActions.test.jsx
@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks/dom';
+import { renderHook } from '@testing-library/react';
 import { act } from 'react-test-renderer';
 import useOverflowScrollActions from '../useOverflowScrollActions';
 
diff --git a/src/OverflowScroll/data/tests/useOverflowScrollElementAttributes.test.jsx b/src/OverflowScroll/data/tests/useOverflowScrollElementAttributes.test.jsx
index 051b484bb6..9b01c80fb8 100644
--- a/src/OverflowScroll/data/tests/useOverflowScrollElementAttributes.test.jsx
+++ b/src/OverflowScroll/data/tests/useOverflowScrollElementAttributes.test.jsx
@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks/dom';
+import { renderHook } from '@testing-library/react';
 import useOverflowScrollElementAttributes, {
   OVERFLOW_SCROLL_OVERFLOW_CONTAINER_CLASS,
   OVERFLOW_SCROLL_OVERFLOW_OPACITY_MASK_GRADIENT_START,
diff --git a/src/OverflowScroll/data/tests/useOverflowScrollEventListeners.test.jsx b/src/OverflowScroll/data/tests/useOverflowScrollEventListeners.test.jsx
index ecc6f9dd24..bac8055bd7 100644
--- a/src/OverflowScroll/data/tests/useOverflowScrollEventListeners.test.jsx
+++ b/src/OverflowScroll/data/tests/useOverflowScrollEventListeners.test.jsx
@@ -1,5 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks/dom';
-import { act } from '@testing-library/react';
+import { act, renderHook } from '@testing-library/react';
 import useOverflowScrollEventListeners from '../useOverflowScrollEventListeners';
 
 const divElement = document.createElement('div');
diff --git a/src/Pagination/Pagination.test.jsx b/src/Pagination/Pagination.test.jsx
index cfaf6019fc..49c99eb43a 100644
--- a/src/Pagination/Pagination.test.jsx
+++ b/src/Pagination/Pagination.test.jsx
@@ -3,7 +3,6 @@ import { Context as ResponsiveContext } from 'react-responsive';
 import renderer from 'react-test-renderer';
 import {
   render,
-  act,
   screen,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -66,48 +65,53 @@ describe('<Pagination />', () => {
   });
 
   describe('handles controlled and uncontrolled behaviour properly', () => {
-    it('does not internally change page on page click if currentPage is provided', () => {
+    it('does not internally change page on page click if currentPage is provided', async () => {
+      const user = userEvent.setup();
       render(<Pagination {...baseProps} />);
       expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('1');
 
-      userEvent.click(screen.getByText(PAGINATION_BUTTON_LABEL_NEXT));
+      await user.click(screen.getByText(PAGINATION_BUTTON_LABEL_NEXT));
       expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('1');
 
-      userEvent.click(screen.getByRole('button', { name: `${PAGINATION_BUTTON_LABEL_PAGE} 3` }));
+      await user.click(screen.getByRole('button', { name: `${PAGINATION_BUTTON_LABEL_PAGE} 3` }));
       expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('1');
     });
 
-    it('controls page selection internally if currentPage is not provided', () => {
+    it('controls page selection internally if currentPage is not provided', async () => {
+      const user = userEvent.setup();
       render(<Pagination {...baseProps} currentPage={undefined} />);
       expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('1');
 
-      userEvent.click(screen.getByText(PAGINATION_BUTTON_LABEL_NEXT));
+      await user.click(screen.getByText(PAGINATION_BUTTON_LABEL_NEXT));
       expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('2');
 
-      userEvent.click(screen.getByRole('button', { name: `${PAGINATION_BUTTON_LABEL_PAGE} 3` }));
+      await user.click(screen.getByRole('button', { name: `${PAGINATION_BUTTON_LABEL_PAGE} 3` }));
       expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('3');
 
-      userEvent.click(screen.getByText(PAGINATION_BUTTON_LABEL_PREV));
+      await user.click(screen.getByText(PAGINATION_BUTTON_LABEL_PREV));
       expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('2');
     });
 
-    it('does not chang page if you click "next" button while on last page', () => {
+    it('does not chang page if you click "next" button while on last page', async () => {
+      const user = userEvent.setup();
       render(<Pagination {...baseProps} currentPage={undefined} initialPage={5} />);
       expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('5');
-      userEvent.click(screen.getByText(PAGINATION_BUTTON_LABEL_NEXT));
+      await user.click(screen.getByText(PAGINATION_BUTTON_LABEL_NEXT));
       expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('5');
     });
 
-    it('does not chang page if you click "previous" button while on first page', () => {
+    it('does not chang page if you click "previous" button while on first page', async () => {
+      const user = userEvent.setup();
       render(<Pagination {...baseProps} currentPage={undefined} initialPage={1} />);
       expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('1');
-      userEvent.click(screen.getByText(PAGINATION_BUTTON_LABEL_PREV));
+      await user.click(screen.getByText(PAGINATION_BUTTON_LABEL_PREV));
       expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('1');
     });
   });
 
   describe('handles focus properly', () => {
-    it('should change focus to next button if previous page is first page', () => {
+    it('should change focus to next button if previous page is first page', async () => {
+      const user = userEvent.setup();
       const props = {
         ...baseProps,
         currentPage: 2,
@@ -117,11 +121,12 @@ describe('<Pagination />', () => {
         },
       };
       render(<Pagination {...props} />);
-      userEvent.click(screen.getByText(PAGINATION_BUTTON_LABEL_PREV));
+      await user.click(screen.getByText(PAGINATION_BUTTON_LABEL_PREV));
       expect(screen.getByText(PAGINATION_BUTTON_LABEL_NEXT)).toHaveFocus();
     });
 
-    it('should change focus to previous button if next page is last page', () => {
+    it('should change focus to previous button if next page is last page', async () => {
+      const user = userEvent.setup();
       const props = {
         ...baseProps,
         currentPage: baseProps.pageCount - 1,
@@ -131,7 +136,7 @@ describe('<Pagination />', () => {
         },
       };
       render(<Pagination {...props} />);
-      userEvent.click(screen.getByText(props.buttonLabel.next));
+      await user.click(screen.getByText(props.buttonLabel.next));
       expect(screen.getByText(props.buttonLabel.previous)).toHaveFocus();
     });
   });
@@ -191,7 +196,8 @@ describe('<Pagination />', () => {
     });
 
     describe('should fire callbacks properly', () => {
-      it('should not fire onPageSelect when selecting current page', () => {
+      it('should not fire onPageSelect when selecting current page', async () => {
+        const user = userEvent.setup();
         const spy = jest.fn();
         const props = {
           ...baseProps,
@@ -203,11 +209,12 @@ describe('<Pagination />', () => {
           </ResponsiveContext.Provider>
         ));
 
-        userEvent.click(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false }));
+        await user.click(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false }));
         expect(spy).toHaveBeenCalledTimes(0);
       });
 
-      it('should fire onPageSelect callback when selecting new page', () => {
+      it('should fire onPageSelect callback when selecting new page', async () => {
+        const user = userEvent.setup();
         const spy = jest.fn();
         const props = {
           ...baseProps,
@@ -219,17 +226,18 @@ describe('<Pagination />', () => {
           </ResponsiveContext.Provider>
         ));
 
-        userEvent.click(screen.getByLabelText(`${PAGINATION_BUTTON_LABEL_PAGE} 2`));
+        await user.click(screen.getByLabelText(`${PAGINATION_BUTTON_LABEL_PAGE} 2`));
         expect(spy).toHaveBeenCalledTimes(1);
 
-        userEvent.click(screen.getByLabelText(`${PAGINATION_BUTTON_LABEL_PAGE} 3`));
+        await user.click(screen.getByLabelText(`${PAGINATION_BUTTON_LABEL_PAGE} 3`));
         expect(spy).toHaveBeenCalledTimes(2);
       });
     });
   });
 
   describe('fires previous and next button click handlers', () => {
-    it('previous button onClick', () => {
+    it('previous button onClick', async () => {
+      const user = userEvent.setup();
       const spy = jest.fn();
       const props = {
         ...baseProps,
@@ -238,11 +246,12 @@ describe('<Pagination />', () => {
       };
       render(<Pagination {...props} />);
       const expectedPrevButtonAriaLabel = `${PAGINATION_BUTTON_LABEL_PREV}, ${PAGINATION_BUTTON_LABEL_PAGE} 2`;
-      userEvent.click(screen.getByRole('button', { name: expectedPrevButtonAriaLabel }));
+      await user.click(screen.getByRole('button', { name: expectedPrevButtonAriaLabel }));
       expect(spy).toHaveBeenCalledTimes(1);
     });
 
-    it('next button onClick', () => {
+    it('next button onClick', async () => {
+      const user = userEvent.setup();
       const spy = jest.fn();
       const props = {
         ...baseProps,
@@ -250,7 +259,7 @@ describe('<Pagination />', () => {
       };
       render(<Pagination {...props} />);
       const expectedNextButtonAriaLabel = `${PAGINATION_BUTTON_LABEL_NEXT}, ${PAGINATION_BUTTON_LABEL_PAGE} 2`;
-      userEvent.click(screen.getByRole('button', { name: expectedNextButtonAriaLabel }));
+      await user.click(screen.getByRole('button', { name: expectedNextButtonAriaLabel }));
       expect(spy).toHaveBeenCalledTimes(1);
     });
   });
@@ -318,13 +327,12 @@ describe('<Pagination />', () => {
     });
 
     it('for the reduced variant shows dropdown button with the page count as label', async () => {
+      const user = userEvent.setup();
       render(<Pagination variant="reduced" {...props} />);
 
       const dropdownLabel = `${baseProps.currentPage} de ${baseProps.pageCount}`;
 
-      await act(async () => {
-        userEvent.click(screen.getByRole('button', { name: dropdownLabel }));
-      });
+      await user.click(screen.getByRole('button', { name: dropdownLabel }));
       expect(screen.queryAllByRole('button', { name: /^\d+$/ }).length).toEqual(baseProps.pageCount);
     });
 
diff --git a/src/ProductTour/Checkpoint.test.jsx b/src/ProductTour/Checkpoint.test.jsx
index 2ea1aabb52..dc3efe6389 100644
--- a/src/ProductTour/Checkpoint.test.jsx
+++ b/src/ProductTour/Checkpoint.test.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import userEvent, { PointerEventsCheckLevel } from '@testing-library/user-event';
 import { IntlProvider } from 'react-intl';
 
 import * as popper from '@popperjs/core';
@@ -100,8 +100,9 @@ describe('Checkpoint', () => {
     });
 
     it('end button onClick calls handleEnd', async () => {
+      const user = userEvent.setup({ pointerEventsCheck: PointerEventsCheckLevel.Never });
       const endButton = screen.getByText('End', { selector: 'button' });
-      await userEvent.click(endButton, undefined, { skipPointerEventsCheck: true });
+      await user.click(endButton);
       expect(handleEnd).toHaveBeenCalledTimes(1);
     });
   });
diff --git a/src/ProductTour/ProductTour.test.jsx b/src/ProductTour/ProductTour.test.jsx
index d6b514848f..ac8f294bea 100644
--- a/src/ProductTour/ProductTour.test.jsx
+++ b/src/ProductTour/ProductTour.test.jsx
@@ -144,6 +144,7 @@ describe('<ProductTour />', () => {
       });
 
       it('onClick of end button disables tour', async () => {
+        const user = userEvent.setup();
         const { rerender } = render(<ProductTourWrapper tours={[tourData]} />);
 
         // Verify a Checkpoint has rendered
@@ -151,29 +152,21 @@ describe('<ProductTour />', () => {
 
         // Advance the Tour to the last Checkpoint
         const advanceButton1 = screen.getByRole('button', { name: 'Next' });
-        await act(async () => {
-          await userEvent.click(advanceButton1);
-        });
+        await user.click(advanceButton1);
 
         const advanceButton2 = screen.getByRole('button', { name: 'Next' });
-        await act(async () => {
-          await userEvent.click(advanceButton2);
-        });
+        await user.click(advanceButton2);
 
         rerender(<ProductTourWrapper tours={[tourData]} />);
 
         const advanceButton3 = screen.getByRole('button', { name: 'Override advance' });
-        await act(async () => {
-          await userEvent.click(advanceButton3);
-        });
+        await user.click(advanceButton3);
 
         rerender(<ProductTourWrapper tours={[tourData]} />);
 
         // Click the end button
         const endButton = screen.getByRole('button', { name: 'End' });
-        await act(async () => {
-          await userEvent.click(endButton);
-        });
+        await user.click(endButton);
 
         // Verify no Checkpoints have rendered
         expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
@@ -188,9 +181,7 @@ describe('<ProductTour />', () => {
         expect(screen.getByRole('dialog', { name: 'Checkpoint 1' })).toBeInTheDocument();
 
         // Click Escape key
-        await act(async () => {
-          await userEvent.keyboard('{escape}');
-        });
+        await userEvent.keyboard('{Escape}');
 
         // Verify no Checkpoints have been rendered
         expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
@@ -271,31 +262,27 @@ describe('<ProductTour />', () => {
         expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
       });
       it('calls customHandleOnEnd onClick of end button', async () => {
+        const user = userEvent.setup();
         const { rerender } = render(<ProductTourWrapper tours={[overrideTourData]} />);
         const advanceButton = screen.getByRole('button', { name: 'Override advance' });
-        await act(async () => {
-          await userEvent.click(advanceButton);
-        });
+        await user.click(advanceButton);
 
         rerender(<ProductTourWrapper tours={[overrideTourData]} />);
 
         expect(screen.getByText('Checkpoint 4')).toBeInTheDocument();
         const endButton = screen.getByRole('button', { name: 'Override end' });
-        await act(async () => {
-          await userEvent.click(endButton);
-        });
+        await user.click(endButton);
         expect(handleEnd).toBeCalledTimes(1);
         expect(customOnEnd).toHaveBeenCalledTimes(1);
         expect(screen.queryByText('Checkpoint 4')).not.toBeInTheDocument();
       });
       it('calls onEscape on escape button key press', async () => {
+        const user = userEvent.setup();
         render(<ProductTourWrapper tours={[overrideTourData]} />);
         expect(screen.getByText('Checkpoint 3')).toBeInTheDocument();
         const container = screen.getByRole('dialog');
         container.focus();
-        await act(async () => {
-          await userEvent.keyboard('{escape}');
-        });
+        await user.keyboard('{Escape}');
         expect(handleEscape).toHaveBeenCalledTimes(1);
         expect(screen.queryByText('Checkpoint 3')).not.toBeInTheDocument();
       });
diff --git a/src/ProductTour/index.jsx b/src/ProductTour/index.jsx
index 5b4754f395..75f1e6b150 100644
--- a/src/ProductTour/index.jsx
+++ b/src/ProductTour/index.jsx
@@ -46,7 +46,7 @@ const ProductTour = React.forwardRef(({ tours }, ref) => {
 
   useEffect(() => {
     const handleEsc = (event) => {
-      if (event.keyCode === 27) {
+      if (event.key === 'Escape') {
         setIsTourEnabled(false);
         if (onEscape) {
           onEscape();
diff --git a/src/SelectableBox/tests/SelectableBox.test.jsx b/src/SelectableBox/tests/SelectableBox.test.jsx
index 57e059f071..f0ee6c2824 100644
--- a/src/SelectableBox/tests/SelectableBox.test.jsx
+++ b/src/SelectableBox/tests/SelectableBox.test.jsx
@@ -123,12 +123,13 @@ describe('<SelectableBox />', () => {
       rerender(<SelectableRadio checked />);
       expect(radio.className).toContain('pgn__selectable_box-active');
     });
-    it('ref is passed to onClick function', () => {
+    it('ref is passed to onClick function', async () => {
+      const user = userEvent.setup();
       let inputRef;
       const onClick = (ref) => { inputRef = ref; };
       render(<SelectableRadio onClick={onClick} />);
       const radio = screen.getByRole('button');
-      userEvent.click(radio);
+      await user.click(radio);
       expect(inputRef).not.toBeFalsy();
     });
   });
diff --git a/src/StatusAlert/StatusAlert.test.jsx b/src/StatusAlert/StatusAlert.test.jsx
index 098f8305f3..76dfb55744 100644
--- a/src/StatusAlert/StatusAlert.test.jsx
+++ b/src/StatusAlert/StatusAlert.test.jsx
@@ -113,17 +113,21 @@ describe('<StatusAlert />', () => {
     });
 
     it('does nothing on invalid keystroke q', async () => {
+      const user = userEvent.setup();
       const closeButton = screen.getByRole('button');
       expect(document.activeElement).toEqual(closeButton);
       closeButton.focus();
-      await userEvent.keyboard('{q}');
+      await user.keyboard('{q}');
       expect(document.activeElement).toEqual(closeButton);
     });
 
     it('does nothing on invalid keystroke + ctrl', async () => {
+      const user = userEvent.setup();
       const closeButton = screen.getByRole('button');
       expect(document.activeElement).toEqual(closeButton);
-      await userEvent.keyboard('{ctrl>}{tab}{/ctrl}');
+      // This was '{Control>}{Tab}{/Control}' before, but that _does_ seem to be changing the focus in newer RTL/React.
+      // I don't think that was the point of the test though, so it's 'z' for now.
+      await user.keyboard('{Control>}z{/Control}');
       expect(document.activeElement).toEqual(closeButton);
     });
   });
diff --git a/src/Tabs/deprecated/Tabs.test.jsx b/src/Tabs/deprecated/Tabs.test.jsx
index a6e1afc1a5..0f2953ece1 100644
--- a/src/Tabs/deprecated/Tabs.test.jsx
+++ b/src/Tabs/deprecated/Tabs.test.jsx
@@ -37,14 +37,16 @@ describe('<Tabs />', () => {
   });
 
   describe('switches tab selection', () => {
-    it('on click', () => {
+    it('on click', async () => {
+      const user = userEvent.setup();
       const { container } = render(<Tabs {...props} />);
       const tabButtons = container.querySelectorAll('button');
 
-      tabButtons.forEach((node, i) => {
-        userEvent.click(node);
+      for (const [i, node] of tabButtons.entries()) {
+        // eslint-disable-next-line no-await-in-loop
+        await user.click(node);
         tabSelectedAtIndex(i, container);
-      });
+      }
     });
   });
 });