[Test Modernization]: Modernized tests for IndexTable, Indicator, InlineError, KeyboardKey,…

UNRELEASED.md

@@ -72,5 +72,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - 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))
+- Modernized tests for IndexTable, Indicator, InlineError, KeyboardKey, and KeypressListener components([#4431](https://github.com/Shopify/polaris-react/pull/4431))
 
 ### Deprecations

src/components/IndexTable/tests/IndexTable.test.tsx

@@ -1,6 +1,4 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider} from 'test-utilities/legacy';
 import {mountWithApp} from 'test-utilities';
 import {Sticky} from 'components/Sticky';
 import {EventListener} from 'components/EventListener';
@@ -83,13 +81,13 @@ describe('<IndexTable>', () => {
   });
 
   it('renders a row for each item using renderItem', () => {
-    const index = mountWithAppProvider(
+    const index = mountWithApp(
       <IndexTable {...defaultProps} itemCount={mockTableItems.length}>
         {mockTableItems.map(mockRenderRow)}
       </IndexTable>,
     );
 
-    expect(index.find(Component)).toHaveLength(2);
+    expect(index).toContainReactComponentTimes(Component, 2);
   });
 
   it('renders a spinner if loading is passed', () => {

src/components/Indicator/tests/Indicator.test.tsx

@@ -1,14 +1,13 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities';
 
 import {Indicator} from '../Indicator';
 
 describe('<Indicator />', () => {
   describe('accessibilityLabel', () => {
     it('renders a span', () => {
-      const indicator = mountWithAppProvider(<Indicator />);
-      expect(indicator.find('span')).toHaveLength(1);
+      const indicator = mountWithApp(<Indicator />);
+      expect(indicator).toContainReactComponentTimes('span', 1);
     });
   });
 });

src/components/InlineError/tests/InlineError.test.tsx

@@ -1,35 +1,37 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities';
 
 import {InlineError, errorTextID} from '../InlineError';
 
 describe('<InlineError />', () => {
   describe('fieldID', () => {
     it('renders with an ID generated from the fieldID', () => {
       const fieldId = 'ProductTitle';
-      const expectedId = `#${errorTextID(fieldId)}`;
+      const expectedId = `${errorTextID(fieldId)}`;
 
-      const error = mountWithAppProvider(
+      const error = mountWithApp(
         <InlineError message="Title can’t be blank" fieldID={fieldId} />,
       );
 
-      expect(error.find(expectedId)).toHaveLength(1);
+      expect(error).toContainReactComponent('div', {id: expectedId});
     });
   });
 
   describe('message', () => {
     it('only renders error markup when message is truthy', () => {
-      const error = mountWithAppProvider(
+      const error = mountWithApp(
         <InlineError message="Title can’t be blank" fieldID="ProductTitle" />,
       );
 
-      expect(error.find('#ProductTitleError').text()).toContain(
+      expect(error.find('div', {id: 'ProductTitleError'})).toContainReactText(
         'Title can’t be blank',
       );
 
       error.setProps({message: ''});
-      expect(error.find('#ProductTitleError')).toHaveLength(0);
+
+      expect(error).not.toContainReactComponent('div', {
+        id: 'ProductTitleError',
+      });
     });
   });
 });

src/components/KeyboardKey/tests/KeyboardKey.test.tsx

@@ -1,27 +1,26 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities';
 
 import {KeyboardKey} from '../KeyboardKey';
 
 describe('<KeyboardKey />', () => {
   it('renders a kbd element', () => {
-    const keyboardKey = mountWithAppProvider(<KeyboardKey>k</KeyboardKey>);
-    expect(keyboardKey.find('kbd')).toHaveLength(1);
+    const keyboardKey = mountWithApp(<KeyboardKey>k</KeyboardKey>);
+    expect(keyboardKey).toContainReactComponent('kbd');
   });
 
   it('renders the uppercase version of its children if one character', () => {
-    const keyboardKey = mountWithAppProvider(<KeyboardKey>k</KeyboardKey>);
-    expect(keyboardKey.find('kbd').contains('K')).toBe(true);
+    const keyboardKey = mountWithApp(<KeyboardKey>k</KeyboardKey>);
+    expect(keyboardKey.find('kbd')).toContainReactText('K');
   });
 
   it('renders the lowercase version of its children if more than one character', () => {
-    const keyboardKey = mountWithAppProvider(<KeyboardKey>tab</KeyboardKey>);
-    expect(keyboardKey.find('kbd').contains('tab')).toBe(true);
+    const keyboardKey = mountWithApp(<KeyboardKey>tab</KeyboardKey>);
+    expect(keyboardKey.find('kbd')).toContainReactText('tab');
   });
 
   it('renders an empty string as children when none are provided', () => {
-    const keyboardKey = mountWithAppProvider(<KeyboardKey />);
-    expect(keyboardKey.text()).toBe('');
+    const keyboardKey = mountWithApp(<KeyboardKey />);
+    expect(keyboardKey).toContainReactText('');
   });
 });

src/components/KeypressListener/tests/KeypressListener.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';
 
 import {Key} from '../../../types';
 import {KeypressListener} from '../KeypressListener';
@@ -30,9 +29,7 @@ describe('<KeypressListener />', () => {
   it('attaches a listener for the given key on mount', () => {
     const spy = jest.fn();
 
-    mountWithAppProvider(
-      <KeypressListener handler={spy} keyCode={Key.Escape} />,
-    );
+    mountWithApp(<KeypressListener handler={spy} keyCode={Key.Escape} />);
 
     listenerMap.keyup({keyCode: Key.Escape});
     listenerMap.keyup({keyCode: Key.Enter});
@@ -42,7 +39,7 @@ describe('<KeypressListener />', () => {
   it('removes listener for the given key on unmount', () => {
     const spy = jest.fn();
 
-    mountWithAppProvider(
+    mountWithApp(
       <KeypressListener handler={spy} keyCode={Key.Escape} />,
     ).unmount();