From 51cece3f325f5e6e7d1bcdf82cd5132c6aaec7e0 Mon Sep 17 00:00:00 2001
From: Richard Todd <richard.todd@shopify.com>
Date: Wed, 18 Aug 2021 14:55:12 -0400
Subject: [PATCH 1/6] Updated imports

---
 .../DropZone/tests/DropZone.test.tsx          | 142 +++++++++---------
 1 file changed, 68 insertions(+), 74 deletions(-)

diff --git a/src/components/DropZone/tests/DropZone.test.tsx b/src/components/DropZone/tests/DropZone.test.tsx
index 2b7dde55376..d1f7c0388d5 100755
--- a/src/components/DropZone/tests/DropZone.test.tsx
+++ b/src/components/DropZone/tests/DropZone.test.tsx
@@ -2,8 +2,6 @@ import React from 'react';
 import {act} from 'react-dom/test-utils';
 import {clock} from '@shopify/jest-dom-mocks';
 import {Label, Labelled, DisplayText, Caption} from 'components';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider, ReactWrapper} from 'test-utilities/legacy';
 import {mountWithApp} from 'test-utilities';
 
 import {DropZone, DropZoneFileType} from '../DropZone';
@@ -58,13 +56,13 @@ describe('<DropZone />', () => {
   });
 
   it('calls the onDrop callback when a drop event is fired', () => {
-    const dropZone = mountWithAppProvider(<DropZone onDrop={spy} />);
+    const dropZone = mountWithApp(<DropZone onDrop={spy} />);
     fireEvent({element: dropZone});
     expect(spy).toHaveBeenCalledWith(files, files, []);
   });
 
   it('calls the onDrop callback when a drop event is fired on document twice when a duplicate file is added consecutively', () => {
-    const dropZone = mountWithAppProvider(<DropZone onDrop={spy} />);
+    const dropZone = mountWithApp(<DropZone onDrop={spy} />);
     fireEvent({element: dropZone});
     expect(spy).toHaveBeenCalledWith(files, files, []);
 
@@ -73,7 +71,7 @@ describe('<DropZone />', () => {
   });
 
   it('calls the onDrop callback with files when a drop event is fired on document', () => {
-    mountWithAppProvider(<DropZone dropOnPage onDrop={spy} />);
+    mountWithApp(<DropZone dropOnPage onDrop={spy} />);
     const event = createEvent('drop', files);
     act(() => {
       document.dispatchEvent(event);
@@ -82,7 +80,7 @@ describe('<DropZone />', () => {
   });
 
   it('calls the onDrop callback with files, acceptedFiles, and rejectedFiles when it accepts only jpeg', () => {
-    const dropZone = mountWithAppProvider(
+    const dropZone = mountWithApp(
       <DropZone onDrop={spy} accept="image/jpeg" />,
     );
     fireEvent({element: dropZone});
@@ -90,7 +88,7 @@ describe('<DropZone />', () => {
   });
 
   it('calls the onDropAccepted callback with acceptedFiles when it accepts only jpeg', () => {
-    const dropZone = mountWithAppProvider(
+    const dropZone = mountWithApp(
       <DropZone onDropAccepted={spy} accept="image/jpeg" />,
     );
     fireEvent({element: dropZone});
@@ -98,7 +96,7 @@ describe('<DropZone />', () => {
   });
 
   it('calls the onDropRejected callback with rejectedFiles when it accepts only jpeg', () => {
-    const dropZone = mountWithAppProvider(
+    const dropZone = mountWithApp(
       <DropZone onDropRejected={spy} accept="image/jpeg" />,
     );
     fireEvent({element: dropZone});
@@ -106,19 +104,19 @@ describe('<DropZone />', () => {
   });
 
   it('calls the onDragEnter callback when a dragenter event is fired', () => {
-    const dropZone = mountWithAppProvider(<DropZone onDragEnter={spy} />);
+    const dropZone = mountWithApp(<DropZone onDragEnter={spy} />);
     fireEvent({element: dropZone, eventType: 'dragenter'});
     expect(spy).toHaveBeenCalled();
   });
 
   it('calls the onDragOver callback when a dragover event is fired', () => {
-    const dropZone = mountWithAppProvider(<DropZone onDragOver={spy} />);
+    const dropZone = mountWithApp(<DropZone onDragOver={spy} />);
     fireEvent({element: dropZone, eventType: 'dragover'});
     expect(spy).toHaveBeenCalled();
   });
 
   it('calls the onDragLeave callback when a dragleave event is fired', () => {
-    const dropZone = mountWithAppProvider(<DropZone onDragLeave={spy} />);
+    const dropZone = mountWithApp(<DropZone onDragLeave={spy} />);
     fireEvent({element: dropZone, eventType: 'dragleave'});
     expect(spy).toHaveBeenCalled();
   });
@@ -127,7 +125,7 @@ describe('<DropZone />', () => {
     const customValidator = (file: File) => {
       return file.type === 'image/jpeg';
     };
-    const dropZone = mountWithAppProvider(
+    const dropZone = mountWithApp(
       <DropZone onDrop={spy} customValidator={customValidator} />,
     );
     fireEvent({element: dropZone});
@@ -135,7 +133,7 @@ describe('<DropZone />', () => {
   });
 
   it('does not call any callbacks when disabled', () => {
-    const dropZone = mountWithAppProvider(
+    const dropZone = mountWithApp(
       <DropZone
         disabled
         onDrop={spy}
@@ -157,7 +155,7 @@ describe('<DropZone />', () => {
   });
 
   it('calls callbacks when not allowed multiple and a replacement file is uploaded', () => {
-    const dropZone = mountWithAppProvider(
+    const dropZone = mountWithApp(
       <DropZone
         allowMultiple={false}
         onDrop={spy}
@@ -185,25 +183,30 @@ describe('<DropZone />', () => {
 
   it('renders <Labelled /> when `label` is provided', () => {
     const labelText = 'My DropZone label';
-    const dropZone = mountWithAppProvider(<DropZone label={labelText} />);
-    const labelled = dropZone.find(Labelled);
-    expect(labelled.prop('label')).toStrictEqual(labelText);
+    const dropZone = mountWithApp(<DropZone label={labelText} />);
+    expect(dropZone).toContainReactComponent(Labelled, {label: labelText});
   });
 
   it('renders a <Label /> with matching id for the file input', () => {
     const id = 'Test';
-    const dropZone = mountWithAppProvider(
+    const dropZone = mountWithApp(
       <DropZone id={id} label="My DropZone label" />,
     );
-    const label = dropZone.find(Label);
+    const label = dropZone.find(Label)!;
+
+    expect(dropZone).toContainReactComponent(Label, {id});
+
     expect(label.prop('id')).toStrictEqual(id);
-    const input = dropZone.find('input[type="file"]');
-    expect(input.prop('id')).toStrictEqual(id);
+    const input = dropZone.find('input', {type: 'file'});
+
+    expect(input).toHaveReactProps({id});
   });
 
   it('renders a disabled input when the disabled prop is true', () => {
-    const dropZone = mountWithAppProvider(<DropZone disabled />);
-    expect(dropZone.find('input[type="file"]').prop('disabled')).toBe(true);
+    const dropZone = mountWithApp(<DropZone disabled />);
+    expect(dropZone.find('input', {type: 'file'})!).toHaveReactProps({
+      disabled: true,
+    });
   });
 
   it.each([
@@ -243,21 +246,22 @@ describe('<DropZone />', () => {
   describe('onClick', () => {
     it('calls the onClick when clicking the dropzone if one is provided', () => {
       const spy = jest.fn();
-      const dropZone = mountWithAppProvider(
+      const dropZone = mountWithApp(
         <DropZone label="My DropZone label" onClick={spy} />,
       );
 
-      dropZone.find('div').at(4).simulate('click');
+      dropZone.findAll('div')[4].trigger('onClick');
+
       expect(spy).toHaveBeenCalled();
     });
 
     it('does not calls the onClick when the dropzone is disabled', () => {
       const spy = jest.fn();
-      const dropZone = mountWithAppProvider(
+      const dropZone = mountWithApp(
         <DropZone disabled label="My DropZone label" onClick={spy} />,
       );
 
-      dropZone.find('div').at(4).simulate('click');
+      dropZone.findAll('div')[4].trigger('onClick');
       expect(spy).not.toHaveBeenCalled();
     });
 
@@ -278,25 +282,22 @@ describe('<DropZone />', () => {
       const callbackDropZone = {
         onAction: () => {},
       };
-      const dropZone = mountWithAppProvider(
+      const dropZone = mountWithApp(
         <DropZone label="My DropZone label" labelAction={callbackDropZone} />,
       );
-      expect(dropZone.find(Labelled).props()).toHaveProperty(
-        'action',
-        callbackDropZone,
-      );
+
+      expect(dropZone).toContainReactComponent(Labelled, {
+        action: callbackDropZone,
+      });
     });
   });
 
   describe('labelHidden', () => {
     it("passes 'labelHidden' to the Labelled options", () => {
-      const dropZone = mountWithAppProvider(
+      const dropZone = mountWithApp(
         <DropZone label="My DropZone label" labelHidden />,
       );
-      expect(dropZone.find(Labelled).props()).toHaveProperty(
-        'labelHidden',
-        true,
-      );
+      expect(dropZone).toContainReactComponent(Labelled, {labelHidden: true});
     });
   });
 
@@ -304,9 +305,7 @@ describe('<DropZone />', () => {
     const overlayText = 'overlay text';
     it('does not render the overlayText on small screens', () => {
       setBoundingClientRect('small');
-      const dropZone = mountWithAppProvider(
-        <DropZone overlayText={overlayText} />,
-      );
+      const dropZone = mountWithApp(<DropZone overlayText={overlayText} />);
       fireEvent({element: dropZone, eventType: 'dragenter'});
       const displayText = dropZone.find(DisplayText);
       const caption = dropZone.find(Caption);
@@ -316,42 +315,36 @@ describe('<DropZone />', () => {
 
     it('renders a Caption containing the overlayText on medium screens', () => {
       setBoundingClientRect('medium');
-      const dropZone = mountWithAppProvider(
-        <DropZone overlayText={overlayText} />,
-      );
+      const dropZone = mountWithApp(<DropZone overlayText={overlayText} />);
       fireEvent({element: dropZone, eventType: 'dragenter'});
       const captionText = dropZone.find(Caption);
-      expect(captionText.contains(overlayText)).toBe(true);
+      expect(captionText).toContainReactText(overlayText);
     });
 
     it('renders a Caption containing the overlayText on large screens', () => {
       setBoundingClientRect('large');
-      const dropZone = mountWithAppProvider(
-        <DropZone overlayText={overlayText} />,
-      );
+      const dropZone = mountWithApp(<DropZone overlayText={overlayText} />);
       fireEvent({element: dropZone, eventType: 'dragenter'});
       const captionText = dropZone.find(Caption);
-      expect(captionText.contains(overlayText)).toBe(true);
+      expect(captionText).toContainReactText(overlayText);
     });
 
     it('renders a DisplayText containing the overlayText on extra-large screens', () => {
       setBoundingClientRect('extraLarge');
-      const dropZone = mountWithAppProvider(
-        <DropZone overlayText={overlayText} />,
-      );
+      const dropZone = mountWithApp(<DropZone overlayText={overlayText} />);
       fireEvent({element: dropZone, eventType: 'dragenter'});
       const displayText = dropZone.find(DisplayText);
-      expect(displayText.contains(overlayText)).toBe(true);
+      expect(displayText).toContainReactText(overlayText);
     });
 
     it('renders a DisplayText containing the overlayText on any screen size when variableHeight is true', () => {
       setBoundingClientRect('small');
-      const dropZone = mountWithAppProvider(
+      const dropZone = mountWithApp(
         <DropZone overlayText={overlayText} variableHeight />,
       );
       fireEvent({element: dropZone, eventType: 'dragenter'});
       const displayText = dropZone.find(DisplayText);
-      expect(displayText.contains(overlayText)).toBe(true);
+      expect(displayText).toContainReactText(overlayText);
     });
   });
 
@@ -359,7 +352,7 @@ describe('<DropZone />', () => {
     const errorOverlayText = "can't drop this";
     it("doesn't render the overlayText on small screens", () => {
       setBoundingClientRect('small');
-      const dropZone = mountWithAppProvider(
+      const dropZone = mountWithApp(
         <DropZone errorOverlayText={errorOverlayText} accept="image/gif" />,
       );
       fireEvent({element: dropZone, eventType: 'dragenter'});
@@ -371,37 +364,38 @@ describe('<DropZone />', () => {
 
     it('renders a Caption containing the overlayText on medium screens', () => {
       setBoundingClientRect('medium');
-      const dropZone = mountWithAppProvider(
+      const dropZone = mountWithApp(
         <DropZone errorOverlayText={errorOverlayText} accept="image/gif" />,
       );
       fireEvent({element: dropZone, eventType: 'dragenter'});
       const captionText = dropZone.find(Caption);
-      expect(captionText.contains(errorOverlayText)).toBe(true);
+      expect(captionText).toContainReactText(errorOverlayText);
     });
 
     it('renders a Caption containing the overlayText on large screens', () => {
       setBoundingClientRect('large');
-      const dropZone = mountWithAppProvider(
+      const dropZone = mountWithApp(
         <DropZone errorOverlayText={errorOverlayText} accept="image/gif" />,
       );
       fireEvent({element: dropZone, eventType: 'dragenter'});
       const captionText = dropZone.find(Caption);
-      expect(captionText.contains(errorOverlayText)).toBe(true);
+
+      expect(captionText).toContainReactText(errorOverlayText);
     });
 
     it('renders a DisplayText containing the overlayText on extra-large screens', () => {
       setBoundingClientRect('extraLarge');
-      const dropZone = mountWithAppProvider(
+      const dropZone = mountWithApp(
         <DropZone errorOverlayText={errorOverlayText} accept="image/gif" />,
       );
       fireEvent({element: dropZone, eventType: 'dragenter'});
       const displayText = dropZone.find(DisplayText);
-      expect(displayText.contains(errorOverlayText)).toBe(true);
+      expect(displayText).toContainReactText(errorOverlayText);
     });
 
     it('renders a DisplayText containing the overlayText on any screen size when variableHeight is true', () => {
       setBoundingClientRect('small');
-      const dropZone = mountWithAppProvider(
+      const dropZone = mountWithApp(
         <DropZone
           errorOverlayText={errorOverlayText}
           accept="image/gif"
@@ -410,7 +404,7 @@ describe('<DropZone />', () => {
       );
       fireEvent({element: dropZone, eventType: 'dragenter'});
       const displayText = dropZone.find(DisplayText);
-      expect(displayText.contains(errorOverlayText)).toBe(true);
+      expect(displayText).toContainReactText(errorOverlayText);
     });
   });
 
@@ -449,7 +443,7 @@ describe('<DropZone />', () => {
     });
 
     it('sets focused to true when the input file is focused', () => {
-      const dropZone = mountWithAppProvider(
+      const dropZone = mountWithApp(
         <DropZone>
           <DropZoneContext.Consumer>
             {({focused}) => {
@@ -458,13 +452,13 @@ describe('<DropZone />', () => {
           </DropZoneContext.Consumer>
         </DropZone>,
       );
-      const fileInput = dropZone.find(`input[type="file"]`);
-      fileInput.simulate('focus');
+      const fileInput = dropZone.find('input', {type: 'file'})!;
+      fileInput.trigger('onFocus');
       expect(dropZone.find('#focused')).toHaveLength(1);
     });
 
     it('sets focused to false when the input file is blur', () => {
-      const dropZone = mountWithAppProvider(
+      const dropZone = mountWithApp(
         <DropZone>
           <DropZoneContext.Consumer>
             {({focused}) => {
@@ -473,13 +467,13 @@ describe('<DropZone />', () => {
           </DropZoneContext.Consumer>
         </DropZone>,
       );
-      const fileInput = dropZone.find(`input[type="file"]`);
-      fileInput.simulate('blur');
+      const fileInput = dropZone.find('input', {type: 'file'})!;
+      fileInput.trigger('onBlur');
       expect(dropZone.find('#blurred')).toHaveLength(1);
     });
 
     it('sets disabled to true when the dropzone is disabled', () => {
-      const dropZone = mountWithAppProvider(
+      const dropZone = mountWithApp(
         <DropZone disabled>
           <DropZoneContext.Consumer>
             {({disabled}) => {
@@ -493,7 +487,7 @@ describe('<DropZone />', () => {
     });
 
     it('sets the default type to file if not specified', () => {
-      const dropZone = mountWithAppProvider(
+      const dropZone = mountWithApp(
         <DropZone>
           <DropZoneContext.Consumer>
             {({type}) => {
@@ -516,7 +510,7 @@ describe('<DropZone />', () => {
     });
 
     it('updates safely', () => {
-      const dropZone = mountWithAppProvider(<DropZone />);
+      const dropZone = mountWithApp(<DropZone />);
 
       expect(() => {
         dropZone.setProps({openFileDialog: true});
@@ -524,7 +518,7 @@ describe('<DropZone />', () => {
     });
 
     it('unmounts safely', () => {
-      const dropZone = mountWithAppProvider(<DropZone />);
+      const dropZone = mountWithApp(<DropZone />);
 
       expect(() => {
         dropZone.unmount();
@@ -577,7 +571,7 @@ function fireEvent({
     }
     const event = createEvent(eventType, testFiles);
 
-    element.find('div').at(3).getDOMNode().dispatchEvent(event);
+    element.findAll('div')[3].getDOMNode().dispatchEvent(event);
 
     if (eventType === 'dragenter') {
       clock.tick(50);

From a2925a42bb16c38905ccbe8b4dc3796808a4964c Mon Sep 17 00:00:00 2001
From: Richard Todd <richard.todd@shopify.com>
Date: Wed, 18 Aug 2021 16:10:18 -0400
Subject: [PATCH 2/6] Modernized dropzone tests

---
 UNRELEASED.md                                 |   1 +
 .../DropZone/tests/DropZone.test.tsx          | 102 +++++++++---------
 .../tests/ExceptionList.test.tsx              |  26 ++---
 .../components/Item/tests/Item.test.tsx       |  19 ++--
 4 files changed, 80 insertions(+), 68 deletions(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 93943b1b53b..5d39125f206 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -80,5 +80,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Modernized tests for EmptyState component ([#4427](https://github.com/Shopify/polaris-react/pull/4427))
 - Modernized tests for Pagination, FilterControl, FilterCreator, FilterValueSelector, and DateSelector components ([#4438](https://github.com/Shopify/polaris-react/pull/4438))
 - Modernized tests for PopoverOverlay component([#4430](https://github.com/Shopify/polaris-react/pull/4430))
+- Modernized tests for Dropzone, EmptySearchResult, EmptyState, EventListener, ExceptionList, and ConnectedFilterControl/Item components([#4412](https://github.com/Shopify/polaris-react/pull/4412))
 
 ### Deprecations
diff --git a/src/components/DropZone/tests/DropZone.test.tsx b/src/components/DropZone/tests/DropZone.test.tsx
index d1f7c0388d5..e33c96df0db 100755
--- a/src/components/DropZone/tests/DropZone.test.tsx
+++ b/src/components/DropZone/tests/DropZone.test.tsx
@@ -3,6 +3,7 @@ import {act} from 'react-dom/test-utils';
 import {clock} from '@shopify/jest-dom-mocks';
 import {Label, Labelled, DisplayText, Caption} from 'components';
 import {mountWithApp} from 'test-utilities';
+import type {CustomRoot} from '@shopify/react-testing';
 
 import {DropZone, DropZoneFileType} from '../DropZone';
 import {DropZoneContext} from '../context';
@@ -57,16 +58,16 @@ describe('<DropZone />', () => {
 
   it('calls the onDrop callback when a drop event is fired', () => {
     const dropZone = mountWithApp(<DropZone onDrop={spy} />);
-    fireEvent({element: dropZone});
+    fireEvent({wrapper: dropZone});
     expect(spy).toHaveBeenCalledWith(files, files, []);
   });
 
   it('calls the onDrop callback when a drop event is fired on document twice when a duplicate file is added consecutively', () => {
     const dropZone = mountWithApp(<DropZone onDrop={spy} />);
-    fireEvent({element: dropZone});
+    fireEvent({wrapper: dropZone});
     expect(spy).toHaveBeenCalledWith(files, files, []);
 
-    fireEvent({element: dropZone, testFiles: duplicateFiles});
+    fireEvent({wrapper: dropZone, testFiles: duplicateFiles});
     expect(spy).toHaveBeenCalledWith(duplicateFiles, duplicateFiles, []);
   });
 
@@ -83,7 +84,7 @@ describe('<DropZone />', () => {
     const dropZone = mountWithApp(
       <DropZone onDrop={spy} accept="image/jpeg" />,
     );
-    fireEvent({element: dropZone});
+    fireEvent({wrapper: dropZone});
     expect(spy).toHaveBeenCalledWith(files, acceptedFiles, rejectedFiles);
   });
 
@@ -91,7 +92,7 @@ describe('<DropZone />', () => {
     const dropZone = mountWithApp(
       <DropZone onDropAccepted={spy} accept="image/jpeg" />,
     );
-    fireEvent({element: dropZone});
+    fireEvent({wrapper: dropZone});
     expect(spy).toHaveBeenCalledWith(acceptedFiles);
   });
 
@@ -99,25 +100,25 @@ describe('<DropZone />', () => {
     const dropZone = mountWithApp(
       <DropZone onDropRejected={spy} accept="image/jpeg" />,
     );
-    fireEvent({element: dropZone});
+    fireEvent({wrapper: dropZone});
     expect(spy).toHaveBeenCalledWith(rejectedFiles);
   });
 
   it('calls the onDragEnter callback when a dragenter event is fired', () => {
     const dropZone = mountWithApp(<DropZone onDragEnter={spy} />);
-    fireEvent({element: dropZone, eventType: 'dragenter'});
+    fireEvent({wrapper: dropZone, eventType: 'dragenter'});
     expect(spy).toHaveBeenCalled();
   });
 
   it('calls the onDragOver callback when a dragover event is fired', () => {
     const dropZone = mountWithApp(<DropZone onDragOver={spy} />);
-    fireEvent({element: dropZone, eventType: 'dragover'});
+    fireEvent({wrapper: dropZone, eventType: 'dragover'});
     expect(spy).toHaveBeenCalled();
   });
 
   it('calls the onDragLeave callback when a dragleave event is fired', () => {
     const dropZone = mountWithApp(<DropZone onDragLeave={spy} />);
-    fireEvent({element: dropZone, eventType: 'dragleave'});
+    fireEvent({wrapper: dropZone, eventType: 'dragleave'});
     expect(spy).toHaveBeenCalled();
   });
 
@@ -128,7 +129,7 @@ describe('<DropZone />', () => {
     const dropZone = mountWithApp(
       <DropZone onDrop={spy} customValidator={customValidator} />,
     );
-    fireEvent({element: dropZone});
+    fireEvent({wrapper: dropZone});
     expect(spy).toHaveBeenCalledWith(files, acceptedFiles, rejectedFiles);
   });
 
@@ -144,13 +145,13 @@ describe('<DropZone />', () => {
         onDragOver={spy}
       />,
     );
-    fireEvent({element: dropZone, spy});
+    fireEvent({wrapper: dropZone, spy});
     expect(spy).not.toHaveBeenCalled();
-    fireEvent({element: dropZone, eventType: 'dragenter', spy});
+    fireEvent({wrapper: dropZone, eventType: 'dragenter', spy});
     expect(spy).not.toHaveBeenCalled();
-    fireEvent({element: dropZone, eventType: 'dragleave', spy});
+    fireEvent({wrapper: dropZone, eventType: 'dragleave', spy});
     expect(spy).not.toHaveBeenCalled();
-    fireEvent({element: dropZone, eventType: 'dragover', spy});
+    fireEvent({wrapper: dropZone, eventType: 'dragover', spy});
     expect(spy).not.toHaveBeenCalled();
   });
 
@@ -167,17 +168,17 @@ describe('<DropZone />', () => {
     );
 
     // Initial event to populate zone with data (should succeed)
-    fireEvent({element: dropZone, spy});
+    fireEvent({wrapper: dropZone, spy});
     expect(spy).toHaveBeenCalledWith(files, acceptedFiles, rejectedFiles);
 
     // Attempt to replace the current file
-    fireEvent({element: dropZone, spy});
+    fireEvent({wrapper: dropZone, spy});
     expect(spy).toHaveBeenCalledWith(files, acceptedFiles, rejectedFiles);
-    fireEvent({element: dropZone, eventType: 'dragenter', spy});
+    fireEvent({wrapper: dropZone, eventType: 'dragenter', spy});
     expect(spy).toHaveBeenCalled();
-    fireEvent({element: dropZone, eventType: 'dragleave', spy});
+    fireEvent({wrapper: dropZone, eventType: 'dragleave', spy});
     expect(spy).toHaveBeenCalled();
-    fireEvent({element: dropZone, eventType: 'dragover', spy});
+    fireEvent({wrapper: dropZone, eventType: 'dragover', spy});
     expect(spy).toHaveBeenCalled();
   });
 
@@ -250,18 +251,27 @@ describe('<DropZone />', () => {
         <DropZone label="My DropZone label" onClick={spy} />,
       );
 
-      dropZone.findAll('div')[4].trigger('onClick');
+      dropZone
+        .find('div', {
+          'aria-disabled': false,
+        })
+        ?.trigger('onClick');
 
       expect(spy).toHaveBeenCalled();
     });
 
-    it('does not calls the onClick when the dropzone is disabled', () => {
+    it('does not call the onClick when the dropzone is disabled', () => {
       const spy = jest.fn();
       const dropZone = mountWithApp(
         <DropZone disabled label="My DropZone label" onClick={spy} />,
       );
 
-      dropZone.findAll('div')[4].trigger('onClick');
+      dropZone
+        .find('div', {
+          'aria-disabled': true,
+        })
+        ?.domNode!.click();
+
       expect(spy).not.toHaveBeenCalled();
     });
 
@@ -306,17 +316,15 @@ describe('<DropZone />', () => {
     it('does not render the overlayText on small screens', () => {
       setBoundingClientRect('small');
       const dropZone = mountWithApp(<DropZone overlayText={overlayText} />);
-      fireEvent({element: dropZone, eventType: 'dragenter'});
-      const displayText = dropZone.find(DisplayText);
-      const caption = dropZone.find(Caption);
-      expect(displayText).toHaveLength(0);
-      expect(caption).toHaveLength(0);
+      fireEvent({wrapper: dropZone, eventType: 'dragenter'});
+      expect(dropZone).not.toContainReactComponent(DisplayText);
+      expect(dropZone).not.toContainReactComponent(Caption);
     });
 
     it('renders a Caption containing the overlayText on medium screens', () => {
       setBoundingClientRect('medium');
       const dropZone = mountWithApp(<DropZone overlayText={overlayText} />);
-      fireEvent({element: dropZone, eventType: 'dragenter'});
+      fireEvent({wrapper: dropZone, eventType: 'dragenter'});
       const captionText = dropZone.find(Caption);
       expect(captionText).toContainReactText(overlayText);
     });
@@ -324,7 +332,7 @@ describe('<DropZone />', () => {
     it('renders a Caption containing the overlayText on large screens', () => {
       setBoundingClientRect('large');
       const dropZone = mountWithApp(<DropZone overlayText={overlayText} />);
-      fireEvent({element: dropZone, eventType: 'dragenter'});
+      fireEvent({wrapper: dropZone, eventType: 'dragenter'});
       const captionText = dropZone.find(Caption);
       expect(captionText).toContainReactText(overlayText);
     });
@@ -332,7 +340,7 @@ describe('<DropZone />', () => {
     it('renders a DisplayText containing the overlayText on extra-large screens', () => {
       setBoundingClientRect('extraLarge');
       const dropZone = mountWithApp(<DropZone overlayText={overlayText} />);
-      fireEvent({element: dropZone, eventType: 'dragenter'});
+      fireEvent({wrapper: dropZone, eventType: 'dragenter'});
       const displayText = dropZone.find(DisplayText);
       expect(displayText).toContainReactText(overlayText);
     });
@@ -342,7 +350,7 @@ describe('<DropZone />', () => {
       const dropZone = mountWithApp(
         <DropZone overlayText={overlayText} variableHeight />,
       );
-      fireEvent({element: dropZone, eventType: 'dragenter'});
+      fireEvent({wrapper: dropZone, eventType: 'dragenter'});
       const displayText = dropZone.find(DisplayText);
       expect(displayText).toContainReactText(overlayText);
     });
@@ -355,11 +363,9 @@ describe('<DropZone />', () => {
       const dropZone = mountWithApp(
         <DropZone errorOverlayText={errorOverlayText} accept="image/gif" />,
       );
-      fireEvent({element: dropZone, eventType: 'dragenter'});
-      const displayText = dropZone.find(DisplayText);
-      const caption = dropZone.find(Caption);
-      expect(displayText).toHaveLength(0);
-      expect(caption).toHaveLength(0);
+      fireEvent({wrapper: dropZone, eventType: 'dragenter'});
+      expect(dropZone).not.toContainReactComponent(DisplayText);
+      expect(dropZone).not.toContainReactComponent(Caption);
     });
 
     it('renders a Caption containing the overlayText on medium screens', () => {
@@ -367,7 +373,7 @@ describe('<DropZone />', () => {
       const dropZone = mountWithApp(
         <DropZone errorOverlayText={errorOverlayText} accept="image/gif" />,
       );
-      fireEvent({element: dropZone, eventType: 'dragenter'});
+      fireEvent({wrapper: dropZone, eventType: 'dragenter'});
       const captionText = dropZone.find(Caption);
       expect(captionText).toContainReactText(errorOverlayText);
     });
@@ -377,7 +383,7 @@ describe('<DropZone />', () => {
       const dropZone = mountWithApp(
         <DropZone errorOverlayText={errorOverlayText} accept="image/gif" />,
       );
-      fireEvent({element: dropZone, eventType: 'dragenter'});
+      fireEvent({wrapper: dropZone, eventType: 'dragenter'});
       const captionText = dropZone.find(Caption);
 
       expect(captionText).toContainReactText(errorOverlayText);
@@ -388,7 +394,7 @@ describe('<DropZone />', () => {
       const dropZone = mountWithApp(
         <DropZone errorOverlayText={errorOverlayText} accept="image/gif" />,
       );
-      fireEvent({element: dropZone, eventType: 'dragenter'});
+      fireEvent({wrapper: dropZone, eventType: 'dragenter'});
       const displayText = dropZone.find(DisplayText);
       expect(displayText).toContainReactText(errorOverlayText);
     });
@@ -402,7 +408,7 @@ describe('<DropZone />', () => {
           variableHeight
         />,
       );
-      fireEvent({element: dropZone, eventType: 'dragenter'});
+      fireEvent({wrapper: dropZone, eventType: 'dragenter'});
       const displayText = dropZone.find(DisplayText);
       expect(displayText).toContainReactText(errorOverlayText);
     });
@@ -454,7 +460,7 @@ describe('<DropZone />', () => {
       );
       const fileInput = dropZone.find('input', {type: 'file'})!;
       fileInput.trigger('onFocus');
-      expect(dropZone.find('#focused')).toHaveLength(1);
+      expect(dropZone).toContainReactComponent('div', {id: 'focused'});
     });
 
     it('sets focused to false when the input file is blur', () => {
@@ -469,7 +475,7 @@ describe('<DropZone />', () => {
       );
       const fileInput = dropZone.find('input', {type: 'file'})!;
       fileInput.trigger('onBlur');
-      expect(dropZone.find('#blurred')).toHaveLength(1);
+      expect(dropZone).toContainReactComponent('div', {id: 'blurred'});
     });
 
     it('sets disabled to true when the dropzone is disabled', () => {
@@ -483,7 +489,7 @@ describe('<DropZone />', () => {
         </DropZone>,
       );
 
-      expect(dropZone.find('#disabled')).toHaveLength(1);
+      expect(dropZone).toContainReactComponent('div', {id: 'disabled'});
     });
 
     it('sets the default type to file if not specified', () => {
@@ -497,7 +503,7 @@ describe('<DropZone />', () => {
         </DropZone>,
       );
 
-      expect(dropZone.find('#file')).toHaveLength(1);
+      expect(dropZone).toContainReactComponent('div', {id: 'file'});
     });
   });
 
@@ -555,12 +561,12 @@ function setBoundingClientRect(size: keyof typeof widths) {
 }
 
 function fireEvent({
-  element,
+  wrapper,
   eventType = 'drop',
   testFiles = files,
   spy,
 }: {
-  element: ReactWrapper;
+  wrapper: CustomRoot<any, any>;
   eventType?: string;
   spy?: jest.Mock;
   testFiles?: Record<string, unknown>[];
@@ -571,11 +577,11 @@ function fireEvent({
     }
     const event = createEvent(eventType, testFiles);
 
-    element.findAll('div')[3].getDOMNode().dispatchEvent(event);
+    wrapper.findAll('div')[3].domNode!.dispatchEvent(event);
 
     if (eventType === 'dragenter') {
       clock.tick(50);
     }
   });
-  element.update();
+  wrapper.forceUpdate();
 }
diff --git a/src/components/ExceptionList/tests/ExceptionList.test.tsx b/src/components/ExceptionList/tests/ExceptionList.test.tsx
index 78b81d0366b..0213490e5a5 100644
--- a/src/components/ExceptionList/tests/ExceptionList.test.tsx
+++ b/src/components/ExceptionList/tests/ExceptionList.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import {CirclePlusMinor, NoteMinor} from '@shopify/polaris-icons';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities';
 import {Icon} from 'components';
 
 import {ExceptionList} from '../ExceptionList';
@@ -9,7 +8,7 @@ import {Truncate} from '../../Truncate';
 
 describe('<ExceptionList />', () => {
   it('renders its items', () => {
-    const exceptionList = mountWithAppProvider(
+    const exceptionList = mountWithApp(
       <ExceptionList
         items={[
           {
@@ -24,11 +23,11 @@ describe('<ExceptionList />', () => {
         ]}
       />,
     );
-    expect(exceptionList.find('li')).toHaveLength(2);
+    expect(exceptionList).toContainReactComponentTimes('li', 2);
   });
 
   it('renders its items icon as an <Icon />', () => {
-    const exceptionList = mountWithAppProvider(
+    const exceptionList = mountWithApp(
       <ExceptionList
         items={[
           {
@@ -39,11 +38,12 @@ describe('<ExceptionList />', () => {
         ]}
       />,
     );
-    expect(exceptionList.find(Icon)).toHaveLength(1);
+
+    expect(exceptionList).toContainReactComponent(Icon);
   });
 
   it('renders an item without an icon', () => {
-    const exceptionList = mountWithAppProvider(
+    const exceptionList = mountWithApp(
       <ExceptionList
         items={[
           {
@@ -53,11 +53,12 @@ describe('<ExceptionList />', () => {
         ]}
       />,
     );
-    expect(exceptionList.find(Icon)).toHaveLength(0);
+
+    expect(exceptionList).not.toContainReactComponent(Icon);
   });
 
   it('renders an item with a truncate', () => {
-    const exceptionList = mountWithAppProvider(
+    const exceptionList = mountWithApp(
       <ExceptionList
         items={[
           {
@@ -67,11 +68,12 @@ describe('<ExceptionList />', () => {
         ]}
       />,
     );
-    expect(exceptionList.find(Truncate)).toHaveLength(1);
+
+    expect(exceptionList).toContainReactComponent(Truncate);
   });
 
   it('renders an item with a title', () => {
-    const exceptionList = mountWithAppProvider(
+    const exceptionList = mountWithApp(
       <ExceptionList
         items={[
           {
@@ -80,6 +82,6 @@ describe('<ExceptionList />', () => {
         ]}
       />,
     );
-    expect(exceptionList.text()).toBe('Favorite customer');
+    expect(exceptionList).toContainReactText('Favorite customer');
   });
 });
diff --git a/src/components/Filters/components/ConnectedFilterControl/components/Item/tests/Item.test.tsx b/src/components/Filters/components/ConnectedFilterControl/components/Item/tests/Item.test.tsx
index 7f7e0b58027..f9a0d8a543f 100644
--- a/src/components/Filters/components/ConnectedFilterControl/components/Item/tests/Item.test.tsx
+++ b/src/components/Filters/components/ConnectedFilterControl/components/Item/tests/Item.test.tsx
@@ -1,23 +1,26 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider, trigger} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities';
 
 import {Item} from '../Item';
 
 describe('<Item />', () => {
   it('handles focus', () => {
-    const item = mountWithAppProvider(<Item />);
+    const item = mountWithApp(<Item />);
 
-    trigger(item.find('div'), 'onFocus');
+    item.find('div')!.trigger('onFocus');
 
-    expect(item.find('div').hasClass('Item-focused')).toBe(true);
+    expect(item).toContainReactComponent('div', {
+      className: expect.stringContaining('Item-focused'),
+    });
   });
 
   it('handles blur', () => {
-    const item = mountWithAppProvider(<Item />);
+    const item = mountWithApp(<Item />);
 
-    trigger(item.find('div'), 'onBlur');
+    item.find('div')!.trigger('onBlur');
 
-    expect(item.find('div').hasClass('Item-focused')).toBe(false);
+    expect(item).not.toContainReactComponent('div', {
+      className: expect.stringContaining('Item-focused'),
+    });
   });
 });

From 3bdbc6159210d946abeef877a7f7068056167bca Mon Sep 17 00:00:00 2001
From: Richard Todd <richard.todd@shopify.com>
Date: Mon, 23 Aug 2021 16:28:10 -0400
Subject: [PATCH 3/6] Split PR and removed changes for EmptyRearchResult,
 EventListener, and EmptyState

---
 UNRELEASED.md                                 |  1 +
 .../tests/EmptySearchResult.test.tsx          | 27 ++---
 .../EmptyState/tests/EmptyState.test.tsx      | 98 +++++++++----------
 .../tests/EventListener.test.tsx              | 13 ++-
 4 files changed, 71 insertions(+), 68 deletions(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 5d39125f206..0b1044822ad 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -81,5 +81,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Modernized tests for Pagination, FilterControl, FilterCreator, FilterValueSelector, and DateSelector components ([#4438](https://github.com/Shopify/polaris-react/pull/4438))
 - Modernized tests for PopoverOverlay component([#4430](https://github.com/Shopify/polaris-react/pull/4430))
 - Modernized tests for Dropzone, EmptySearchResult, EmptyState, EventListener, ExceptionList, and ConnectedFilterControl/Item components([#4412](https://github.com/Shopify/polaris-react/pull/4412))
+- Modernized tests for Dropzone, ExceptionList, and ConnectedFilterControl > Item components([#4412](https://github.com/Shopify/polaris-react/pull/4412))
 
 ### Deprecations
diff --git a/src/components/EmptySearchResult/tests/EmptySearchResult.test.tsx b/src/components/EmptySearchResult/tests/EmptySearchResult.test.tsx
index 3eee57d044b..6d96090356b 100644
--- a/src/components/EmptySearchResult/tests/EmptySearchResult.test.tsx
+++ b/src/components/EmptySearchResult/tests/EmptySearchResult.test.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import {mountWithApp} from 'test-utilities';
+// eslint-disable-next-line no-restricted-imports
+import {mountWithAppProvider} from 'test-utilities/legacy';
 import {DisplayText, TextStyle} from 'components';
 
 import {EmptySearchResult} from '../EmptySearchResult';
@@ -7,35 +8,37 @@ import {emptySearch} from '../illustrations';
 
 describe('<EmptySearchResult />', () => {
   it("displays the title with style 'Display Small'", () => {
-    const wrapper = mountWithApp(<EmptySearchResult title="Foo" />);
+    const wrapper = mountWithAppProvider(<EmptySearchResult title="Foo" />);
     const displaySmalls = wrapper.findWhere(
       (wrap) => wrap.is(DisplayText) && wrap.prop('size') === 'small',
     );
-
-    expect(wrapper).toContainReactComponent(DisplayText, {size: 'small'});
-    expect(displaySmalls).toContainReactText('Foo');
+    expect(displaySmalls).toHaveLength(1);
+    expect(displaySmalls.first().text()).toBe('Foo');
   });
 
   it("displays the description with style 'Body Subdued'", () => {
-    const wrapper = mountWithApp(
+    const wrapper = mountWithAppProvider(
       <EmptySearchResult title="Foo" description="Bar" />,
     );
     const subdued = wrapper.findWhere(
       (wrap) => wrap.is(TextStyle) && wrap.prop('variation') === 'subdued',
     );
-    expect(wrapper).toContainReactComponent(TextStyle, {variation: 'subdued'});
-    expect(subdued).toContainReactText('Bar');
+    expect(subdued).toHaveLength(1);
+    expect(subdued.first().text()).toBe('Bar');
   });
 
   it('does not display an image when `withIllustration` is false', () => {
-    const wrapper = mountWithApp(<EmptySearchResult title="Foo" />);
-    expect(wrapper).not.toContainReactComponent('img');
+    const wrapper = mountWithAppProvider(<EmptySearchResult title="Foo" />);
+    const images = wrapper.find('img');
+    expect(images).toHaveLength(0);
   });
 
   it('displays the illustration when `withIllustration` is true', () => {
-    const wrapper = mountWithApp(
+    const wrapper = mountWithAppProvider(
       <EmptySearchResult title="Foo" description="Bar" withIllustration />,
     );
-    expect(wrapper).toContainReactComponentTimes('img', 1, {src: emptySearch});
+    const images = wrapper.find('img');
+    expect(images).toHaveLength(1);
+    expect(images.first().prop('src')).toBe(emptySearch);
   });
 });
diff --git a/src/components/EmptyState/tests/EmptyState.test.tsx b/src/components/EmptyState/tests/EmptyState.test.tsx
index 4996159e881..c1899121300 100644
--- a/src/components/EmptyState/tests/EmptyState.test.tsx
+++ b/src/components/EmptyState/tests/EmptyState.test.tsx
@@ -18,16 +18,15 @@ describe('<EmptyState />', () => {
 
   describe('action', () => {
     it('renders a button with the action content if action is set', () => {
-      const emptyState = mountWithApp(
+      const emptyState = mountWithAppProvider(
         <EmptyState action={{content: 'Add transfer'}} image={imgSrc} />,
       );
-      expect(emptyState.find('button')).toContainReactText('Add transfer');
+      expect(emptyState.find('button').contains('Add transfer')).toBe(true);
     });
 
     it('does not render a button when no action is set', () => {
-      const emptyState = mountWithApp(<EmptyState image={imgSrc} />);
-
-      expect(emptyState).not.toContainReactComponent('button');
+      const emptyState = mountWithAppProvider(<EmptyState image={imgSrc} />);
+      expect(emptyState.find('button').contains('Add transfer')).toBe(false);
     });
 
     it('renders a medium size primary button by default', () => {
@@ -42,15 +41,15 @@ describe('<EmptyState />', () => {
     });
 
     it('renders a medium button when in a content context', () => {
-      const emptyStateInContentContext = mountWithApp(
+      const emptyStateInContentContext = mountWithAppProvider(
         <WithinContentContext.Provider value>
           <EmptyState image={imgSrc} action={{content: 'Upload files'}} />
         </WithinContentContext.Provider>,
       );
 
-      expect(emptyStateInContentContext).toContainReactComponent(Button, {
-        size: 'medium',
-      });
+      expect(emptyStateInContentContext.find(Button).prop('size')).toBe(
+        'medium',
+      );
     });
 
     it('adds center distribution and tight spacing to Stack', () => {
@@ -92,89 +91,86 @@ describe('<EmptyState />', () => {
         </p>
       );
 
-      const emptyState = mountWithApp(
+      const emptyState = mountWithAppProvider(
         <EmptyState image={imgSrc}>{children}</EmptyState>,
       );
 
-      expect(emptyState.find(TextContainer)).toContainReactText(
-        expectedContent,
-      );
+      expect(emptyState.find(TextContainer).text()).toContain(expectedContent);
     });
   });
 
   describe('img', () => {
+    const emptyState = mountWithAppProvider(<EmptyState image={imgSrc} />);
+
     it('passes the provided source to Image', () => {
-      const emptyState = mountWithApp(<EmptyState image={imgSrc} />);
-      expect(emptyState).toContainReactComponent(Image, {source: imgSrc});
+      expect(emptyState.find(Image).prop('source')).toBe(imgSrc);
     });
 
     it('renders an Image with a sourceSet when largeImage is passed', () => {
       imgSrc =
         'https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg';
 
-      const emptyState = mountWithApp(
+      const emptyState = mountWithAppProvider(
         <EmptyState image={imgSrc} largeImage={imgSrc} />,
       );
 
-      expect(emptyState).toContainReactComponent(Image, {
-        sourceSet: [
-          {
-            descriptor: '568w',
-            source:
-              'https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg',
-          },
-          {
-            descriptor: '1136w',
-            source:
-              'https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg',
-          },
-        ],
-      });
+      expect(emptyState.find(Image).props().sourceSet).toStrictEqual([
+        {
+          descriptor: '568w',
+          source:
+            'https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg',
+        },
+        {
+          descriptor: '1136w',
+          source:
+            'https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg',
+        },
+      ]);
     });
   });
 
   describe('role', () => {
+    const emptyState = mountWithAppProvider(<EmptyState image={imgSrc} />);
     it('passes the presentation role to Image', () => {
-      const emptyState = mountWithApp(<EmptyState image={imgSrc} />);
-      expect(emptyState).toContainReactComponent(Image, {role: 'presentation'});
+      expect(emptyState.find(Image).prop('role')).toBe('presentation');
     });
   });
 
   describe('alt', () => {
+    const emptyState = mountWithAppProvider(<EmptyState image={imgSrc} />);
     it('passes an empty alt to Image', () => {
-      const emptyState = mountWithApp(<EmptyState image={imgSrc} />);
-      expect(emptyState).toContainReactComponent(Image, {alt: ''});
+      expect(emptyState.find(Image).prop('alt')).toBe('');
     });
   });
 
   describe('heading', () => {
     it('passes the provided heading to DisplayText', () => {
       const expectedHeading = 'Manage your inventory transfers';
-      const emptyState = mountWithApp(
+      const emptyState = mountWithAppProvider(
         <EmptyState heading={expectedHeading} image={imgSrc} />,
       );
-      const displayText = emptyState.find(DisplayText)!;
-
-      expect(displayText).toHaveReactProps({size: 'medium'});
-      expect(displayText).toContainReactText(expectedHeading);
+      expect(emptyState.find(DisplayText).prop('size')).toBe('medium');
+      expect(emptyState.find(DisplayText).contains(expectedHeading)).toBe(true);
     });
 
     it('renders a small DisplayText when in a content context', () => {
-      const emptyStateInContentContext = mountWithApp(
+      const emptyStateInContentContext = mountWithAppProvider(
         <WithinContentContext.Provider value>
           <EmptyState heading="Heading" image={imgSrc} />
         </WithinContentContext.Provider>,
       );
 
-      expect(emptyStateInContentContext).toContainReactComponent(DisplayText, {
-        size: 'small',
-      });
+      const headingSize = emptyStateInContentContext
+        .find(DisplayText)
+        .prop('size');
+
+      expect(headingSize).toBe('small');
     });
   });
 
   describe('secondaryAction', () => {
     it('renders secondaryAction if provided', () => {
-      const emptyState = mountWithApp(
+      const emptyState = mountWithAppProvider(
         <EmptyState
           secondaryAction={{
             content: 'Learn more',
@@ -184,7 +180,7 @@ describe('<EmptyState />', () => {
         />,
       );
 
-      expect(emptyState.find(UnstyledLink)).toContainReactText('Learn more');
+      expect(emptyState.find(UnstyledLink).text()).toContain('Learn more');
     });
   });
 
@@ -194,18 +190,18 @@ describe('<EmptyState />', () => {
     const footerContentMarkup = <p>{expectedContent}</p>;
 
     it('renders footer content', () => {
-      const emptyState = mountWithApp(
+      const emptyState = mountWithAppProvider(
         <EmptyState footerContent={footerContentMarkup} image={imgSrc} />,
       );
-      expect(emptyState).toContainReactComponent(TextContainer, {
-        children: footerContentMarkup,
-      });
+      const footerContentTextContainer = emptyState.find(TextContainer).last();
+
+      expect(footerContentTextContainer.text()).toContain(expectedContent);
     });
 
     it('does not create a footer when footerContent is not provided', () => {
-      const emptyState = mountWithApp(<EmptyState image={imgSrc} />);
+      const emptyState = mountWithAppProvider(<EmptyState image={imgSrc} />);
 
-      expect(emptyState).not.toContainReactComponent(TextContainer);
+      expect(emptyState.find(TextContainer)).toHaveLength(0);
     });
   });
 });
diff --git a/src/components/EventListener/tests/EventListener.test.tsx b/src/components/EventListener/tests/EventListener.test.tsx
index 17f59019d54..ecc793c4919 100644
--- a/src/components/EventListener/tests/EventListener.test.tsx
+++ b/src/components/EventListener/tests/EventListener.test.tsx
@@ -1,26 +1,27 @@
 import React from 'react';
-import {mountWithApp} from 'test-utilities';
+// eslint-disable-next-line no-restricted-imports
+import {mountWithAppProvider} from 'test-utilities/legacy';
 
 import {EventListener} from '../EventListener';
 
 describe('<EventListener />', () => {
   it('calls handler when the resize event is fired', () => {
     const spy = jest.fn();
-    mountWithApp(<EventListener event="resize" handler={spy} />);
+    mountWithAppProvider(<EventListener event="resize" handler={spy} />);
     window.dispatchEvent(new Event('resize'));
     expect(spy).toHaveBeenCalled();
   });
 
   it('does not call handler when a different event is fired', () => {
     const spy = jest.fn();
-    mountWithApp(<EventListener event="click" handler={spy} />);
+    mountWithAppProvider(<EventListener event="click" handler={spy} />);
     window.dispatchEvent(new Event('resize'));
     expect(spy).not.toHaveBeenCalled();
   });
 
   it('removes listener on update', () => {
     const spy = jest.fn();
-    const eventListener = mountWithApp(
+    const eventListener = mountWithAppProvider(
       <EventListener event="resize" handler={spy} />,
     );
     eventListener.setProps({event: 'scroll', handler: noop});
@@ -30,7 +31,9 @@ describe('<EventListener />', () => {
 
   it('removes listener when unmounted', () => {
     const spy = jest.fn();
-    mountWithApp(<EventListener event="resize" handler={spy} />).unmount();
+    mountWithAppProvider(
+      <EventListener event="resize" handler={spy} />,
+    ).unmount();
     window.dispatchEvent(new Event('resize'));
     expect(spy).not.toHaveBeenCalled();
   });

From 4b443fdf56de5e513bcefa62cd8a630bcec7ebfe Mon Sep 17 00:00:00 2001
From: Richard Todd <richard.todd@shopify.com>
Date: Thu, 26 Aug 2021 14:58:40 -0400
Subject: [PATCH 4/6] Rebased

---
 .../EmptyState/tests/EmptyState.test.tsx      | 98 ++++++++++---------
 1 file changed, 51 insertions(+), 47 deletions(-)

diff --git a/src/components/EmptyState/tests/EmptyState.test.tsx b/src/components/EmptyState/tests/EmptyState.test.tsx
index c1899121300..4996159e881 100644
--- a/src/components/EmptyState/tests/EmptyState.test.tsx
+++ b/src/components/EmptyState/tests/EmptyState.test.tsx
@@ -18,15 +18,16 @@ describe('<EmptyState />', () => {
 
   describe('action', () => {
     it('renders a button with the action content if action is set', () => {
-      const emptyState = mountWithAppProvider(
+      const emptyState = mountWithApp(
         <EmptyState action={{content: 'Add transfer'}} image={imgSrc} />,
       );
-      expect(emptyState.find('button').contains('Add transfer')).toBe(true);
+      expect(emptyState.find('button')).toContainReactText('Add transfer');
     });
 
     it('does not render a button when no action is set', () => {
-      const emptyState = mountWithAppProvider(<EmptyState image={imgSrc} />);
-      expect(emptyState.find('button').contains('Add transfer')).toBe(false);
+      const emptyState = mountWithApp(<EmptyState image={imgSrc} />);
+
+      expect(emptyState).not.toContainReactComponent('button');
     });
 
     it('renders a medium size primary button by default', () => {
@@ -41,15 +42,15 @@ describe('<EmptyState />', () => {
     });
 
     it('renders a medium button when in a content context', () => {
-      const emptyStateInContentContext = mountWithAppProvider(
+      const emptyStateInContentContext = mountWithApp(
         <WithinContentContext.Provider value>
           <EmptyState image={imgSrc} action={{content: 'Upload files'}} />
         </WithinContentContext.Provider>,
       );
 
-      expect(emptyStateInContentContext.find(Button).prop('size')).toBe(
-        'medium',
-      );
+      expect(emptyStateInContentContext).toContainReactComponent(Button, {
+        size: 'medium',
+      });
     });
 
     it('adds center distribution and tight spacing to Stack', () => {
@@ -91,86 +92,89 @@ describe('<EmptyState />', () => {
         </p>
       );
 
-      const emptyState = mountWithAppProvider(
+      const emptyState = mountWithApp(
         <EmptyState image={imgSrc}>{children}</EmptyState>,
       );
 
-      expect(emptyState.find(TextContainer).text()).toContain(expectedContent);
+      expect(emptyState.find(TextContainer)).toContainReactText(
+        expectedContent,
+      );
     });
   });
 
   describe('img', () => {
-    const emptyState = mountWithAppProvider(<EmptyState image={imgSrc} />);
-
     it('passes the provided source to Image', () => {
-      expect(emptyState.find(Image).prop('source')).toBe(imgSrc);
+      const emptyState = mountWithApp(<EmptyState image={imgSrc} />);
+      expect(emptyState).toContainReactComponent(Image, {source: imgSrc});
     });
 
     it('renders an Image with a sourceSet when largeImage is passed', () => {
       imgSrc =
         'https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg';
 
-      const emptyState = mountWithAppProvider(
+      const emptyState = mountWithApp(
         <EmptyState image={imgSrc} largeImage={imgSrc} />,
       );
 
-      expect(emptyState.find(Image).props().sourceSet).toStrictEqual([
-        {
-          descriptor: '568w',
-          source:
-            'https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg',
-        },
-        {
-          descriptor: '1136w',
-          source:
-            'https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg',
-        },
-      ]);
+      expect(emptyState).toContainReactComponent(Image, {
+        sourceSet: [
+          {
+            descriptor: '568w',
+            source:
+              'https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg',
+          },
+          {
+            descriptor: '1136w',
+            source:
+              'https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg',
+          },
+        ],
+      });
     });
   });
 
   describe('role', () => {
-    const emptyState = mountWithAppProvider(<EmptyState image={imgSrc} />);
     it('passes the presentation role to Image', () => {
-      expect(emptyState.find(Image).prop('role')).toBe('presentation');
+      const emptyState = mountWithApp(<EmptyState image={imgSrc} />);
+      expect(emptyState).toContainReactComponent(Image, {role: 'presentation'});
     });
   });
 
   describe('alt', () => {
-    const emptyState = mountWithAppProvider(<EmptyState image={imgSrc} />);
     it('passes an empty alt to Image', () => {
-      expect(emptyState.find(Image).prop('alt')).toBe('');
+      const emptyState = mountWithApp(<EmptyState image={imgSrc} />);
+      expect(emptyState).toContainReactComponent(Image, {alt: ''});
     });
   });
 
   describe('heading', () => {
     it('passes the provided heading to DisplayText', () => {
       const expectedHeading = 'Manage your inventory transfers';
-      const emptyState = mountWithAppProvider(
+      const emptyState = mountWithApp(
         <EmptyState heading={expectedHeading} image={imgSrc} />,
       );
-      expect(emptyState.find(DisplayText).prop('size')).toBe('medium');
-      expect(emptyState.find(DisplayText).contains(expectedHeading)).toBe(true);
+      const displayText = emptyState.find(DisplayText)!;
+
+      expect(displayText).toHaveReactProps({size: 'medium'});
+      expect(displayText).toContainReactText(expectedHeading);
     });
 
     it('renders a small DisplayText when in a content context', () => {
-      const emptyStateInContentContext = mountWithAppProvider(
+      const emptyStateInContentContext = mountWithApp(
         <WithinContentContext.Provider value>
           <EmptyState heading="Heading" image={imgSrc} />
         </WithinContentContext.Provider>,
       );
 
-      const headingSize = emptyStateInContentContext
-        .find(DisplayText)
-        .prop('size');
-
-      expect(headingSize).toBe('small');
+      expect(emptyStateInContentContext).toContainReactComponent(DisplayText, {
+        size: 'small',
+      });
     });
   });
 
   describe('secondaryAction', () => {
     it('renders secondaryAction if provided', () => {
-      const emptyState = mountWithAppProvider(
+      const emptyState = mountWithApp(
         <EmptyState
           secondaryAction={{
             content: 'Learn more',
@@ -180,7 +184,7 @@ describe('<EmptyState />', () => {
         />,
       );
 
-      expect(emptyState.find(UnstyledLink).text()).toContain('Learn more');
+      expect(emptyState.find(UnstyledLink)).toContainReactText('Learn more');
     });
   });
 
@@ -190,18 +194,18 @@ describe('<EmptyState />', () => {
     const footerContentMarkup = <p>{expectedContent}</p>;
 
     it('renders footer content', () => {
-      const emptyState = mountWithAppProvider(
+      const emptyState = mountWithApp(
         <EmptyState footerContent={footerContentMarkup} image={imgSrc} />,
       );
-      const footerContentTextContainer = emptyState.find(TextContainer).last();
-
-      expect(footerContentTextContainer.text()).toContain(expectedContent);
+      expect(emptyState).toContainReactComponent(TextContainer, {
+        children: footerContentMarkup,
+      });
     });
 
     it('does not create a footer when footerContent is not provided', () => {
-      const emptyState = mountWithAppProvider(<EmptyState image={imgSrc} />);
+      const emptyState = mountWithApp(<EmptyState image={imgSrc} />);
 
-      expect(emptyState.find(TextContainer)).toHaveLength(0);
+      expect(emptyState).not.toContainReactComponent(TextContainer);
     });
   });
 });

From 1d191bf9381d7b5874ddd47b5dc6eb06a6b4e67e Mon Sep 17 00:00:00 2001
From: Richard Todd <richard.todd@shopify.com>
Date: Thu, 26 Aug 2021 15:00:14 -0400
Subject: [PATCH 5/6] Fixed reverted files

---
 .../tests/EmptySearchResult.test.tsx          | 27 +++++++++----------
 .../tests/EventListener.test.tsx              | 13 ++++-----
 2 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/src/components/EmptySearchResult/tests/EmptySearchResult.test.tsx b/src/components/EmptySearchResult/tests/EmptySearchResult.test.tsx
index 6d96090356b..3eee57d044b 100644
--- a/src/components/EmptySearchResult/tests/EmptySearchResult.test.tsx
+++ b/src/components/EmptySearchResult/tests/EmptySearchResult.test.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities';
 import {DisplayText, TextStyle} from 'components';
 
 import {EmptySearchResult} from '../EmptySearchResult';
@@ -8,37 +7,35 @@ import {emptySearch} from '../illustrations';
 
 describe('<EmptySearchResult />', () => {
   it("displays the title with style 'Display Small'", () => {
-    const wrapper = mountWithAppProvider(<EmptySearchResult title="Foo" />);
+    const wrapper = mountWithApp(<EmptySearchResult title="Foo" />);
     const displaySmalls = wrapper.findWhere(
       (wrap) => wrap.is(DisplayText) && wrap.prop('size') === 'small',
     );
-    expect(displaySmalls).toHaveLength(1);
-    expect(displaySmalls.first().text()).toBe('Foo');
+
+    expect(wrapper).toContainReactComponent(DisplayText, {size: 'small'});
+    expect(displaySmalls).toContainReactText('Foo');
   });
 
   it("displays the description with style 'Body Subdued'", () => {
-    const wrapper = mountWithAppProvider(
+    const wrapper = mountWithApp(
       <EmptySearchResult title="Foo" description="Bar" />,
     );
     const subdued = wrapper.findWhere(
       (wrap) => wrap.is(TextStyle) && wrap.prop('variation') === 'subdued',
     );
-    expect(subdued).toHaveLength(1);
-    expect(subdued.first().text()).toBe('Bar');
+    expect(wrapper).toContainReactComponent(TextStyle, {variation: 'subdued'});
+    expect(subdued).toContainReactText('Bar');
   });
 
   it('does not display an image when `withIllustration` is false', () => {
-    const wrapper = mountWithAppProvider(<EmptySearchResult title="Foo" />);
-    const images = wrapper.find('img');
-    expect(images).toHaveLength(0);
+    const wrapper = mountWithApp(<EmptySearchResult title="Foo" />);
+    expect(wrapper).not.toContainReactComponent('img');
   });
 
   it('displays the illustration when `withIllustration` is true', () => {
-    const wrapper = mountWithAppProvider(
+    const wrapper = mountWithApp(
       <EmptySearchResult title="Foo" description="Bar" withIllustration />,
     );
-    const images = wrapper.find('img');
-    expect(images).toHaveLength(1);
-    expect(images.first().prop('src')).toBe(emptySearch);
+    expect(wrapper).toContainReactComponentTimes('img', 1, {src: emptySearch});
   });
 });
diff --git a/src/components/EventListener/tests/EventListener.test.tsx b/src/components/EventListener/tests/EventListener.test.tsx
index ecc793c4919..17f59019d54 100644
--- a/src/components/EventListener/tests/EventListener.test.tsx
+++ b/src/components/EventListener/tests/EventListener.test.tsx
@@ -1,27 +1,26 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities';
 
 import {EventListener} from '../EventListener';
 
 describe('<EventListener />', () => {
   it('calls handler when the resize event is fired', () => {
     const spy = jest.fn();
-    mountWithAppProvider(<EventListener event="resize" handler={spy} />);
+    mountWithApp(<EventListener event="resize" handler={spy} />);
     window.dispatchEvent(new Event('resize'));
     expect(spy).toHaveBeenCalled();
   });
 
   it('does not call handler when a different event is fired', () => {
     const spy = jest.fn();
-    mountWithAppProvider(<EventListener event="click" handler={spy} />);
+    mountWithApp(<EventListener event="click" handler={spy} />);
     window.dispatchEvent(new Event('resize'));
     expect(spy).not.toHaveBeenCalled();
   });
 
   it('removes listener on update', () => {
     const spy = jest.fn();
-    const eventListener = mountWithAppProvider(
+    const eventListener = mountWithApp(
       <EventListener event="resize" handler={spy} />,
     );
     eventListener.setProps({event: 'scroll', handler: noop});
@@ -31,9 +30,7 @@ describe('<EventListener />', () => {
 
   it('removes listener when unmounted', () => {
     const spy = jest.fn();
-    mountWithAppProvider(
-      <EventListener event="resize" handler={spy} />,
-    ).unmount();
+    mountWithApp(<EventListener event="resize" handler={spy} />).unmount();
     window.dispatchEvent(new Event('resize'));
     expect(spy).not.toHaveBeenCalled();
   });

From 8f6afc7115fba7641b32fd560f7e53c685e2ab5c Mon Sep 17 00:00:00 2001
From: Richard Todd <richard.todd@shopify.com>
Date: Thu, 26 Aug 2021 15:01:03 -0400
Subject: [PATCH 6/6] Removed dupes in UNRELEASED.md

---
 UNRELEASED.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 0b1044822ad..7b4f4dd09b0 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -80,7 +80,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Modernized tests for EmptyState component ([#4427](https://github.com/Shopify/polaris-react/pull/4427))
 - Modernized tests for Pagination, FilterControl, FilterCreator, FilterValueSelector, and DateSelector components ([#4438](https://github.com/Shopify/polaris-react/pull/4438))
 - Modernized tests for PopoverOverlay component([#4430](https://github.com/Shopify/polaris-react/pull/4430))
-- Modernized tests for Dropzone, EmptySearchResult, EmptyState, EventListener, ExceptionList, and ConnectedFilterControl/Item components([#4412](https://github.com/Shopify/polaris-react/pull/4412))
 - Modernized tests for Dropzone, ExceptionList, and ConnectedFilterControl > Item components([#4412](https://github.com/Shopify/polaris-react/pull/4412))
 
 ### Deprecations