From 9ced8b5c618aa3f4c65542bfed284de1217fc594 Mon Sep 17 00:00:00 2001
From: Richard Todd <richard.todd@shopify.com>
Date: Mon, 23 Aug 2021 16:40:54 -0400
Subject: [PATCH 1/8] Modernized tests for EventListener

---
 UNRELEASED.md                                       |  1 +
 .../EventListener/tests/EventListener.test.tsx      | 13 +++++--------
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 14fd511edb0..f89921911c2 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -66,5 +66,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Modernized tests for Message, Menu, Search, SearchDismissOverlay, SearchField, UserMenu and TopBar components. ([#4311](https://github.com/Shopify/polaris-react/pull/4311))
 - Modernized tests for MediaCard, and Layout components ([#4393](https://github.com/Shopify/polaris-react/pull/4393))
 - Modernized tests for Image and Icon components ([#4418](https://github.com/Shopify/polaris-react/pull/4418))
+- Modernized tests for EventListener component([#](https://github.com/Shopify/polaris-react/pull/))
 
 ### Deprecations
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 d16e1420138b7a723e3cfe5ad103e3b57c26c53c Mon Sep 17 00:00:00 2001
From: Richard Todd <richard.todd@shopify.com>
Date: Mon, 23 Aug 2021 16:48:44 -0400
Subject: [PATCH 2/8] Modernized EmptySearchResult test

---
 UNRELEASED.md                                 |  2 +-
 .../tests/EmptySearchResult.test.tsx          | 27 +++++++++----------
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index f89921911c2..7644c6662b3 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -66,6 +66,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Modernized tests for Message, Menu, Search, SearchDismissOverlay, SearchField, UserMenu and TopBar components. ([#4311](https://github.com/Shopify/polaris-react/pull/4311))
 - Modernized tests for MediaCard, and Layout components ([#4393](https://github.com/Shopify/polaris-react/pull/4393))
 - Modernized tests for Image and Icon components ([#4418](https://github.com/Shopify/polaris-react/pull/4418))
-- Modernized tests for EventListener component([#](https://github.com/Shopify/polaris-react/pull/))
+- Modernized tests for EventListener component([#4423](https://github.com/Shopify/polaris-react/pull/4423))
 
 ### Deprecations
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});
   });
 });

From 6cb9e465574ab64ca4b16fbc0acf6b3df7eda589 Mon Sep 17 00:00:00 2001
From: Richard Todd <richard.todd@shopify.com>
Date: Mon, 23 Aug 2021 17:02:31 -0400
Subject: [PATCH 3/8] Modernized EmptyState test

---
 UNRELEASED.md                                 |   2 +-
 .../EmptyState/tests/EmptyState.test.tsx      | 100 +++++++++---------
 2 files changed, 52 insertions(+), 50 deletions(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 7644c6662b3..32bf0de6a05 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -66,6 +66,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Modernized tests for Message, Menu, Search, SearchDismissOverlay, SearchField, UserMenu and TopBar components. ([#4311](https://github.com/Shopify/polaris-react/pull/4311))
 - Modernized tests for MediaCard, and Layout components ([#4393](https://github.com/Shopify/polaris-react/pull/4393))
 - Modernized tests for Image and Icon components ([#4418](https://github.com/Shopify/polaris-react/pull/4418))
-- Modernized tests for EventListener component([#4423](https://github.com/Shopify/polaris-react/pull/4423))
+- Modernized tests for EventListener, EmptySearch, and EmptyState components([#4423](https://github.com/Shopify/polaris-react/pull/4423))
 
 ### Deprecations
diff --git a/src/components/EmptyState/tests/EmptyState.test.tsx b/src/components/EmptyState/tests/EmptyState.test.tsx
index 5c962018fe0..0f7a0f5835a 100644
--- a/src/components/EmptyState/tests/EmptyState.test.tsx
+++ b/src/components/EmptyState/tests/EmptyState.test.tsx
@@ -7,8 +7,6 @@ import {
   TextContainer,
   UnstyledLink,
 } from 'components';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider} from 'test-utilities/legacy';
 import {mountWithApp} from 'test-utilities';
 
 import {WithinContentContext} from '../../../utilities/within-content-context';
@@ -20,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', () => {
@@ -43,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', () => {
@@ -93,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',
@@ -182,7 +184,7 @@ describe('<EmptyState />', () => {
         />,
       );
 
-      expect(emptyState.find(UnstyledLink).text()).toContain('Learn more');
+      expect(emptyState.find(UnstyledLink)).toContainReactText('Learn more');
     });
   });
 
@@ -192,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 53c93afb1f9c8b78a535d3fd3e0a86b1b67c0417 Mon Sep 17 00:00:00 2001
From: Richard Todd <richard.todd@shopify.com>
Date: Mon, 23 Aug 2021 17:13:59 -0400
Subject: [PATCH 4/8] Modernized EmptyState test

---
 .../EmptyState/tests/EmptyState.test.tsx      | 25 ++++++++-----------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/src/components/EmptyState/tests/EmptyState.test.tsx b/src/components/EmptyState/tests/EmptyState.test.tsx
index 0f7a0f5835a..64ae3923a68 100644
--- a/src/components/EmptyState/tests/EmptyState.test.tsx
+++ b/src/components/EmptyState/tests/EmptyState.test.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import {mountWithApp} from 'test-utilities';
 import {
   Button,
   DisplayText,
@@ -7,15 +8,14 @@ import {
   TextContainer,
   UnstyledLink,
 } from 'components';
-import {mountWithApp} from 'test-utilities';
 
 import {WithinContentContext} from '../../../utilities/within-content-context';
 import {EmptyState} from '../EmptyState';
 
-describe('<EmptyState />', () => {
-  let imgSrc =
-    'https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg';
+const imgSrc =
+  'https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg';
 
+describe('<EmptyState />', () => {
   describe('action', () => {
     it('renders a button with the action content if action is set', () => {
       const emptyState = mountWithApp(
@@ -109,9 +109,6 @@ describe('<EmptyState />', () => {
     });
 
     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(
         <EmptyState image={imgSrc} largeImage={imgSrc} />,
       );
@@ -120,13 +117,11 @@ describe('<EmptyState />', () => {
         sourceSet: [
           {
             descriptor: '568w',
-            source:
-              'https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg',
+            source: imgSrc,
           },
           {
             descriptor: '1136w',
-            source:
-              'https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg',
+            source: imgSrc,
           },
         ],
       });
@@ -189,11 +184,11 @@ describe('<EmptyState />', () => {
   });
 
   describe('footerContent', () => {
-    const expectedContent =
-      'If you don’t want to add a transfer, you can import your inventory from settings';
-    const footerContentMarkup = <p>{expectedContent}</p>;
-
     it('renders footer content', () => {
+      const expectedContent =
+        'If you don’t want to add a transfer, you can import your inventory from settings';
+      const footerContentMarkup = <p>{expectedContent}</p>;
+
       const emptyState = mountWithApp(
         <EmptyState footerContent={footerContentMarkup} image={imgSrc} />,
       );

From afb01aab8440838c04ff92ec5b3a689698bbed49 Mon Sep 17 00:00:00 2001
From: Richard Todd <richard.todd@shopify.com>
Date: Mon, 23 Aug 2021 17:22:22 -0400
Subject: [PATCH 5/8] Modernized EmptyState test and removed nested describes

---
 .../EmptyState/tests/EmptyState.test.tsx      | 280 ++++++++----------
 1 file changed, 131 insertions(+), 149 deletions(-)

diff --git a/src/components/EmptyState/tests/EmptyState.test.tsx b/src/components/EmptyState/tests/EmptyState.test.tsx
index 64ae3923a68..cf67d36c47f 100644
--- a/src/components/EmptyState/tests/EmptyState.test.tsx
+++ b/src/components/EmptyState/tests/EmptyState.test.tsx
@@ -16,191 +16,173 @@ const imgSrc =
   'https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg';
 
 describe('<EmptyState />', () => {
-  describe('action', () => {
-    it('renders a button with the action content if action is set', () => {
-      const emptyState = mountWithApp(
-        <EmptyState action={{content: 'Add transfer'}} image={imgSrc} />,
-      );
-      expect(emptyState.find('button')).toContainReactText('Add transfer');
-    });
+  it('renders a button with the action content if action is set', () => {
+    const emptyState = mountWithApp(
+      <EmptyState action={{content: 'Add transfer'}} image={imgSrc} />,
+    );
+    expect(emptyState.find('button')).toContainReactText('Add transfer');
+  });
 
-    it('does not render a button when no action is set', () => {
-      const emptyState = mountWithApp(<EmptyState image={imgSrc} />);
+  it('does not render a button when no action is set', () => {
+    const emptyState = mountWithApp(<EmptyState image={imgSrc} />);
 
-      expect(emptyState).not.toContainReactComponent('button');
-    });
+    expect(emptyState).not.toContainReactComponent('button');
+  });
 
-    it('renders a medium size primary button by default', () => {
-      const emptyState = mountWithApp(
-        <EmptyState image={imgSrc} action={{content: 'Add transfer'}} />,
-      );
+  it('renders a medium size primary button by default', () => {
+    const emptyState = mountWithApp(
+      <EmptyState image={imgSrc} action={{content: 'Add transfer'}} />,
+    );
 
-      expect(emptyState).toContainReactComponent(Button, {
-        size: 'medium',
-        primary: true,
-      });
+    expect(emptyState).toContainReactComponent(Button, {
+      size: 'medium',
+      primary: true,
     });
+  });
 
-    it('renders a medium button when in a content context', () => {
-      const emptyStateInContentContext = mountWithApp(
-        <WithinContentContext.Provider value>
-          <EmptyState image={imgSrc} action={{content: 'Upload files'}} />
-        </WithinContentContext.Provider>,
-      );
+  it('renders a medium button when in a content context', () => {
+    const emptyStateInContentContext = mountWithApp(
+      <WithinContentContext.Provider value>
+        <EmptyState image={imgSrc} action={{content: 'Upload files'}} />
+      </WithinContentContext.Provider>,
+    );
 
-      expect(emptyStateInContentContext).toContainReactComponent(Button, {
-        size: 'medium',
-      });
+    expect(emptyStateInContentContext).toContainReactComponent(Button, {
+      size: 'medium',
     });
+  });
 
-    it('adds center distribution and tight spacing to Stack', () => {
-      const emptyState = mountWithApp(
-        <EmptyState image={imgSrc} action={{content: 'Add transfer'}} />,
-      );
+  it('adds center distribution and tight spacing to Stack', () => {
+    const emptyState = mountWithApp(
+      <EmptyState image={imgSrc} action={{content: 'Add transfer'}} />,
+    );
 
-      expect(emptyState).toContainReactComponent(Stack, {
-        spacing: 'tight',
-        distribution: 'center',
-      });
+    expect(emptyState).toContainReactComponent(Stack, {
+      spacing: 'tight',
+      distribution: 'center',
     });
+  });
+
+  it('does not render a plain link as a secondaryAction', () => {
+    const emptyState = mountWithApp(
+      <EmptyState
+        image={imgSrc}
+        secondaryAction={{
+          content: 'Learn more',
+          url: 'https://help.shopify.com',
+        }}
+      />,
+    );
 
-    it('does not render a plain link as a secondaryAction', () => {
-      const emptyState = mountWithApp(
-        <EmptyState
-          image={imgSrc}
-          secondaryAction={{
-            content: 'Learn more',
-            url: 'https://help.shopify.com',
-          }}
-        />,
-      );
-
-      expect(emptyState).toContainReactComponent(UnstyledLink, {
-        plain: undefined,
-      });
+    expect(emptyState).toContainReactComponent(UnstyledLink, {
+      plain: undefined,
     });
   });
 
-  describe('children', () => {
-    it('renders children', () => {
-      const expectedContent =
-        'If you don’t want to add a transfer, you can import your inventory from settings.';
-      const children = (
-        <p>
-          If you don’t want to add a transfer, you can import your inventory
-          from settings.
-        </p>
-      );
-
-      const emptyState = mountWithApp(
-        <EmptyState image={imgSrc}>{children}</EmptyState>,
-      );
-
-      expect(emptyState.find(TextContainer)).toContainReactText(
-        expectedContent,
-      );
-    });
+  it('renders children', () => {
+    const expectedContent =
+      'If you don’t want to add a transfer, you can import your inventory from settings.';
+    const children = (
+      <p>
+        If you don’t want to add a transfer, you can import your inventory from
+        settings.
+      </p>
+    );
+
+    const emptyState = mountWithApp(
+      <EmptyState image={imgSrc}>{children}</EmptyState>,
+    );
+
+    expect(emptyState.find(TextContainer)).toContainReactText(expectedContent);
   });
 
-  describe('img', () => {
-    it('passes the provided source to Image', () => {
-      const emptyState = mountWithApp(<EmptyState image={imgSrc} />);
-      expect(emptyState).toContainReactComponent(Image, {source: imgSrc});
-    });
+  it('passes the provided source to Image', () => {
+    const emptyState = mountWithApp(<EmptyState image={imgSrc} />);
+    expect(emptyState).toContainReactComponent(Image, {source: imgSrc});
+  });
 
-    it('renders an Image with a sourceSet when largeImage is passed', () => {
-      const emptyState = mountWithApp(
-        <EmptyState image={imgSrc} largeImage={imgSrc} />,
-      );
-
-      expect(emptyState).toContainReactComponent(Image, {
-        sourceSet: [
-          {
-            descriptor: '568w',
-            source: imgSrc,
-          },
-          {
-            descriptor: '1136w',
-            source: imgSrc,
-          },
-        ],
-      });
+  it('renders an Image with a sourceSet when largeImage is passed', () => {
+    const emptyState = mountWithApp(
+      <EmptyState image={imgSrc} largeImage={imgSrc} />,
+    );
+
+    expect(emptyState).toContainReactComponent(Image, {
+      sourceSet: [
+        {
+          descriptor: '568w',
+          source: imgSrc,
+        },
+        {
+          descriptor: '1136w',
+          source: imgSrc,
+        },
+      ],
     });
   });
 
-  describe('role', () => {
-    it('passes the presentation role to Image', () => {
-      const emptyState = mountWithApp(<EmptyState image={imgSrc} />);
-      expect(emptyState).toContainReactComponent(Image, {role: 'presentation'});
-    });
+  it('passes the presentation role to Image', () => {
+    const emptyState = mountWithApp(<EmptyState image={imgSrc} />);
+    expect(emptyState).toContainReactComponent(Image, {role: 'presentation'});
   });
 
-  describe('alt', () => {
-    it('passes an empty alt to Image', () => {
-      const emptyState = mountWithApp(<EmptyState image={imgSrc} />);
-      expect(emptyState).toContainReactComponent(Image, {alt: ''});
-    });
+  it('passes an empty alt to Image', () => {
+    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 = mountWithApp(
-        <EmptyState heading={expectedHeading} image={imgSrc} />,
-      );
-      const displayText = emptyState.find(DisplayText)!;
+  it('passes the provided heading to DisplayText', () => {
+    const expectedHeading = 'Manage your inventory transfers';
+    const emptyState = mountWithApp(
+      <EmptyState heading={expectedHeading} image={imgSrc} />,
+    );
+    const displayText = emptyState.find(DisplayText)!;
 
-      expect(displayText).toHaveReactProps({size: 'medium'});
-      expect(displayText).toContainReactText(expectedHeading);
-    });
+    expect(displayText).toHaveReactProps({size: 'medium'});
+    expect(displayText).toContainReactText(expectedHeading);
+  });
 
-    it('renders a small DisplayText when in a content context', () => {
-      const emptyStateInContentContext = mountWithApp(
-        <WithinContentContext.Provider value>
-          <EmptyState heading="Heading" image={imgSrc} />
-        </WithinContentContext.Provider>,
-      );
+  it('renders a small DisplayText when in a content context', () => {
+    const emptyStateInContentContext = mountWithApp(
+      <WithinContentContext.Provider value>
+        <EmptyState heading="Heading" image={imgSrc} />
+      </WithinContentContext.Provider>,
+    );
 
-      expect(emptyStateInContentContext).toContainReactComponent(DisplayText, {
-        size: 'small',
-      });
+    expect(emptyStateInContentContext).toContainReactComponent(DisplayText, {
+      size: 'small',
     });
   });
 
-  describe('secondaryAction', () => {
-    it('renders secondaryAction if provided', () => {
-      const emptyState = mountWithApp(
-        <EmptyState
-          secondaryAction={{
-            content: 'Learn more',
-            url: 'https://help.shopify.com',
-          }}
-          image={imgSrc}
-        />,
-      );
-
-      expect(emptyState.find(UnstyledLink)).toContainReactText('Learn more');
-    });
+  it('renders secondaryAction if provided', () => {
+    const emptyState = mountWithApp(
+      <EmptyState
+        secondaryAction={{
+          content: 'Learn more',
+          url: 'https://help.shopify.com',
+        }}
+        image={imgSrc}
+      />,
+    );
+
+    expect(emptyState.find(UnstyledLink)).toContainReactText('Learn more');
   });
 
-  describe('footerContent', () => {
-    it('renders footer content', () => {
-      const expectedContent =
-        'If you don’t want to add a transfer, you can import your inventory from settings';
-      const footerContentMarkup = <p>{expectedContent}</p>;
+  it('renders footer content', () => {
+    const expectedContent =
+      'If you don’t want to add a transfer, you can import your inventory from settings';
+    const footerContentMarkup = <p>{expectedContent}</p>;
 
-      const emptyState = mountWithApp(
-        <EmptyState footerContent={footerContentMarkup} image={imgSrc} />,
-      );
-      expect(emptyState).toContainReactComponent(TextContainer, {
-        children: footerContentMarkup,
-      });
+    const emptyState = mountWithApp(
+      <EmptyState footerContent={footerContentMarkup} image={imgSrc} />,
+    );
+    expect(emptyState).toContainReactComponent(TextContainer, {
+      children: footerContentMarkup,
     });
+  });
 
-    it('does not create a footer when footerContent is not provided', () => {
-      const emptyState = mountWithApp(<EmptyState image={imgSrc} />);
+  it('does not create a footer when footerContent is not provided', () => {
+    const emptyState = mountWithApp(<EmptyState image={imgSrc} />);
 
-      expect(emptyState).not.toContainReactComponent(TextContainer);
-    });
+    expect(emptyState).not.toContainReactComponent(TextContainer);
   });
 });

From 6d71c07bd0da94fda023fd28ddca6e28db6050de Mon Sep 17 00:00:00 2001
From: Richard Todd <richard.todd@shopify.com>
Date: Mon, 23 Aug 2021 17:30:16 -0400
Subject: [PATCH 6/8] Updated imports

---
 .../EmptyState/tests/EmptyState.test.tsx      | 282 ++++++++++--------
 1 file changed, 150 insertions(+), 132 deletions(-)

diff --git a/src/components/EmptyState/tests/EmptyState.test.tsx b/src/components/EmptyState/tests/EmptyState.test.tsx
index cf67d36c47f..ce0e4f25088 100644
--- a/src/components/EmptyState/tests/EmptyState.test.tsx
+++ b/src/components/EmptyState/tests/EmptyState.test.tsx
@@ -3,6 +3,7 @@ import {mountWithApp} from 'test-utilities';
 import {
   Button,
   DisplayText,
+  EmptyState,
   Image,
   Stack,
   TextContainer,
@@ -10,179 +11,196 @@ import {
 } from 'components';
 
 import {WithinContentContext} from '../../../utilities/within-content-context';
-import {EmptyState} from '../EmptyState';
 
 const imgSrc =
   'https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg';
 
 describe('<EmptyState />', () => {
-  it('renders a button with the action content if action is set', () => {
-    const emptyState = mountWithApp(
-      <EmptyState action={{content: 'Add transfer'}} image={imgSrc} />,
-    );
-    expect(emptyState.find('button')).toContainReactText('Add transfer');
-  });
+  describe('action', () => {
+    it('renders a button with the action content if action is set', () => {
+      const emptyState = mountWithApp(
+        <EmptyState action={{content: 'Add transfer'}} image={imgSrc} />,
+      );
+      expect(emptyState.find('button')).toContainReactText('Add transfer');
+    });
 
-  it('does not render a button when no action is set', () => {
-    const emptyState = mountWithApp(<EmptyState image={imgSrc} />);
+    it('does not render a button when no action is set', () => {
+      const emptyState = mountWithApp(<EmptyState image={imgSrc} />);
 
-    expect(emptyState).not.toContainReactComponent('button');
-  });
+      expect(emptyState).not.toContainReactComponent('button');
+    });
 
-  it('renders a medium size primary button by default', () => {
-    const emptyState = mountWithApp(
-      <EmptyState image={imgSrc} action={{content: 'Add transfer'}} />,
-    );
+    it('renders a medium size primary button by default', () => {
+      const emptyState = mountWithApp(
+        <EmptyState image={imgSrc} action={{content: 'Add transfer'}} />,
+      );
 
-    expect(emptyState).toContainReactComponent(Button, {
-      size: 'medium',
-      primary: true,
+      expect(emptyState).toContainReactComponent(Button, {
+        size: 'medium',
+        primary: true,
+      });
     });
-  });
 
-  it('renders a medium button when in a content context', () => {
-    const emptyStateInContentContext = mountWithApp(
-      <WithinContentContext.Provider value>
-        <EmptyState image={imgSrc} action={{content: 'Upload files'}} />
-      </WithinContentContext.Provider>,
-    );
+    it('renders a medium button when in a content context', () => {
+      const emptyStateInContentContext = mountWithApp(
+        <WithinContentContext.Provider value>
+          <EmptyState image={imgSrc} action={{content: 'Upload files'}} />
+        </WithinContentContext.Provider>,
+      );
 
-    expect(emptyStateInContentContext).toContainReactComponent(Button, {
-      size: 'medium',
+      expect(emptyStateInContentContext).toContainReactComponent(Button, {
+        size: 'medium',
+      });
     });
-  });
 
-  it('adds center distribution and tight spacing to Stack', () => {
-    const emptyState = mountWithApp(
-      <EmptyState image={imgSrc} action={{content: 'Add transfer'}} />,
-    );
+    it('adds center distribution and tight spacing to Stack', () => {
+      const emptyState = mountWithApp(
+        <EmptyState image={imgSrc} action={{content: 'Add transfer'}} />,
+      );
 
-    expect(emptyState).toContainReactComponent(Stack, {
-      spacing: 'tight',
-      distribution: 'center',
+      expect(emptyState).toContainReactComponent(Stack, {
+        spacing: 'tight',
+        distribution: 'center',
+      });
     });
-  });
-
-  it('does not render a plain link as a secondaryAction', () => {
-    const emptyState = mountWithApp(
-      <EmptyState
-        image={imgSrc}
-        secondaryAction={{
-          content: 'Learn more',
-          url: 'https://help.shopify.com',
-        }}
-      />,
-    );
 
-    expect(emptyState).toContainReactComponent(UnstyledLink, {
-      plain: undefined,
+    it('does not render a plain link as a secondaryAction', () => {
+      const emptyState = mountWithApp(
+        <EmptyState
+          image={imgSrc}
+          secondaryAction={{
+            content: 'Learn more',
+            url: 'https://help.shopify.com',
+          }}
+        />,
+      );
+
+      expect(emptyState).toContainReactComponent(UnstyledLink, {
+        plain: undefined,
+      });
     });
   });
 
-  it('renders children', () => {
-    const expectedContent =
-      'If you don’t want to add a transfer, you can import your inventory from settings.';
-    const children = (
-      <p>
-        If you don’t want to add a transfer, you can import your inventory from
-        settings.
-      </p>
-    );
-
-    const emptyState = mountWithApp(
-      <EmptyState image={imgSrc}>{children}</EmptyState>,
-    );
-
-    expect(emptyState.find(TextContainer)).toContainReactText(expectedContent);
+  describe('children', () => {
+    it('renders children', () => {
+      const expectedContent =
+        'If you don’t want to add a transfer, you can import your inventory from settings.';
+      const children = (
+        <p>
+          If you don’t want to add a transfer, you can import your inventory
+          from settings.
+        </p>
+      );
+
+      const emptyState = mountWithApp(
+        <EmptyState image={imgSrc}>{children}</EmptyState>,
+      );
+
+      expect(emptyState.find(TextContainer)).toContainReactText(
+        expectedContent,
+      );
+    });
   });
 
-  it('passes the provided source to Image', () => {
-    const emptyState = mountWithApp(<EmptyState image={imgSrc} />);
-    expect(emptyState).toContainReactComponent(Image, {source: imgSrc});
-  });
+  describe('img', () => {
+    it('passes the provided source to Image', () => {
+      const emptyState = mountWithApp(<EmptyState image={imgSrc} />);
+      expect(emptyState).toContainReactComponent(Image, {source: imgSrc});
+    });
 
-  it('renders an Image with a sourceSet when largeImage is passed', () => {
-    const emptyState = mountWithApp(
-      <EmptyState image={imgSrc} largeImage={imgSrc} />,
-    );
-
-    expect(emptyState).toContainReactComponent(Image, {
-      sourceSet: [
-        {
-          descriptor: '568w',
-          source: imgSrc,
-        },
-        {
-          descriptor: '1136w',
-          source: imgSrc,
-        },
-      ],
+    it('renders an Image with a sourceSet when largeImage is passed', () => {
+      const emptyState = mountWithApp(
+        <EmptyState image={imgSrc} largeImage={imgSrc} />,
+      );
+
+      expect(emptyState).toContainReactComponent(Image, {
+        sourceSet: [
+          {
+            descriptor: '568w',
+            source: imgSrc,
+          },
+          {
+            descriptor: '1136w',
+            source: imgSrc,
+          },
+        ],
+      });
     });
   });
 
-  it('passes the presentation role to Image', () => {
-    const emptyState = mountWithApp(<EmptyState image={imgSrc} />);
-    expect(emptyState).toContainReactComponent(Image, {role: 'presentation'});
+  describe('role', () => {
+    it('passes the presentation role to Image', () => {
+      const emptyState = mountWithApp(<EmptyState image={imgSrc} />);
+      expect(emptyState).toContainReactComponent(Image, {role: 'presentation'});
+    });
   });
 
-  it('passes an empty alt to Image', () => {
-    const emptyState = mountWithApp(<EmptyState image={imgSrc} />);
-    expect(emptyState).toContainReactComponent(Image, {alt: ''});
+  describe('alt', () => {
+    it('passes an empty alt to Image', () => {
+      const emptyState = mountWithApp(<EmptyState image={imgSrc} />);
+      expect(emptyState).toContainReactComponent(Image, {alt: ''});
+    });
   });
 
-  it('passes the provided heading to DisplayText', () => {
-    const expectedHeading = 'Manage your inventory transfers';
-    const emptyState = mountWithApp(
-      <EmptyState heading={expectedHeading} image={imgSrc} />,
-    );
-    const displayText = emptyState.find(DisplayText)!;
+  describe('heading', () => {
+    it('passes the provided heading to DisplayText', () => {
+      const expectedHeading = 'Manage your inventory transfers';
+      const emptyState = mountWithApp(
+        <EmptyState heading={expectedHeading} image={imgSrc} />,
+      );
+      const displayText = emptyState.find(DisplayText)!;
 
-    expect(displayText).toHaveReactProps({size: 'medium'});
-    expect(displayText).toContainReactText(expectedHeading);
-  });
+      expect(displayText).toHaveReactProps({size: 'medium'});
+      expect(displayText).toContainReactText(expectedHeading);
+    });
 
-  it('renders a small DisplayText when in a content context', () => {
-    const emptyStateInContentContext = mountWithApp(
-      <WithinContentContext.Provider value>
-        <EmptyState heading="Heading" image={imgSrc} />
-      </WithinContentContext.Provider>,
-    );
+    it('renders a small DisplayText when in a content context', () => {
+      const emptyStateInContentContext = mountWithApp(
+        <WithinContentContext.Provider value>
+          <EmptyState heading="Heading" image={imgSrc} />
+        </WithinContentContext.Provider>,
+      );
 
-    expect(emptyStateInContentContext).toContainReactComponent(DisplayText, {
-      size: 'small',
+      expect(emptyStateInContentContext).toContainReactComponent(DisplayText, {
+        size: 'small',
+      });
     });
   });
 
-  it('renders secondaryAction if provided', () => {
-    const emptyState = mountWithApp(
-      <EmptyState
-        secondaryAction={{
-          content: 'Learn more',
-          url: 'https://help.shopify.com',
-        }}
-        image={imgSrc}
-      />,
-    );
-
-    expect(emptyState.find(UnstyledLink)).toContainReactText('Learn more');
+  describe('secondaryAction', () => {
+    it('renders secondaryAction if provided', () => {
+      const emptyState = mountWithApp(
+        <EmptyState
+          secondaryAction={{
+            content: 'Learn more',
+            url: 'https://help.shopify.com',
+          }}
+          image={imgSrc}
+        />,
+      );
+
+      expect(emptyState.find(UnstyledLink)).toContainReactText('Learn more');
+    });
   });
 
-  it('renders footer content', () => {
-    const expectedContent =
-      'If you don’t want to add a transfer, you can import your inventory from settings';
-    const footerContentMarkup = <p>{expectedContent}</p>;
+  describe('footerContent', () => {
+    it('renders footer content', () => {
+      const expectedContent =
+        'If you don’t want to add a transfer, you can import your inventory from settings';
+      const footerContentMarkup = <p>{expectedContent}</p>;
 
-    const emptyState = mountWithApp(
-      <EmptyState footerContent={footerContentMarkup} image={imgSrc} />,
-    );
-    expect(emptyState).toContainReactComponent(TextContainer, {
-      children: footerContentMarkup,
+      const emptyState = mountWithApp(
+        <EmptyState footerContent={footerContentMarkup} image={imgSrc} />,
+      );
+      expect(emptyState).toContainReactComponent(TextContainer, {
+        children: footerContentMarkup,
+      });
     });
-  });
 
-  it('does not create a footer when footerContent is not provided', () => {
-    const emptyState = mountWithApp(<EmptyState image={imgSrc} />);
+    it('does not create a footer when footerContent is not provided', () => {
+      const emptyState = mountWithApp(<EmptyState image={imgSrc} />);
 
-    expect(emptyState).not.toContainReactComponent(TextContainer);
+      expect(emptyState).not.toContainReactComponent(TextContainer);
+    });
   });
 });

From 5642dd523c73bcb7f21a76e724f5aa5e5b479c0c Mon Sep 17 00:00:00 2001
From: Richard Todd <richard.todd@shopify.com>
Date: Tue, 24 Aug 2021 09:41:35 -0400
Subject: [PATCH 7/8] Removed empystate tyest modernization

---
 .../EmptyState/tests/EmptyState.test.tsx      | 119 +++++++++---------
 1 file changed, 61 insertions(+), 58 deletions(-)

diff --git a/src/components/EmptyState/tests/EmptyState.test.tsx b/src/components/EmptyState/tests/EmptyState.test.tsx
index ce0e4f25088..5c962018fe0 100644
--- a/src/components/EmptyState/tests/EmptyState.test.tsx
+++ b/src/components/EmptyState/tests/EmptyState.test.tsx
@@ -1,33 +1,34 @@
 import React from 'react';
-import {mountWithApp} from 'test-utilities';
 import {
   Button,
   DisplayText,
-  EmptyState,
   Image,
   Stack,
   TextContainer,
   UnstyledLink,
 } from 'components';
+// eslint-disable-next-line no-restricted-imports
+import {mountWithAppProvider} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities';
 
 import {WithinContentContext} from '../../../utilities/within-content-context';
-
-const imgSrc =
-  'https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg';
+import {EmptyState} from '../EmptyState';
 
 describe('<EmptyState />', () => {
+  let imgSrc =
+    'https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg';
+
   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 +43,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,84 +93,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', () => {
-      const emptyState = mountWithApp(
+      imgSrc =
+        'https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg';
+
+      const emptyState = mountWithAppProvider(
         <EmptyState image={imgSrc} largeImage={imgSrc} />,
       );
 
-      expect(emptyState).toContainReactComponent(Image, {
-        sourceSet: [
-          {
-            descriptor: '568w',
-            source: imgSrc,
-          },
-          {
-            descriptor: '1136w',
-            source: 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',
+        },
+      ]);
     });
   });
 
   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',
@@ -179,28 +182,28 @@ describe('<EmptyState />', () => {
         />,
       );
 
-      expect(emptyState.find(UnstyledLink)).toContainReactText('Learn more');
+      expect(emptyState.find(UnstyledLink).text()).toContain('Learn more');
     });
   });
 
   describe('footerContent', () => {
-    it('renders footer content', () => {
-      const expectedContent =
-        'If you don’t want to add a transfer, you can import your inventory from settings';
-      const footerContentMarkup = <p>{expectedContent}</p>;
+    const expectedContent =
+      'If you don’t want to add a transfer, you can import your inventory from settings';
+    const footerContentMarkup = <p>{expectedContent}</p>;
 
-      const emptyState = mountWithApp(
+    it('renders footer content', () => {
+      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);
     });
   });
 });

From 4071285aa20b483649bcb414e91a0d0adb938136 Mon Sep 17 00:00:00 2001
From: Richard Todd <richard.todd@shopify.com>
Date: Tue, 24 Aug 2021 09:43:25 -0400
Subject: [PATCH 8/8] Updated modernized test message

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

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 32bf0de6a05..606f8d849a4 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -66,6 +66,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Modernized tests for Message, Menu, Search, SearchDismissOverlay, SearchField, UserMenu and TopBar components. ([#4311](https://github.com/Shopify/polaris-react/pull/4311))
 - Modernized tests for MediaCard, and Layout components ([#4393](https://github.com/Shopify/polaris-react/pull/4393))
 - Modernized tests for Image and Icon components ([#4418](https://github.com/Shopify/polaris-react/pull/4418))
-- Modernized tests for EventListener, EmptySearch, and EmptyState components([#4423](https://github.com/Shopify/polaris-react/pull/4423))
+- Modernized tests for EventListener and EmptySearch components([#4423](https://github.com/Shopify/polaris-react/pull/4423))
 
 ### Deprecations