diff --git a/UNRELEASED.md b/UNRELEASED.md
index d999228cc4c..2c754bb5ca7 100644
--- a/UNRELEASED.md
+++ b/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
diff --git a/src/components/Icon/tests/Icon.test.tsx b/src/components/Icon/tests/Icon.test.tsx
index 13f19f76f06..fa1a6b34eb8 100644
--- a/src/components/Icon/tests/Icon.test.tsx
+++ b/src/components/Icon/tests/Icon.test.tsx
@@ -1,7 +1,5 @@
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';
@@ -9,29 +7,29 @@ import {Icon} from '../Icon';
describe('', () => {
describe('accessibilityLabel', () => {
it('uses the label as the aria-label for the icon', () => {
- const element = mountWithAppProvider(
+ const element = mountWithApp(
,
).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();
- expect(element.find('div')).toHaveLength(1);
+ const element = mountWithApp();
+ expect(element).toContainReactComponentTimes('div', 1);
});
it('renders a React Element when source is given a React Stateless Functional Component', () => {
- const element = mountWithAppProvider();
- expect(element.find(PlusMinor)).toHaveLength(1);
+ const element = mountWithApp();
+ expect(element).toContainReactComponentTimes(PlusMinor, 1);
});
it('renders an img when source is given an untrusted SVG', () => {
const svg =
"";
- const element = mountWithAppProvider();
- expect(element.find('img')).toHaveLength(1);
+ const element = mountWithApp();
+ expect(element).toContainReactComponentTimes('img', 1);
});
});
diff --git a/src/components/Image/tests/Image.test.tsx b/src/components/Image/tests/Image.test.tsx
index 3ffaf49f63f..baf7eaad400 100644
--- a/src/components/Image/tests/Image.test.tsx
+++ b/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('', () => {
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(
,
);
- });
-
- 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(
+ ,
+ );
+ expect(image).toContainReactComponent('img', {alt: 'alt text'});
});
it('renders the crossOrigin', () => {
- expect(image.find('img').prop('crossOrigin')).toBe('anonymous');
+ const image = mountWithApp(
+ ,
+ );
+ expect(image).toContainReactComponent('img', {crossOrigin: 'anonymous'});
});
});
@@ -41,7 +41,7 @@ describe('', () => {
descriptor: '1x',
},
];
- const image = mountWithAppProvider(
+ const image = mountWithApp(
', () => {
/>,
);
- 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(
,
);
- trigger(image.find('img'), 'onError');
+ image.find('img')!.trigger('onError');
expect(spy).toHaveBeenCalledTimes(1);
});
});
@@ -71,11 +71,11 @@ describe('', () => {
describe('onLoad', () => {
it('calls the onLoad callback when the image on onLoad is triggered', () => {
const spy = jest.fn();
- const image = mountWithAppProvider(
+ const image = mountWithApp(
,
);
- trigger(image.find('img'), 'onLoad');
+ image.find('img')!.trigger('onLoad');
expect(spy).toHaveBeenCalledTimes(1);
});
});