[Test Modernization]: Modernized MediaCard, and Layout tests

UNRELEASED.md

@@ -57,5 +57,7 @@ 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 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))
+- 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))
 
 ### Deprecations

src/components/Layout/components/AnnotatedSection/AnnotatedSection.tsx

@@ -22,14 +22,9 @@ export function AnnotatedSection(props: AnnotatedSectionProps) {
       <div className={styles.AnnotationWrapper}>
         <div className={styles.Annotation}>
           <TextContainer>
-            <Heading id={id} testID="AnnotationTitle">
-              {title}
-            </Heading>
+            <Heading id={id}>{title}</Heading>
             {descriptionMarkup && (
-              <div
-                className={styles.AnnotationDescription}
-                testID="AnnotationDescription"
-              >
+              <div className={styles.AnnotationDescription}>
                 {descriptionMarkup}
               </div>
             )}

src/components/Layout/tests/Layout.test.tsx

@@ -1,103 +1,113 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {findByTestID, mountWithAppProvider} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities';
+import {TextContainer} from 'components/TextContainer';
+import {Heading} from 'components/Heading';
+import styles from 'Layout.scss';
 
 import {Section} from '../components';
 import {Layout} from '../Layout';
 
 describe('<Layout />', () => {
   it('renders children', () => {
-    const layout = mountWithAppProvider(
+    const layout = mountWithApp(
       <Layout>
         <MyComponent />
       </Layout>,
     );
 
-    expect(layout.find(MyComponent).exists()).toBe(true);
+    expect(layout).toContainReactComponent(MyComponent);
   });
 
   it('renders children wrapped in a section', () => {
-    const layout = mountWithAppProvider(
+    const layout = mountWithApp(
       <Layout sectioned>
         <MyComponent />
       </Layout>,
     );
-    const section = layout.find(Section);
 
-    expect(section.exists()).toBe(true);
-    expect(section.find(MyComponent).exists()).toBe(true);
+    expect(layout).toContainReactComponent(Section);
+    expect(layout.find(Section)).toContainReactComponent(MyComponent);
   });
 
   describe('<Layout.AnnotatedSection />', () => {
     it('renders children', () => {
-      const annotatedSection = mountWithAppProvider(
+      const annotatedSection = mountWithApp(
         <Layout.AnnotatedSection>
           <MyComponent />
         </Layout.AnnotatedSection>,
       );
 
-      expect(annotatedSection.find(MyComponent).exists()).toBe(true);
+      expect(annotatedSection).toContainReactComponent(MyComponent);
     });
 
     it('renders a title', () => {
       const title = 'Store details';
-      const annotatedSection = mountWithAppProvider(
-        <Layout.AnnotatedSection title={title} />,
+      const annotatedSection = mountWithApp(
+        <Layout.AnnotatedSection title={title} id="someId" />,
       );
-
-      expect(findByTestID(annotatedSection, 'AnnotationTitle').text()).toBe(
+      expect(annotatedSection.find(Heading, {id: 'someId'})).toContainReactText(
         title,
       );
     });
 
     it('renders a description as a string', () => {
       const description = 'A good description of this section';
-      const annotatedSection = mountWithAppProvider(
+      const annotatedSection = mountWithApp(
         <Layout.AnnotatedSection description={description} />,
       );
 
-      expect(
-        findByTestID(annotatedSection, 'AnnotationDescription').text(),
-      ).toBe(description);
+      const annotedDescriptionTextContainer = annotatedSection.find(
+        TextContainer,
+      )!;
+
+      expect(annotedDescriptionTextContainer.find('div')).toContainReactText(
+        description,
+      );
     });
 
     it('renders a description as a node', () => {
-      const annotatedSection = mountWithAppProvider(
+      const annotatedSection = mountWithApp(
         <Layout.AnnotatedSection description={<MyComponent />} />,
       );
-      const annotatedDescription = findByTestID(
-        annotatedSection,
-        'AnnotationDescription',
-      );
 
-      expect(annotatedDescription.find(MyComponent).exists()).toBe(true);
+      const annotedDescriptionTextContainer = annotatedSection.find(
+        TextContainer,
+      )!;
+
+      expect(annotedDescriptionTextContainer).toContainReactComponent(
+        MyComponent,
+      );
     });
 
     it('does not render an empty description node', () => {
-      const annotatedSection = mountWithAppProvider(
+      const annotatedSection = mountWithApp(
         <Layout.AnnotatedSection>
           <MyComponent />
         </Layout.AnnotatedSection>,
       );
-      const description = findByTestID(
-        annotatedSection,
-        'AnnotationDescription',
-      );
 
-      expect(description.exists()).toBe(false);
+      const annotedDescriptionTextContainer = annotatedSection.find(
+        TextContainer,
+      )!;
+
+      expect(annotatedSection).toContainReactComponent(TextContainer);
+      expect(annotedDescriptionTextContainer).not.toContainReactComponent(
+        'div',
+        {
+          className: expect.stringContaining(styles.AnnotationDescription),
+        },
+      );
     });
 
     it('passes through an ID for deeplinking', () => {
-      const layout = mountWithAppProvider(
+      const layout = mountWithApp(
         <Layout>
           <Layout.AnnotatedSection id="MySection">
             <MyComponent />
           </Layout.AnnotatedSection>
         </Layout>,
       );
-      const section = layout.find('#MySection');
-
-      expect(section.exists()).toBe(true);
+      expect(layout).toContainReactComponent(Heading, {id: 'MySection'});
     });
   });
 });

src/components/MediaCard/tests/MediaCard.test.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import {Heading, Popover, Button, ActionList, Badge} from 'components';
 import {mountWithApp} from 'test-utilities';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider} from 'test-utilities/legacy';
 
 import {MediaCard} from '../MediaCard';
 
@@ -33,14 +31,12 @@ describe('<MediaCard>', () => {
         <Badge>{badgeString}</Badge>
       </h2>
     );
-    const videoCard = mountWithAppProvider(
-      <MediaCard {...mockProps} title={title} />,
-    );
+    const videoCard = mountWithApp(<MediaCard {...mockProps} title={title} />);
 
-    const headerMarkup = videoCard.find('h2');
+    const headerMarkup = videoCard.find('h2')!;
 
-    expect(headerMarkup.text()).toContain(titleString);
-    expect(headerMarkup.find('Badge').text()).toBe(badgeString);
+    expect(headerMarkup.find(Badge)).toContainReactText(badgeString);
+    expect(headerMarkup).toContainReactText(titleString);
   });
 
   it('renders the description as a paragraph', () => {