@patternfly/react-core 4.206.5 → 4.208.0

package/src/components/DualListSelector/__tests__/DualListSelector.test.tsx

@@ -4,17 +4,19 @@ import React from 'react';
 
 describe('DualListSelector', () => {
   test('basic', () => {
-    const view = render(<DualListSelector availableOptions={['Option 1', 'Option 2']} id="firstTest" />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<DualListSelector availableOptions={['Option 1', 'Option 2']} id="firstTest" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('with search inputs', () => {
-    const view = render(<DualListSelector availableOptions={['Option 1', 'Option 2']} id="secondTest" isSearchable />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(
+      <DualListSelector availableOptions={['Option 1', 'Option 2']} id="secondTest" isSearchable />
+    );
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('with custom status', () => {
-    const view = render(
+    const { asFragment } = render(
       <DualListSelector
         availableOptions={['Option 1', 'Option 2']}
         availableOptionsStatus="Test status1"
@@ -22,16 +24,18 @@ describe('DualListSelector', () => {
         id="thirdTest"
       />
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('basic with disabled controls', () => {
-    const view = render(<DualListSelector isDisabled availableOptions={['Option 1', 'Option 2']} id="disabledTest" />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(
+      <DualListSelector isDisabled availableOptions={['Option 1', 'Option 2']} id="disabledTest" />
+    );
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('with tree', () => {
-    const view = render(
+    const { asFragment } = render(
       <DualListSelector
         availableOptions={[
           { id: 'O1', text: 'Opt1', defaultExpanded: true, children: [{ id: 'O3', text: 'Opt3' }] },
@@ -43,11 +47,11 @@ describe('DualListSelector', () => {
         isTree
       />
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('with actions', () => {
-    const view = render(
+    const { asFragment } = render(
       <DualListSelector
         availableOptions={['Option 1', 'Option 2']}
         chosenOptions={['Option 3', 'Option 4']}
@@ -56,6 +60,6 @@ describe('DualListSelector', () => {
         id="fourthTest"
       />
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DualListSelector basic 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-dual-list-selector"
     id="firstTest"
@@ -257,11 +257,11 @@ exports[`DualListSelector basic 1`] = `
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`DualListSelector basic with disabled controls 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-dual-list-selector"
     id="disabledTest"
@@ -520,11 +520,11 @@ exports[`DualListSelector basic with disabled controls 1`] = `
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`DualListSelector with actions 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-dual-list-selector"
     id="fourthTest"
@@ -852,11 +852,11 @@ exports[`DualListSelector with actions 1`] = `
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`DualListSelector with custom status 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-dual-list-selector"
     id="thirdTest"
@@ -1112,11 +1112,11 @@ exports[`DualListSelector with custom status 1`] = `
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`DualListSelector with search inputs 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-dual-list-selector"
     id="secondTest"
@@ -1398,11 +1398,11 @@ exports[`DualListSelector with search inputs 1`] = `
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`DualListSelector with tree 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-dual-list-selector"
     id="tree-test"
@@ -1735,5 +1735,5 @@ exports[`DualListSelector with tree 1`] = `
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;

package/src/components/EmptyState/__tests__/EmptyState.test.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import { render, screen } from '@testing-library/react';
-import "@testing-library/jest-dom";
 
 import AddressBookIcon from '@patternfly/react-icons/dist/esm/icons/address-book-icon';
 import { EmptyState, EmptyStateVariant } from '../EmptyState';
@@ -14,8 +13,8 @@ import { Title, TitleSizes } from '../../Title';
 
 describe('EmptyState', () => {
   test('Main', () => {
-    render(
-      <EmptyState data-testid="empty-state-test-id">
+    const { asFragment } = render(
+      <EmptyState>
         <Title headingLevel="h5" size="lg">
           HTTP Proxies
         </Title>
@@ -30,40 +29,40 @@ describe('EmptyState', () => {
         </EmptyStateSecondaryActions>
       </EmptyState>
     );
-    expect(screen.getByTestId('empty-state-test-id').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Main variant large', () => {
-    render(
-      <EmptyState variant={EmptyStateVariant.large} data-testid="empty-state-test-id">
+    const { asFragment } = render(
+      <EmptyState variant={EmptyStateVariant.large}>
         <Title headingLevel="h3" size={TitleSizes.md}>
           EmptyState large
         </Title>
       </EmptyState>
     );
-    expect(screen.getByTestId('empty-state-test-id').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Main variant small', () => {
-    render(
-      <EmptyState variant={EmptyStateVariant.small} data-testid="empty-state-test-id">
+    const { asFragment } = render(
+      <EmptyState variant={EmptyStateVariant.small}>
         <Title headingLevel="h3" size={TitleSizes.md}>
           EmptyState small
         </Title>
       </EmptyState>
     );
-    expect(screen.getByTestId('empty-state-test-id').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Main variant xs', () => {
-    render(
-      <EmptyState variant={EmptyStateVariant.xs} data-testid="empty-state-test-id">
+    const { asFragment } = render(
+      <EmptyState variant={EmptyStateVariant.xs}>
         <Title headingLevel="h3" size={TitleSizes.md}>
           EmptyState small
         </Title>
       </EmptyState>
     );
-    expect(screen.getByTestId('empty-state-test-id').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Body', () => {
@@ -73,27 +72,29 @@ describe('EmptyState', () => {
 
   test('Secondary Action', () => {
     render(<EmptyStateSecondaryActions className="custom-empty-state-secondary" data-testid="actions-test-id" />);
-    expect(screen.getByTestId('actions-test-id')).toHaveClass('custom-empty-state-secondary pf-c-empty-state__secondary');
+    expect(screen.getByTestId('actions-test-id')).toHaveClass(
+      'custom-empty-state-secondary pf-c-empty-state__secondary'
+    );
   });
 
   test('Icon', () => {
     render(<EmptyStateIcon icon={AddressBookIcon} data-testid="icon-test-id" />);
-    expect(screen.getByTestId('icon-test-id').outerHTML).toContain('pf-c-empty-state__icon');
+    expect(screen.getByTestId('icon-test-id')).toHaveClass('pf-c-empty-state__icon');
   });
 
   test('Wrap icon in a div', () => {
-    const view = render(
+    const { container } = render(
       <EmptyStateIcon
         variant="container"
         component={AddressBookIcon}
         className="custom-empty-state-icon"
-        id="empty-state-icon"
+        id="empty-state-icon-id"
       />
     );
 
-    expect(view.container.querySelector('div')).toHaveClass('pf-c-empty-state__icon custom-empty-state-icon');
-    expect(view.container.querySelector('svg')).toBeInTheDocument();
-  })
+    expect(container.querySelector('div')).toHaveClass('pf-c-empty-state__icon custom-empty-state-icon');
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
 
   test('Primary div', () => {
     render(
@@ -101,17 +102,17 @@ describe('EmptyState', () => {
         <Button variant="link">Link</Button>
       </EmptyStatePrimary>
     );
-    expect(screen.getByTestId('primary-test-id').className).toContain('pf-c-empty-state__primary');
+    expect(screen.getByTestId('primary-test-id')).toHaveClass('pf-c-empty-state__primary');
   });
 
   test('Full height', () => {
-    render(
-      <EmptyState isFullHeight variant={EmptyStateVariant.large} data-testid="empty-state-test-id">
+    const { asFragment } = render(
+      <EmptyState isFullHeight variant={EmptyStateVariant.large}>
         <Title headingLevel="h3" size={TitleSizes.md}>
           EmptyState large
         </Title>
       </EmptyState>
     );
-    expect(screen.getByTestId('empty-state-test-id').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/EmptyState/__tests__/Generated/EmptyStateBody.test.tsx

@@ -8,6 +8,6 @@ import { EmptyStateBody } from '../../EmptyStateBody';
 import {} from '../..';
 
 it('EmptyStateBody should match snapshot (auto-generated)', () => {
-  const view = render(<EmptyStateBody children={<div>ReactNode</div>} className={"''"} />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<EmptyStateBody children={<div>ReactNode</div>} className={"''"} />);
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/EmptyState/__tests__/Generated/EmptyStateIcon.test.tsx

@@ -3,12 +3,12 @@
  */
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import { UserIcon } from '@patternfly/react-icons'
+import { UserIcon } from '@patternfly/react-icons';
 import { EmptyStateIcon } from '../../EmptyStateIcon';
 // any missing imports can usually be resolved by adding them here
 import {} from '../..';
 it('EmptyStateIcon should match snapshot (auto-generated)', () => {
-  const view = render(
+  const { asFragment } = render(
     <EmptyStateIcon
       color={'string'}
       title={'string'}
@@ -18,11 +18,11 @@ it('EmptyStateIcon should match snapshot (auto-generated)', () => {
       variant={'icon'}
     />
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 it('EmptyStateIcon should match snapshot for variant container', () => {
-  const view = render(
+  const { asFragment } = render(
     <EmptyStateIcon
       color={'string'}
       title={'string'}
@@ -32,5 +32,5 @@ it('EmptyStateIcon should match snapshot for variant container', () => {
       variant={'container'}
     />
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/EmptyState/__tests__/Generated/EmptyStatePrimary.test.tsx

@@ -8,6 +8,6 @@ import { EmptyStatePrimary } from '../../EmptyStatePrimary';
 import {} from '../..';
 
 it('EmptyStatePrimary should match snapshot (auto-generated)', () => {
-  const view = render(<EmptyStatePrimary className={"''"} children={<div>ReactNode</div>} />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<EmptyStatePrimary className={"''"} children={<div>ReactNode</div>} />);
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/EmptyState/__tests__/Generated/EmptyStateSecondaryActions.test.tsx

@@ -8,6 +8,6 @@ import { EmptyStateSecondaryActions } from '../../EmptyStateSecondaryActions';
 import {} from '../..';
 
 it('EmptyStateSecondaryActions should match snapshot (auto-generated)', () => {
-  const view = render(<EmptyStateSecondaryActions children={<>ReactNode</>} className={"''"} />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<EmptyStateSecondaryActions children={<>ReactNode</>} className={"''"} />);
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStateBody.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EmptyStateBody should match snapshot (auto-generated) 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-empty-state__body ''"
   >
@@ -9,5 +9,5 @@ exports[`EmptyStateBody should match snapshot (auto-generated) 1`] = `
       ReactNode
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;

package/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStateIcon.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EmptyStateIcon should match snapshot (auto-generated) 1`] = `
-<div>
+<DocumentFragment>
   <svg
     aria-hidden="true"
     aria-labelledby="icon-title-0"
@@ -22,11 +22,11 @@ exports[`EmptyStateIcon should match snapshot (auto-generated) 1`] = `
       d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"
     />
   </svg>
-</div>
+</DocumentFragment>
 `;
 
 exports[`EmptyStateIcon should match snapshot for variant container 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-empty-state__icon ''"
   >
@@ -34,5 +34,5 @@ exports[`EmptyStateIcon should match snapshot for variant container 1`] = `
       Component
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;

package/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStatePrimary.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EmptyStatePrimary should match snapshot (auto-generated) 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-empty-state__primary ''"
   >
@@ -9,5 +9,5 @@ exports[`EmptyStatePrimary should match snapshot (auto-generated) 1`] = `
       ReactNode
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;

package/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStateSecondaryActions.test.tsx.snap

@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EmptyStateSecondaryActions should match snapshot (auto-generated) 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-empty-state__secondary ''"
   >
     ReactNode
   </div>
-</div>
+</DocumentFragment>
 `;

package/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap

@@ -1,11 +1,136 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EmptyState Full height 1`] = `"<div class=\\"pf-c-empty-state pf-m-lg pf-m-full-height\\" data-testid=\\"empty-state-test-id\\"><div class=\\"pf-c-empty-state__content\\"><h3 data-ouia-component-type=\\"PF4/Title\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Title-5\\" class=\\"pf-c-title pf-m-md\\">EmptyState large</h3></div></div>"`;
+exports[`EmptyState Full height 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-empty-state pf-m-lg pf-m-full-height"
+  >
+    <div
+      class="pf-c-empty-state__content"
+    >
+      <h3
+        class="pf-c-title pf-m-md"
+        data-ouia-component-id="OUIA-Generated-Title-5"
+        data-ouia-component-type="PF4/Title"
+        data-ouia-safe="true"
+      >
+        EmptyState large
+      </h3>
+    </div>
+  </div>
+</DocumentFragment>
+`;
 
-exports[`EmptyState Main 1`] = `"<div class=\\"pf-c-empty-state\\" data-testid=\\"empty-state-test-id\\"><div class=\\"pf-c-empty-state__content\\"><h5 data-ouia-component-type=\\"PF4/Title\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Title-1\\" class=\\"pf-c-title pf-m-lg\\">HTTP Proxies</h5><div class=\\"pf-c-empty-state__body\\">Defining HTTP Proxies that exist on your network allows you to perform various actions through those proxies.</div><button aria-disabled=\\"false\\" class=\\"pf-c-button pf-m-primary\\" type=\\"button\\" data-ouia-component-type=\\"PF4/Button\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Button-primary-1\\">New HTTP Proxy</button><div class=\\"pf-c-empty-state__secondary\\"><button aria-disabled=\\"false\\" aria-label=\\"learn more action\\" class=\\"pf-c-button pf-m-link\\" type=\\"button\\" data-ouia-component-type=\\"PF4/Button\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Button-link-1\\">Learn more about this in the documentation.</button></div></div></div>"`;
+exports[`EmptyState Main 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-empty-state"
+  >
+    <div
+      class="pf-c-empty-state__content"
+    >
+      <h5
+        class="pf-c-title pf-m-lg"
+        data-ouia-component-id="OUIA-Generated-Title-1"
+        data-ouia-component-type="PF4/Title"
+        data-ouia-safe="true"
+      >
+        HTTP Proxies
+      </h5>
+      <div
+        class="pf-c-empty-state__body"
+      >
+        Defining HTTP Proxies that exist on your network allows you to perform various actions through those proxies.
+      </div>
+      <button
+        aria-disabled="false"
+        class="pf-c-button pf-m-primary"
+        data-ouia-component-id="OUIA-Generated-Button-primary-1"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        type="button"
+      >
+        New HTTP Proxy
+      </button>
+      <div
+        class="pf-c-empty-state__secondary"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="learn more action"
+          class="pf-c-button pf-m-link"
+          data-ouia-component-id="OUIA-Generated-Button-link-1"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          Learn more about this in the documentation.
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
 
-exports[`EmptyState Main variant large 1`] = `"<div class=\\"pf-c-empty-state pf-m-lg\\" data-testid=\\"empty-state-test-id\\"><div class=\\"pf-c-empty-state__content\\"><h3 data-ouia-component-type=\\"PF4/Title\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Title-2\\" class=\\"pf-c-title pf-m-md\\">EmptyState large</h3></div></div>"`;
+exports[`EmptyState Main variant large 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-empty-state pf-m-lg"
+  >
+    <div
+      class="pf-c-empty-state__content"
+    >
+      <h3
+        class="pf-c-title pf-m-md"
+        data-ouia-component-id="OUIA-Generated-Title-2"
+        data-ouia-component-type="PF4/Title"
+        data-ouia-safe="true"
+      >
+        EmptyState large
+      </h3>
+    </div>
+  </div>
+</DocumentFragment>
+`;
 
-exports[`EmptyState Main variant small 1`] = `"<div class=\\"pf-c-empty-state pf-m-sm\\" data-testid=\\"empty-state-test-id\\"><div class=\\"pf-c-empty-state__content\\"><h3 data-ouia-component-type=\\"PF4/Title\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Title-3\\" class=\\"pf-c-title pf-m-md\\">EmptyState small</h3></div></div>"`;
+exports[`EmptyState Main variant small 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-empty-state pf-m-sm"
+  >
+    <div
+      class="pf-c-empty-state__content"
+    >
+      <h3
+        class="pf-c-title pf-m-md"
+        data-ouia-component-id="OUIA-Generated-Title-3"
+        data-ouia-component-type="PF4/Title"
+        data-ouia-safe="true"
+      >
+        EmptyState small
+      </h3>
+    </div>
+  </div>
+</DocumentFragment>
+`;
 
-exports[`EmptyState Main variant xs 1`] = `"<div class=\\"pf-c-empty-state pf-m-xs\\" data-testid=\\"empty-state-test-id\\"><div class=\\"pf-c-empty-state__content\\"><h3 data-ouia-component-type=\\"PF4/Title\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Title-4\\" class=\\"pf-c-title pf-m-md\\">EmptyState small</h3></div></div>"`;
+exports[`EmptyState Main variant xs 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-empty-state pf-m-xs"
+  >
+    <div
+      class="pf-c-empty-state__content"
+    >
+      <h3
+        class="pf-c-title pf-m-md"
+        data-ouia-component-id="OUIA-Generated-Title-4"
+        data-ouia-component-type="PF4/Title"
+        data-ouia-safe="true"
+      >
+        EmptyState small
+      </h3>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx

@@ -1,19 +1,21 @@
 import * as React from 'react';
+
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+
 import { ExpandableSection } from '../ExpandableSection';
 import { ExpandableSectionToggle } from '../ExpandableSectionToggle';
 
 const props = {};
 
 test('ExpandableSection', () => {
-  const view = render(<ExpandableSection {...props}>test </ExpandableSection>);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<ExpandableSection {...props}>test </ExpandableSection>);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('Renders ExpandableSection expanded', () => {
-  const view = render(<ExpandableSection isExpanded> test </ExpandableSection>);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<ExpandableSection isExpanded> test </ExpandableSection>);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('ExpandableSection onToggle called', () => {
@@ -26,12 +28,12 @@ test('ExpandableSection onToggle called', () => {
 });
 
 test('Renders Uncontrolled ExpandableSection', () => {
-  const view = render(<ExpandableSection toggleText="Show More"> test </ExpandableSection>);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<ExpandableSection toggleText="Show More"> test </ExpandableSection>);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('Detached ExpandableSection renders successfully', () => {
-  const view = render(
+  const { asFragment } = render(
     <React.Fragment>
       <ExpandableSection {...props} isExpanded isDetached contentId="test">
         test
@@ -41,15 +43,24 @@ test('Detached ExpandableSection renders successfully', () => {
       </ExpandableSectionToggle>
     </React.Fragment>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('Disclosure ExpandableSection', () => {
-  const view = render(<ExpandableSection {...props} displaySize="large" isWidthLimited>test </ExpandableSection>);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(
+    <ExpandableSection {...props} displaySize="large" isWidthLimited>
+      test{' '}
+    </ExpandableSection>
+  );
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('Renders ExpandableSection indented', () => {
-  const view = render(<ExpandableSection isExpanded isIndented> test </ExpandableSection>);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(
+    <ExpandableSection isExpanded isIndented>
+      {' '}
+      test{' '}
+    </ExpandableSection>
+  );
+  expect(asFragment()).toMatchSnapshot();
 });