From ccd6d07836a6bb207db308d834f6aa55b2f0fe69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Karen=20Pinz=C3=A1s=20Morrongiello?=
 <45268098+kpinzas-sh@users.noreply.github.com>
Date: Wed, 18 Aug 2021 11:14:17 -0400
Subject: [PATCH 1/2] Add test modernization to DisplayText, FileUpload,
 MessageIndicator and Dialog

---
 UNRELEASED.md                                 |  1 +
 src/components/Choice/tests/Choice.test.tsx   | 40 ++++++------
 .../DisplayText/tests/DisplayText.test.tsx    | 16 ++---
 .../components/FileUpload/FileUpload.tsx      |  8 +--
 .../FileUpload/tests/FileUpload.test.tsx      | 61 +++++++++++--------
 .../MessageIndicator/MessageIndicator.tsx     |  4 +-
 .../tests/MessageIndicator.test.tsx           | 18 +++---
 .../components/Dialog/tests/Dialog.test.tsx   | 20 +++---
 src/components/Tag/tests/Tag.test.tsx         | 19 +++---
 .../UnstyledLink/tests/UnstyledLink.test.tsx  | 59 +++++++++++-------
 10 files changed, 132 insertions(+), 114 deletions(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 7262e54b5e4..05ceb749dd4 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -53,6 +53,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Modernized tests for SkeletonBodyTest, SkeletonDisplayTest, SkeletonPage, SkeletonThumbnail, and Spinner components ([#4353](https://github.com/Shopify/polaris-react/pull/4353))
 - Modernized tests for CalloutCard, Caption, CheckableButton, Resizer, VideoThumbnail ([#4387](https://github.com/Shopify/polaris-react/pull/4387))
 - Modernized tests for Message, Menu, Search, SearchDismissOverlay, SearchField, UserMenu and TopBar components. ([#4311](https://github.com/Shopify/polaris-react/pull/4311))
+- Modernized test for UnstyledLink, Tag, DisplayText, FileUpload, MessageIndicator, Choice and Dialog ([#4407](https://github.com/Shopify/polaris-react/pull/4407)).
 - Modernized tests for Konami, Labelled, and Link components([#4389](https://github.com/Shopify/polaris-react/pull/4389))
 - Modernized tests for Scrollable, ScrollTo, ScrollLock, Select, SettingToggle, Sheet, Spinner, and Sticky components([#4386](https://github.com/Shopify/polaris-react/pull/4386))
 
diff --git a/src/components/Choice/tests/Choice.test.tsx b/src/components/Choice/tests/Choice.test.tsx
index 17258974ecd..19fbe1a9a4b 100644
--- a/src/components/Choice/tests/Choice.test.tsx
+++ b/src/components/Choice/tests/Choice.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/react-testing';
 import {InlineError} from 'components';
 
 import {Choice} from '../Choice';
@@ -8,38 +7,37 @@ import {Choice} from '../Choice';
 describe('<Choice />', () => {
   it('calls the provided onClick when clicked', () => {
     const spy = jest.fn();
-    const element = mountWithAppProvider(
+    const element = mountWithApp(
       <Choice id="MyChoice" label="Label" onClick={spy} />,
     );
-    element.find('label').simulate('click');
+    element.find('label')!.trigger('onClick');
 
     expect(spy).toHaveBeenCalledTimes(1);
   });
 
   it('uses the id as the for attribute of a label', () => {
-    const element = mountWithAppProvider(
-      <Choice id="MyChoice" label="Label" />,
-    );
-    const label = element.find('label');
+    const element = mountWithApp(<Choice id="MyChoice" label="Label" />);
 
-    expect(label.prop('htmlFor')).toBe('MyChoice');
-    expect(label.text()).toBe('Label');
+    expect(element).toContainReactComponent('label', {
+      htmlFor: 'MyChoice',
+    });
+    expect(element.find('label'))!.toContainReactText('Label');
   });
 
   it('renders error markup when provided with a value', () => {
-    const element = mountWithAppProvider(
+    const element = mountWithApp(
       <Choice id="MyChoice" label="Label" error="Error message" />,
     );
 
-    expect(element.find('#MyChoiceError').text()).toContain('Error message');
+    expect(element.find(InlineError)).toContainReactText('Error message');
   });
 
   it('avoids rendering error markup when the error is a boolean value', () => {
-    const element = mountWithAppProvider(
+    const element = mountWithApp(
       <Choice id="MyChoice" label="Label" error={Boolean(true)} />,
     );
 
-    expect(element.find(InlineError)).toHaveLength(0);
+    expect(element).not.toContainReactComponent(InlineError);
   });
 
   // We want the entire choice to be clickable, including the space
@@ -49,14 +47,13 @@ describe('<Choice />', () => {
       return <div />;
     }
 
-    const element = mountWithAppProvider(
+    const element = mountWithApp(
       <Choice id="MyChoice" label="Label">
         <MyComponent />
       </Choice>,
     );
-    const label = element.find('label');
 
-    expect(label.containsMatchingElement(<MyComponent />)).toBe(true);
+    expect(element.find('label')).toContainReactComponent(MyComponent);
   });
 
   it('does not render block-level elements in the label', () => {
@@ -80,12 +77,11 @@ describe('<Choice />', () => {
       'hr',
       'table',
     ];
-    const element = mountWithAppProvider(
-      <Choice id="MyChoice" label="Label" />,
-    );
-    const label = element.find('label');
+    const element = mountWithApp(<Choice id="MyChoice" label="Label" />);
     for (const blockLevelElement of blockLevelElements) {
-      expect(label.find(blockLevelElement)).toHaveLength(0);
+      expect(element.find('label')).not.toContainReactComponent(
+        blockLevelElement,
+      );
     }
   });
 });
diff --git a/src/components/DisplayText/tests/DisplayText.test.tsx b/src/components/DisplayText/tests/DisplayText.test.tsx
index d5daccd3400..a5b7d553a45 100644
--- a/src/components/DisplayText/tests/DisplayText.test.tsx
+++ b/src/components/DisplayText/tests/DisplayText.test.tsx
@@ -1,33 +1,33 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities';
 
 import {DisplayText} from '../DisplayText';
 
 describe('<DisplayText />', () => {
   it('renders its children', () => {
     const text = 'Important text.';
-    const displayText = mountWithAppProvider(
+    const displayText = mountWithApp(
       <DisplayText size="small" element="h1">
         {text}
       </DisplayText>,
     );
-    expect(displayText.contains(text)).toBe(true);
+    expect(displayText).toContainReactText(text);
   });
 
   it('renders the specified element', () => {
-    const displayText = mountWithAppProvider(
+    const displayText = mountWithApp(
       <DisplayText size="extraLarge" element="h1">
         Important text.
       </DisplayText>,
     );
-    expect(displayText.find('h1')).toHaveLength(1);
+    expect(displayText).toContainReactComponentTimes('h1', 1);
   });
 
   it('renders a p element if not specified', () => {
-    const displayText = mountWithAppProvider(
+    const displayText = mountWithApp(
       <DisplayText size="extraLarge">Important text.</DisplayText>,
     );
-    expect(displayText.find('p')).toHaveLength(1);
+
+    expect(displayText).toContainReactComponentTimes('p', 1);
   });
 });
diff --git a/src/components/DropZone/components/FileUpload/FileUpload.tsx b/src/components/DropZone/components/FileUpload/FileUpload.tsx
index c9261f2736a..3c45972d870 100755
--- a/src/components/DropZone/components/FileUpload/FileUpload.tsx
+++ b/src/components/DropZone/components/FileUpload/FileUpload.tsx
@@ -47,9 +47,7 @@ export function FileUpload(props: FileUploadProps) {
 
   const buttonMarkup =
     (size === 'extraLarge' || size === 'large') && buttonStyles ? (
-      <div testID="Button" className={buttonStyles}>
-        {actionTitle}
-      </div>
+      <div className={buttonStyles}>{actionTitle}</div>
     ) : null;
 
   const actionTitleClassName = classNames(
@@ -59,9 +57,7 @@ export function FileUpload(props: FileUploadProps) {
   );
 
   const actionTitleMarkup = (
-    <div testID="Link" className={actionTitleClassName}>
-      {actionTitle}
-    </div>
+    <div className={actionTitleClassName}>{actionTitle}</div>
   );
 
   const fileUploadClassName = classNames(
diff --git a/src/components/DropZone/components/FileUpload/tests/FileUpload.test.tsx b/src/components/DropZone/components/FileUpload/tests/FileUpload.test.tsx
index 19d40524627..9809dfddcb2 100755
--- a/src/components/DropZone/components/FileUpload/tests/FileUpload.test.tsx
+++ b/src/components/DropZone/components/FileUpload/tests/FileUpload.test.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
 import {Caption, TextStyle} from 'components';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider, findByTestID} from 'test-utilities/legacy';
 import {mountWithApp} from 'test-utilities';
 
 import {DropZoneContext} from '../../../context';
@@ -18,7 +16,7 @@ describe('<FileUpload />', () => {
   };
   describe('measuring', () => {
     it('hides the FileUpload while measuring is true', () => {
-      const fileUpload = mountWithAppProvider(
+      const fileUpload = mountWithApp(
         <DropZoneContext.Provider
           value={{
             size: 'extraLarge',
@@ -31,14 +29,15 @@ describe('<FileUpload />', () => {
         </DropZoneContext.Provider>,
       );
 
-      const wrapper = fileUpload.find('div').first();
-      expect(wrapper.hasClass('measuring')).toBe(true);
+      expect(fileUpload).toContainReactComponent('div', {
+        className: 'FileUpload measuring',
+      });
     });
   });
 
   describe('extraLarge', () => {
     it('renders extra large view for type file', () => {
-      const fileUpload = mountWithAppProvider(
+      const fileUpload = mountWithApp(
         <DropZoneContext.Provider
           value={{
             size: 'extraLarge',
@@ -50,13 +49,17 @@ describe('<FileUpload />', () => {
         </DropZoneContext.Provider>,
       );
 
-      expect(fileUpload.find('img').prop('src')).toBe(uploadArrowImage);
-      expect(findByTestID(fileUpload, 'Button')).toHaveLength(1);
-      expect(fileUpload.find(TextStyle)).toHaveLength(1);
+      expect(fileUpload).toContainReactComponent('img', {
+        src: uploadArrowImage,
+      });
+      expect(fileUpload).toContainReactComponent(TextStyle);
+      expect(fileUpload).toContainReactComponent('div', {
+        className: 'Button',
+      });
     });
 
     it('renders extra large view for type image', () => {
-      const fileUpload = mountWithAppProvider(
+      const fileUpload = mountWithApp(
         <DropZoneContext.Provider
           value={{size: 'extraLarge', type: 'image', ...defaultStates}}
         >
@@ -64,14 +67,16 @@ describe('<FileUpload />', () => {
         </DropZoneContext.Provider>,
       );
 
-      expect(findByTestID(fileUpload, 'Button')).toHaveLength(1);
-      expect(fileUpload.find(TextStyle)).toHaveLength(1);
+      expect(fileUpload).toContainReactComponent('div', {
+        className: 'Button',
+      });
+      expect(fileUpload).toContainReactComponent(TextStyle);
     });
   });
 
   describe('large', () => {
     it('renders large view', () => {
-      const fileUpload = mountWithAppProvider(
+      const fileUpload = mountWithApp(
         <DropZoneContext.Provider
           value={{size: 'large', type: 'file', ...defaultStates}}
         >
@@ -79,14 +84,17 @@ describe('<FileUpload />', () => {
         </DropZoneContext.Provider>,
       );
 
-      expect(findByTestID(fileUpload, 'Button')).toHaveLength(1);
-      expect(fileUpload.find(TextStyle)).toHaveLength(1);
-      expect(fileUpload.find(Caption)).toHaveLength(1);
+      expect(fileUpload).toContainReactComponent(Caption);
+      expect(fileUpload).toContainReactComponent(TextStyle);
+
+      expect(fileUpload).toContainReactComponent('div', {
+        className: 'Button slim',
+      });
     });
   });
 
   it('renders medium view', () => {
-    const fileUpload = mountWithAppProvider(
+    const fileUpload = mountWithApp(
       <DropZoneContext.Provider
         value={{size: 'medium', type: 'file', ...defaultStates}}
       >
@@ -94,12 +102,14 @@ describe('<FileUpload />', () => {
       </DropZoneContext.Provider>,
     );
 
-    expect(findByTestID(fileUpload, 'Link')).toHaveLength(1);
-    expect(fileUpload.find(Caption)).toHaveLength(1);
+    expect(fileUpload).toContainReactComponent('div', {
+      className: 'ActionTitle',
+    });
+    expect(fileUpload).toContainReactComponentTimes(Caption, 1);
   });
 
   it('renders small view', () => {
-    const fileUpload = mountWithAppProvider(
+    const fileUpload = mountWithApp(
       <DropZoneContext.Provider
         value={{size: 'small', type: 'file', ...defaultStates}}
       >
@@ -107,11 +117,11 @@ describe('<FileUpload />', () => {
       </DropZoneContext.Provider>,
     );
 
-    expect(fileUpload.find('img')).toHaveLength(1);
+    expect(fileUpload).toContainReactComponentTimes('img', 1);
   });
 
   it('sets a default actionTitle if the prop is provided then removed', () => {
-    const fileUpload = mountWithAppProvider(
+    const fileUpload = mountWithApp(
       <DropZoneContext.Provider
         value={{size: 'large', type: 'file', ...defaultStates}}
       >
@@ -120,11 +130,12 @@ describe('<FileUpload />', () => {
     );
 
     fileUpload.setProps({children: <FileUpload />});
-    expect(findByTestID(fileUpload, 'Button').text()).toBe('Add files');
+
+    expect(fileUpload).toContainReactText('Add files');
   });
 
   it('sets a default actionHint if the prop is provided then removed', () => {
-    const fileUpload = mountWithAppProvider(
+    const fileUpload = mountWithApp(
       <DropZoneContext.Provider
         value={{size: 'large', type: 'file', ...defaultStates}}
       >
@@ -133,7 +144,7 @@ describe('<FileUpload />', () => {
     );
 
     fileUpload.setProps({children: <FileUpload />});
-    expect(fileUpload.find(TextStyle).text()).toBe('or drop files to upload');
+    expect(fileUpload).toContainReactText('or drop files to upload');
   });
 
   it.each([
diff --git a/src/components/MessageIndicator/MessageIndicator.tsx b/src/components/MessageIndicator/MessageIndicator.tsx
index ecbdbacc596..e621eee512e 100644
--- a/src/components/MessageIndicator/MessageIndicator.tsx
+++ b/src/components/MessageIndicator/MessageIndicator.tsx
@@ -8,9 +8,7 @@ export interface MessageIndicatorProps {
 }
 
 export function MessageIndicator({children, active}: MessageIndicatorProps) {
-  const indicatorMarkup = active && (
-    <div testID="indicator" className={styles.MessageIndicator} />
-  );
+  const indicatorMarkup = active && <div className={styles.MessageIndicator} />;
 
   return (
     <div className={styles.MessageIndicatorWrapper}>
diff --git a/src/components/MessageIndicator/tests/MessageIndicator.test.tsx b/src/components/MessageIndicator/tests/MessageIndicator.test.tsx
index 7c0aa26c17c..457d093abfa 100644
--- a/src/components/MessageIndicator/tests/MessageIndicator.test.tsx
+++ b/src/components/MessageIndicator/tests/MessageIndicator.test.tsx
@@ -1,32 +1,32 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider, findByTestID} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities';
 
 import {MessageIndicator} from '../MessageIndicator';
 
 describe('<Indicator />', () => {
   it('mounts', () => {
-    const indicator = mountWithAppProvider(<MessageIndicator />);
-    expect(indicator.exists()).toBe(true);
+    const indicator = mountWithApp(<MessageIndicator />);
+    expect(indicator).not.toBeNull();
   });
 
   it('renders its children', () => {
-    const indicator = mountWithAppProvider(
+    const indicator = mountWithApp(
       <MessageIndicator>
         <div>Hello Polaris</div>
       </MessageIndicator>,
     );
 
-    expect(indicator.text()).toContain('Hello Polaris');
+    expect(indicator).toContainReactText('Hello Polaris');
   });
 
   it('renders indicator markup when active is true', () => {
-    const indicator = mountWithAppProvider(
+    const indicator = mountWithApp(
       <MessageIndicator active>
         <div>Hello Polaris</div>
       </MessageIndicator>,
     );
-
-    expect(findByTestID(indicator, 'indicator').exists()).toBe(true);
+    expect(indicator).toContainReactComponent('div', {
+      className: 'MessageIndicator',
+    });
   });
 });
diff --git a/src/components/Modal/components/Dialog/tests/Dialog.test.tsx b/src/components/Modal/components/Dialog/tests/Dialog.test.tsx
index a4fc49592b2..00dda51c641 100644
--- a/src/components/Modal/components/Dialog/tests/Dialog.test.tsx
+++ b/src/components/Modal/components/Dialog/tests/Dialog.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import {animationFrame} from '@shopify/jest-dom-mocks';
-// eslint-disable-next-line no-restricted-imports
-import {trigger, mountWithAppProvider} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities';
 import {KeypressListener} from 'components';
 
 import {Dialog} from '../Dialog';
@@ -16,23 +15,26 @@ describe('<Dialog>', () => {
   });
 
   it('sets CloseKeypressListener when `in` is true', () => {
-    const listener = mountWithAppProvider(
+    const listener = mountWithApp(
       <Dialog labelledBy="test" onClose={jest.fn()} in>
         something
       </Dialog>,
-    ).find(KeypressListener);
+    );
 
-    expect(listener.exists()).toBe(true);
+    expect(listener).toContainReactComponent(KeypressListener);
   });
 
   it('triggers an onEntered prop', () => {
-    const dialog = mountWithAppProvider(
-      <Dialog labelledBy="test" onClose={jest.fn()} onEntered={jest.fn()}>
+    const spy = jest.fn();
+
+    const dialog = mountWithApp(
+      <Dialog labelledBy="test" onClose={jest.fn()} onEntered={spy}>
         something
       </Dialog>,
     );
 
-    trigger(dialog.find('FadeUp'), 'onEntered');
-    expect(dialog.find('FadeUp').prop('onEntered')).toHaveBeenCalledTimes(1);
+    dialog.triggerKeypath('onEntered');
+
+    expect(spy).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/src/components/Tag/tests/Tag.test.tsx b/src/components/Tag/tests/Tag.test.tsx
index 731bf0a49a7..6b093f286c9 100644
--- a/src/components/Tag/tests/Tag.test.tsx
+++ b/src/components/Tag/tests/Tag.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/react-testing';
 
 import {Tag} from '../Tag';
 
@@ -8,15 +7,15 @@ describe('<Tag />', () => {
   describe('onRemove', () => {
     it('calls onRemove when remove button is clicked', () => {
       const spy = jest.fn();
-      const tag = mountWithAppProvider(<Tag onRemove={spy} />);
-      tag.find('button').simulate('click');
+      const tag = mountWithApp(<Tag onRemove={spy} />);
+      tag.find('button')!.domNode!.click();
       expect(spy).toHaveBeenCalled();
     });
 
     it('does not call onRemove when remove button is disabled', () => {
       const spy = jest.fn();
-      const tag = mountWithAppProvider(<Tag onRemove={spy} disabled />);
-      tag.find('button').simulate('click');
+      const tag = mountWithApp(<Tag onRemove={spy} disabled />);
+      tag.find('button')!.domNode!.click();
       expect(spy).not.toHaveBeenCalled();
     });
   });
@@ -24,15 +23,15 @@ describe('<Tag />', () => {
   describe('onClick', () => {
     it('calls onClick when tag is clicked', () => {
       const spy = jest.fn();
-      const tag = mountWithAppProvider(<Tag onClick={spy} />);
-      tag.find('button').simulate('click');
+      const tag = mountWithApp(<Tag onClick={spy} />);
+      tag.find('button')!.domNode!.click();
       expect(spy).toHaveBeenCalled();
     });
 
     it('does not call onClick when disabled', () => {
       const spy = jest.fn();
-      const tag = mountWithAppProvider(<Tag onClick={spy} disabled />);
-      tag.find('button').simulate('click');
+      const tag = mountWithApp(<Tag onClick={spy} disabled />);
+      tag.find('button')!.domNode!.click();
       expect(spy).not.toHaveBeenCalled();
     });
   });
diff --git a/src/components/UnstyledLink/tests/UnstyledLink.test.tsx b/src/components/UnstyledLink/tests/UnstyledLink.test.tsx
index a5c93cfc2b6..134ccf1fc6f 100644
--- a/src/components/UnstyledLink/tests/UnstyledLink.test.tsx
+++ b/src/components/UnstyledLink/tests/UnstyledLink.test.tsx
@@ -1,61 +1,76 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities/react-testing';
 import {UnstyledLink} from 'components/UnstyledLink';
 
 describe('<UnstyledLink />', () => {
   describe('custom link component', () => {
     it('uses a custom link component instead of an anchor', () => {
       const CustomLinkComponent = () => <div />;
-      const anchorElement = mountWithAppProvider(
+      const anchorElement = mountWithApp(
         <UnstyledLink external url="https://shopify.com" />,
         {link: CustomLinkComponent},
-      ).find(CustomLinkComponent);
-
-      expect(anchorElement).toHaveLength(1);
+      );
+      expect(anchorElement).toContainReactComponentTimes(
+        CustomLinkComponent,
+        1,
+      );
     });
 
     it('doesn’t have polaris prop', () => {
       const CustomLinkComponent = () => <div />;
-      const anchorElement = mountWithAppProvider(
+      const anchorElement = mountWithApp(
         <UnstyledLink external url="https://shopify.com" />,
         {link: CustomLinkComponent},
-      ).find(CustomLinkComponent);
+      );
 
-      expect(anchorElement.prop('polaris')).not.toBeDefined();
+      expect(anchorElement).toContainReactComponent(CustomLinkComponent, {
+        polaris: undefined,
+      });
     });
   });
 
   describe('external', () => {
     it('adds rel and target attributes', () => {
-      const anchorElement = mountWithAppProvider(
+      const anchorElement = mountWithApp(
         <UnstyledLink external url="https://shopify.com" />,
-      ).find('a');
-      expect(anchorElement.prop('target')).toBe('_blank');
-      expect(anchorElement.prop('rel')).toBe('noopener noreferrer');
+      );
+
+      expect(anchorElement).toContainReactComponent('a', {
+        target: '_blank',
+        rel: 'noopener noreferrer',
+      });
     });
   });
 
   describe('download', () => {
     it('adds true as a boolean attribute', () => {
-      const anchorElement = mountWithAppProvider(
+      const anchorElement = mountWithApp(
         <UnstyledLink download url="https://shopify.com" />,
-      ).find('a');
-      expect(anchorElement.prop('download')).toBe(true);
+      );
+
+      expect(anchorElement).toContainReactComponent('a', {
+        download: true,
+      });
     });
 
     it('adds the provided string', () => {
-      const anchorElement = mountWithAppProvider(
+      const anchorElement = mountWithApp(
         <UnstyledLink download="file.txt" url="https://shopify.com" />,
-      ).find('a');
-      expect(anchorElement.prop('download')).toBe('file.txt');
+      );
+
+      expect(anchorElement).toContainReactComponent('a', {
+        download: 'file.txt',
+      });
     });
 
     it('does not add the attribute when not set', () => {
-      const anchorElement = mountWithAppProvider(
+      const anchorElement = mountWithApp(
         <UnstyledLink url="https://shopify.com" />,
-      ).find('a');
-      expect(anchorElement.prop('download')).toBeFalsy();
+      );
+
+      expect(anchorElement).toContainReactComponent('a', {
+        download: undefined,
+      });
     });
   });
 });

From 3a7bf442b1328f9b0d7e721db6311a4754f061da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Karen=20Pinz=C3=A1s=20Morrongiello?=
 <45268098+kpinzas-sh@users.noreply.github.com>
Date: Mon, 23 Aug 2021 08:00:09 -0400
Subject: [PATCH 2/2] Add PR suggestions on FileUpdate and Dialog tests

---
 .../components/FileUpload/tests/FileUpload.test.tsx         | 2 +-
 .../Modal/components/Dialog/tests/Dialog.test.tsx           | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/DropZone/components/FileUpload/tests/FileUpload.test.tsx b/src/components/DropZone/components/FileUpload/tests/FileUpload.test.tsx
index 9809dfddcb2..f34c3ad4284 100755
--- a/src/components/DropZone/components/FileUpload/tests/FileUpload.test.tsx
+++ b/src/components/DropZone/components/FileUpload/tests/FileUpload.test.tsx
@@ -30,7 +30,7 @@ describe('<FileUpload />', () => {
       );
 
       expect(fileUpload).toContainReactComponent('div', {
-        className: 'FileUpload measuring',
+        className: expect.stringContaining('measuring'),
       });
     });
   });
diff --git a/src/components/Modal/components/Dialog/tests/Dialog.test.tsx b/src/components/Modal/components/Dialog/tests/Dialog.test.tsx
index 00dda51c641..b310e7eb887 100644
--- a/src/components/Modal/components/Dialog/tests/Dialog.test.tsx
+++ b/src/components/Modal/components/Dialog/tests/Dialog.test.tsx
@@ -16,7 +16,7 @@ describe('<Dialog>', () => {
 
   it('sets CloseKeypressListener when `in` is true', () => {
     const listener = mountWithApp(
-      <Dialog labelledBy="test" onClose={jest.fn()} in>
+      <Dialog labelledBy="test" onClose={noop} in>
         something
       </Dialog>,
     );
@@ -28,7 +28,7 @@ describe('<Dialog>', () => {
     const spy = jest.fn();
 
     const dialog = mountWithApp(
-      <Dialog labelledBy="test" onClose={jest.fn()} onEntered={spy}>
+      <Dialog labelledBy="test" onClose={noop} onEntered={spy}>
         something
       </Dialog>,
     );
@@ -38,3 +38,5 @@ describe('<Dialog>', () => {
     expect(spy).toHaveBeenCalledTimes(1);
   });
 });
+
+function noop() {}