Shopify · laucindy · Aug 25, 2021 · Aug 16, 2021
diff --git a/UNRELEASED.md b/UNRELEASED.md
@@ -70,5 +70,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - 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))
 - Modernized tests for Pane, Section, PositionedOverlay, SingleThumb, RangeSlider, and ConnectedFilter components ([#4429](https://github.com/Shopify/polaris-react/pull/4429))
+- Modernized tests for ContextualSaveBar and DataTable and its subcomponents ([#4397](https://github.com/Shopify/polaris-react/pull/4397))
 
 ### Deprecations
diff --git a/src/components/ContextualSaveBar/tests/ContextualSaveBar.test.tsx b/src/components/ContextualSaveBar/tests/ContextualSaveBar.test.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
-import {mount} from 'test-utilities';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider} from 'test-utilities/legacy';
+import {mount, mountWithApp} from 'test-utilities';
 
 import {ContextualSaveBar} from '../ContextualSaveBar';
 
@@ -18,7 +16,7 @@ describe('<ContextualSaveBar />', () => {
       removeContextualSaveBar: jest.fn(),
     };
 
-    mountWithAppProvider(<ContextualSaveBar {...props} />, {
+    mountWithApp(<ContextualSaveBar {...props} />, {
       frame: mockFrameContext,
     });
     expect(mockFrameContext.setContextualSaveBar).toHaveBeenCalledWith({
@@ -32,7 +30,7 @@ describe('<ContextualSaveBar />', () => {
       removeContextualSaveBar: jest.fn(),
     };
 
-    const frame = mountWithAppProvider(<ContextualSaveBar {...props} />, {
+    const frame = mountWithApp(<ContextualSaveBar {...props} />, {
       frame: mockFrameContext,
     });
     expect(mockFrameContext.removeContextualSaveBar).not.toHaveBeenCalled();
@@ -46,10 +44,9 @@ describe('<ContextualSaveBar />', () => {
       removeContextualSaveBar: jest.fn(),
     };
 
-    const contextualSaveBar = mountWithAppProvider(
-      <ContextualSaveBar {...props} />,
-      {frame: mockFrameContext},
-    );
+    const contextualSaveBar = mountWithApp(<ContextualSaveBar {...props} />, {
+      frame: mockFrameContext,
+    });
     const newProps = {
       saveAction: {content: 'Save', onAction: noop, loading: true},
       discardAction: {content: 'Discard', onAction: noop},
@@ -68,10 +65,9 @@ describe('<ContextualSaveBar />', () => {
       removeContextualSaveBar: jest.fn(),
     };
 
-    const contextualSaveBar = mountWithAppProvider(
-      <ContextualSaveBar {...props} />,
-      {frame: mockFrameContext},
-    );
+    const contextualSaveBar = mountWithApp(<ContextualSaveBar {...props} />, {
+      frame: mockFrameContext,
+    });
 
     expect(mockFrameContext.setContextualSaveBar).toHaveBeenCalledTimes(1);
     contextualSaveBar.setProps({...props});

diff --git a/src/components/DataTable/components/Cell/tests/Cell.test.tsx b/src/components/DataTable/components/Cell/tests/Cell.test.tsx
@@ -1,7 +1,6 @@
 import React, {ReactElement} from 'react';
 import {CaretUpMinor, CaretDownMinor} from '@shopify/polaris-icons';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider, trigger} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities/react-testing';
 
 import {Icon} from '../../../..';
 import {Cell} from '../Cell';
@@ -20,24 +19,24 @@ describe('<Cell />', () => {
       const cellMarkup = <p>{cellContent}</p>;
       const cell = mountWithTable(<Cell content={cellMarkup} />);
 
-      expect(cell.find('p')).toHaveLength(1);
-      expect(cell.text()).toBe(cellContent);
+      expect(cell).toContainReactComponent('p');
+      expect(cell).toContainReactText(cellContent);
     });
   });
 
   describe('firstColumn', () => {
     it('renders a table heading element when true', () => {
       const cell = mountWithTable(<Cell firstColumn />);
 
-      expect(cell.find('th')).toHaveLength(1);
+      expect(cell).toContainReactComponent('th');
     });
   });
 
   describe('header', () => {
     it('renders a table heading element when true', () => {
       const cell = mountWithTable(<Cell header />);
 
-      expect(cell.find('th')).toHaveLength(1);
+      expect(cell).toContainReactComponent('th');
     });
   });
 
@@ -54,7 +53,9 @@ describe('<Cell />', () => {
         />,
       );
 
-      expect(cell.find('th').prop('aria-sort')).toBe(sortDirection);
+      expect(cell).toContainReactComponent('th', {
+        'aria-sort': sortDirection,
+      });
     });
 
     it('sets the aria-sort attribute to none when the table is not currently sorted by that column', () => {
@@ -69,21 +70,23 @@ describe('<Cell />', () => {
         />,
       );
 
-      expect(cell.find('th').prop('aria-sort')).toBe('none');
+      expect(cell).toContainReactComponent('th', {
+        'aria-sort': 'none',
+      });
     });
   });
 
   describe('sortable', () => {
     it('renders an Icon when table is sortable by that column', () => {
       const cell = mountWithTable(<Cell header firstColumn sortable />);
 
-      expect(cell.find(Icon)).toHaveLength(1);
+      expect(cell).toContainReactComponent(Icon);
     });
 
     it('renders no Icon when table is not sortable by that column', () => {
       const cell = mountWithTable(<Cell header firstColumn sortable={false} />);
 
-      expect(cell.find(Icon)).not.toHaveLength(1);
+      expect(cell).not.toContainReactComponent(Icon);
     });
   });
 
@@ -100,7 +103,9 @@ describe('<Cell />', () => {
           />,
         );
 
-        expect(cell.find(Icon).prop('source')).toBe(CaretDownMinor);
+        expect(cell).toContainReactComponent(Icon, {
+          source: CaretDownMinor,
+        });
       });
 
       it('renders an up caret Icon when defaultSortDirection is ascending', () => {
@@ -114,7 +119,9 @@ describe('<Cell />', () => {
           />,
         );
 
-        expect(cell.find(Icon).prop('source')).toBe(CaretUpMinor);
+        expect(cell).toContainReactComponent(Icon, {
+          source: CaretUpMinor,
+        });
       });
     });
 
@@ -124,17 +131,19 @@ describe('<Cell />', () => {
           <Cell header firstColumn sortable sorted sortDirection="ascending" />,
         );
 
-        expect(cell.find(Icon).prop('source')).toBe(CaretUpMinor);
+        expect(cell).toContainReactComponent(Icon, {
+          source: CaretUpMinor,
+        });
       });
 
       it('renders an Icon with an accessibility label indicating the next sort direction is descending', () => {
         const cell = mountWithTable(
           <Cell header firstColumn sortable sorted sortDirection="ascending" />,
         );
 
-        expect(cell.find(Icon).prop('accessibilityLabel')).toBe(
-          'sort descending by',
-        );
+        expect(cell).toContainReactComponent(Icon, {
+          accessibilityLabel: 'sort descending by',
+        });
       });
     });
 
@@ -150,7 +159,9 @@ describe('<Cell />', () => {
           />,
         );
 
-        expect(cell.find(Icon).prop('source')).toBe(CaretDownMinor);
+        expect(cell).toContainReactComponent(Icon, {
+          source: CaretDownMinor,
+        });
       });
 
       it('renders an Icon with an accessibility label indicating the next sort direction is ascending', () => {
@@ -164,9 +175,9 @@ describe('<Cell />', () => {
           />,
         );
 
-        expect(cell.find(Icon).prop('accessibilityLabel')).toBe(
-          'sort ascending by',
-        );
+        expect(cell).toContainReactComponent(Icon, {
+          accessibilityLabel: 'sort ascending by',
+        });
       });
     });
   });
@@ -185,7 +196,9 @@ describe('<Cell />', () => {
           />,
         );
 
-        expect(cell.find(Icon).prop('source')).toBe(CaretUpMinor);
+        expect(cell).toContainReactComponent(Icon, {
+          source: CaretUpMinor,
+        });
       });
     });
     describe('when set to ascending', () => {
@@ -200,7 +213,9 @@ describe('<Cell />', () => {
           />,
         );
 
-        expect(cell.find(Icon).prop('source')).toBe(CaretUpMinor);
+        expect(cell).toContainReactComponent(Icon, {
+          source: CaretUpMinor,
+        });
       });
     });
 
@@ -216,7 +231,9 @@ describe('<Cell />', () => {
           />,
         );
 
-        expect(cell.find(Icon).prop('source')).toBe(CaretDownMinor);
+        expect(cell).toContainReactComponent(Icon, {
+          source: CaretDownMinor,
+        });
       });
     });
   });
@@ -236,15 +253,15 @@ describe('<Cell />', () => {
         />,
       );
 
-      trigger(cell.find('button'), 'onClick');
+      cell.find('button')?.trigger('onClick');
 
       expect(sortSpy).toHaveBeenCalledTimes(1);
     });
   });
 });
 
 function mountWithTable<P>(node: ReactElement) {
-  return mountWithAppProvider<P>(
+  return mountWithApp<P>(
     <table>
       <thead />
       <tbody>

diff --git a/src/components/DataTable/components/Navigation/tests/Navigation.test.tsx b/src/components/DataTable/components/Navigation/tests/Navigation.test.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities/react-testing';
 import {Button} from 'components';
 
 import {Navigation} from '../Navigation';
@@ -13,13 +12,13 @@ describe('<Navigation />', () => {
       {leftEdge: 357, rightEdge: 474, isVisible: true},
     ];
 
-    const navigation = mountWithAppProvider(
+    const navigation = mountWithApp(
       <Navigation
         columnVisibilityData={columnVisibilityData}
         isScrolledFarthestLeft
         isScrolledFarthestRight={false}
       />,
     );
-    expect(navigation.find(Button)).toHaveLength(2);
+    expect(navigation).toContainReactComponentTimes(Button, 2);
   });
 });