[Test Modernization] Switch to using mountWithApp on ResourceItem and ResourceList tests.

UNRELEASED.md

@@ -48,7 +48,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Modernized tests for FormLayout and some components of ColorPicker ([#4330](https://github.com/Shopify/polaris-react/pull/4330))
 - Modernized tests for Breadcrumbs, BulkActions, Button, ButtonGroup/Item, and ButtonGroup components([#4315](https://github.com/Shopify/polaris-react/pull/4315))
 - Modernized tests for DualThumb ([#4341](https://github.com/Shopify/polaris-react/pull/4341))
-- Modernized tests for AppProvider, AfterInitialMount components([#4331](https://github.com/Shopify/polaris-react/pull/4331))
+- Modernized tests for AppProvider, AfterInitialMount components([#4315](https://github.com/Shopify/polaris-react/pull/4331))
+- Modernized tests for ResourceItem, ResourceList ([#4362](https://github.com/Shopify/polaris-react/pull/4362))
 - Modernized tests for SkeletonBodyTest, SkeletonDisplayTest, SkeletonPage, SkeletonThumbnail, and Spinner components ([#4353](https://github.com/Shopify/polaris-react/pull/4353))
 - 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))

src/components/ResourceItem/ResourceItem.tsx

@@ -159,25 +159,18 @@ class BaseResourceItem extends Component<CombinedProps, State> {
     let handleMarkup: React.ReactNode = null;
 
     const mediaMarkup = media ? (
-      <div className={styles.Media} testID="Media">
-        {media}
-      </div>
+      <div className={styles.Media}>{media}</div>
     ) : null;
 
     if (selectable) {
       const checkboxAccessibilityLabel =
         name || accessibilityLabel || i18n.translate('Polaris.Common.checkbox');
 
       handleMarkup = (
-        <div
-          className={styles.Handle}
-          onClick={this.handleLargerSelectionArea}
-          testID="LargerSelectionArea"
-        >
+        <div className={styles.Handle} onClick={this.handleLargerSelectionArea}>
           <div onClick={stopPropagation} className={styles.CheckboxWrapper}>
             <div onChange={this.handleLargerSelectionArea}>
               <Checkbox
-                testID="Checkbox"
                 id={this.checkboxId}
                 label={checkboxAccessibilityLabel}
                 labelHidden
@@ -261,7 +254,7 @@ class BaseResourceItem extends Component<CombinedProps, State> {
       } else {
         actionsMarkup = (
           <div className={styles.Actions} onClick={stopPropagation}>
-            <ButtonGroup segmented testID="ShortcutActions">
+            <ButtonGroup segmented>
               {buttonsFrom(shortcutActions, {
                 size: 'slim',
               })}
@@ -282,11 +275,7 @@ class BaseResourceItem extends Component<CombinedProps, State> {
     );
 
     const containerMarkup = (
-      <div
-        testID="Item-Content"
-        className={containerClassName}
-        id={this.props.id}
-      >
+      <div className={containerClassName} id={this.props.id}>
         {ownedMarkup}
         {content}
         {actionsMarkup}
@@ -335,7 +324,6 @@ class BaseResourceItem extends Component<CombinedProps, State> {
             onBlur={this.handleBlur}
             onKeyUp={this.handleKeyUp}
             onMouseOut={this.handleMouseOut}
-            testID="Item-Wrapper"
             data-href={url}
           >
             {accessibleMarkup}