[Test Modernization] Modernizing Icon and Image tests.

UNRELEASED.md

@@ -63,5 +63,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Modernized tests for Scrollable, ScrollTo, ScrollLock, Select, SettingToggle, Sheet, Spinner, and Sticky components([#4386](https://github.com/Shopify/polaris-react/pull/4386))
 - 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))
 
 ### Deprecations

src/components/Icon/tests/Icon.test.tsx

@@ -1,37 +1,35 @@
 import React from 'react';
 import {PlusMinor} 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 '../Icon';
 
 describe('<Icon />', () => {
   describe('accessibilityLabel', () => {
     it('uses the label as the aria-label for the icon', () => {
-      const element = mountWithAppProvider(
+      const element = mountWithApp(
         <Icon source="placeholder" accessibilityLabel="This is an icon" />,
       ).find('span');
 
-      expect(element.prop('aria-label')).toBe('This is an icon');
+      expect(element).toHaveReactProps({'aria-label': 'This is an icon'});
     });
   });
   describe('source', () => {
     it("renders a placeholder div when source is set to 'placeholder'", () => {
-      const element = mountWithAppProvider(<Icon source="placeholder" />);
-      expect(element.find('div')).toHaveLength(1);
+      const element = mountWithApp(<Icon source="placeholder" />);
+      expect(element).toContainReactComponentTimes('div', 1);
     });
 
     it('renders a React Element when source is given a React Stateless Functional Component', () => {
-      const element = mountWithAppProvider(<Icon source={PlusMinor} />);
-      expect(element.find(PlusMinor)).toHaveLength(1);
+      const element = mountWithApp(<Icon source={PlusMinor} />);
+      expect(element).toContainReactComponentTimes(PlusMinor, 1);
     });
 
     it('renders an img when source is given an untrusted SVG', () => {
       const svg =
         "<svg><path d='M17 9h-6V3a1 1 0 1 0-2 0v6H3a1 1 0 1 0 0 2h6v6a1 1 0 1 0 2 0v-6h6a1 1 0 1 0 0-2'  fill-rule='evenodd'/></svg>";
-      const element = mountWithAppProvider(<Icon source={svg} />);
-      expect(element.find('img')).toHaveLength(1);
+      const element = mountWithApp(<Icon source={svg} />);
+      expect(element).toContainReactComponentTimes('img', 1);
     });
   });
 

src/components/Image/tests/Image.test.tsx

@@ -1,32 +1,32 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider, trigger} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities';
 
 import {Image} from '../Image';
 
 describe('<Image />', () => {
   describe('img attributes', () => {
-    let src: string;
-    let image: any;
+    const src =
+      'https://cdn.shopify.com/s/assets/admin/checkout/settings-customizecart-705f57c725ac05be5a34ec20c05b94298cb8afd10aac7bd9c7ad02030f48cfa0.svg';
 
-    beforeAll(() => {
-      src =
-        'https://cdn.shopify.com/s/assets/admin/checkout/settings-customizecart-705f57c725ac05be5a34ec20c05b94298cb8afd10aac7bd9c7ad02030f48cfa0.svg';
-      image = mountWithAppProvider(
+    it('renders the src', () => {
+      const image = mountWithApp(
         <Image alt="alt text" source={src} crossOrigin="anonymous" />,
       );
-    });
-
-    it('renders the src', () => {
-      expect(image.find('img').prop('src')).toBe(src);
+      expect(image).toContainReactComponent('img', {src});
     });
 
     it('renders the alt text', () => {
-      expect(image.find('img').prop('alt')).toBe('alt text');
+      const image = mountWithApp(
+        <Image alt="alt text" source={src} crossOrigin="anonymous" />,
+      );
+      expect(image).toContainReactComponent('img', {alt: 'alt text'});
     });
 
     it('renders the crossOrigin', () => {
-      expect(image.find('img').prop('crossOrigin')).toBe('anonymous');
+      const image = mountWithApp(
+        <Image alt="alt text" source={src} crossOrigin="anonymous" />,
+      );
+      expect(image).toContainReactComponent('img', {crossOrigin: 'anonymous'});
     });
   });
 
@@ -41,7 +41,7 @@ describe('<Image />', () => {
           descriptor: '1x',
         },
       ];
-      const image = mountWithAppProvider(
+      const image = mountWithApp(
         <Image
           alt="alt text"
           source={src}
@@ -50,32 +50,32 @@ describe('<Image />', () => {
         />,
       );
 
-      expect(image.find('img').prop('srcSet')).toBe(
-        `${srcSet[0].source} ${srcSet[0].descriptor}`,
-      );
+      expect(image).toContainReactComponent('img', {
+        srcSet: `${srcSet[0].source} ${srcSet[0].descriptor}`,
+      });
     });
   });
 
   describe('onError', () => {
     it('calls the onError callback when the image onError is triggered', () => {
       const spy = jest.fn();
-      const image = mountWithAppProvider(
+      const image = mountWithApp(
         <Image alt="alt text" source="404" onError={spy} />,
       );
 
-      trigger(image.find('img'), 'onError');
+      image.find('img')!.trigger('onError');
       expect(spy).toHaveBeenCalledTimes(1);
     });
   });
 
   describe('onLoad', () => {
     it('calls the onLoad callback when the image on onLoad is triggered', () => {
       const spy = jest.fn();
-      const image = mountWithAppProvider(
+      const image = mountWithApp(
         <Image alt="alt text" source="/path/to/image" onLoad={spy} />,
       );
 
-      trigger(image.find('img'), 'onLoad');
+      image.find('img')!.trigger('onLoad');
       expect(spy).toHaveBeenCalledTimes(1);
     });
   });