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

UNRELEASED.md

@@ -67,6 +67,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - 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 ResourceItem, ResourceList ([#4362](https://github.com/Shopify/polaris-react/pull/4362))
 - 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 and EmptySearch components([#4423](https://github.com/Shopify/polaris-react/pull/4423))

package.json

@@ -109,7 +109,7 @@
     "@shopify/jest-dom-mocks": "^3.0.5",
     "@shopify/postcss-plugin": "^3.1.1",
     "@shopify/prettier-config": "^1.1.2",
-    "@shopify/react-testing": "^3.2.0",
+    "@shopify/react-testing": "^3.2.4",
     "@shopify/storybook-a11y-test": "^0.0.1",
     "@shopify/stylelint-plugin": "^10.0.1",
     "@shopify/typescript-configs": "^5.0.0",

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}