Use mount helper functions from @hypothesis/frontend-testing

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.3.1",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^28.0.0",
     "@rollup/plugin-dynamic-import-vars": "^2.1.2",

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';

src/components/data/test/DataTable-test.js

@@ -1,4 +1,5 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
+import { mount as enzymeMount } from 'enzyme';
 import { useState } from 'preact/hooks';
 
 import { testCompositeComponent } from '../../test/common-tests';
@@ -8,8 +9,6 @@ import Scroll from '../Scroll';
 describe('DataTable', () => {
   let fakeRows;
   let fakeColumns;
-  let container;
-  let wrappers;
 
   beforeEach(() => {
     fakeColumns = [
@@ -45,15 +44,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 +65,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', () => {
@@ -366,7 +354,7 @@ describe('DataTable', () => {
     });
 
     it('ensures selected row is visible in scrollable area', async () => {
-      const wrapper = mount(<TestTableWithScroll />, {
+      const wrapper = enzymeMount(<TestTableWithScroll />, {
         attachTo: constrainedContainer,
       });
 

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';

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';

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';

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';

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';

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';

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';

src/components/feedback/test/Callout-test.js

@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import {
   testPresentationalComponent,

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,25 +54,14 @@ 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();
 
       mount(
         <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

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';

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') {

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 {

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';

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';

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 {

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';

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';

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';