Use mount/unmountAll from @hypothesis/frontend-testing

lms/static/scripts/bootstrap.js

@@ -1,3 +1,4 @@
+import { unmountAll } from '@hypothesis/frontend-testing';
 import { configure } from 'enzyme';
 import { Adapter } from 'enzyme-adapter-preact-pure';
 import 'preact/debug';
@@ -7,6 +8,9 @@ sinon.assert.expose(assert, { prefix: null });
 
 // 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

lms/static/scripts/frontend_apps/components/dashboard/test/AllCoursesActivity-test.js

@@ -3,7 +3,7 @@ import {
   checkAccessibility,
   mockImportedComponents,
 } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import { act } from 'preact/test-utils';
 import sinon from 'sinon';
 

lms/static/scripts/frontend_apps/components/dashboard/test/AssignmentActivity-test.js

@@ -3,7 +3,7 @@ import {
   checkAccessibility,
   mockImportedComponents,
 } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import { act } from 'preact/test-utils';
 import sinon from 'sinon';
 

lms/static/scripts/frontend_apps/components/dashboard/test/ContentWithBadge-test.js

@@ -1,5 +1,5 @@
 import { checkAccessibility } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import ContentWithBadge from '../ContentWithBadge';
 

lms/static/scripts/frontend_apps/components/dashboard/test/CourseActivity-test.js

@@ -2,7 +2,7 @@ import {
   checkAccessibility,
   mockImportedComponents,
 } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import { act } from 'preact/test-utils';
 import sinon from 'sinon';
 

lms/static/scripts/frontend_apps/components/dashboard/test/DashboardActivityFilters-test.js

@@ -3,8 +3,8 @@ import { formatDateTime } from '@hypothesis/frontend-shared';
 import {
   checkAccessibility,
   mockImportedComponents,
+  mount,
 } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
 import sinon from 'sinon';
 
 import { Config } from '../../../config';
@@ -64,8 +64,6 @@ describe('DashboardActivityFilters', () => {
   let fakeLoadNextCoursesPage;
   let fakeLoadNextAssignmentsPage;
   let fakeLoadNextStudentsPage;
-  let wrappers;
-  let containers;
 
   /**
    * @param {object} options
@@ -109,9 +107,6 @@ describe('DashboardActivityFilters', () => {
   }
 
   beforeEach(() => {
-    wrappers = [];
-    containers = [];
-
     fakeLoadNextCoursesPage = sinon.stub();
     fakeLoadNextAssignmentsPage = sinon.stub();
     fakeLoadNextStudentsPage = sinon.stub();
@@ -121,7 +116,6 @@ describe('DashboardActivityFilters', () => {
     onCoursesChange = sinon.stub();
     onAssignmentsChange = sinon.stub();
     onStudentsChange = sinon.stub();
-    wrappers = [];
 
     fakeConfig = {
       dashboard: {
@@ -147,8 +141,6 @@ describe('DashboardActivityFilters', () => {
   });
 
   afterEach(() => {
-    wrappers.forEach(w => w.unmount());
-    containers.forEach(c => c.remove());
     $imports.$restore();
   });
 
@@ -180,24 +172,13 @@ describe('DashboardActivityFilters', () => {
     });
   }
 
-  function createContainerInDOM() {
-    const container = document.createElement('div');
-    containers.push(container);
-    document.body.appendChild(container);
-
-    return container;
-  }
-
   function createComponentWithProps(props) {
-    const wrapper = mount(
+    return mount(
       <Config.Provider value={fakeConfig}>
         <DashboardActivityFilters {...props} />
       </Config.Provider>,
-      { attachTo: createContainerInDOM() },
+      { connected: true },
     );
-    wrappers.push(wrapper);
-
-    return wrapper;
   }
 
   function getSelect(wrapper, id) {
@@ -274,7 +255,7 @@ describe('DashboardActivityFilters', () => {
         <MultiSelect value={[]} onChange={sinon.stub()}>
           {select.props().renderOption(entity)}
         </MultiSelect>,
-        { attachTo: createContainerInDOM() },
+        { connected: true },
       );
       // The Select needs to be open, otherwise options are not rendered
       tempSelect.find('button').simulate('click');

lms/static/scripts/frontend_apps/components/dashboard/test/DashboardApp-test.js

@@ -2,7 +2,7 @@ import {
   checkAccessibility,
   mockImportedComponents,
 } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import { Config } from '../../../config';
 import DashboardApp, { $imports } from '../DashboardApp';

lms/static/scripts/frontend_apps/components/dashboard/test/DashboardBreadcrumbs-test.js

@@ -1,5 +1,5 @@
 import { checkAccessibility } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import DashboardBreadcrumbs from '../DashboardBreadcrumbs';
 

lms/static/scripts/frontend_apps/components/dashboard/test/DashboardFooter-test.js

@@ -1,5 +1,5 @@
 import { checkAccessibility } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import DashboardFooter from '../DashboardFooter';
 

lms/static/scripts/frontend_apps/components/dashboard/test/GradeIndicator-test.js

@@ -1,5 +1,5 @@
 import { checkAccessibility } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import { act } from 'preact/test-utils';
 
 import GradeIndicator from '../GradeIndicator';

lms/static/scripts/frontend_apps/components/dashboard/test/GradeStatusChip-test.js

@@ -1,5 +1,5 @@
 import { checkAccessibility } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import GradeStatusChip from '../GradeStatusChip';
 

lms/static/scripts/frontend_apps/components/dashboard/test/OrderableActivityTable-test.js

@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import sinon from 'sinon';
 
 import OrderableActivityTable, { $imports } from '../OrderableActivityTable';

lms/static/scripts/frontend_apps/components/dashboard/test/PaginatedMultiSelect-test.js

@@ -1,28 +1,11 @@
 import { MultiSelect } from '@hypothesis/frontend-shared';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import PaginatedMultiSelect from '../PaginatedMultiSelect';
 
 describe('PaginatedMultiSelect', () => {
-  let wrappers;
-  let containers;
-
-  beforeEach(() => {
-    wrappers = [];
-    containers = [];
-  });
-
-  afterEach(() => {
-    wrappers.forEach(w => w.unmount());
-    containers.forEach(c => c.remove());
-  });
-
   function createComponent(props) {
-    const container = document.createElement('div');
-    containers.push(container);
-    document.body.appendChild(container);
-
-    const wrapper = mount(
+    return mount(
       <PaginatedMultiSelect
         entity="courses"
         value={[]}
@@ -32,11 +15,8 @@ describe('PaginatedMultiSelect', () => {
         )}
         {...props}
       />,
-      { attachTo: container },
+      { connected: true },
     );
-    wrappers.push(wrapper);
-
-    return wrapper;
   }
 
   function getSelect(wrapper, id = 'courses') {

lms/static/scripts/frontend_apps/components/dashboard/test/SyncGradesButton-test.js

@@ -2,7 +2,7 @@ import {
   checkAccessibility,
   mockImportedComponents,
 } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import { act } from 'preact/test-utils';
 import sinon from 'sinon';
 

lms/static/scripts/frontend_apps/components/test/AppRoot-test.js

@@ -2,7 +2,7 @@ import {
   mockImportedComponents,
   waitForElement,
 } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import { useConfig } from '../../config';
 import { useService } from '../../services';

lms/static/scripts/frontend_apps/components/test/AuthButton-test.js

@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import { act } from 'preact/test-utils';
 
 import AuthButton, { $imports } from '../AuthButton';

lms/static/scripts/frontend_apps/components/test/AuthorizationModal-test.js

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

lms/static/scripts/frontend_apps/components/test/AutoGradingConfigurator-test.js

@@ -1,5 +1,5 @@
 import { checkAccessibility } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import { act } from 'preact/test-utils';
 
 import AutoGradingConfigurator from '../AutoGradingConfigurator';

lms/static/scripts/frontend_apps/components/test/BasicLTILaunchApp-test.js

@@ -5,7 +5,7 @@ import {
   waitFor,
   waitForElement,
 } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import { act } from 'preact/test-utils';
 
 import { Config } from '../../config';

lms/static/scripts/frontend_apps/components/test/BookPicker-test.js

@@ -3,7 +3,7 @@ import {
   waitFor,
   waitForElement,
 } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import { act } from 'preact/test-utils';
 
 import { VitalSourceService, withServices } from '../../services';

lms/static/scripts/frontend_apps/components/test/BookSelector-test.js

@@ -1,5 +1,4 @@
-import { waitFor, waitForElement } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount, waitFor, waitForElement } from '@hypothesis/frontend-testing';
 
 import { VitalSourceService, withServices } from '../../services';
 import BookSelector, { $imports } from '../BookSelector';
@@ -73,24 +72,13 @@ describe('BookSelector', () => {
   };
 
   describe('initial focus', () => {
-    let container;
-
-    beforeEach(() => {
-      container = document.createElement('div');
-      document.body.appendChild(container);
-    });
-
-    afterEach(() => {
-      container.remove();
-    });
-
     it('focuses the URL text input element', () => {
       const beforeFocused = document.activeElement;
 
       const wrapper = mount(
         <BookSelectorWrapper onSelectBook={sinon.stub()} />,
         {
-          attachTo: container,
+          connected: true,
         },
       );
 

lms/static/scripts/frontend_apps/components/test/Breadcrumbs-test.js

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

lms/static/scripts/frontend_apps/components/test/ContentSelector-test.js

@@ -4,7 +4,7 @@ import {
   waitFor,
   mockImportedComponents,
 } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import { act } from 'preact/test-utils';
 
 import { Config } from '../../config';

lms/static/scripts/frontend_apps/components/test/DataLoader-test.js

@@ -1,5 +1,5 @@
 import { waitForElement } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import { useState } from 'preact/hooks';
 
 import DataLoader from '../DataLoader';

lms/static/scripts/frontend_apps/components/test/DocumentList-test.js

@@ -2,7 +2,7 @@ import {
   checkAccessibility,
   mockImportedComponents,
 } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import DocumentList, { $imports } from '../DocumentList';
 

lms/static/scripts/frontend_apps/components/test/EmailPreferences-test.js

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

lms/static/scripts/frontend_apps/components/test/EmailPreferencesApp-test.js

@@ -1,5 +1,5 @@
 import { mockImportedComponents } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import { Config } from '../../config';
 import EmailPreferencesApp, { $imports } from '../EmailPreferencesApp';

lms/static/scripts/frontend_apps/components/test/ErrorDialogApp-test.js

@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import { Config } from '../../config';
 import ErrorDialogApp from '../ErrorDialogApp';

lms/static/scripts/frontend_apps/components/test/ErrorDisplay-test.js

@@ -3,7 +3,7 @@ import {
   checkAccessibility,
   mockImportedComponents,
 } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import { Config } from '../../config';
 import ErrorDisplay, { $imports } from '../ErrorDisplay';

lms/static/scripts/frontend_apps/components/test/ErrorModal-test.js

@@ -1,5 +1,5 @@
 import { mockImportedComponents } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import ErrorModal, { $imports } from '../ErrorModal';