[TestModernization]: Add test modernization to Collapsible, Tabs and TextStyle

UNRELEASED.md

@@ -63,8 +63,9 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Modernized tests for SkeletonBodyTest, SkeletonDisplayTest, SkeletonPage, SkeletonThumbnail, and Spinner components ([#4353](https://github.com/Shopify/polaris-react/pull/4353))
 - Modernized tests for CalloutCard, Caption, CheckableButton, Resizer, VideoThumbnail ([#4387](https://github.com/Shopify/polaris-react/pull/4387))
 - Modernized tests for Message, Menu, Search, SearchDismissOverlay, SearchField, UserMenu and TopBar components. ([#4311](https://github.com/Shopify/polaris-react/pull/4311))
-- Modernized test for UnstyledLink, Tag, DisplayText, FileUpload, MessageIndicator, Choice and Dialog ([#4407](https://github.com/Shopify/polaris-react/pull/4407)).
+- Modernized tests for UnstyledLink, Tag, DisplayText, FileUpload, MessageIndicator, Choice and Dialog ([#4407](https://github.com/Shopify/polaris-react/pull/4407)).
 - Modernized tests for Konami, Labelled, and Link components([#4389](https://github.com/Shopify/polaris-react/pull/4389))
+- Modernized tests for TextStyle, Collapsible, Tabs ([#4453](https://github.com/Shopify/polaris-react/pull/4453))
 - 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))

src/components/Collapsible/tests/Collapsible.test.tsx

@@ -1,88 +1,93 @@
 import React, {useState, useCallback} from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider} from 'test-utilities/legacy';
 import {mountWithApp} from 'test-utilities';
 import {Tokens} from 'utilities/theme';
 
 import {Collapsible, CollapsibleProps} from '../Collapsible';
 
 describe('<Collapsible />', () => {
-  const ariaExpandedSelector = '[aria-expanded=false]';
-
   it('does not render its children and indicates hidden with aria-hidden', () => {
-    const collapsible = mountWithAppProvider(
+    const collapsible = mountWithApp(
       <Collapsible id="test-collapsible" open={false}>
         content
       </Collapsible>,
     );
 
-    const hidden = collapsible.find(ariaExpandedSelector);
-    expect(hidden.exists()).toBe(true);
+    expect(collapsible).toContainReactComponent('div', {
+      'aria-expanded': false,
+    });
   });
 
   it('renders its children and does not render aria-hidden when open', () => {
-    const collapsible = mountWithAppProvider(
+    const collapsible = mountWithApp(
       <Collapsible id="test-collapsible" open>
         content
       </Collapsible>,
     );
 
-    const hidden = collapsible.find(ariaExpandedSelector);
-    expect(hidden.exists()).toBe(false);
-    expect(collapsible.contains('content')).toBe(true);
+    expect(collapsible).not.toContainReactComponent('div', {
+      'aria-expanded': false,
+    });
+
+    expect(collapsible).toContainReactText('content');
   });
 
   it('does not render its children when closed', () => {
-    const collapsible = mountWithAppProvider(
+    const collapsible = mountWithApp(
       <Collapsible id="test-collapsible" open={false}>
         content
       </Collapsible>,
     );
 
-    expect(collapsible.contains('content')).toBe(false);
+    expect(collapsible).not.toContainReactComponent('div', {
+      children: expect.stringContaining('content'),
+    });
   });
 
   it('renders its children when expandOnPrint is true and open is false', () => {
-    const collapsible = mountWithAppProvider(
+    const collapsible = mountWithApp(
       <Collapsible id="test-collapsible" open={false} expandOnPrint>
         content
       </Collapsible>,
     );
 
-    expect(collapsible.contains('content')).toBe(true);
+    expect(collapsible).toContainReactComponent('div', {
+      children: expect.stringContaining('content'),
+    });
   });
 
   it('renders its children when expandOnPrint is true and open is true', () => {
-    const collapsible = mountWithAppProvider(
+    const collapsible = mountWithApp(
       <Collapsible id="test-collapsible" open expandOnPrint>
         content
       </Collapsible>,
     );
 
-    expect(collapsible.contains('content')).toBe(true);
+    expect(collapsible).toContainReactComponent('div', {
+      children: expect.stringContaining('content'),
+    });
   });
 
   describe('Transition', () => {
     it('passes a duration property', () => {
       const duration = Tokens.duration150;
-      const collapsible = mountWithAppProvider(
+      const collapsible = mountWithApp(
         <Collapsible id="test-collapsible" open transition={{duration}} />,
       );
 
-      expect(collapsible.props()).toMatchObject({transition: {duration}});
+      expect(collapsible).toHaveReactProps({transition: {duration}});
     });
 
     it('passes a timingFunction property', () => {
       const timingFunction = Tokens.ease;
-      const collapsible = mountWithAppProvider(
+      const collapsible = mountWithApp(
         <Collapsible
           id="test-collapsible"
           open
           transition={{timingFunction}}
         />,
       );
 
-      expect(collapsible.props()).toMatchObject({transition: {timingFunction}});
+      expect(collapsible).toHaveReactProps({transition: {timingFunction}});
     });
   });