From 955b26b81d0da71fc7b699289de401c85b32577a Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro.celaya@hypothes.is>
Date: Mon, 2 Dec 2024 13:11:49 +0100
Subject: [PATCH] Use mount helper functions from @hypothesis/frontend-testing

---
 package.json                                  |  2 +-
 src/components/data/test/AspectRatio-test.js  |  2 +-
 src/components/data/test/DataTable-test.js    | 38 +++----------
 src/components/data/test/ScrollBox-test.js    |  2 +-
 src/components/data/test/TableBody-test.js    |  2 +-
 src/components/data/test/TableCell-test.js    |  2 +-
 src/components/data/test/TableFoot-test.js    |  2 +-
 src/components/data/test/TableHead-test.js    |  2 +-
 src/components/data/test/TableRow-test.js     |  2 +-
 src/components/data/test/Thumbnail-test.js    |  2 +-
 src/components/feedback/test/Callout-test.js  |  2 +-
 src/components/feedback/test/Dialog-test.js   | 56 ++++---------------
 .../feedback/test/ModalDialog-test.js         |  2 +-
 src/components/feedback/test/Popover-test.js  | 38 ++++---------
 .../feedback/test/ToastMessages-test.js       | 18 +-----
 src/components/input/test/Button-test.js      |  2 +-
 src/components/input/test/Checkbox-test.js    |  2 +-
 src/components/input/test/CloseButton-test.js |  2 +-
 src/components/input/test/IconButton-test.js  |  2 +-
 src/components/input/test/Input-test.js       |  2 +-
 .../input/test/OptionButton-test.js           |  2 +-
 src/components/input/test/RadioButton-test.js |  2 +-
 src/components/input/test/RadioGroup-test.js  | 24 +-------
 src/components/input/test/Select-test.js      | 22 +-------
 src/components/input/test/Textarea-test.js    |  2 +-
 src/components/layout/test/CardHeader-test.js |  2 +-
 src/components/layout/test/CardTitle-test.js  |  2 +-
 src/components/layout/test/Overlay-test.js    |  2 +-
 src/components/layout/test/Panel-test.js      | 26 ++-------
 src/components/navigation/test/Tab-test.js    |  2 +-
 .../navigation/test/TabList-test.js           |  2 +-
 src/components/test/common-tests.js           |  3 +-
 src/components/transition/test/Slider-test.js | 15 +----
 src/hooks/test/use-click-away-test.js         | 13 +----
 src/hooks/test/use-focus-away-test.js         |  2 +-
 src/hooks/test/use-key-press-test.js          |  2 +-
 src/hooks/test/use-ordered-rows-test.js       |  2 +-
 .../test/use-popover-should-close-test.js     |  2 +-
 src/hooks/test/use-synced-ref-test.js         |  2 +-
 src/hooks/test/use-toast-messages-test.js     |  2 +-
 src/hooks/test/use-validate-on-submit-test.js |  2 +-
 .../test/use-warn-on-page-unload-test.js      |  2 +-
 test/bootstrap.js                             |  4 ++
 yarn.lock                                     | 10 ++--
 44 files changed, 91 insertions(+), 240 deletions(-)

diff --git a/package.json b/package.json
index 398e94321..4f6cff73b 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.18.6",
     "@hypothesis/frontend-build": "^3.0.0",
-    "@hypothesis/frontend-testing": "^1.2.2",
+    "@hypothesis/frontend-testing": "^1.4.0",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^28.0.0",
     "@rollup/plugin-dynamic-import-vars": "^2.1.2",
diff --git a/src/components/data/test/AspectRatio-test.js b/src/components/data/test/AspectRatio-test.js
index d5f9ae2d8..c8ee2e8e8 100644
--- a/src/components/data/test/AspectRatio-test.js
+++ b/src/components/data/test/AspectRatio-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import { testSimpleComponent } from '../../test/common-tests';
 import AspectRatio from '../AspectRatio';
diff --git a/src/components/data/test/DataTable-test.js b/src/components/data/test/DataTable-test.js
index 2d7794ba7..99f19c9f8 100644
--- a/src/components/data/test/DataTable-test.js
+++ b/src/components/data/test/DataTable-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import { useState } from 'preact/hooks';
 
 import { testCompositeComponent } from '../../test/common-tests';
@@ -8,8 +8,6 @@ import Scroll from '../Scroll';
 describe('DataTable', () => {
   let fakeRows;
   let fakeColumns;
-  let container;
-  let wrappers;
 
   beforeEach(() => {
     fakeColumns = [
@@ -45,15 +43,6 @@ describe('DataTable', () => {
         delicious: true,
       },
     ];
-
-    wrappers = [];
-    container = document.createElement('div');
-    document.body.append(container);
-  });
-
-  afterEach(() => {
-    wrappers.forEach(w => w.unmount());
-    container.remove();
   });
 
   // DataTable test wrapper which supports selecting multiple rows.
@@ -75,15 +64,13 @@ describe('DataTable', () => {
   }
 
   const createComponent = ({ Component = DataTable, ...props } = {}) => {
-    const wrapper = mount(
+    return mount(
       <Component columns={fakeColumns} rows={fakeRows} {...props} />,
 
       // Mounting in a connected element is required for arrow key navigation
       // to work, as `useArrowKeyNavigation` skips over hidden elements.
-      { attachTo: container },
+      { connected: true },
     );
-    wrappers.push(wrapper);
-    return wrapper;
   };
 
   it('sets appropriate table attributes', () => {
@@ -336,8 +323,6 @@ describe('DataTable', () => {
   });
 
   context('when in a Scroll context', () => {
-    let constrainedContainer;
-
     function TestTableWithScroll() {
       // Initially select the last data row
       const [selectedRow, setSelectedRow] = useState(fakeRows[4]);
@@ -354,20 +339,13 @@ describe('DataTable', () => {
       );
     }
 
-    beforeEach(() => {
-      constrainedContainer = document.createElement('div');
-      constrainedContainer.style.height = '150px';
-      constrainedContainer.style.maxHeight = '200px';
-      document.body.appendChild(constrainedContainer);
-    });
-
-    afterEach(() => {
-      constrainedContainer.remove();
-    });
-
     it('ensures selected row is visible in scrollable area', async () => {
       const wrapper = mount(<TestTableWithScroll />, {
-        attachTo: constrainedContainer,
+        connected: true,
+        prepareContainer: container => {
+          container.style.height = '150px';
+          container.style.maxHeight = '200px';
+        },
       });
 
       const lastRowEl = wrapper.find('tbody tr').at(4).getDOMNode();
diff --git a/src/components/data/test/ScrollBox-test.js b/src/components/data/test/ScrollBox-test.js
index d506766b8..beb2e352f 100644
--- a/src/components/data/test/ScrollBox-test.js
+++ b/src/components/data/test/ScrollBox-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import { testCompositeComponent } from '../../test/common-tests';
 import ScrollBox from '../ScrollBox';
diff --git a/src/components/data/test/TableBody-test.js b/src/components/data/test/TableBody-test.js
index 7ce5e76b9..1a7f2b171 100644
--- a/src/components/data/test/TableBody-test.js
+++ b/src/components/data/test/TableBody-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import { testPresentationalComponent } from '../../test/common-tests';
 import TableBody from '../TableBody';
diff --git a/src/components/data/test/TableCell-test.js b/src/components/data/test/TableCell-test.js
index b2d13fddb..a5919092c 100644
--- a/src/components/data/test/TableCell-test.js
+++ b/src/components/data/test/TableCell-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import { testPresentationalComponent } from '../../test/common-tests';
 import TableCell from '../TableCell';
diff --git a/src/components/data/test/TableFoot-test.js b/src/components/data/test/TableFoot-test.js
index 8dc292f8c..56f90284f 100644
--- a/src/components/data/test/TableFoot-test.js
+++ b/src/components/data/test/TableFoot-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import { testPresentationalComponent } from '../../test/common-tests';
 import TableFoot from '../TableFoot';
diff --git a/src/components/data/test/TableHead-test.js b/src/components/data/test/TableHead-test.js
index 4e446aedf..79f068e6c 100644
--- a/src/components/data/test/TableHead-test.js
+++ b/src/components/data/test/TableHead-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import { testPresentationalComponent } from '../../test/common-tests';
 import TableContext from '../TableContext';
diff --git a/src/components/data/test/TableRow-test.js b/src/components/data/test/TableRow-test.js
index 7605ff5ac..8acec79a6 100644
--- a/src/components/data/test/TableRow-test.js
+++ b/src/components/data/test/TableRow-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import { testPresentationalComponent } from '../../test/common-tests';
 import TableContext from '../TableContext';
diff --git a/src/components/data/test/Thumbnail-test.js b/src/components/data/test/Thumbnail-test.js
index d0fdae481..d41c46eec 100644
--- a/src/components/data/test/Thumbnail-test.js
+++ b/src/components/data/test/Thumbnail-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import { testCompositeComponent } from '../../test/common-tests';
 import Thumbnail from '../Thumbnail';
diff --git a/src/components/feedback/test/Callout-test.js b/src/components/feedback/test/Callout-test.js
index fda8ff067..c5b9caa67 100644
--- a/src/components/feedback/test/Callout-test.js
+++ b/src/components/feedback/test/Callout-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import {
   testPresentationalComponent,
diff --git a/src/components/feedback/test/Dialog-test.js b/src/components/feedback/test/Dialog-test.js
index c7a6124f3..e65493481 100644
--- a/src/components/feedback/test/Dialog-test.js
+++ b/src/components/feedback/test/Dialog-test.js
@@ -1,5 +1,4 @@
-import { delay } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { delay, mount } from '@hypothesis/frontend-testing';
 import { createRef } from 'preact';
 
 import { testPresentationalComponent } from '../../test/common-tests';
@@ -55,17 +54,6 @@ describe('Dialog', () => {
   });
 
   describe('initial focus', () => {
-    let container;
-
-    beforeEach(() => {
-      container = document.createElement('div');
-      document.body.appendChild(container);
-    });
-
-    afterEach(() => {
-      container.remove();
-    });
-
     it('focuses the element referred to by `initialFocus`', () => {
       const inputRef = createRef();
 
@@ -73,7 +61,7 @@ describe('Dialog', () => {
         <Dialog initialFocus={inputRef} title="My dialog">
           <input ref={inputRef} />
         </Dialog>,
-        { attachTo: container },
+        { connected: true },
       );
 
       assert.equal(document.activeElement, inputRef.current);
@@ -84,7 +72,7 @@ describe('Dialog', () => {
         <Dialog title="My dialog">
           <div>Test</div>
         </Dialog>,
-        { attachTo: container },
+        { connected: true },
       );
 
       assert.equal(
@@ -99,7 +87,7 @@ describe('Dialog', () => {
         <Dialog initialFocus={'manual'} title="My dialog">
           <div>Test</div>
         </Dialog>,
-        { attachTo: container },
+        { connected: true },
       );
 
       assert.equal(document.activeElement, focusedBefore);
@@ -112,7 +100,7 @@ describe('Dialog', () => {
         <Dialog initialFocus={inputRef} title="My dialog">
           <button ref={inputRef} disabled={true} />
         </Dialog>,
-        { attachTo: container },
+        { connected: true },
       );
 
       assert.equal(
@@ -128,7 +116,7 @@ describe('Dialog', () => {
             title="My dialog"
             transitionComponent={ComponentWithTransition}
           />,
-          { attachTo: container },
+          { connected: true },
         );
 
         // The Dialog is still not focused immediately after mounting it
@@ -147,26 +135,16 @@ describe('Dialog', () => {
   });
 
   describe('restoring focus', () => {
-    let container;
-
     beforeEach(() => {
-      container = document.createElement('div');
       const button = document.createElement('button');
       button.id = 'focus-button';
       document.body.appendChild(button);
-      document.body.appendChild(container);
-    });
-
-    afterEach(() => {
-      container.remove();
     });
 
     it('should not restore focus by default', () => {
       const wrapper = mount(
         <Dialog id="focus-dialog" title="My dialog" restoreFocus />,
-        {
-          attachTo: container,
-        },
+        { connected: true },
       );
       const dialogElement = document.getElementById('focus-dialog');
       // Focus moves to dialog by default when mounted
@@ -187,9 +165,7 @@ describe('Dialog', () => {
 
       const wrapper = mount(
         <Dialog id="focus-dialog" title="My dialog" restoreFocus />,
-        {
-          attachTo: container,
-        },
+        { connected: true },
       );
       const dialogElement = document.getElementById('focus-dialog');
       // Focus moves to dialog by default when mounted
@@ -221,9 +197,7 @@ describe('Dialog', () => {
           <Dialog title="Test dialog" onClose={onClose}>
             This is my dialog
           </Dialog>,
-          {
-            attachTo: container,
-          },
+          { connected: true },
         );
 
         assert.deepEqual(fakeUseKeyPress.lastCall.args[0], ['Escape']);
@@ -238,9 +212,7 @@ describe('Dialog', () => {
         <Dialog title="Test dialog" closeOnClickAway onClose={onClose}>
           This is my dialog
         </Dialog>,
-        {
-          attachTo: container,
-        },
+        { connected: true },
       );
 
       assert.deepEqual(fakeUseClickAway.lastCall.args[2], { enabled: true });
@@ -251,9 +223,7 @@ describe('Dialog', () => {
         <Dialog title="Test dialog" closeOnFocusAway onClose={onClose}>
           This is my dialog
         </Dialog>,
-        {
-          attachTo: container,
-        },
+        { connected: true },
       );
 
       assert.deepEqual(fakeUseFocusAway.lastCall.args[2], { enabled: true });
@@ -267,9 +237,7 @@ describe('Dialog', () => {
             onClose={onClose}
             transitionComponent={ComponentWithTransition}
           />,
-          {
-            attachTo: container,
-          },
+          { connected: true },
         );
 
         // We simulate closing the Dialog's Panel
diff --git a/src/components/feedback/test/ModalDialog-test.js b/src/components/feedback/test/ModalDialog-test.js
index 66843bc6e..fd78efea1 100644
--- a/src/components/feedback/test/ModalDialog-test.js
+++ b/src/components/feedback/test/ModalDialog-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import { testCompositeComponent } from '../../test/common-tests';
 import ModalDialog from '../ModalDialog';
diff --git a/src/components/feedback/test/Popover-test.js b/src/components/feedback/test/Popover-test.js
index fdfe031b2..af8cd5d70 100644
--- a/src/components/feedback/test/Popover-test.js
+++ b/src/components/feedback/test/Popover-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import { useRef, useState } from 'preact/hooks';
 
 import Popover, { POPOVER_VIEWPORT_HORIZONTAL_GAP } from '../Popover';
@@ -40,37 +40,19 @@ function TestComponent({ children, ...rest }) {
 }
 
 describe('Popover', () => {
-  let wrappers;
-  let containers;
-
-  beforeEach(() => {
-    wrappers = [];
-    containers = [];
-  });
-
-  afterEach(() => {
-    wrappers.forEach(w => w.unmount());
-    containers.forEach(c => c.remove());
-  });
-
   function createComponent(props = {}, options = {}) {
     const { paddingTop = 0 } = options;
 
-    const container = document.createElement('div');
-    container.style.paddingTop = `${paddingTop}px`;
-    // Add horizontal paddings to the container, so that there's room for the
-    // popover to grow if needed
-    container.style.paddingLeft = '200px';
-    container.style.paddingRight = '200px';
-    containers.push(container);
-    document.body.append(container);
-
-    const wrapper = mount(<TestComponent {...props} />, {
-      attachTo: container,
+    return mount(<TestComponent {...props} />, {
+      connected: true,
+      prepareContainer: container => {
+        container.style.paddingTop = `${paddingTop}px`;
+        // Add horizontal paddings to the container, so that there's room for the
+        // popover to grow if needed
+        container.style.paddingLeft = '200px';
+        container.style.paddingRight = '200px';
+      },
     });
-    wrappers.push(wrapper);
-
-    return wrapper;
   }
 
   const getPopover = wrapper => wrapper.find('Popover');
diff --git a/src/components/feedback/test/ToastMessages-test.js b/src/components/feedback/test/ToastMessages-test.js
index 749f98ad0..f26a9f196 100644
--- a/src/components/feedback/test/ToastMessages-test.js
+++ b/src/components/feedback/test/ToastMessages-test.js
@@ -1,9 +1,8 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import ToastMessages from '../ToastMessages';
 
 describe('ToastMessages', () => {
-  let wrappers;
   const toastMessages = [
     {
       id: '1',
@@ -24,29 +23,18 @@ describe('ToastMessages', () => {
   let fakeOnMessageDismiss;
 
   beforeEach(() => {
-    wrappers = [];
     fakeOnMessageDismiss = sinon.stub();
   });
 
-  afterEach(() => {
-    wrappers.forEach(wrapper => wrapper.unmount());
-  });
-
   function createToastMessages(toastMessages, setTimeout) {
-    const container = document.createElement('div');
-    document.body.appendChild(container);
-
-    const wrapper = mount(
+    return mount(
       <ToastMessages
         messages={toastMessages}
         onMessageDismiss={fakeOnMessageDismiss}
         setTimeout_={setTimeout}
       />,
-      { attachTo: container },
+      { connected: true },
     );
-    wrappers.push(wrapper);
-
-    return wrapper;
   }
 
   function triggerAnimationEnd(wrapper, index, direction = 'out') {
diff --git a/src/components/input/test/Button-test.js b/src/components/input/test/Button-test.js
index 12baab4fc..328d55810 100644
--- a/src/components/input/test/Button-test.js
+++ b/src/components/input/test/Button-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import { CancelIcon } from '../../icons';
 import {
diff --git a/src/components/input/test/Checkbox-test.js b/src/components/input/test/Checkbox-test.js
index 050b57448..a5dcfd3fd 100644
--- a/src/components/input/test/Checkbox-test.js
+++ b/src/components/input/test/Checkbox-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import { act } from 'preact/test-utils';
 
 import { testCompositeComponent } from '../../test/common-tests';
diff --git a/src/components/input/test/CloseButton-test.js b/src/components/input/test/CloseButton-test.js
index 738503a51..4203869af 100644
--- a/src/components/input/test/CloseButton-test.js
+++ b/src/components/input/test/CloseButton-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import CloseableContext from '../../CloseableContext';
 import { testPresentationalComponent } from '../../test/common-tests';
diff --git a/src/components/input/test/IconButton-test.js b/src/components/input/test/IconButton-test.js
index e1ae4838c..d4c54d38d 100644
--- a/src/components/input/test/IconButton-test.js
+++ b/src/components/input/test/IconButton-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import { CancelIcon } from '../../icons';
 import {
diff --git a/src/components/input/test/Input-test.js b/src/components/input/test/Input-test.js
index b4952f660..05746adb1 100644
--- a/src/components/input/test/Input-test.js
+++ b/src/components/input/test/Input-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import { testPresentationalComponent } from '../../test/common-tests';
 import Input from '../Input';
diff --git a/src/components/input/test/OptionButton-test.js b/src/components/input/test/OptionButton-test.js
index d66383989..16e65ae27 100644
--- a/src/components/input/test/OptionButton-test.js
+++ b/src/components/input/test/OptionButton-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import { testSimpleComponent } from '../../test/common-tests';
 import OptionButton from '../OptionButton';
diff --git a/src/components/input/test/RadioButton-test.js b/src/components/input/test/RadioButton-test.js
index 83f965fb1..74b0e131d 100644
--- a/src/components/input/test/RadioButton-test.js
+++ b/src/components/input/test/RadioButton-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import { testCompositeComponent } from '../../test/common-tests';
 import RadioButton from '../RadioButton';
diff --git a/src/components/input/test/RadioGroup-test.js b/src/components/input/test/RadioGroup-test.js
index b96dd4ebf..95f9f21df 100644
--- a/src/components/input/test/RadioGroup-test.js
+++ b/src/components/input/test/RadioGroup-test.js
@@ -1,25 +1,10 @@
-import { checkAccessibility } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { checkAccessibility, mount } from '@hypothesis/frontend-testing';
 
 import RadioGroup from '../RadioGroup';
 
 describe('RadioGroup', () => {
-  let container;
-  let wrappers;
-
-  beforeEach(() => {
-    wrappers = [];
-    container = document.createElement('div');
-    document.body.appendChild(container);
-  });
-
-  afterEach(() => {
-    wrappers.forEach(wrapper => wrapper.unmount());
-    container.remove();
-  });
-
   const createComponent = (props = {}) => {
-    const wrapper = mount(
+    return mount(
       <RadioGroup aria-label="Radio group" onChange={sinon.stub()} {...props}>
         <RadioGroup.Radio value="one">One</RadioGroup.Radio>
         <RadioGroup.Radio value="two">Two</RadioGroup.Radio>
@@ -30,11 +15,8 @@ describe('RadioGroup', () => {
           Four
         </RadioGroup.Radio>
       </RadioGroup>,
-      { attachTo: container },
+      { connected: true },
     );
-    wrappers.push(wrapper);
-
-    return wrapper;
   };
 
   function getRadio(wrapper, index) {
diff --git a/src/components/input/test/Select-test.js b/src/components/input/test/Select-test.js
index 2d4d98428..5dd1aafe6 100644
--- a/src/components/input/test/Select-test.js
+++ b/src/components/input/test/Select-test.js
@@ -1,10 +1,8 @@
-import { checkAccessibility } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { checkAccessibility, mount } from '@hypothesis/frontend-testing';
 
 import { MultiSelect, Select } from '../Select';
 
 describe('Select', () => {
-  let wrappers;
   const items = [
     { id: '1', name: 'All students' },
     { id: '2', name: 'Albert Banana' },
@@ -24,10 +22,8 @@ describe('Select', () => {
    */
   const createComponent = (props = {}, options = {}) => {
     const { optionsChildrenAsCallback = true, Component = Select } = options;
-    const container = document.createElement('div');
-    document.body.append(container);
 
-    const wrapper = mount(
+    return mount(
       <Component value={undefined} onChange={sinon.stub()} {...props}>
         <Component.Option value={undefined}>
           {({ selected }) => (
@@ -57,22 +53,10 @@ describe('Select', () => {
           </Component.Option>
         ))}
       </Component>,
-      { attachTo: container },
+      { connected: true },
     );
-
-    wrappers.push(wrapper);
-
-    return wrapper;
   };
 
-  beforeEach(() => {
-    wrappers = [];
-  });
-
-  afterEach(() => {
-    wrappers.forEach(wrapper => wrapper.unmount());
-  });
-
   const getToggleButton = wrapper =>
     wrapper.find('button[data-testid="select-toggle-button"]');
 
diff --git a/src/components/input/test/Textarea-test.js b/src/components/input/test/Textarea-test.js
index 14434cf2f..374280a4b 100644
--- a/src/components/input/test/Textarea-test.js
+++ b/src/components/input/test/Textarea-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import { testPresentationalComponent } from '../../test/common-tests';
 import Textarea from '../Textarea';
diff --git a/src/components/layout/test/CardHeader-test.js b/src/components/layout/test/CardHeader-test.js
index ab30cea40..3127d4744 100644
--- a/src/components/layout/test/CardHeader-test.js
+++ b/src/components/layout/test/CardHeader-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import CloseableContext from '../../CloseableContext';
 import { testPresentationalComponent } from '../../test/common-tests';
diff --git a/src/components/layout/test/CardTitle-test.js b/src/components/layout/test/CardTitle-test.js
index dfd16acb1..6bf7a3aff 100644
--- a/src/components/layout/test/CardTitle-test.js
+++ b/src/components/layout/test/CardTitle-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import { testPresentationalComponent } from '../../test/common-tests';
 import CardTitle from '../CardTitle';
diff --git a/src/components/layout/test/Overlay-test.js b/src/components/layout/test/Overlay-test.js
index f94ae86b9..99ee3fb47 100644
--- a/src/components/layout/test/Overlay-test.js
+++ b/src/components/layout/test/Overlay-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import { testPresentationalComponent } from '../../test/common-tests';
 import Overlay from '../Overlay';
diff --git a/src/components/layout/test/Panel-test.js b/src/components/layout/test/Panel-test.js
index 58ccd524f..d64979d38 100644
--- a/src/components/layout/test/Panel-test.js
+++ b/src/components/layout/test/Panel-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import { LoremIpsum } from '../../../pattern-library/components/patterns/samples';
 import { EditIcon } from '../../icons';
@@ -50,26 +50,12 @@ describe('Panel', () => {
   });
 
   context('when rendered in an element with constrained dimensions', () => {
-    let container;
-    let unboundedContainer;
-
-    beforeEach(() => {
-      container = document.createElement('div');
-      unboundedContainer = document.createElement('div');
+    const prepareContainer = container => {
       container.style.height = '200px';
-      document.body.append(container);
-      document.body.append(unboundedContainer);
-    });
-
-    afterEach(() => {
-      container.remove();
-      unboundedContainer.remove();
-    });
+    };
 
     it('should not exceed height of parent container if `scrollable` is set', () => {
-      const loremWrapper = mount(<LoremIpsum />, {
-        attachTo: unboundedContainer,
-      });
+      const loremWrapper = mount(<LoremIpsum />, { connected: true });
 
       // The lorem ipsum content in the Panel will be constrained and will scroll
       // within the allotted 200px height
@@ -77,7 +63,7 @@ describe('Panel', () => {
         <Panel title="Constrained Panel" scrollable>
           <LoremIpsum />
         </Panel>,
-        { attachTo: container },
+        { connected: true, prepareContainer },
       );
 
       // Lorem ipsum rendered without constraints will take up more than 200
@@ -97,7 +83,7 @@ describe('Panel', () => {
         <Panel title="Unconstrained Panel">
           <LoremIpsum />
         </Panel>,
-        { attachTo: container },
+        { connected: true, prepareContainer },
       );
 
       assert.isAbove(
diff --git a/src/components/navigation/test/Tab-test.js b/src/components/navigation/test/Tab-test.js
index f69e43516..c876a1d8b 100644
--- a/src/components/navigation/test/Tab-test.js
+++ b/src/components/navigation/test/Tab-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import { ProfileIcon } from '../../icons';
 import {
diff --git a/src/components/navigation/test/TabList-test.js b/src/components/navigation/test/TabList-test.js
index a1d824ee7..01edfe873 100644
--- a/src/components/navigation/test/TabList-test.js
+++ b/src/components/navigation/test/TabList-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import { testPresentationalComponent } from '../../test/common-tests';
 import TabList from '../TabList';
diff --git a/src/components/test/common-tests.js b/src/components/test/common-tests.js
index af7d175bf..bf410c1d8 100644
--- a/src/components/test/common-tests.js
+++ b/src/components/test/common-tests.js
@@ -1,6 +1,5 @@
 /* eslint-disable mocha/no-exports */
-import { checkAccessibility } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { checkAccessibility, mount } from '@hypothesis/frontend-testing';
 import { createRef } from 'preact';
 
 /**
diff --git a/src/components/transition/test/Slider-test.js b/src/components/transition/test/Slider-test.js
index 0bd163eec..986f9fcfb 100644
--- a/src/components/transition/test/Slider-test.js
+++ b/src/components/transition/test/Slider-test.js
@@ -1,17 +1,15 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import { testTransitionComponent } from '../../test/common-tests';
 import Slider from '../Slider';
 
 describe('Slider', () => {
-  let container;
-
   const createSlider = (props = {}) => {
     return mount(
       <Slider {...props}>
         <div style={{ width: 100, height: 200 }}>Test content</div>
       </Slider>,
-      { attachTo: container },
+      { connected: true },
     );
   };
 
@@ -28,15 +26,6 @@ describe('Slider', () => {
     wrapper.update();
   }
 
-  beforeEach(() => {
-    container = document.createElement('div');
-    document.body.appendChild(container);
-  });
-
-  afterEach(() => {
-    container.remove();
-  });
-
   testTransitionComponent(Slider, {
     event: { propertyName: 'height' },
   });
diff --git a/src/hooks/test/use-click-away-test.js b/src/hooks/test/use-click-away-test.js
index ffc81f860..f78b49f51 100644
--- a/src/hooks/test/use-click-away-test.js
+++ b/src/hooks/test/use-click-away-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import { useRef } from 'preact/hooks';
 import { act } from 'preact/test-utils';
 
@@ -6,7 +6,6 @@ import { useClickAway } from '../use-click-away';
 
 describe('useClickAway', () => {
   let handler;
-  let wrapper;
 
   const event = name => new Event(name, { bubbles: true });
   const events = [event('mousedown'), event('click')];
@@ -24,21 +23,13 @@ describe('useClickAway', () => {
   }
 
   function createComponent(props) {
-    const container = document.createElement('div');
-    document.body.append(container);
-
-    wrapper = mount(<FakeComponent {...props} />, { attachTo: container });
-    return wrapper;
+    return mount(<FakeComponent {...props} />, { connected: true });
   }
 
   beforeEach(() => {
     handler = sinon.stub();
   });
 
-  afterEach(() => {
-    wrapper.unmount();
-  });
-
   events.forEach(event => {
     it(`should invoke callback once for events outside of element (${event.type})`, () => {
       const wrapper = createComponent();
diff --git a/src/hooks/test/use-focus-away-test.js b/src/hooks/test/use-focus-away-test.js
index 4c4171b52..2dde7c24b 100644
--- a/src/hooks/test/use-focus-away-test.js
+++ b/src/hooks/test/use-focus-away-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import { useRef } from 'preact/hooks';
 import { act } from 'preact/test-utils';
 
diff --git a/src/hooks/test/use-key-press-test.js b/src/hooks/test/use-key-press-test.js
index 408a866dd..7b24c4bc6 100644
--- a/src/hooks/test/use-key-press-test.js
+++ b/src/hooks/test/use-key-press-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import { useRef } from 'preact/hooks';
 import { act } from 'preact/test-utils';
 
diff --git a/src/hooks/test/use-ordered-rows-test.js b/src/hooks/test/use-ordered-rows-test.js
index 3e28e39f2..3c77b7aff 100644
--- a/src/hooks/test/use-ordered-rows-test.js
+++ b/src/hooks/test/use-ordered-rows-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import { useState } from 'preact/hooks';
 
 import { useOrderedRows } from '../use-ordered-rows';
diff --git a/src/hooks/test/use-popover-should-close-test.js b/src/hooks/test/use-popover-should-close-test.js
index fabe1c85d..4b67351ab 100644
--- a/src/hooks/test/use-popover-should-close-test.js
+++ b/src/hooks/test/use-popover-should-close-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import { useRef } from 'preact/hooks';
 
 import { usePopoverShouldClose, $imports } from '../use-popover-should-close';
diff --git a/src/hooks/test/use-synced-ref-test.js b/src/hooks/test/use-synced-ref-test.js
index 8b8b98a72..dca3d0852 100644
--- a/src/hooks/test/use-synced-ref-test.js
+++ b/src/hooks/test/use-synced-ref-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import { useEffect } from 'preact/hooks';
 
 import { useSyncedRef } from '../use-synced-ref';
diff --git a/src/hooks/test/use-toast-messages-test.js b/src/hooks/test/use-toast-messages-test.js
index f35a473bd..5adcded24 100644
--- a/src/hooks/test/use-toast-messages-test.js
+++ b/src/hooks/test/use-toast-messages-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import { useToastMessages } from '../use-toast-messages';
 
diff --git a/src/hooks/test/use-validate-on-submit-test.js b/src/hooks/test/use-validate-on-submit-test.js
index 50fdab9cb..217e25141 100644
--- a/src/hooks/test/use-validate-on-submit-test.js
+++ b/src/hooks/test/use-validate-on-submit-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import { useState, useId } from 'preact/hooks';
 
 import { Input } from '../../components/input';
diff --git a/src/hooks/test/use-warn-on-page-unload-test.js b/src/hooks/test/use-warn-on-page-unload-test.js
index e68a944d6..00047c786 100644
--- a/src/hooks/test/use-warn-on-page-unload-test.js
+++ b/src/hooks/test/use-warn-on-page-unload-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import { useState } from 'preact/hooks';
 
 import { useWarnOnPageUnload } from '../use-warn-on-page-unload';
diff --git a/test/bootstrap.js b/test/bootstrap.js
index f8a58814f..375afafcc 100644
--- a/test/bootstrap.js
+++ b/test/bootstrap.js
@@ -1,3 +1,4 @@
+import { unmountAll } from '@hypothesis/frontend-testing';
 import { assert } from 'chai';
 import { configure } from 'enzyme';
 import { Adapter } from 'enzyme-adapter-preact-pure';
@@ -14,6 +15,9 @@ globalThis.sinon = sinon;
 
 // Configure Enzyme for UI tests.
 configure({ adapter: new Adapter() });
+afterEach(() => {
+  unmountAll();
+});
 
 // Ensure that uncaught exceptions between tests result in the tests failing.
 // This works around an issue with mocha / karma-mocha, see
diff --git a/yarn.lock b/yarn.lock
index e42865eb9..eef86df2e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1758,7 +1758,7 @@ __metadata:
     "@babel/preset-react": ^7.0.0
     "@babel/preset-typescript": ^7.18.6
     "@hypothesis/frontend-build": ^3.0.0
-    "@hypothesis/frontend-testing": ^1.2.2
+    "@hypothesis/frontend-testing": ^1.4.0
     "@rollup/plugin-babel": ^6.0.0
     "@rollup/plugin-commonjs": ^28.0.0
     "@rollup/plugin-dynamic-import-vars": ^2.1.2
@@ -1812,14 +1812,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@hypothesis/frontend-testing@npm:^1.2.2":
-  version: 1.3.1
-  resolution: "@hypothesis/frontend-testing@npm:1.3.1"
+"@hypothesis/frontend-testing@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "@hypothesis/frontend-testing@npm:1.4.0"
   dependencies:
     axe-core: ^4.8.2
     enzyme: ^3.11.0
     preact: ^10.18.1
-  checksum: 36f814e13d164cf55bf3f2ea21f0522fa1cbe5464a010a520de0506e9a8116a7d514807f38a257cade0ba442e0d0c00b8093658e17698b8c23a044a9f55c0be1
+  checksum: d7c3f5f66eedeae673a67f702e33a32d33ac21f308bf4d811496b02d78dfc62d626710b1b383cf7b6fe45ad90772538a50982d25cdb45f041c3716e92e139939
   languageName: node
   linkType: hard