From 00ea6d1cadc96721f5dcd857596af4be7e9b31c4 Mon Sep 17 00:00:00 2001
From: Tom Begley <tomcbegley@gmail.com>
Date: Mon, 3 Feb 2025 18:51:31 +0000
Subject: [PATCH 1/2] Fix tests

---
 .../accordion/__tests__/Accordion.test.js     |  64 ++++----
 src/components/badge/__tests__/Badge.test.js  |  15 +-
 src/components/button/Button.js               |  47 +++---
 .../button/__tests__/Button.test.js           |  20 ++-
 .../card/__tests__/CardLink.test.js           |  20 ++-
 src/components/carousel/Carousel.js           |  28 ++--
 .../carousel/__tests__/Carousel.test.js       |  11 +-
 .../collapse/__tests__/Collapse.test.js       |   4 +-
 .../__tests__/DropdownMenu.test.js            | 153 +++++++++---------
 .../__tests__/DropdownMenuItem.test.js        |  54 +++----
 src/components/fade/__tests__/Fade.test.js    |  71 ++++----
 src/components/form/Label.js                  |   4 +-
 src/components/input/Checklist.js             |   2 -
 src/components/input/Input.js                 |   1 +
 src/components/input/RadioItems.js            |   3 +-
 src/components/input/Select.js                |   6 +-
 src/components/input/Textarea.js              |   2 +-
 .../input/__tests__/Checkbox.test.js          |   9 +-
 .../input/__tests__/Checklist.test.js         |  19 ++-
 src/components/input/__tests__/Input.test.js  |  17 +-
 .../input/__tests__/RadioButton.test.js       |   7 +-
 .../input/__tests__/RadioItems.test.js        |  20 ++-
 src/components/input/__tests__/Select.test.js |   5 +-
 src/components/input/__tests__/Switch.test.js |   9 +-
 .../input/__tests__/Textarea.test.js          |  31 ++--
 .../listgroup/__tests__/ListGroupItem.test.js |  21 ++-
 src/components/modal/__tests__/Modal.test.js  |  40 ++---
 src/components/nav/NavbarToggler.js           |   5 +-
 src/components/nav/__tests__/NavLink.test.js  |  20 ++-
 .../nav/__tests__/NavbarBrand.test.js         |  10 +-
 .../nav/__tests__/NavbarSimple.test.js        |  10 +-
 .../nav/__tests__/NavbarToggler.test.js       |   5 +-
 .../offcanvas/__tests__/Offcanvas.test.js     |  80 +++++----
 .../pagination/__tests__/Pagination.test.js   |  19 ++-
 .../popover/__tests__/Popover.test.js         | 137 ++++++++--------
 src/components/tabs/__tests__/Tabs.test.js    |   5 +-
 src/components/toast/__tests__/Toast.test.js  |   5 +-
 src/private/Link.js                           |   2 +-
 src/private/OverlayTemplates.js               |  24 ++-
 src/private/__tests__/Link.test.js            |  25 +--
 src/private/__tests__/Overlay.test.js         |  59 +++----
 41 files changed, 579 insertions(+), 510 deletions(-)

diff --git a/src/components/accordion/__tests__/Accordion.test.js b/src/components/accordion/__tests__/Accordion.test.js
index bd785ff0d..2e978e379 100644
--- a/src/components/accordion/__tests__/Accordion.test.js
+++ b/src/components/accordion/__tests__/Accordion.test.js
@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import {render} from '@testing-library/react';
+import {act, render, screen, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import Accordion from '../Accordion';
 import AccordionItem from '../AccordionItem';
@@ -91,7 +91,8 @@ describe('Accordion', () => {
     ).not.toHaveClass('show');
   });
 
-  test('tracks most recently clicked item with "active_item" prop', () => {
+  test('tracks most recently clicked item with "active_item" prop', async () => {
+    const user = userEvent.setup({advanceTimers: jest.advanceTimersByTime});
     const mockSetProps = jest.fn();
     const {container, rerender} = render(
       <Accordion setProps={mockSetProps} active_item="item-0">
@@ -109,9 +110,7 @@ describe('Accordion', () => {
       accordionItems.children[1].querySelector('div.accordion-collapse')
     ).not.toHaveClass('show');
 
-    userEvent.click(
-      accordionItems.children[1].querySelector('h2.accordion-header > button')
-    );
+    await user.click(await screen.findByText('item-title-2'));
     expect(mockSetProps.mock.calls).toHaveLength(1);
 
     rerender(
@@ -120,7 +119,7 @@ describe('Accordion', () => {
         <AccordionItem title="item-title-2">item-content-2</AccordionItem>
       </Accordion>
     );
-    jest.runAllTimers();
+    act(() => jest.runAllTimers());
 
     expect(
       accordionItems.children[0].querySelector('div.accordion-collapse')
@@ -130,9 +129,7 @@ describe('Accordion', () => {
     ).toHaveClass('show');
 
     // clicking on an open item closes it
-    userEvent.click(
-      accordionItems.children[1].querySelector('h2.accordion-header > button')
-    );
+    await user.click(await screen.findByText('item-title-2'));
     expect(mockSetProps.mock.calls).toHaveLength(2);
 
     rerender(
@@ -141,7 +138,7 @@ describe('Accordion', () => {
         <AccordionItem title="item-title-2">item-content-2</AccordionItem>
       </Accordion>
     );
-    jest.runAllTimers();
+    act(() => jest.runAllTimers());
 
     expect(
       accordionItems.children[0].querySelector('div.accordion-collapse')
@@ -151,7 +148,8 @@ describe('Accordion', () => {
     ).not.toHaveClass('show');
   });
 
-  test('keeps item open with "always_open" prop', () => {
+  test('keeps item open with "always_open" prop', async () => {
+    const user = userEvent.setup({advanceTimers: jest.advanceTimersByTime});
     const mockSetProps = jest.fn();
 
     const {container} = render(
@@ -172,34 +170,31 @@ describe('Accordion', () => {
     ).not.toHaveClass('show');
 
     // Click on the second item
-    userEvent.click(
-      accordionItems.children[1].querySelector('h2.accordion-header > button')
-    );
+    await user.click(await screen.findByText('item-title-2'));
     expect(mockSetProps.mock.calls).toHaveLength(1);
 
-    // Allow the click to take effect
-    jest.runAllTimers();
+    // wait for transition to complete
+    await waitFor(() =>
+      expect(
+        accordionItems.children[1].querySelector('div.accordion-collapse')
+      ).toHaveClass('show')
+    );
 
     // Check just the second item is open
     expect(
       accordionItems.children[0].querySelector('div.accordion-collapse')
     ).not.toHaveClass('show');
-    expect(
-      accordionItems.children[1].querySelector('div.accordion-collapse')
-    ).toHaveClass('show');
 
     // Click on the first item
-    userEvent.click(
-      accordionItems.children[0].querySelector('h2.accordion-header > button')
-    );
+    await user.click(await screen.findByText('item-title-1'));
     expect(mockSetProps.mock.calls).toHaveLength(2);
-    // Allow the click to take effect
-    jest.runAllTimers();
 
     // Check that the first child is now open, and the second remains open
-    expect(
-      accordionItems.children[0].querySelector('div.accordion-collapse')
-    ).toHaveClass('show');
+    await waitFor(() =>
+      expect(
+        accordionItems.children[0].querySelector('div.accordion-collapse')
+      ).toHaveClass('show')
+    );
     expect(
       accordionItems.children[1].querySelector('div.accordion-collapse')
     ).toHaveClass('show');
@@ -224,7 +219,8 @@ describe('Accordion', () => {
     ).toHaveClass('show');
   });
 
-  test('tracks most recently clicked item with "active_item" prop when always_open', () => {
+  test('tracks most recently clicked item with "active_item" prop when always_open', async () => {
+    const user = userEvent.setup({advanceTimers: jest.advanceTimersByTime});
     const mockSetProps = jest.fn();
     const {container, rerender} = render(
       <Accordion setProps={mockSetProps} active_item={['item-0']} always_open>
@@ -248,9 +244,7 @@ describe('Accordion', () => {
     ).not.toHaveClass('show');
 
     // Click the middle option
-    userEvent.click(
-      accordionItems.children[1].querySelector('h2.accordion-header > button')
-    );
+    await user.click(await screen.getByText('item-title-2'));
     expect(mockSetProps.mock.calls).toHaveLength(1);
 
     rerender(
@@ -264,7 +258,7 @@ describe('Accordion', () => {
         <AccordionItem title="item-title-3">item-content-3</AccordionItem>
       </Accordion>
     );
-    jest.runAllTimers();
+    act(() => jest.runAllTimers());
 
     // Check first option stayed open, middle option now open but third still
     // closed
@@ -279,9 +273,7 @@ describe('Accordion', () => {
     ).not.toHaveClass('show');
 
     // clicking on 1st item closes it, but keeps second item open and 3rd closed
-    userEvent.click(
-      accordionItems.children[0].querySelector('h2.accordion-header > button')
-    );
+    await user.click(await screen.getByText('item-title-1'));
     expect(mockSetProps.mock.calls).toHaveLength(2);
 
     rerender(
@@ -295,7 +287,7 @@ describe('Accordion', () => {
         <AccordionItem title="item-title-3">item-content-3</AccordionItem>
       </Accordion>
     );
-    jest.runAllTimers();
+    act(() => jest.runAllTimers());
 
     // Check that 1 and 3 now closed, and 2 is open
     expect(
diff --git a/src/components/badge/__tests__/Badge.test.js b/src/components/badge/__tests__/Badge.test.js
index 3ddfa7a6b..6bb1ba1d5 100644
--- a/src/components/badge/__tests__/Badge.test.js
+++ b/src/components/badge/__tests__/Badge.test.js
@@ -56,19 +56,21 @@ describe('Badge', () => {
     expect(badge.getAttribute('href')).toBe(href);
   });
 
-  test('tracks clicks with n_clicks', () => {
+  test('tracks clicks with n_clicks', async () => {
+    const user = userEvent.setup();
     const mockSetProps = jest.fn();
     const badge = render(<Badge setProps={mockSetProps}>Clickable</Badge>);
 
     expect(mockSetProps.mock.calls).toHaveLength(0);
 
-    userEvent.click(badge.getByText('Clickable'));
+    await user.click(badge.getByText('Clickable'));
 
     expect(mockSetProps.mock.calls).toHaveLength(1);
     expect(mockSetProps.mock.calls[0][0].n_clicks).toBe(1);
   });
 
-  test('relative links are internal by default', () => {
+  test('relative links are internal by default', async () => {
+    const user = userEvent.setup();
     const badge = render(<Badge href="/relative">Clickable</Badge>);
 
     const mockEventListener = jest.fn();
@@ -76,11 +78,12 @@ describe('Badge', () => {
     window.scrollTo = jest.fn();
 
     expect(mockEventListener.mock.calls).toHaveLength(0);
-    userEvent.click(badge.getByText('Clickable'));
+    await user.click(badge.getByText('Clickable'));
     expect(mockEventListener.mock.calls).toHaveLength(1);
   });
 
-  test('relative links are external with external_link=true', () => {
+  test('relative links are external with external_link=true', async () => {
+    const user = userEvent.setup();
     const badge = render(
       <Badge href="/relative" external_link>
         Clickable
@@ -92,7 +95,7 @@ describe('Badge', () => {
     window.scrollTo = jest.fn();
 
     expect(mockEventListener.mock.calls).toHaveLength(0);
-    userEvent.click(badge.getByText('Clickable'));
+    await user.click(badge.getByText('Clickable'));
     expect(mockEventListener.mock.calls).toHaveLength(0);
   });
 });
diff --git a/src/components/button/Button.js b/src/components/button/Button.js
index cc052f76d..0993aad44 100644
--- a/src/components/button/Button.js
+++ b/src/components/button/Button.js
@@ -12,28 +12,26 @@ import Link from '../../private/Link';
  * Use the `n_clicks` prop to trigger callbacks when the button has been
  * clicked.
  */
-const Button = props => {
-  const {
-    children,
-    disabled,
-    href,
-    loading_state,
-    setProps,
-    n_clicks,
-    target,
-    type,
-    download,
-    name,
-    value,
-    className,
-    class_name,
-    color,
-    outline,
-    onClick,
-    rel,
-    ...otherProps
-  } = props;
-
+const Button = ({
+  children,
+  disabled,
+  href,
+  loading_state,
+  setProps,
+  target,
+  type,
+  download,
+  name,
+  value,
+  className,
+  class_name,
+  color,
+  outline,
+  onClick,
+  rel,
+  n_clicks = 0,
+  ...otherProps
+}) => {
   const incrementClicks = () => {
     if (!disabled && setProps) {
       setProps({
@@ -73,11 +71,6 @@ const Button = props => {
   );
 };
 
-Button.dashPersistence = {
-  n_clicks: 0,
-  n_clicks_timestamp: -1
-};
-
 Button.propTypes = {
   /**
    * The ID of this component, used to identify dash components
diff --git a/src/components/button/__tests__/Button.test.js b/src/components/button/__tests__/Button.test.js
index d7cd61e95..386b07374 100644
--- a/src/components/button/__tests__/Button.test.js
+++ b/src/components/button/__tests__/Button.test.js
@@ -84,19 +84,21 @@ describe('Button', () => {
     );
   });
 
-  test('tracks clicks with n_clicks', () => {
+  test('tracks clicks with n_clicks', async () => {
+    const user = userEvent.setup();
     const mockSetProps = jest.fn();
     const button = render(<Button setProps={mockSetProps}>Clickable</Button>);
 
     expect(mockSetProps.mock.calls).toHaveLength(0);
 
-    userEvent.click(button.getByText('Clickable'));
+    await user.click(button.getByText('Clickable'));
 
     expect(mockSetProps.mock.calls).toHaveLength(1);
     expect(mockSetProps.mock.calls[0][0].n_clicks).toBe(1);
   });
 
-  test("doesn't track clicks if disabled", () => {
+  test("doesn't track clicks if disabled", async () => {
+    const user = userEvent.setup();
     const mockSetProps = jest.fn();
     const button = render(
       <Button disabled setProps={mockSetProps}>
@@ -106,12 +108,13 @@ describe('Button', () => {
 
     expect(mockSetProps.mock.calls).toHaveLength(0);
 
-    userEvent.click(button.getByText('Clickable'));
+    await user.click(button.getByText('Clickable'));
 
     expect(mockSetProps.mock.calls).toHaveLength(0);
   });
 
-  test('relative links are internal by default', () => {
+  test('relative links are internal by default', async () => {
+    const user = userEvent.setup();
     const button = render(<Button href="/relative">Clickable</Button>);
 
     const mockEventListener = jest.fn();
@@ -119,11 +122,12 @@ describe('Button', () => {
     window.scrollTo = jest.fn();
 
     expect(mockEventListener.mock.calls).toHaveLength(0);
-    userEvent.click(button.getByText('Clickable'));
+    await user.click(button.getByText('Clickable'));
     expect(mockEventListener.mock.calls).toHaveLength(1);
   });
 
-  test('relative links are external with external_link=true', () => {
+  test('relative links are external with external_link=true', async () => {
+    const user = userEvent.setup();
     const button = render(
       <Button href="/relative" external_link>
         Clickable
@@ -135,7 +139,7 @@ describe('Button', () => {
     window.scrollTo = jest.fn();
 
     expect(mockEventListener.mock.calls).toHaveLength(0);
-    userEvent.click(button.getByText('Clickable'));
+    await user.click(button.getByText('Clickable'));
     expect(mockEventListener.mock.calls).toHaveLength(0);
   });
 });
diff --git a/src/components/card/__tests__/CardLink.test.js b/src/components/card/__tests__/CardLink.test.js
index 39aae4ed7..1894021d7 100644
--- a/src/components/card/__tests__/CardLink.test.js
+++ b/src/components/card/__tests__/CardLink.test.js
@@ -20,7 +20,8 @@ describe('CardLink', () => {
     expect(cardLink.container).toHaveTextContent('Some card link content');
   });
 
-  test('tracks clicks with n_clicks', () => {
+  test('tracks clicks with n_clicks', async () => {
+    const user = userEvent.setup();
     const mockSetProps = jest.fn();
     const cardLink = render(
       <CardLink setProps={mockSetProps}>Clickable</CardLink>
@@ -28,13 +29,14 @@ describe('CardLink', () => {
 
     expect(mockSetProps.mock.calls).toHaveLength(0);
 
-    userEvent.click(cardLink.getByText('Clickable'));
+    await user.click(cardLink.getByText('Clickable'));
 
     expect(mockSetProps.mock.calls).toHaveLength(1);
     expect(mockSetProps.mock.calls[0][0].n_clicks).toBe(1);
   });
 
-  test("doesn't track clicks if disabled", () => {
+  test("doesn't track clicks if disabled", async () => {
+    const user = userEvent.setup();
     const mockSetProps = jest.fn();
     const cardLink = render(
       <CardLink setProps={mockSetProps} disabled>
@@ -44,12 +46,13 @@ describe('CardLink', () => {
 
     expect(mockSetProps.mock.calls).toHaveLength(0);
 
-    userEvent.click(cardLink.getByText('Clickable'));
+    await user.click(cardLink.getByText('Clickable'));
 
     expect(mockSetProps.mock.calls).toHaveLength(0);
   });
 
-  test('relative links are internal by default', () => {
+  test('relative links are internal by default', async () => {
+    const user = userEvent.setup();
     const cardLink = render(<CardLink href="/relative">Clickable</CardLink>);
 
     const mockEventListener = jest.fn();
@@ -57,11 +60,12 @@ describe('CardLink', () => {
     window.scrollTo = jest.fn();
 
     expect(mockEventListener.mock.calls).toHaveLength(0);
-    userEvent.click(cardLink.getByText('Clickable'));
+    await user.click(cardLink.getByText('Clickable'));
     expect(mockEventListener.mock.calls).toHaveLength(1);
   });
 
-  test('relative links are external with external_link=true', () => {
+  test('relative links are external with external_link=true', async () => {
+    const user = userEvent.setup();
     const cardLink = render(
       <CardLink href="/relative" external_link>
         Clickable
@@ -73,7 +77,7 @@ describe('CardLink', () => {
     window.scrollTo = jest.fn();
 
     expect(mockEventListener.mock.calls).toHaveLength(0);
-    userEvent.click(cardLink.getByText('Clickable'));
+    await user.click(cardLink.getByText('Clickable'));
     expect(mockEventListener.mock.calls).toHaveLength(0);
   });
 });
diff --git a/src/components/carousel/Carousel.js b/src/components/carousel/Carousel.js
index d3d9d64ad..ea83661ca 100644
--- a/src/components/carousel/Carousel.js
+++ b/src/components/carousel/Carousel.js
@@ -10,21 +10,19 @@ import Link from '../../private/Link';
  * Component for creating Bootstrap carousel.  This component is a slideshow
  * for cycling through a series of content.
  */
-const Carousel = props => {
-  const {
-    items,
-    style,
-    class_name,
-    className,
-    loading_state,
-    setProps,
-    interval,
-    active_index = 0,
-    controls = true,
-    indicators = true,
-    ...otherProps
-  } = props;
-
+const Carousel = ({
+  items,
+  style,
+  class_name,
+  className,
+  loading_state,
+  setProps,
+  interval,
+  active_index = 0,
+  controls = true,
+  indicators = true,
+  ...otherProps
+}) => {
   const slides = items.map(item => {
     // note - the default 'd-block w-100' is from the examples in the Bootstrap docs.
     item.imgClassName =
diff --git a/src/components/carousel/__tests__/Carousel.test.js b/src/components/carousel/__tests__/Carousel.test.js
index f8d18ba72..e14c04089 100644
--- a/src/components/carousel/__tests__/Carousel.test.js
+++ b/src/components/carousel/__tests__/Carousel.test.js
@@ -46,7 +46,8 @@ describe('Carousel', () => {
     expect(items.children[1]).not.toHaveClass('active');
   });
 
-  test('tracks most recently clicked slide with "active_index" prop', () => {
+  test('tracks most recently clicked slide with "active_index" prop', async () => {
+    const user = userEvent.setup();
     const mockSetProps = jest.fn();
     const {container} = render(
       <Carousel items={slides} setProps={mockSetProps} active_index={0} />
@@ -59,7 +60,7 @@ describe('Carousel', () => {
 
     const nextButton = container.querySelector('a.carousel-control-next');
 
-    userEvent.click(nextButton);
+    await user.click(nextButton);
     expect(mockSetProps.mock.calls).toHaveLength(1);
     expect(mockSetProps.mock.calls[0][0].active_index).toBe(1);
   });
@@ -82,7 +83,7 @@ describe('Carousel', () => {
       {
         key: '0',
         src: '',
-        alt: 'z',
+        alt: 'this is the blank one',
         href: 'http://www.example.com',
         target: '_blank'
       },
@@ -99,13 +100,13 @@ describe('Carousel', () => {
         src: '',
         alt: 'z',
         href: 'http://www.example.com'
-      },
-      ...slides
+      }
     ];
 
     const carousel = render(<Carousel items={linkedSlides} />);
     const carouselItems = carousel.container.querySelectorAll('.carousel-item');
     const blankTargetItem = carouselItems[0];
+
     expect(blankTargetItem).toHaveAttribute('target', '_blank');
     expect(blankTargetItem.tagName.toLowerCase()).toEqual('a');
 
diff --git a/src/components/collapse/__tests__/Collapse.test.js b/src/components/collapse/__tests__/Collapse.test.js
index ab7f148da..b83d12a2f 100644
--- a/src/components/collapse/__tests__/Collapse.test.js
+++ b/src/components/collapse/__tests__/Collapse.test.js
@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import {render} from '@testing-library/react';
+import {act, render} from '@testing-library/react';
 import Collapse from '../Collapse';
 
 jest.useFakeTimers();
@@ -44,7 +44,7 @@ describe('Collapse', () => {
       </Collapse>
     );
     expect(collapse.container.querySelector('div.collapsing')).not.toBe(null);
-    jest.runAllTimers();
+    act(() => jest.runAllTimers());
 
     expect(collapse.container.querySelector('div.collapse.show')).not.toBe(
       null
diff --git a/src/components/dropdownmenu/__tests__/DropdownMenu.test.js b/src/components/dropdownmenu/__tests__/DropdownMenu.test.js
index 6800e1caa..3b2a48a05 100644
--- a/src/components/dropdownmenu/__tests__/DropdownMenu.test.js
+++ b/src/components/dropdownmenu/__tests__/DropdownMenu.test.js
@@ -3,45 +3,35 @@
  */
 
 import React from 'react';
-import {render} from '@testing-library/react';
+import {act, render} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import DropdownMenu from '../DropdownMenu';
 import DropdownMenuItem from '../DropdownMenuItem';
 
 describe('DropdownMenu', () => {
-  // this is just a little hack to silence a warning that we'll get until we
-  // upgrade to 16.9. See also: https://github.com/facebook/react/pull/14853
-  const originalError = console.error;
-  beforeAll(() => {
-    console.error = (...args) => {
-      if (/Warning.*not wrapped in act/.test(args[0])) {
-        return;
-      }
-      originalError.call(console, ...args);
-    };
-  });
-
-  afterAll(() => {
-    console.error = originalError;
-  });
-
-  test('renders a button with class "dropdown-toggle"', () => {
-    const dropdownMenu = render(
-      <DropdownMenu label="toggle">
-        <DropdownMenuItem>Item 1</DropdownMenuItem>
-      </DropdownMenu>
-    );
+  test('renders a button with class "dropdown-toggle"', async () => {
+    let dropdownMenu;
+    await act(async () => {
+      dropdownMenu = render(
+        <DropdownMenu label="toggle">
+          <DropdownMenuItem>Item 1</DropdownMenuItem>
+        </DropdownMenu>
+      );
+    });
 
     expect(dropdownMenu.getByText('toggle')).toHaveClass('dropdown-toggle');
   });
 
-  test('renders the children in order inside the ".dropdown-menu"', () => {
-    const dropdownMenu = render(
-      <DropdownMenu label="toggle">
-        <DropdownMenuItem>Item 1</DropdownMenuItem>
-        <DropdownMenuItem>Test item 2</DropdownMenuItem>
-      </DropdownMenu>
-    );
+  test('renders the children in order inside the ".dropdown-menu"', async () => {
+    let dropdownMenu;
+    await act(async () => {
+      dropdownMenu = render(
+        <DropdownMenu label="toggle">
+          <DropdownMenuItem>Item 1</DropdownMenuItem>
+          <DropdownMenuItem>Test item 2</DropdownMenuItem>
+        </DropdownMenu>
+      );
+    });
 
     expect(
       dropdownMenu.container.querySelector('.dropdown-menu').children[0]
@@ -51,34 +41,41 @@ describe('DropdownMenu', () => {
     ).toHaveTextContent('Test item 2');
   });
 
-  test('clicking the toggle toggles the menu', () => {
-    const dropdownMenu = render(
-      <DropdownMenu label="toggle">
-        <DropdownMenuItem>Item 1</DropdownMenuItem>
-      </DropdownMenu>
-    );
+  test('clicking the toggle toggles the menu', async () => {
+    const user = userEvent.setup();
+    let dropdownMenu;
+    await act(async () => {
+      dropdownMenu = render(
+        <DropdownMenu label="toggle">
+          <DropdownMenuItem>Item 1</DropdownMenuItem>
+        </DropdownMenu>
+      );
+    });
 
     expect(
       dropdownMenu.container.querySelector('.dropdown-menu')
     ).not.toHaveClass('show');
 
-    userEvent.click(dropdownMenu.getByText('toggle'));
+    await user.click(dropdownMenu.getByText('toggle'));
     expect(dropdownMenu.container.querySelector('.dropdown-menu')).toHaveClass(
       'show'
     );
 
-    userEvent.click(dropdownMenu.getByText('toggle'));
+    await user.click(dropdownMenu.getByText('toggle'));
     expect(
       dropdownMenu.container.querySelector('.dropdown-menu')
     ).not.toHaveClass('show');
   });
 
-  test('renders toggle as nav_item if "nav" is true', () => {
-    const dropdownMenu = render(
-      <DropdownMenu label="toggle" nav>
-        DropdownMenu content
-      </DropdownMenu>
-    );
+  test('renders toggle as nav_item if "nav" is true', async () => {
+    let dropdownMenu;
+    await act(async () => {
+      dropdownMenu = render(
+        <DropdownMenu label="toggle" nav>
+          DropdownMenu content
+        </DropdownMenu>
+      );
+    });
 
     const dropdownToggle = dropdownMenu.container.querySelector('.dropdown');
     expect(dropdownToggle).toHaveClass('nav-item');
@@ -86,12 +83,16 @@ describe('DropdownMenu', () => {
     expect(dropdownToggle.firstChild).toHaveClass('nav-link');
   });
 
-  test("clicking the toggle doesn't toggle the menu if 'disabled' is set", () => {
-    const dropdownMenu = render(
-      <DropdownMenu label="toggle" disabled>
-        <DropdownMenuItem>Item 1</DropdownMenuItem>
-      </DropdownMenu>
-    );
+  test("clicking the toggle doesn't toggle the menu if 'disabled' is set", async () => {
+    const user = userEvent.setup();
+    let dropdownMenu;
+    await act(async () => {
+      dropdownMenu = render(
+        <DropdownMenu label="toggle" disabled>
+          <DropdownMenuItem>Item 1</DropdownMenuItem>
+        </DropdownMenu>
+      );
+    });
 
     expect(dropdownMenu.getByText('toggle')).toHaveAttribute('disabled');
 
@@ -99,38 +100,46 @@ describe('DropdownMenu', () => {
       dropdownMenu.container.querySelector('.dropdown-menu')
     ).not.toHaveClass('show');
 
-    userEvent.click(dropdownMenu.getByText('toggle'));
+    await user.click(dropdownMenu.getByText('toggle'));
     expect(
       dropdownMenu.container.querySelector('.dropdown-menu')
     ).not.toHaveClass('show');
   });
 
-  test('applies additional CSS classes when props are set', () => {
+  test('applies additional CSS classes when props are set', async () => {
     // dropdownMenu sizes
-    const dropdownMenuSm = render(
-      <DropdownMenu size="sm" label="toggle small">
-        <DropdownMenuItem>Item 1</DropdownMenuItem>
-      </DropdownMenu>
-    );
-    const dropdownMenuLg = render(
-      <DropdownMenu size="lg" label="toggle large">
-        <DropdownMenuItem>Item 1</DropdownMenuItem>
-      </DropdownMenu>
-    );
+    let dropdownMenuSm;
+    let dropdownMenuLg;
+    await act(async () => {
+      dropdownMenuSm = render(
+        <DropdownMenu size="sm" label="toggle small">
+          <DropdownMenuItem>Item 1</DropdownMenuItem>
+        </DropdownMenu>
+      );
+      dropdownMenuLg = render(
+        <DropdownMenu size="lg" label="toggle large">
+          <DropdownMenuItem>Item 1</DropdownMenuItem>
+        </DropdownMenu>
+      );
+    });
 
     expect(dropdownMenuSm.getByText('toggle small')).toHaveClass('btn-sm');
     expect(dropdownMenuLg.getByText('toggle large')).toHaveClass('btn-lg');
 
-    const dropdownMenuSuccess = render(
-      <DropdownMenu color="success" label="toggle success">
-        <DropdownMenuItem>Item 1</DropdownMenuItem>
-      </DropdownMenu>
-    );
-    const dropdownMenuDanger = render(
-      <DropdownMenu color="danger" label="toggle danger">
-        <DropdownMenuItem>Item 1</DropdownMenuItem>
-      </DropdownMenu>
-    );
+    let dropdownMenuSuccess;
+    let dropdownMenuDanger;
+    await act(async () => {
+      dropdownMenuSuccess = render(
+        <DropdownMenu color="success" label="toggle success">
+          <DropdownMenuItem>Item 1</DropdownMenuItem>
+        </DropdownMenu>
+      );
+      dropdownMenuDanger = render(
+        <DropdownMenu color="danger" label="toggle danger">
+          <DropdownMenuItem>Item 1</DropdownMenuItem>
+        </DropdownMenu>
+      );
+    });
 
     expect(dropdownMenuSuccess.getByText('toggle success')).toHaveClass(
       'btn-success'
diff --git a/src/components/dropdownmenu/__tests__/DropdownMenuItem.test.js b/src/components/dropdownmenu/__tests__/DropdownMenuItem.test.js
index 704d6a340..1e2b33fa5 100644
--- a/src/components/dropdownmenu/__tests__/DropdownMenuItem.test.js
+++ b/src/components/dropdownmenu/__tests__/DropdownMenuItem.test.js
@@ -9,22 +9,6 @@ import DropdownMenu from '../DropdownMenu';
 import DropdownMenuItem from '../DropdownMenuItem';
 
 describe('DropdownMenuItem', () => {
-  // this is just a little hack to silence a warning that we'll get until we
-  // upgrade to 16.9. See also: https://github.com/facebook/react/pull/14853
-  const originalError = console.error;
-  beforeAll(() => {
-    console.error = (...args) => {
-      if (/Warning.*not wrapped in act/.test(args[0])) {
-        return;
-      }
-      originalError.call(console, ...args);
-    };
-  });
-
-  afterAll(() => {
-    console.error = originalError;
-  });
-
   test('renders a button with class "dropdown-menu-item"', () => {
     const dropdownMenuItem = render(<DropdownMenuItem />);
 
@@ -33,7 +17,8 @@ describe('DropdownMenuItem', () => {
     ).not.toBe(null);
   });
 
-  test('relative links are internal by default', () => {
+  test('relative links are internal by default', async () => {
+    const user = userEvent.setup();
     const dropdownMenuItem = render(
       <DropdownMenuItem href="/relative">Clickable</DropdownMenuItem>
     );
@@ -43,11 +28,13 @@ describe('DropdownMenuItem', () => {
     window.scrollTo = jest.fn();
 
     expect(mockEventListener.mock.calls).toHaveLength(0);
-    userEvent.click(dropdownMenuItem.getByText('Clickable'));
+
+    await user.click(dropdownMenuItem.getByText('Clickable'));
     expect(mockEventListener.mock.calls).toHaveLength(1);
   });
 
-  test('relative links are external with external_link=true', () => {
+  test('relative links are external with external_link=true', async () => {
+    const user = userEvent.setup();
     const dropdownMenuItem = render(
       <DropdownMenuItem href="/relative" external_link>
         Clickable
@@ -59,7 +46,7 @@ describe('DropdownMenuItem', () => {
     window.scrollTo = jest.fn();
 
     expect(mockEventListener.mock.calls).toHaveLength(0);
-    userEvent.click(dropdownMenuItem.getByText('Clickable'));
+    await user.click(dropdownMenuItem.getByText('Clickable'));
     expect(mockEventListener.mock.calls).toHaveLength(0);
   });
 
@@ -73,7 +60,8 @@ describe('DropdownMenuItem', () => {
     );
   });
 
-  test('tracks clicks with n_clicks', () => {
+  test('tracks clicks with n_clicks', async () => {
+    const user = userEvent.setup();
     const mockSetProps = jest.fn();
     const dropdownMenuItem = render(
       <DropdownMenu>
@@ -83,13 +71,14 @@ describe('DropdownMenuItem', () => {
 
     expect(mockSetProps.mock.calls).toHaveLength(0);
 
-    userEvent.click(dropdownMenuItem.getByText('Clickable'));
+    await user.click(dropdownMenuItem.getByText('Clickable'));
 
     expect(mockSetProps.mock.calls).toHaveLength(1);
     expect(mockSetProps.mock.calls[0][0].n_clicks).toBe(1);
   });
 
-  test("doesn't track clicks if disabled", () => {
+  test("doesn't track clicks if disabled", async () => {
+    const user = userEvent.setup();
     const mockSetProps = jest.fn();
     const dropdownMenuItem = render(
       <DropdownMenu>
@@ -100,45 +89,46 @@ describe('DropdownMenuItem', () => {
     );
 
     expect(dropdownMenuItem.getByText('Clickable')).toHaveClass('disabled');
-
     expect(mockSetProps.mock.calls).toHaveLength(0);
 
-    userEvent.click(dropdownMenuItem.getByText('Clickable'));
+    await user.click(dropdownMenuItem.getByText('Clickable'));
 
     expect(mockSetProps.mock.calls).toHaveLength(0);
   });
 
-  test('dismisses parent DropdownMenu when clicked', () => {
+  test('dismisses parent DropdownMenu when clicked', async () => {
+    const user = userEvent.setup();
     const dropdownMenu = render(
       <DropdownMenu label="toggle">
         <DropdownMenuItem>Clickable</DropdownMenuItem>
       </DropdownMenu>
     );
 
-    userEvent.click(dropdownMenu.getByText('toggle'));
-
+    await user.click(dropdownMenu.getByText('toggle'));
     expect(dropdownMenu.container.querySelector('.dropdown-menu')).toHaveClass(
       'show'
     );
-    userEvent.click(dropdownMenu.getByText('Clickable'));
+
+    await user.click(dropdownMenu.getByText('Clickable'));
     expect(
       dropdownMenu.container.querySelector('.dropdown-menu')
     ).not.toHaveClass('show');
   });
 
-  test("doesn't dismiss parent DropdownMenu when clicked if toggle=false", () => {
+  test("doesn't dismiss parent DropdownMenu when clicked if toggle=false", async () => {
+    const user = userEvent.setup();
     const dropdownMenu = render(
       <DropdownMenu label="toggle">
         <DropdownMenuItem toggle={false}>Clickable</DropdownMenuItem>
       </DropdownMenu>
     );
 
-    userEvent.click(dropdownMenu.getByText('toggle'));
+    await user.click(dropdownMenu.getByText('toggle'));
     expect(dropdownMenu.container.querySelector('.dropdown-menu')).toHaveClass(
       'show'
     );
 
-    userEvent.click(dropdownMenu.getByText('Clickable'));
+    await user.click(dropdownMenu.getByText('Clickable'));
     expect(dropdownMenu.container.querySelector('.dropdown-menu')).toHaveClass(
       'show'
     );
diff --git a/src/components/fade/__tests__/Fade.test.js b/src/components/fade/__tests__/Fade.test.js
index 3b4bd5827..d39911472 100644
--- a/src/components/fade/__tests__/Fade.test.js
+++ b/src/components/fade/__tests__/Fade.test.js
@@ -3,59 +3,76 @@
  */
 
 import React from 'react';
-import {render} from '@testing-library/react';
+import {act, render, waitFor} from '@testing-library/react';
 import Fade from '../Fade';
 
 jest.useFakeTimers();
 
 describe('Fade', () => {
-  test('renders a div with class "fade"', () => {
-    const fade = render(<Fade>Some fade content</Fade>);
+  test('renders a div with class "fade"', async () => {
+    let fade;
+    await act(async () => {
+      fade = render(<Fade>Some fade content</Fade>);
+    });
 
     expect(fade.container.querySelector('div.fade')).not.toBe(null);
   });
 
-  test('renders its content', () => {
-    const fade = render(<Fade>Some fade content</Fade>);
+  test('renders its content', async () => {
+    let fade;
+    await act(async () => {
+      fade = render(<Fade>Some fade content</Fade>);
+    });
 
     expect(fade.container).toHaveTextContent('Some fade content');
   });
 
-  test('can be faded with "is_in"', () => {
-    const fade = render(<Fade is_in={false}>Some fade content</Fade>);
+  test('can be faded with "is_in"', async () => {
+    let fade;
+    await act(async () => {
+      fade = render(<Fade is_in={false}>Some fade content</Fade>);
+    });
     expect(fade.container.querySelector('div.fade.show')).toBe(null);
 
-    fade.rerender(<Fade is_in>Some fade content</Fade>);
-    jest.runAllTimers();
+    await act(async () => fade.rerender(<Fade is_in>Some fade content</Fade>));
+    act(() => jest.runAllTimers());
 
     expect(fade.container.querySelector('div.fade.show')).not.toBe(null);
   });
 
-  test('sets visibility hidden when is_in is false and not transitioning', () => {
-    const fade = render(
-      <Fade is_in={false} timeout={1000}>
-        Some fade content
-      </Fade>
-    );
+  test('sets visibility hidden when is_in is false and not transitioning', async () => {
+    let fade;
+    await act(async () => {
+      fade = render(
+        <Fade is_in={false} timeout={1000}>
+          Some fade content
+        </Fade>
+      );
+    });
 
     expect(fade.container.firstChild).toHaveStyle('visibility:hidden');
-
-    fade.rerender(
-      <Fade is_in timeout={1000}>
-        Some fade content
-      </Fade>
+    await act(async () =>
+      fade.rerender(
+        <Fade is_in timeout={1000}>
+          Some fade content
+        </Fade>
+      )
     );
     expect(fade.container.firstChild).not.toHaveStyle('visibility:hidden');
-    jest.runAllTimers();
+    act(() => jest.runAllTimers());
     expect(fade.container.firstChild).not.toHaveStyle('visibility:hidden');
 
-    fade.rerender(
-      <Fade is_in={false} timeout={1000}>
-        Some fade content
-      </Fade>
+    await act(async () =>
+      fade.rerender(
+        <Fade is_in={false} timeout={1000}>
+          Some fade content
+        </Fade>
+      )
     );
     expect(fade.container.firstChild).not.toHaveStyle('visibility:hidden');
-    jest.runAllTimers();
-    expect(fade.container.firstChild).toHaveStyle('visibility:hidden');
+    act(() => jest.runAllTimers());
+    await waitFor(() =>
+      expect(fade.container.firstChild).toHaveStyle('visibility:hidden')
+    );
   });
 });
diff --git a/src/components/form/Label.js b/src/components/form/Label.js
index 53624a5a9..7c686e2d3 100644
--- a/src/components/form/Label.js
+++ b/src/components/form/Label.js
@@ -11,8 +11,6 @@ const alignMap = {
   end: 'align-self-end'
 };
 
-const colWidths = ['width', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
-
 /**
  * A component for adding labels to inputs in forms with added sizing controls.
  */
@@ -39,7 +37,7 @@ const Label = ({
   const isBootstrapColor = bootstrapTextColors.has(color);
 
   // check if column width has been specified, use alignment attribute if so
-  const cols = colWidths.filter(colWidth => props[colWidth]);
+  const cols = [width, xs, sm, md, lg, xl, xxl].filter(colWidth => colWidth);
 
   [width, xs, sm, md, lg, xl, xxl].forEach(breakpoint => {
     if (typeof breakpoint === 'object' && breakpoint !== null) {
diff --git a/src/components/input/Checklist.js b/src/components/input/Checklist.js
index 5a787baf7..cbb765eea 100644
--- a/src/components/input/Checklist.js
+++ b/src/components/input/Checklist.js
@@ -43,8 +43,6 @@ const Checklist = ({
   options = []
 }) => {
   const listItem = option => {
-    const {} = props;
-
     const checked = includes(option.value, value);
 
     const mergedInputStyle = checked
diff --git a/src/components/input/Input.js b/src/components/input/Input.js
index 6ac341012..19b5e4689 100644
--- a/src/components/input/Input.js
+++ b/src/components/input/Input.js
@@ -175,6 +175,7 @@ const Input = ({
       readOnly={readonly}
       tabIndex={tabindex || tabIndex}
       size={html_size}
+      step={step}
     />
   );
 };
diff --git a/src/components/input/RadioItems.js b/src/components/input/RadioItems.js
index 5313b9348..1d62f27b3 100644
--- a/src/components/input/RadioItems.js
+++ b/src/components/input/RadioItems.js
@@ -37,12 +37,11 @@ const RadioItems = ({
   label_checked_style,
   setProps,
   inline,
+  value,
   switch: switches,
   options = []
 }) => {
   const listItem = option => {
-    const {} = props;
-
     const checked = option.value === value;
 
     const mergedLabelStyle = checked
diff --git a/src/components/input/Select.js b/src/components/input/Select.js
index c0623c7f0..d85e800e3 100644
--- a/src/components/input/Select.js
+++ b/src/components/input/Select.js
@@ -41,10 +41,10 @@ const Select = ({
       value={value || ''}
     >
       <option value="" disabled hidden>
-        {props.placeholder}
+        {placeholder}
       </option>
-      {props.options &&
-        sanitizeOptions(props.options).map(option => (
+      {options &&
+        sanitizeOptions(options).map(option => (
           <option
             key={option.value}
             value={option.value}
diff --git a/src/components/input/Textarea.js b/src/components/input/Textarea.js
index 031efaa1a..b8c803e01 100644
--- a/src/components/input/Textarea.js
+++ b/src/components/input/Textarea.js
@@ -451,7 +451,7 @@ Textarea.propTypes = {
    * If debounce is a number, the value will be sent to the server only after the user
    * has stopped typing for that number of milliseconds
    */
-  debounce: PropTypes.bool,
+  debounce: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
 
   /**
    * Object that holds the loading state object coming from dash-renderer
diff --git a/src/components/input/__tests__/Checkbox.test.js b/src/components/input/__tests__/Checkbox.test.js
index 01d71ea35..4e71706d1 100644
--- a/src/components/input/__tests__/Checkbox.test.js
+++ b/src/components/input/__tests__/Checkbox.test.js
@@ -18,22 +18,23 @@ describe('Checkbox', () => {
     expect(input).toHaveAttribute('type', 'checkbox');
   });
 
-  test('dispatches updates to setProps if set', () => {
+  test('dispatches updates to setProps if set', async () => {
+    const user = userEvent.setup();
     const mockSetProps = jest.fn();
     const {
       container: {firstChild: checkbox},
       rerender
     } = render(<Checkbox setProps={mockSetProps} />);
 
-    const [input, label] = checkbox.children;
-    userEvent.click(input);
+    const [input, _] = checkbox.children;
+    await user.click(input);
     expect(mockSetProps.mock.calls).toHaveLength(1);
 
     // props passed to setProps get passed back to the component by Dash renderer
     const arg1 = mockSetProps.mock.calls[0][0];
     rerender(<Checkbox setProps={mockSetProps} {...arg1} />);
 
-    userEvent.click(input);
+    await user.click(input);
     expect(mockSetProps.mock.calls).toHaveLength(2);
 
     const arg2 = mockSetProps.mock.calls[1][0];
diff --git a/src/components/input/__tests__/Checklist.test.js b/src/components/input/__tests__/Checklist.test.js
index 98e70d3f5..88033819c 100644
--- a/src/components/input/__tests__/Checklist.test.js
+++ b/src/components/input/__tests__/Checklist.test.js
@@ -51,7 +51,8 @@ describe('Checklist', () => {
     expect(input3.disabled).toEqual(true);
   });
 
-  test('clicking a checkbox toggles its status unless disabled', () => {
+  test('clicking a checkbox toggles its status unless disabled', async () => {
+    const user = userEvent.setup();
     const [child1, child2, child3] = checklist.container.firstChild.children;
     const input1 = child1.firstChild;
     const input2 = child2.firstChild;
@@ -61,7 +62,7 @@ describe('Checklist', () => {
     expect(input2.checked).toEqual(false);
     expect(input3.checked).toEqual(false);
 
-    userEvent.click(input1);
+    await user.click(input1);
 
     expect(mockSetProps.mock.calls).toHaveLength(1);
     const [{value: value1}] = mockSetProps.mock.calls[0];
@@ -84,7 +85,7 @@ describe('Checklist', () => {
     expect(input2.checked).toEqual(false);
     expect(input3.checked).toEqual(false);
 
-    userEvent.click(input2);
+    await user.click(input2);
 
     expect(mockSetProps.mock.calls).toHaveLength(2);
     const [{value: value2}] = mockSetProps.mock.calls[1];
@@ -107,7 +108,7 @@ describe('Checklist', () => {
     expect(input2.checked).toEqual(true);
     expect(input3.checked).toEqual(false);
 
-    userEvent.click(input3);
+    await user.click(input3);
 
     expect(mockSetProps.mock.calls).toHaveLength(2);
     expect(input1.checked).toEqual(true);
@@ -115,7 +116,9 @@ describe('Checklist', () => {
     expect(input3.checked).toEqual(false);
   });
 
-  test('clicking a label toggles its associated checkbox status', () => {
+  test('clicking a label toggles its associated checkbox status', async () => {
+    const user = userEvent.setup();
+
     const label1 = checklist.getByText('Item 1');
     const label2 = checklist.getByText('Item 2');
     const label3 = checklist.getByText('Disabled item');
@@ -129,7 +132,7 @@ describe('Checklist', () => {
     expect(input2.checked).toEqual(false);
     expect(input3.checked).toEqual(false);
 
-    userEvent.click(label1);
+    await user.click(label1);
 
     expect(mockSetProps.mock.calls).toHaveLength(1);
     const [{value: value1}] = mockSetProps.mock.calls[0];
@@ -152,7 +155,7 @@ describe('Checklist', () => {
     expect(input2.checked).toEqual(false);
     expect(input3.checked).toEqual(false);
 
-    userEvent.click(label2);
+    await user.click(label2);
 
     expect(mockSetProps.mock.calls).toHaveLength(2);
     const [{value: value2}] = mockSetProps.mock.calls[1];
@@ -175,7 +178,7 @@ describe('Checklist', () => {
     expect(input2.checked).toEqual(true);
     expect(input3.checked).toEqual(false);
 
-    userEvent.click(label3);
+    await user.click(label3);
 
     expect(mockSetProps.mock.calls).toHaveLength(2);
     expect(input1.checked).toEqual(true);
diff --git a/src/components/input/__tests__/Input.test.js b/src/components/input/__tests__/Input.test.js
index b5f742f9e..93f06de0a 100644
--- a/src/components/input/__tests__/Input.test.js
+++ b/src/components/input/__tests__/Input.test.js
@@ -101,8 +101,9 @@ describe('Input', () => {
       });
     });
 
-    test('dispatches update for each typed character', () => {
-      userEvent.type(inputElement, 'abc');
+    test('dispatches update for each typed character', async () => {
+      const user = userEvent.setup();
+      await user.type(inputElement, 'abc');
 
       expect(mockSetProps.mock.calls).toHaveLength(3);
 
@@ -262,7 +263,10 @@ describe('Input', () => {
     });
 
     test('dispatches update for each typed character', () => {
-      userEvent.type(inputElement, '-1e4');
+      fireEvent.input(inputElement, {target: {value: '-'}});
+      fireEvent.input(inputElement, {target: {value: '-1'}});
+      fireEvent.input(inputElement, {target: {value: '-1e'}});
+      fireEvent.input(inputElement, {target: {value: '-1e4'}});
 
       expect(inputElement).toHaveValue(-10000);
       expect(mockSetProps.mock.calls).toHaveLength(2);
@@ -298,7 +302,12 @@ describe('Input', () => {
         <Input type="number" min={0} value={0} setProps={mockSetProps} />
       );
 
-      userEvent.type(input, '-100');
+      // can't use userEvent.type here because it hangs when trying to enter invalid
+      // inputs, instead we simulate typing additional invalid characters with multiple
+      // fireEvent.change calls
+      fireEvent.change(input, {target: {value: '0-'}});
+      fireEvent.change(input, {target: {value: '0-1'}});
+      fireEvent.change(input, {target: {value: '0-12'}});
 
       expect(mockSetProps.mock.calls).toHaveLength(1);
       expect(mockSetProps.mock.calls[0][0]).toEqual({value: NaN});
diff --git a/src/components/input/__tests__/RadioButton.test.js b/src/components/input/__tests__/RadioButton.test.js
index 875704efc..4ccac19bd 100644
--- a/src/components/input/__tests__/RadioButton.test.js
+++ b/src/components/input/__tests__/RadioButton.test.js
@@ -33,7 +33,8 @@ describe('RadioButton', () => {
     expect(input.checked).toEqual(false);
   });
 
-  test('dispatches updates to setProps if set', () => {
+  test('dispatches updates to setProps if set', async () => {
+    const user = userEvent.setup();
     const mockSetProps = jest.fn();
     const {
       container: {firstChild: radio},
@@ -41,14 +42,14 @@ describe('RadioButton', () => {
     } = render(<RadioButton setProps={mockSetProps} />);
 
     const [input, label] = radio.children;
-    userEvent.click(input);
+    await user.click(input);
     expect(mockSetProps.mock.calls).toHaveLength(1);
 
     // props passed to setProps get passed back to the component by Dash renderer
     const arg1 = mockSetProps.mock.calls[0][0];
     rerender(<RadioButton setProps={mockSetProps} {...arg1} />);
 
-    userEvent.click(input);
+    await user.click(input);
     expect(mockSetProps.mock.calls).toHaveLength(2);
 
     const arg2 = mockSetProps.mock.calls[1][0];
diff --git a/src/components/input/__tests__/RadioItems.test.js b/src/components/input/__tests__/RadioItems.test.js
index bf881499d..9ece4558e 100644
--- a/src/components/input/__tests__/RadioItems.test.js
+++ b/src/components/input/__tests__/RadioItems.test.js
@@ -51,7 +51,9 @@ describe('RadioItems', () => {
     expect(input3.disabled).toEqual(true);
   });
 
-  test('clicking a radio button toggles its status unless disabled', () => {
+  test('clicking a radio button toggles its status unless disabled', async () => {
+    const user = userEvent.setup();
+
     const [child1, child2, child3] = radioItems.container.firstChild.children;
     const input1 = child1.firstChild;
     const input2 = child2.firstChild;
@@ -61,7 +63,7 @@ describe('RadioItems', () => {
     expect(input2.checked).toEqual(false);
     expect(input3.checked).toEqual(false);
 
-    userEvent.click(input1);
+    await user.click(input1);
 
     expect(mockSetProps.mock.calls).toHaveLength(1);
     const [{value: value1}] = mockSetProps.mock.calls[0];
@@ -84,7 +86,7 @@ describe('RadioItems', () => {
     expect(input2.checked).toEqual(false);
     expect(input3.checked).toEqual(false);
 
-    userEvent.click(input2);
+    await user.click(input2);
 
     expect(mockSetProps.mock.calls).toHaveLength(2);
     const [{value: value2}] = mockSetProps.mock.calls[1];
@@ -107,7 +109,7 @@ describe('RadioItems', () => {
     expect(input2.checked).toEqual(true);
     expect(input3.checked).toEqual(false);
 
-    userEvent.click(input3);
+    await user.click(input3);
 
     expect(mockSetProps.mock.calls).toHaveLength(2);
     expect(input1.checked).toEqual(false);
@@ -115,7 +117,9 @@ describe('RadioItems', () => {
     expect(input3.checked).toEqual(false);
   });
 
-  test('clicking a label toggles its associated radio status', () => {
+  test('clicking a label toggles its associated radio status', async () => {
+    const user = userEvent.setup();
+
     const label1 = radioItems.getByText('Item 1');
     const label2 = radioItems.getByText('Item 2');
     const label3 = radioItems.getByText('Disabled item');
@@ -129,7 +133,7 @@ describe('RadioItems', () => {
     expect(input2.checked).toEqual(false);
     expect(input3.checked).toEqual(false);
 
-    userEvent.click(label1);
+    await user.click(label1);
 
     expect(mockSetProps.mock.calls).toHaveLength(1);
     const [{value: value1}] = mockSetProps.mock.calls[0];
@@ -152,7 +156,7 @@ describe('RadioItems', () => {
     expect(input2.checked).toEqual(false);
     expect(input3.checked).toEqual(false);
 
-    userEvent.click(label2);
+    await user.click(label2);
 
     expect(mockSetProps.mock.calls).toHaveLength(2);
     const [{value: value2}] = mockSetProps.mock.calls[1];
@@ -175,7 +179,7 @@ describe('RadioItems', () => {
     expect(input2.checked).toEqual(true);
     expect(input3.checked).toEqual(false);
 
-    userEvent.click(label3);
+    await user.click(label3);
 
     expect(mockSetProps.mock.calls).toHaveLength(2);
     expect(input1.checked).toEqual(false);
diff --git a/src/components/input/__tests__/Select.test.js b/src/components/input/__tests__/Select.test.js
index 276da1d34..fd71e932e 100644
--- a/src/components/input/__tests__/Select.test.js
+++ b/src/components/input/__tests__/Select.test.js
@@ -68,7 +68,8 @@ describe('Select', () => {
     expect(invalidSelect.container.firstChild).toHaveClass('is-invalid');
   });
 
-  test('dispatches value when selection is made and setProps is set', () => {
+  test('dispatches value when selection is made and setProps is set', async () => {
+    const user = userEvent.setup();
     const mockSetProps = jest.fn();
     const {
       container: {firstChild: select},
@@ -86,7 +87,7 @@ describe('Select', () => {
 
     expect(select).not.toHaveValue();
 
-    userEvent.selectOptions(select, '2');
+    await user.selectOptions(select, '2');
 
     expect(mockSetProps.mock.calls).toHaveLength(1);
     const [[{value}]] = mockSetProps.mock.calls;
diff --git a/src/components/input/__tests__/Switch.test.js b/src/components/input/__tests__/Switch.test.js
index 5f717d04f..a10ea9a7c 100644
--- a/src/components/input/__tests__/Switch.test.js
+++ b/src/components/input/__tests__/Switch.test.js
@@ -20,22 +20,23 @@ describe('Switch', () => {
     expect(input).toHaveAttribute('type', 'checkbox');
   });
 
-  test('dispatches updates to setProps if set', () => {
+  test('dispatches updates to setProps if set', async () => {
+    const user = userEvent.setup();
     const mockSetProps = jest.fn();
     const {
       container: {firstChild: toggleSwitch},
       rerender
     } = render(<Switch setProps={mockSetProps} />);
 
-    const [input, label] = toggleSwitch.children;
-    userEvent.click(input);
+    const [input, _] = toggleSwitch.children;
+    await user.click(input);
     expect(mockSetProps.mock.calls).toHaveLength(1);
 
     // props passed to setProps get passed back to the component by Dash renderer
     const arg1 = mockSetProps.mock.calls[0][0];
     rerender(<Switch setProps={mockSetProps} {...arg1} />);
 
-    userEvent.click(input);
+    await user.click(input);
     expect(mockSetProps.mock.calls).toHaveLength(2);
 
     const arg2 = mockSetProps.mock.calls[1][0];
diff --git a/src/components/input/__tests__/Textarea.test.js b/src/components/input/__tests__/Textarea.test.js
index abf5c4d29..627d5f10c 100644
--- a/src/components/input/__tests__/Textarea.test.js
+++ b/src/components/input/__tests__/Textarea.test.js
@@ -97,16 +97,18 @@ describe('Textarea', () => {
       textarea = container.firstChild;
     });
 
-    test('tracks changes with "value" prop', () => {
-      userEvent.type(textarea, 'some text');
+    test('tracks changes with "value" prop', async () => {
+      const user = userEvent.setup();
+      await user.type(textarea, 'some text');
       // one setProps call for click, and then 9 characters
       expect(mockSetProps.mock.calls).toHaveLength(10);
       expect(mockSetProps.mock.calls[9][0]).toEqual({value: 'some text'});
       expect(textarea).toHaveValue('some text');
     });
 
-    test('dispatches update for each typed character', () => {
-      userEvent.type(textarea, 'abc');
+    test('dispatches update for each typed character', async () => {
+      const user = userEvent.setup();
+      await user.type(textarea, 'abc');
 
       expect(textarea).toHaveValue('abc');
       expect(mockSetProps.mock.calls).toHaveLength(4);
@@ -171,15 +173,17 @@ describe('Textarea', () => {
         textarea = container.firstChild;
       });
 
-      test("don't call setProps on change if debounce is true", () => {
-        userEvent.type(textarea, 'some text');
+      test("don't call setProps on change if debounce is true", async () => {
+        const user = userEvent.setup();
+        await user.type(textarea, 'some text');
         // one call to setProps for clicking on the textarea
         expect(mockSetProps.mock.calls).toHaveLength(1);
         expect(textarea).toHaveValue('some text');
       });
 
-      test('dispatch value on blur if debounce is true', () => {
-        userEvent.type(textarea, 'some text');
+      test('dispatch value on blur if debounce is true', async () => {
+        const user = userEvent.setup();
+        await user.type(textarea, 'some text');
         const before = Date.now();
         fireEvent.blur(textarea);
         const after = Date.now();
@@ -193,9 +197,11 @@ describe('Textarea', () => {
         expect(value).toEqual('some text');
       });
 
-      test('dispatch value on submit if debounce is true', () => {
+      test('dispatch value on submit if debounce is true', async () => {
+        const user = userEvent.setup();
+
         const before = Date.now();
-        userEvent.type(textarea, 'some text{enter}');
+        await user.type(textarea, 'some text{enter}');
         const after = Date.now();
 
         // one click and one submit
@@ -209,8 +215,9 @@ describe('Textarea', () => {
         expect(value).toEqual('some text\n');
       });
 
-      test('submit not dispatched if shift+enter pressed', () => {
-        userEvent.type(
+      test('submit not dispatched if shift+enter pressed', async () => {
+        const user = userEvent.setup();
+        await user.type(
           textarea,
           'some text{shift>}{enter}{/shift}some more text'
         );
diff --git a/src/components/listgroup/__tests__/ListGroupItem.test.js b/src/components/listgroup/__tests__/ListGroupItem.test.js
index c025a1d52..781c35174 100644
--- a/src/components/listgroup/__tests__/ListGroupItem.test.js
+++ b/src/components/listgroup/__tests__/ListGroupItem.test.js
@@ -52,7 +52,8 @@ describe('ListGroupItem', () => {
     ).toBe(href);
   });
 
-  test('tracks clicks with n_clicks', () => {
+  test('tracks clicks with n_clicks', async () => {
+    const user = userEvent.setup();
     const mockSetProps = jest.fn();
     const listGroupItem = render(
       <ListGroupItem setProps={mockSetProps}>Clickable</ListGroupItem>
@@ -60,13 +61,14 @@ describe('ListGroupItem', () => {
 
     expect(mockSetProps.mock.calls).toHaveLength(0);
 
-    userEvent.click(listGroupItem.getByText('Clickable'));
+    await user.click(listGroupItem.getByText('Clickable'));
 
     expect(mockSetProps.mock.calls).toHaveLength(1);
     expect(mockSetProps.mock.calls[0][0].n_clicks).toBe(1);
   });
 
-  test("doesn't track clicks if disabled", () => {
+  test("doesn't track clicks if disabled", async () => {
+    const user = userEvent.setup();
     const mockSetProps = jest.fn();
     const listGroupItem = render(
       <ListGroupItem disabled setProps={mockSetProps}>
@@ -78,12 +80,14 @@ describe('ListGroupItem', () => {
 
     expect(mockSetProps.mock.calls).toHaveLength(0);
 
-    userEvent.click(listGroupItem.getByText('Clickable'));
+    await user.click(listGroupItem.getByText('Clickable'));
 
     expect(mockSetProps.mock.calls).toHaveLength(0);
   });
 
-  test('relative links are internal by default', () => {
+  test('relative links are internal by default', async () => {
+    const user = userEvent.setup();
+
     const listGroupItem = render(
       <ListGroupItem href="/relative">Clickable</ListGroupItem>
     );
@@ -93,11 +97,12 @@ describe('ListGroupItem', () => {
     window.scrollTo = jest.fn();
 
     expect(mockEventListener.mock.calls).toHaveLength(0);
-    userEvent.click(listGroupItem.getByText('Clickable'));
+    await user.click(listGroupItem.getByText('Clickable'));
     expect(mockEventListener.mock.calls).toHaveLength(1);
   });
 
-  test('relative links are external with external_link=true', () => {
+  test('relative links are external with external_link=true', async () => {
+    const user = userEvent.setup();
     const listGroupItem = render(
       <ListGroupItem href="/relative" external_link>
         Clickable
@@ -109,7 +114,7 @@ describe('ListGroupItem', () => {
     window.scrollTo = jest.fn();
 
     expect(mockEventListener.mock.calls).toHaveLength(0);
-    userEvent.click(listGroupItem.getByText('Clickable'));
+    await user.click(listGroupItem.getByText('Clickable'));
     expect(mockEventListener.mock.calls).toHaveLength(0);
   });
 });
diff --git a/src/components/modal/__tests__/Modal.test.js b/src/components/modal/__tests__/Modal.test.js
index 34b518415..67aa415b2 100644
--- a/src/components/modal/__tests__/Modal.test.js
+++ b/src/components/modal/__tests__/Modal.test.js
@@ -3,10 +3,9 @@
  */
 
 import React from 'react';
-import {render, fireEvent} from '@testing-library/react';
+import {act, render, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import Modal from '../Modal';
-import ModalBody from '../ModalBody';
 
 jest.useFakeTimers();
 
@@ -17,20 +16,20 @@ describe('Modal', () => {
     expect(document.body.querySelector('div.modal')).not.toBe(null);
   });
 
-  test('toggle visibility with "is_open"', () => {
+  test('toggle visibility with "is_open"', async () => {
     const {rerender} = render(<Modal />);
 
     expect(document.body.querySelector('.modal')).toBe(null);
 
-    rerender(<Modal is_open />);
-    jest.runAllTimers();
-
-    expect(document.body.querySelector('.modal')).not.toBe(null);
-
-    rerender(<Modal />);
-    jest.runAllTimers();
+    await act(async () => rerender(<Modal is_open />));
+    await waitFor(async () =>
+      expect(document.body.querySelector('.modal')).not.toBe(null)
+    );
 
-    expect(document.body.querySelector('.modal')).toBe(null);
+    await act(async () => rerender(<Modal />));
+    await waitFor(async () =>
+      expect(document.body.querySelector('.modal')).toBe(null)
+    );
   });
 
   test('renders its content', () => {
@@ -136,19 +135,21 @@ describe('Modal', () => {
   });
 
   describe('backdrop', () => {
-    test('when backdrop is True, clicking will dismiss modal', () => {
+    test('when backdrop is True, clicking will dismiss modal', async () => {
       const mockSetProps = jest.fn();
       const {rerender} = render(<Modal is_open setProps={mockSetProps} />);
 
-      const backdrop = document.body.querySelector('.modal-backdrop');
+      const backdrop = document.querySelector('.modal-backdrop');
       expect(backdrop).not.toBe(null);
 
-      userEvent.click(document.body.querySelector('.modal'));
+      fireEvent.click(backdrop);
 
-      rerender(<Modal {...mockSetProps.mock.calls[0][0]} />);
-      jest.runAllTimers();
-
-      expect(document.body.querySelector('.modal')).toBe(null);
+      await act(async () =>
+        rerender(<Modal {...mockSetProps.mock.calls[0][0]} />)
+      );
+      await waitFor(async () =>
+        expect(document.body.querySelector('.modal')).toBe(null)
+      );
     });
 
     test('when backdrop is False, nothing is rendered', () => {
@@ -164,10 +165,9 @@ describe('Modal', () => {
       const backdrop = document.body.querySelector('.modal-backdrop');
       expect(backdrop).not.toBe(null);
 
-      userEvent.click(document.body.querySelector('.modal'));
+      fireEvent.click(document.body.querySelector('.modal'));
 
       expect(mockSetProps.mock.calls).toHaveLength(0);
-
       expect(document.body.querySelector('.modal')).not.toBe(null);
     });
   });
diff --git a/src/components/nav/NavbarToggler.js b/src/components/nav/NavbarToggler.js
index 328ef4745..8b465d6e5 100644
--- a/src/components/nav/NavbarToggler.js
+++ b/src/components/nav/NavbarToggler.js
@@ -13,13 +13,14 @@ const NavbarToggler = ({
   className,
   class_name,
   n_clicks = 0,
+  setProps,
   ...otherProps
 }) => {
   return (
     <RBNavbarToggle
       onClick={() => {
-        if (props.setProps) {
-          props.setProps({
+        if (setProps) {
+          setProps({
             n_clicks: n_clicks + 1,
             n_clicks_timestamp: Date.now()
           });
diff --git a/src/components/nav/__tests__/NavLink.test.js b/src/components/nav/__tests__/NavLink.test.js
index 0fe7d2595..cc39f4612 100644
--- a/src/components/nav/__tests__/NavLink.test.js
+++ b/src/components/nav/__tests__/NavLink.test.js
@@ -36,7 +36,8 @@ describe('NavLink', () => {
     expect(navLink).toHaveClass('active');
   });
 
-  test('tracks clicks with n_clicks', () => {
+  test('tracks clicks with n_clicks', async () => {
+    const user = userEvent.setup();
     const mockSetProps = jest.fn();
     const navLink = render(
       <NavLink setProps={mockSetProps}>Clickable</NavLink>
@@ -44,13 +45,14 @@ describe('NavLink', () => {
 
     expect(mockSetProps.mock.calls).toHaveLength(0);
 
-    userEvent.click(navLink.getByText('Clickable'));
+    await user.click(navLink.getByText('Clickable'));
 
     expect(mockSetProps.mock.calls).toHaveLength(1);
     expect(mockSetProps.mock.calls[0][0].n_clicks).toBe(1);
   });
 
-  test("doesn't track clicks if disabled", () => {
+  test("doesn't track clicks if disabled", async () => {
+    const user = userEvent.setup();
     const mockSetProps = jest.fn();
     const navLink = render(
       <NavLink setProps={mockSetProps} disabled>
@@ -61,12 +63,13 @@ describe('NavLink', () => {
 
     expect(mockSetProps.mock.calls).toHaveLength(0);
 
-    userEvent.click(navLink.getByText('Clickable'));
+    await user.click(navLink.getByText('Clickable'));
 
     expect(mockSetProps.mock.calls).toHaveLength(0);
   });
 
-  test('relative links are internal by default', () => {
+  test('relative links are internal by default', async () => {
+    const user = userEvent.setup();
     const navLink = render(<NavLink href="/relative">Clickable</NavLink>);
 
     const mockEventListener = jest.fn();
@@ -74,11 +77,12 @@ describe('NavLink', () => {
     window.scrollTo = jest.fn();
 
     expect(mockEventListener.mock.calls).toHaveLength(0);
-    userEvent.click(navLink.getByText('Clickable'));
+    await user.click(navLink.getByText('Clickable'));
     expect(mockEventListener.mock.calls).toHaveLength(1);
   });
 
-  test('relative links are external with external_link=true', () => {
+  test('relative links are external with external_link=true', async () => {
+    const user = userEvent.setup();
     const navLink = render(
       <NavLink href="/relative" external_link>
         Clickable
@@ -90,7 +94,7 @@ describe('NavLink', () => {
     window.scrollTo = jest.fn();
 
     expect(mockEventListener.mock.calls).toHaveLength(0);
-    userEvent.click(navLink.getByText('Clickable'));
+    await user.click(navLink.getByText('Clickable'));
     expect(mockEventListener.mock.calls).toHaveLength(0);
   });
 });
diff --git a/src/components/nav/__tests__/NavbarBrand.test.js b/src/components/nav/__tests__/NavbarBrand.test.js
index 0ef5a25c2..b657b0672 100644
--- a/src/components/nav/__tests__/NavbarBrand.test.js
+++ b/src/components/nav/__tests__/NavbarBrand.test.js
@@ -34,7 +34,8 @@ describe('NavbarBrand', () => {
     expect(navbarBrand.getAttribute('href')).toBe(href);
   });
 
-  test('relative links are internal by default', () => {
+  test('relative links are internal by default', async () => {
+    const user = userEvent.setup();
     const navbarBrand = render(
       <NavbarBrand href="/relative">Clickable</NavbarBrand>
     );
@@ -44,11 +45,12 @@ describe('NavbarBrand', () => {
     window.scrollTo = jest.fn();
 
     expect(mockEventListener.mock.calls).toHaveLength(0);
-    userEvent.click(navbarBrand.getByText('Clickable'));
+    await user.click(navbarBrand.getByText('Clickable'));
     expect(mockEventListener.mock.calls).toHaveLength(1);
   });
 
-  test('relative links are external with external_link=true', () => {
+  test('relative links are external with external_link=true', async () => {
+    const user = userEvent.setup();
     const navbarBrand = render(
       <NavbarBrand href="/relative" external_link>
         Clickable
@@ -60,7 +62,7 @@ describe('NavbarBrand', () => {
     window.scrollTo = jest.fn();
 
     expect(mockEventListener.mock.calls).toHaveLength(0);
-    userEvent.click(navbarBrand.getByText('Clickable'));
+    await user.click(navbarBrand.getByText('Clickable'));
     expect(mockEventListener.mock.calls).toHaveLength(0);
   });
 });
diff --git a/src/components/nav/__tests__/NavbarSimple.test.js b/src/components/nav/__tests__/NavbarSimple.test.js
index 595cd30d4..ce95e1a27 100644
--- a/src/components/nav/__tests__/NavbarSimple.test.js
+++ b/src/components/nav/__tests__/NavbarSimple.test.js
@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import {render} from '@testing-library/react';
+import {act, fireEvent, render, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import NavbarSimple from '../NavbarSimple';
 import NavItem from '../NavItem';
@@ -132,13 +132,13 @@ describe('NavbarSimple', () => {
 
     expect(collapse).not.toHaveClass('show');
 
-    userEvent.click(button);
-    jest.runAllTimers();
+    fireEvent.click(button);
+    act(() => jest.runAllTimers());
 
     expect(collapse).toHaveClass('show');
 
-    userEvent.click(button);
-    jest.runAllTimers();
+    fireEvent.click(button);
+    act(() => jest.runAllTimers());
 
     expect(collapse).not.toHaveClass('show');
   });
diff --git a/src/components/nav/__tests__/NavbarToggler.test.js b/src/components/nav/__tests__/NavbarToggler.test.js
index 2b927a59b..78b5bb203 100644
--- a/src/components/nav/__tests__/NavbarToggler.test.js
+++ b/src/components/nav/__tests__/NavbarToggler.test.js
@@ -22,7 +22,8 @@ describe('NavbarToggler', () => {
     expect(container).toHaveTextContent('Some navbarToggler content');
   });
 
-  test('tracks clicks with n_clicks', () => {
+  test('tracks clicks with n_clicks', async () => {
+    const user = userEvent.setup();
     const mockSetProps = jest.fn();
     const navbarToggler = render(
       <NavbarToggler setProps={mockSetProps}>Clickable</NavbarToggler>
@@ -30,7 +31,7 @@ describe('NavbarToggler', () => {
 
     expect(mockSetProps.mock.calls).toHaveLength(0);
 
-    userEvent.click(navbarToggler.getByText('Clickable'));
+    await user.click(navbarToggler.getByText('Clickable'));
 
     expect(mockSetProps.mock.calls).toHaveLength(1);
     expect(mockSetProps.mock.calls[0][0].n_clicks).toBe(1);
diff --git a/src/components/offcanvas/__tests__/Offcanvas.test.js b/src/components/offcanvas/__tests__/Offcanvas.test.js
index a357555ad..2dab3608b 100644
--- a/src/components/offcanvas/__tests__/Offcanvas.test.js
+++ b/src/components/offcanvas/__tests__/Offcanvas.test.js
@@ -3,8 +3,7 @@
  */
 
 import React from 'react';
-import {render} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import {act, fireEvent, render, waitFor} from '@testing-library/react';
 import Offcanvas from '../Offcanvas';
 
 // https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
@@ -37,7 +36,7 @@ describe('Offcanvas', () => {
     expect(document.body.querySelector('div.offcanvas')).not.toBe(null);
   });
 
-  test('renders the header with class "offcanvas-header"', () => {
+  test('renders the header with class "offcanvas-header"', async () => {
     // Check the offcanvas has a header with a close button by default
     const {rerender} = render(<Offcanvas is_open />);
     expect(document.body.querySelector('div.offcanvas-header')).not.toBe(null);
@@ -47,45 +46,50 @@ describe('Offcanvas', () => {
     ).not.toBe(null);
 
     // Check that the header title renders as expected
-    rerender(<Offcanvas is_open title="Test Title" />);
-    jest.runAllTimers();
-    expect(
-      document.body.querySelector('div.offcanvas-title')
-    ).toHaveTextContent('Test Title');
+    await act(async () => rerender(<Offcanvas is_open title="Test Title" />));
+    await waitFor(async () =>
+      expect(
+        document.body.querySelector('div.offcanvas-title')
+      ).toHaveTextContent('Test Title')
+    );
 
     // Check no header appears when there is no title or close button
-    rerender(<Offcanvas is_open close_button={false} />);
-    jest.runAllTimers();
-    expect(document.body.querySelector('div.offcanvas-header')).toBe(null);
+    await act(async () => rerender(<Offcanvas is_open close_button={false} />));
+    await waitFor(() =>
+      expect(document.body.querySelector('div.offcanvas-header')).toBe(null)
+    );
   });
 
-  test('renders the body with class "offcanvas-body"', () => {
+  test('renders the body with class "offcanvas-body"', async () => {
     // Check the offcanvas has a body
     const {rerender} = render(<Offcanvas is_open />);
     expect(document.body.querySelector('div.offcanvas-body')).not.toBe(null);
 
     // Check that the body content renders as expected
-    rerender(<Offcanvas is_open>Some offcanvas body content</Offcanvas>);
-    jest.runAllTimers();
-    expect(document.body.querySelector('div.offcanvas-body')).toHaveTextContent(
-      'Some offcanvas body content'
+    await act(async () =>
+      rerender(<Offcanvas is_open>Some offcanvas body content</Offcanvas>)
+    );
+    await waitFor(() =>
+      expect(
+        document.body.querySelector('div.offcanvas-body')
+      ).toHaveTextContent('Some offcanvas body content')
     );
   });
 
-  test('toggle visibility with "is_open"', () => {
+  test('toggle visibility with "is_open"', async () => {
     const {rerender} = render(<Offcanvas />);
 
     expect(document.body.querySelector('.offcanvas')).toBe(null);
 
-    rerender(<Offcanvas is_open />);
-    jest.runAllTimers();
-
-    expect(document.body.querySelector('.offcanvas')).not.toBe(null);
-
-    rerender(<Offcanvas />);
-    jest.runAllTimers();
+    await act(async () => await rerender(<Offcanvas is_open />));
+    await waitFor(async () =>
+      expect(document.body.querySelector('.offcanvas')).not.toBe(null)
+    );
 
-    expect(document.body.querySelector('.offcanvas')).toBe(null);
+    await act(async () => rerender(<Offcanvas />));
+    await waitFor(async () =>
+      expect(document.body.querySelector('.offcanvas')).toBe(null)
+    );
   });
 
   test('renders its content', () => {
@@ -108,19 +112,21 @@ describe('Offcanvas', () => {
   });
 
   describe('backdrop', () => {
-    test('when backdrop is True, clicking will dismiss offcanvas', () => {
+    test('when backdrop is True, clicking will dismiss offcanvas', async () => {
       const mockSetProps = jest.fn();
       const {rerender} = render(<Offcanvas is_open setProps={mockSetProps} />);
 
       const backdrop = document.body.querySelector('.offcanvas-backdrop');
       expect(backdrop).not.toBe(null);
 
-      userEvent.click(document.body.querySelector('.offcanvas-backdrop'));
-
-      rerender(<Offcanvas {...mockSetProps.mock.calls[0][0]} />);
-      jest.runAllTimers();
+      fireEvent.click(document.body.querySelector('.offcanvas-backdrop'));
 
-      expect(document.body.querySelector('.offcanvas')).toBe(null);
+      await act(async () =>
+        rerender(<Offcanvas {...mockSetProps.mock.calls[0][0]} />)
+      );
+      await waitFor(async () =>
+        expect(document.body.querySelector('.offcanvas')).toBe(null)
+      );
     });
 
     test('when backdrop is False, nothing is rendered', () => {
@@ -129,17 +135,21 @@ describe('Offcanvas', () => {
       expect(document.body.querySelector('.offcanvas-backdrop')).toBe(null);
     });
 
-    test('when backdrop is "static", a backdrop is rendered, but does not dismiss the offcanvas on click', () => {
+    test('when backdrop is "static", a backdrop is rendered, but does not dismiss the offcanvas on click', async () => {
       const mockSetProps = jest.fn();
       render(<Offcanvas is_open backdrop="static" setProps={mockSetProps} />);
 
       const backdrop = document.body.querySelector('.offcanvas-backdrop');
       expect(backdrop).not.toBe(null);
 
-      userEvent.click(backdrop);
+      fireEvent.click(backdrop);
       expect(mockSetProps.mock.calls).toHaveLength(0);
-
-      expect(document.body.querySelector('.offcanvas')).not.toBe(null);
+      const offcanvas = document.body.querySelector('.offcanvas');
+      await waitFor(async () =>
+        expect(offcanvas).not.toHaveClass('offcanvas-toggling')
+      );
+      expect(offcanvas).not.toBe(null);
+      expect(offcanvas).toHaveClass('show');
     });
   });
 });
diff --git a/src/components/pagination/__tests__/Pagination.test.js b/src/components/pagination/__tests__/Pagination.test.js
index ec834446e..d976ed5cc 100644
--- a/src/components/pagination/__tests__/Pagination.test.js
+++ b/src/components/pagination/__tests__/Pagination.test.js
@@ -44,7 +44,8 @@ describe('Pagination', () => {
     ).toHaveLength(5);
   });
 
-  test('active props work as expected', () => {
+  test('active props work as expected', async () => {
+    const user = userEvent.setup();
     const mockSetProps = jest.fn();
     const pagination = render(
       <Pagination setProps={mockSetProps} active_page={2} max_value={5} />
@@ -56,7 +57,7 @@ describe('Pagination', () => {
     );
 
     // add changes to the active one
-    userEvent.click(
+    await user.click(
       pagination.container
         .querySelector('ul.pagination')
         .lastChild.querySelector('a')
@@ -65,7 +66,8 @@ describe('Pagination', () => {
     expect(mockSetProps.mock.calls[0][0].active_page).toBe(5);
   });
 
-  test('first_last works as expected', () => {
+  test('first_last works as expected', async () => {
+    const user = userEvent.setup();
     const mockSetProps = jest.fn();
 
     const pagination = render(
@@ -90,7 +92,7 @@ describe('Pagination', () => {
     ).toHaveTextContent('Last');
 
     // Check first sets the page correctly
-    userEvent.click(
+    await user.click(
       pagination.container
         .querySelector('ul.pagination')
         .firstChild.querySelector('a')
@@ -98,7 +100,7 @@ describe('Pagination', () => {
     expect(mockSetProps.mock.calls[0][0].active_page).toBe(1);
 
     // Check last sets the page correctly
-    userEvent.click(
+    await user.click(
       pagination.container
         .querySelector('ul.pagination')
         .lastChild.querySelector('a')
@@ -106,7 +108,8 @@ describe('Pagination', () => {
     expect(mockSetProps.mock.calls[1][0].active_page).toBe(5);
   });
 
-  test('previous_next works as expected', () => {
+  test('previous_next works as expected', async () => {
+    const user = userEvent.setup();
     const mockSetProps = jest.fn();
     const pagination = render(
       <Pagination
@@ -130,7 +133,7 @@ describe('Pagination', () => {
     ).toHaveTextContent('Next');
 
     // Check previous sets the page correctly
-    userEvent.click(
+    await user.click(
       pagination.container
         .querySelector('ul.pagination')
         .firstChild.querySelector('a')
@@ -138,7 +141,7 @@ describe('Pagination', () => {
     expect(mockSetProps.mock.calls[0][0].active_page).toBe(2);
 
     // Check next sets the page correctly
-    userEvent.click(
+    await user.click(
       pagination.container
         .querySelector('ul.pagination')
         .lastChild.querySelector('a')
diff --git a/src/components/popover/__tests__/Popover.test.js b/src/components/popover/__tests__/Popover.test.js
index 82b687055..509d1533c 100644
--- a/src/components/popover/__tests__/Popover.test.js
+++ b/src/components/popover/__tests__/Popover.test.js
@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import {render} from '@testing-library/react';
+import {act, render, waitFor} from '@testing-library/react';
 import Popover from '../Popover';
 
 jest.useFakeTimers();
@@ -11,121 +11,118 @@ jest.useFakeTimers();
 // TODO - Add test for offset
 
 describe('Popover', () => {
-  // this is just a little hack to silence a warning that we'll get until we
-  // upgrade to 16.9. See also: https://github.com/facebook/react/pull/14853
-  const originalError = console.error;
-
   let div;
 
   beforeAll(() => {
     div = document.createElement('div');
     div.setAttribute('id', 'test-target');
-
-    // HACK - See above
-    console.error = (...args) => {
-      if (/Warning.*not wrapped in act/.test(args[0])) {
-        return;
-      }
-      originalError.call(console, ...args);
-    };
   });
 
-  // HACK - See above
-  afterAll(() => {
-    console.error = originalError;
-  });
-
-  test('renders a div with class "popover"', () => {
-    render(<Popover target="test-target" is_open />, {
-      container: document.body.appendChild(div)
-    });
-
-    jest.runAllTimers();
-
+  test('renders a div with class "popover"', async () => {
+    await act(async () =>
+      render(<Popover target="test-target" is_open />, {
+        container: document.body.appendChild(div)
+      })
+    );
+    await act(async () => jest.runAllTimers());
     expect(document.body.querySelector('.popover.show')).not.toBe(null);
   });
 
-  test('renders nothing if is_open=false', () => {
-    render(<Popover target="test-target" is_open={false} />, {
-      container: document.body.appendChild(div)
-    });
+  test('renders nothing if is_open=false', async () => {
+    await act(async () =>
+      render(<Popover target="test-target" is_open={false} />, {
+        container: document.body.appendChild(div)
+      })
+    );
 
-    jest.runAllTimers();
+    await act(async () => jest.runAllTimers());
 
     expect(document.body.querySelector('.popover.show')).toBe(null);
   });
 
-  test('renders straight away if is_open=true', () => {
-    render(<Popover target="test-target" is_open={true} />, {
-      container: document.body.appendChild(div)
-    });
+  test('renders straight away if is_open=true', async () => {
+    await act(async () =>
+      render(<Popover target="test-target" is_open={true} />, {
+        container: document.body.appendChild(div)
+      })
+    );
 
-    jest.runAllTimers();
+    await act(async () => jest.runAllTimers());
 
     expect(document.body.querySelector('.popover.show')).not.toBe(null);
   });
 
-  test('renders its content', () => {
-    render(
-      <Popover target="test-target" is_open={true}>
-        Popover content
-      </Popover>,
-      {container: document.body.appendChild(div)}
+  test('renders its content', async () => {
+    await act(async () =>
+      render(
+        <Popover target="test-target" is_open={true}>
+          Popover content
+        </Popover>,
+        {container: document.body.appendChild(div)}
+      )
     );
 
-    jest.runAllTimers();
+    await act(async () => jest.runAllTimers());
 
     expect(document.body.querySelector('.popover')).toHaveTextContent(
       'Popover content'
     );
   });
 
-  test('shows arrow when hide_arrow is not specified', () => {
-    render(<Popover target="test-target" is_open />, {
-      container: document.body.appendChild(div)
-    });
+  test('shows arrow when hide_arrow is not specified', async () => {
+    await act(async () =>
+      render(<Popover target="test-target" is_open />, {
+        container: document.body.appendChild(div)
+      })
+    );
 
-    jest.runAllTimers();
+    await act(async () => jest.runAllTimers());
 
     expect(document.body.querySelector('.popover-arrow')).not.toBe(null);
   });
 
-  test('hides arrow when hide_arrow is true', () => {
-    render(<Popover target="test-target" is_open hide_arrow />, {
-      container: document.body.appendChild(div)
-    });
+  test('hides arrow when hide_arrow is true', async () => {
+    await act(async () =>
+      render(<Popover target="test-target" is_open hide_arrow />, {
+        container: document.body.appendChild(div)
+      })
+    );
 
-    jest.runAllTimers();
+    await act(async () => jest.runAllTimers());
 
     expect(document.body.querySelector('.popover-arrow')).toBe(null);
   });
 
-  test('popover-body automatically added with body', () => {
-    render(
-      <Popover target="test-target" is_open body>
-        Test Text
-      </Popover>,
-      {
-        container: document.body.appendChild(div)
-      }
+  test('popover-body automatically added with body', async () => {
+    await act(async () =>
+      render(
+        <Popover target="test-target" is_open body>
+          Test Text
+        </Popover>,
+        {
+          container: document.body.appendChild(div)
+        }
+      )
     );
 
-    jest.runAllTimers();
+    await act(async () => jest.runAllTimers());
 
     expect(document.body.querySelector('.popover-body')).not.toBe(null);
   });
 
-  test('popover-body not added with body=false', () => {
-    render(
-      <Popover target="test-target" is_open>
-        Test Text
-      </Popover>,
-      {
-        container: document.body.appendChild(div)
-      }
+  test('popover-body not added with body=false', async () => {
+    await act(async () =>
+      render(
+        <Popover target="test-target" is_open>
+          Test Text
+        </Popover>,
+        {
+          container: document.body.appendChild(div)
+        }
+      )
     );
 
-    jest.runAllTimers();
+    await act(async () => jest.runAllTimers());
 
     expect(document.body.querySelector('.popover-body')).toBe(null);
   });
diff --git a/src/components/tabs/__tests__/Tabs.test.js b/src/components/tabs/__tests__/Tabs.test.js
index 42e4507d5..2c1072eaf 100644
--- a/src/components/tabs/__tests__/Tabs.test.js
+++ b/src/components/tabs/__tests__/Tabs.test.js
@@ -53,7 +53,8 @@ describe('Tabs', () => {
 
   // TODO: add test with CardHeader component
 
-  test('tracks most recently clicked tab with "active_tab" prop', () => {
+  test('tracks most recently clicked tab with "active_tab" prop', async () => {
+    const user = userEvent.setup();
     const mockSetProps = jest.fn();
     const {container, getByText, rerender} = render(
       <Tabs setProps={mockSetProps} active_tab="tab-0">
@@ -67,7 +68,7 @@ describe('Tabs', () => {
     expect(nav.children[0].firstChild).toHaveClass('active');
     expect(nav.children[1].firstChild).not.toHaveClass('active');
 
-    userEvent.click(getByText('tab-label-2'));
+    await user.click(getByText('tab-label-2'));
     expect(mockSetProps.mock.calls).toHaveLength(1);
 
     rerender(
diff --git a/src/components/toast/__tests__/Toast.test.js b/src/components/toast/__tests__/Toast.test.js
index 7330940be..13c3a0aac 100644
--- a/src/components/toast/__tests__/Toast.test.js
+++ b/src/components/toast/__tests__/Toast.test.js
@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import {act, render} from '@testing-library/react';
+import {act, fireEvent, render} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import Toast from '../Toast';
 
@@ -79,7 +79,8 @@ describe('Toast', () => {
 
     expect(mockSetProps.mock.calls).toHaveLength(0);
 
-    userEvent.click(toast.container.querySelector('.btn-close'));
+    // userevent isn't happy clicking this for some reason...
+    fireEvent.click(toast.container.querySelector('.btn-close'));
 
     expect(mockSetProps.mock.calls).toHaveLength(1);
     expect(mockSetProps.mock.calls[0][0].n_dismiss).toBe(1);
diff --git a/src/private/Link.js b/src/private/Link.js
index c7271877b..d42bfad04 100644
--- a/src/private/Link.js
+++ b/src/private/Link.js
@@ -71,7 +71,7 @@ class Link extends Component {
       linkTarget,
       href,
       download,
-      external_link = false,
+      external_link,
       ...otherProps
     } = this.props;
     const linkIsExternal = href && isExternalLink(external_link, href);
diff --git a/src/private/OverlayTemplates.js b/src/private/OverlayTemplates.js
index 2145f9baa..0fd039eb0 100644
--- a/src/private/OverlayTemplates.js
+++ b/src/private/OverlayTemplates.js
@@ -20,14 +20,15 @@ const getOverlayDirection = placement => {
 const PopoverTemplate = React.forwardRef(
   (
     {
-      placement,
+      placement = 'right',
       className,
       style,
       children,
       body,
       arrowProps,
-      popper: _,
-      show: _1,
+      hasDoneInitialMeasure,
+      popper,
+      show,
       hideArrow,
       ...props
     },
@@ -36,6 +37,21 @@ const PopoverTemplate = React.forwardRef(
     // Identify the direction and placement
     const [primaryPlacement] = placement?.split('-') || [];
     const bsDirection = getOverlayDirection(primaryPlacement);
+
+    let computedStyle = style;
+    if (show && !hasDoneInitialMeasure) {
+      computedStyle = {
+        ...style,
+        ...{
+          position: popper?.strategy,
+          top: '0',
+          left: '0',
+          opacity: '0',
+          pointerEvents: 'none'
+        }
+      };
+    }
+
     const {handleMouseOverTooltipContent, handleMouseLeaveTooltipContent} =
       useContext(OverlayContext);
 
@@ -43,7 +59,7 @@ const PopoverTemplate = React.forwardRef(
       <div
         ref={ref}
         role="tooltip"
-        style={style}
+        style={computedStyle}
         x-placement={primaryPlacement}
         className={classNames(
           className,
diff --git a/src/private/__tests__/Link.test.js b/src/private/__tests__/Link.test.js
index 1e737ebed..8ec4793a1 100644
--- a/src/private/__tests__/Link.test.js
+++ b/src/private/__tests__/Link.test.js
@@ -20,7 +20,8 @@ describe('Link', () => {
     expect(externalLink.getAttribute('href')).toEqual('https://external.com');
   });
 
-  test('internal click behaviour', () => {
+  test('internal click behaviour', async () => {
+    const user = userEvent.setup();
     // check that default behaviour wasn't prevented by wrapping in a div
     // where we have access to the onClick method
     // https://github.com/testing-library/react-testing-library/issues/572#issuecomment-574804033
@@ -41,7 +42,7 @@ describe('Link', () => {
 
     const pushStateSpy = jest.spyOn(window.history, 'pushState');
 
-    userEvent.click(link.getByText('Clickable'));
+    await user.click(link.getByText('Clickable'));
 
     // default behaviour prevented
     expect(outerOnClick.mock.calls).toHaveLength(1);
@@ -65,7 +66,8 @@ describe('Link', () => {
     expect(pushStateSpy.mock.calls[0]).toEqual([{}, '', '/internal']);
   });
 
-  test('external click behaviour', () => {
+  test('external click behaviour', async () => {
+    const user = userEvent.setup();
     const outerOnClick = jest.fn();
     const link = render(
       <div onClick={e => outerOnClick(e.defaultPrevented)}>
@@ -73,14 +75,15 @@ describe('Link', () => {
       </div>
     );
 
-    userEvent.click(link.getByText('Clickable'));
+    await user.click(link.getByText('Clickable'));
 
     // default link behaviour not prevented
     expect(outerOnClick.mock.calls).toHaveLength(1);
     expect(outerOnClick.mock.calls[0][0]).toBe(false);
   });
 
-  test('"external_link" prop creates external link', () => {
+  test('"external_link" prop creates external link', async () => {
+    const user = userEvent.setup();
     const outerOnClick = jest.fn();
     const link = render(
       <div onClick={e => outerOnClick(e.defaultPrevented)}>
@@ -90,7 +93,7 @@ describe('Link', () => {
       </div>
     );
 
-    userEvent.click(link.getByText('Clickable'));
+    await user.click(link.getByText('Clickable'));
 
     // default link behaviour not prevented
     expect(outerOnClick.mock.calls).toHaveLength(1);
@@ -104,7 +107,8 @@ describe('Link', () => {
       outerOnClick = jest.fn();
     });
 
-    test('internal', () => {
+    test('internal', async () => {
+      const user = userEvent.setup();
       const link = render(
         <div onClick={e => outerOnClick(e.defaultPrevented)}>
           <Link href="/internal" disabled>
@@ -118,7 +122,7 @@ describe('Link', () => {
       window.dispatchEvent = mockDispatchEvent;
       window.scrollTo = mockScrollTo;
 
-      userEvent.click(link.getByText('Clickable'));
+      await user.click(link.getByText('Clickable'));
 
       expect(outerOnClick.mock.calls).toHaveLength(1);
       expect(outerOnClick.mock.calls[0][0]).toBe(true);
@@ -127,7 +131,8 @@ describe('Link', () => {
       expect(mockScrollTo.mock.calls).toHaveLength(0);
     });
 
-    test('external', () => {
+    test('external', async () => {
+      const user = userEvent.setup();
       const link = render(
         <div onClick={e => outerOnClick(e.defaultPrevented)}>
           <Link href="https://external.com" disabled>
@@ -136,7 +141,7 @@ describe('Link', () => {
         </div>
       );
 
-      userEvent.click(link.getByText('Clickable'));
+      await user.click(link.getByText('Clickable'));
 
       expect(outerOnClick.mock.calls).toHaveLength(1);
       expect(outerOnClick.mock.calls[0][0]).toBe(true);
diff --git a/src/private/__tests__/Overlay.test.js b/src/private/__tests__/Overlay.test.js
index 59a00626f..ad355c210 100644
--- a/src/private/__tests__/Overlay.test.js
+++ b/src/private/__tests__/Overlay.test.js
@@ -3,8 +3,9 @@
  */
 
 import React from 'react';
-import {render} from '@testing-library/react';
+import {act, render} from '@testing-library/react';
 import Overlay from '../Overlay';
+
 jest.useFakeTimers();
 
 const CustomChild = React.forwardRef((props, ref) => (
@@ -14,53 +15,41 @@ const CustomChild = React.forwardRef((props, ref) => (
 ));
 
 describe('Overlay with dict id', () => {
-  // this is just a little hack to silence a warning that we'll get until we
-  // upgrade to 16.9. See also: https://github.com/facebook/react/pull/14853
-  const originalError = console.error;
-  beforeAll(() => {
-    console.error = (...args) => {
-      if (/Warning.*not wrapped in act/.test(args[0])) {
-        return;
-      }
-      originalError.call(console, ...args);
-    };
-  });
-
-  afterAll(() => {
-    console.error = originalError;
-  });
-
   let div;
   beforeAll(() => {
     div = document.createElement('div');
     div.setAttribute('id', '{"index":1,"type":"target"}');
   });
 
-  test('renders nothing by default', () => {
-    render(
-      <Overlay target={{type: 'target', index: 1}}>
-        <CustomChild />
-      </Overlay>,
-      {
-        container: document.body.appendChild(div)
-      }
+  test('renders nothing by default', async () => {
+    await act(async () =>
+      render(
+        <Overlay target={{type: 'target', index: 1}}>
+          <CustomChild />
+        </Overlay>,
+        {
+          container: document.body.appendChild(div)
+        }
+      )
     );
 
+    await act(async () => jest.runAllTimers());
     expect(document.body.querySelector('#content')).toBe(null);
   });
 
-  test('renders its content', () => {
-    render(
-      <Overlay defaultShow target={{type: 'target', index: 1}}>
-        <CustomChild />
-      </Overlay>,
-      {
-        container: document.body.appendChild(div)
-      }
+  test('renders its content', async () => {
+    await act(async () =>
+      render(
+        <Overlay defaultShow target={{type: 'target', index: 1}}>
+          <CustomChild />
+        </Overlay>,
+        {
+          container: document.body.appendChild(div)
+        }
+      )
     );
 
-    jest.runAllTimers();
-
+    await act(async () => jest.runAllTimers());
     expect(document.body.querySelector('#content')).not.toBe(null);
   });
 });

From 8d88d61a25475f715374d9505d151806daacba83 Mon Sep 17 00:00:00 2001
From: Tom Begley <tomcbegley@gmail.com>
Date: Mon, 3 Feb 2025 18:51:22 +0000
Subject: [PATCH 2/2] Fix docs requirements

---
 docs/requirements.txt | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/requirements.txt b/docs/requirements.txt
index 3a0f71bb1..999250766 100644
--- a/docs/requirements.txt
+++ b/docs/requirements.txt
@@ -1,5 +1,5 @@
-dash>=2.0.0
-dash_bootstrap_components==ci-fixes
+dash==3.0.0rc1
+dash_bootstrap_components==1.7.1-dev
 gunicorn
 markdown
 pandas