@patternfly/react-core 4.206.4 → 4.207.0

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

@@ -2,7 +2,6 @@ import * as React from 'react';
 
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import '@testing-library/jest-dom';
 
 import { Alert } from '../../Alert';
 import { AlertGroup } from '../../AlertGroup';
@@ -10,18 +9,18 @@ import { AlertActionCloseButton } from '../../../components/Alert/AlertActionClo
 
 describe('AlertGroup', () => {
   test('Alert Group renders without children', () => {
-    const view = render(<AlertGroup />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<AlertGroup />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Alert Group works with n children', () => {
-    const view = render(
+    const { asFragment } = render(
       <AlertGroup>
         <Alert variant="success" title="alert title" />
         <Alert variant="warning" title="another alert title" />
       </AlertGroup>
     );
-    expect(view).toBeTruthy();
+    expect(asFragment()).toBeTruthy();
   });
 
   test('Alert group overflow shows up', () => {
@@ -40,7 +39,7 @@ describe('AlertGroup', () => {
     expect(overflowButton).toBeInTheDocument();
 
     userEvent.click(overflowButton);
-    expect(onOverflowClick).toBeCalled();
+    expect(onOverflowClick).toHaveBeenCalled();
   });
 
   test('Standard Alert Group is not a toast alert group', () => {
@@ -77,6 +76,6 @@ describe('AlertGroup', () => {
     );
 
     userEvent.click(screen.getByLabelText('Close'));
-    expect(onClose).toBeCalled();
+    expect(onClose).toHaveBeenCalled();
   });
 });

package/src/components/AlertGroup/__tests__/Generated/AlertGroup.test.tsx

@@ -8,8 +8,8 @@ import { AlertGroup } from '../../AlertGroup';
 import {} from '../..';
 
 it('AlertGroup should match snapshot (auto-generated)', () => {
-  const view = render(
+  const { asFragment } = render(
     <AlertGroup className={'string'} children={<div>ReactNode</div>} isToast={true} appendTo={undefined} />
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/AlertGroup/__tests__/Generated/AlertGroupInline.test.tsx

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

package/src/components/AlertGroup/__tests__/Generated/__snapshots__/AlertGroup.test.tsx.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`AlertGroup should match snapshot (auto-generated) 1`] = `<div />`;
+exports[`AlertGroup should match snapshot (auto-generated) 1`] = `<DocumentFragment />`;

package/src/components/AlertGroup/__tests__/Generated/__snapshots__/AlertGroupInline.test.tsx.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AlertGroupInline should match snapshot (auto-generated) 1`] = `
-<div>
+<DocumentFragment>
   <ul
     class="pf-c-alert-group"
   />
-</div>
+</DocumentFragment>
 `;

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

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AlertGroup Alert Group renders without children 1`] = `
-<div>
+<DocumentFragment>
   <ul
     class="pf-c-alert-group"
   />
-</div>
+</DocumentFragment>
 `;

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

@@ -27,40 +27,36 @@ const dropdownItems = [
 
 describe('ApplicationLauncher', () => {
   test('regular', () => {
-    const view = render(<ApplicationLauncher items={dropdownItems} />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<ApplicationLauncher items={dropdownItems} />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('right aligned', () => {
-    const view = render(<ApplicationLauncher items={dropdownItems} position={DropdownPosition.right} />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<ApplicationLauncher items={dropdownItems} position={DropdownPosition.right} />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('dropup', () => {
-    const view = render(<ApplicationLauncher items={dropdownItems} direction={DropdownDirection.up} />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<ApplicationLauncher items={dropdownItems} direction={DropdownDirection.up} />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('dropup + right aligned', () => {
-    const view = render(
-      <ApplicationLauncher
-        items={dropdownItems}
-        direction={DropdownDirection.up}
-        position={DropdownPosition.right}
-      />
+    const { asFragment } = render(
+      <ApplicationLauncher items={dropdownItems} direction={DropdownDirection.up} position={DropdownPosition.right} />
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('expanded', () => {
-    const view = render(<ApplicationLauncher items={dropdownItems} isOpen />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<ApplicationLauncher items={dropdownItems} isOpen />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('custom icon', () => {
-    const view = render(
+    const { asFragment } = render(
       <ApplicationLauncher items={dropdownItems} isOpen toggleIcon={<HelpIcon id="test-icon" />} />
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherContent.test.tsx

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

package/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherGroup.test.tsx

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

package/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherIcon.test.tsx

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

package/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherSeparator.test.tsx

@@ -6,11 +6,11 @@ import { DropdownArrowContext } from '../../../Dropdown/dropdownConstants';
 
 describe('ApplicationLauncherSeparator', () => {
   it('should match snapshot', () => {
-    const view = render(
+    const { asFragment } = render(
       <DropdownArrowContext.Provider value={{ sendRef: jest.fn(), keyHandler: undefined }}>
         <ApplicationLauncherSeparator />
       </DropdownArrowContext.Provider>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherText.test.tsx

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

package/src/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherContent.test.tsx.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ApplicationLauncherContent should match snapshot (auto-generated) 1`] = `
-<div>
+<DocumentFragment>
   <div>
     ReactNode
   </div>
-</div>
+</DocumentFragment>
 `;

package/src/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherGroup.test.tsx.snap

@@ -1,14 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ApplicationLauncherGroup should match snapshot (auto-generated) 1`] = `
-<div>
+<DocumentFragment>
   <section
     class=""
   >
-    
     <ul
       role="none"
     />
   </section>
-</div>
+</DocumentFragment>
 `;

package/src/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherIcon.test.tsx.snap

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

package/src/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherSeparator.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ApplicationLauncherSeparator should match snapshot 1`] = `
-<div>
+<DocumentFragment>
   <li
     role="separator"
   >
@@ -10,5 +10,5 @@ exports[`ApplicationLauncherSeparator should match snapshot 1`] = `
       role="separator"
     />
   </li>
-</div>
+</DocumentFragment>
 `;

package/src/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherText.test.tsx.snap

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

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ApplicationLauncher custom icon 1`] = `
-<div>
+<DocumentFragment>
   <nav
     aria-label="Application launcher"
     class="pf-c-app-launcher pf-m-expanded"
@@ -138,11 +138,11 @@ exports[`ApplicationLauncher custom icon 1`] = `
       </li>
     </ul>
   </nav>
-</div>
+</DocumentFragment>
 `;
 
 exports[`ApplicationLauncher dropup + right aligned 1`] = `
-<div>
+<DocumentFragment>
   <nav
     aria-label="Application launcher"
     class="pf-c-app-launcher pf-m-top pf-m-align-right"
@@ -177,11 +177,11 @@ exports[`ApplicationLauncher dropup + right aligned 1`] = `
       </span>
     </button>
   </nav>
-</div>
+</DocumentFragment>
 `;
 
 exports[`ApplicationLauncher dropup 1`] = `
-<div>
+<DocumentFragment>
   <nav
     aria-label="Application launcher"
     class="pf-c-app-launcher pf-m-top"
@@ -216,11 +216,11 @@ exports[`ApplicationLauncher dropup 1`] = `
       </span>
     </button>
   </nav>
-</div>
+</DocumentFragment>
 `;
 
 exports[`ApplicationLauncher expanded 1`] = `
-<div>
+<DocumentFragment>
   <nav
     aria-label="Application launcher"
     class="pf-c-app-launcher pf-m-expanded"
@@ -356,11 +356,11 @@ exports[`ApplicationLauncher expanded 1`] = `
       </li>
     </ul>
   </nav>
-</div>
+</DocumentFragment>
 `;
 
 exports[`ApplicationLauncher regular 1`] = `
-<div>
+<DocumentFragment>
   <nav
     aria-label="Application launcher"
     class="pf-c-app-launcher"
@@ -395,11 +395,11 @@ exports[`ApplicationLauncher regular 1`] = `
       </span>
     </button>
   </nav>
-</div>
+</DocumentFragment>
 `;
 
 exports[`ApplicationLauncher right aligned 1`] = `
-<div>
+<DocumentFragment>
   <nav
     aria-label="Application launcher"
     class="pf-c-app-launcher pf-m-align-right"
@@ -434,5 +434,5 @@ exports[`ApplicationLauncher right aligned 1`] = `
       </span>
     </button>
   </nav>
-</div>
+</DocumentFragment>
 `;

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

@@ -3,6 +3,6 @@ import { render } from '@testing-library/react';
 import { Avatar } from '../Avatar';
 
 test('simple avatar', () => {
-  const view: any = render(<Avatar alt="avatar" src="test.png" border="light" />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<Avatar alt="avatar" src="test.png" border="light" />);
+  expect(asFragment()).toMatchSnapshot();
 });

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

@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`simple avatar 1`] = `
-<div>
+<DocumentFragment>
   <img
     alt="avatar"
     class="pf-c-avatar pf-m-light"
     src="test.png"
   />
-</div>
+</DocumentFragment>
 `;

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

@@ -4,19 +4,19 @@ import { BackToTop } from '../BackToTop';
 
 describe('BackToTop', () => {
   test('verify basic', () => {
-    const view = render(<BackToTop />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<BackToTop />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('verify custom class', () => {
-    const view = render(<BackToTop className="custom-css">test</BackToTop>);
+    const { asFragment } = render(<BackToTop className="custom-css">test</BackToTop>);
 
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('verify always show', () => {
-    const view = render(<BackToTop isAlwaysVisible>test</BackToTop>);
+    const { asFragment } = render(<BackToTop isAlwaysVisible>test</BackToTop>);
 
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
-});
+});

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BackToTop verify always show 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-back-to-top"
   >
@@ -33,11 +33,11 @@ exports[`BackToTop verify always show 1`] = `
       </span>
     </button>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`BackToTop verify basic 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-back-to-top pf-m-hidden"
   >
@@ -69,11 +69,11 @@ exports[`BackToTop verify basic 1`] = `
       </span>
     </button>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`BackToTop verify custom class 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-back-to-top pf-m-hidden custom-css"
   >
@@ -105,5 +105,5 @@ exports[`BackToTop verify custom class 1`] = `
       </span>
     </button>
   </div>
-</div>
+</DocumentFragment>
 `;

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

@@ -3,6 +3,6 @@ import { render } from '@testing-library/react';
 import { Backdrop } from '../Backdrop';
 
 test('Backdrop Test', () => {
-  const view = render(<Backdrop>Backdrop</Backdrop>);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<Backdrop>Backdrop</Backdrop>);
+  expect(asFragment()).toMatchSnapshot();
 });

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

@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Backdrop Test 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-backdrop"
   >
     Backdrop
   </div>
-</div>
+</DocumentFragment>
 `;

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

@@ -3,19 +3,19 @@ import * as React from 'react';
 import { render } from '@testing-library/react';
 
 const images = {
-  'lg': '/assets/images/pfbg_1200.jpg',
-  'sm': '/assets/images/pfbg_768.jpg',
-  'sm2x': '/assets/images/pfbg_768@2x.jpg',
-  'xs': '/assets/images/pfbg_576.jpg',
-  'xs2x': '/assets/images/pfbg_576@2x.jpg'
+  lg: '/assets/images/pfbg_1200.jpg',
+  sm: '/assets/images/pfbg_768.jpg',
+  sm2x: '/assets/images/pfbg_768@2x.jpg',
+  xs: '/assets/images/pfbg_576.jpg',
+  xs2x: '/assets/images/pfbg_576@2x.jpg'
 };
 
 test('BackgroundImage', () => {
-  const view = render(<BackgroundImage src={images} />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<BackgroundImage src={images} />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('allows passing in a single string as the image src', () => {
-  const view = render(<BackgroundImage src={images.lg} />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<BackgroundImage src={images.lg} />);
+  expect(asFragment()).toMatchSnapshot();
 });

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BackgroundImage 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-background-image"
     style="--pf-c-background-image--BackgroundImage: url(/assets/images/pfbg_576.jpg); --pf-c-background-image--BackgroundImage-2x: url(/assets/images/pfbg_576@2x.jpg); --pf-c-background-image--BackgroundImage--sm: url(/assets/images/pfbg_768.jpg); --pf-c-background-image--BackgroundImage--sm-2x: url(/assets/images/pfbg_768@2x.jpg); --pf-c-background-image--BackgroundImage--lg: url(/assets/images/pfbg_1200.jpg); --pf-c-background-image--Filter: url(#patternfly-background-image-filter-overlay0);"
@@ -43,11 +43,11 @@ exports[`BackgroundImage 1`] = `
       </filter>
     </svg>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`allows passing in a single string as the image src 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-background-image"
     style="--pf-c-background-image--BackgroundImage: url(/assets/images/pfbg_1200.jpg); --pf-c-background-image--BackgroundImage-2x: url(/assets/images/pfbg_1200.jpg); --pf-c-background-image--BackgroundImage--sm: url(/assets/images/pfbg_1200.jpg); --pf-c-background-image--BackgroundImage--sm-2x: url(/assets/images/pfbg_1200.jpg); --pf-c-background-image--BackgroundImage--lg: url(/assets/images/pfbg_1200.jpg); --pf-c-background-image--Filter: url(#patternfly-background-image-filter-overlay1);"
@@ -89,5 +89,5 @@ exports[`allows passing in a single string as the image src 1`] = `
       </filter>
     </svg>
   </div>
-</div>
+</DocumentFragment>
 `;

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

@@ -4,7 +4,7 @@ import { render } from '@testing-library/react';
 
 Object.values([true, false]).forEach(isRead => {
   test(`${isRead} Badge`, () => {
-    const view = render(<Badge isRead={isRead}>{isRead ? 'read' : 'unread'} Badge</Badge>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Badge isRead={isRead}>{isRead ? 'read' : 'unread'} Badge</Badge>);
+    expect(asFragment()).toMatchSnapshot();
   });
 });

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

@@ -1,23 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`false Badge 1`] = `
-<div>
+<DocumentFragment>
   <span
     class="pf-c-badge pf-m-unread"
   >
-    unread
-     Badge
+    unread Badge
   </span>
-</div>
+</DocumentFragment>
 `;
 
 exports[`true Badge 1`] = `
-<div>
+<DocumentFragment>
   <span
     class="pf-c-badge pf-m-read"
   >
-    read
-     Badge
+    read Badge
   </span>
-</div>
+</DocumentFragment>
 `;

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

@@ -2,24 +2,22 @@ import { Banner } from '../Banner';
 import React from 'react';
 import { render } from '@testing-library/react';
 
-['default', 'info', 'success', 'warning', 'danger'].forEach(
-  (variant: 'default' | 'info' | 'success' | 'warning' | 'danger') => {
-    test(`${variant} banner`, () => {
-      const view = render(
-        <Banner variant={variant} aria-label={variant}>
-          {variant} Banner
-        </Banner>
-      );
-      expect(view.container).toMatchSnapshot();
-    });
-  }
-);
+['default', 'info', 'success', 'warning', 'danger'].forEach((variant: string) => {
+  test(`${variant} banner`, () => {
+    const { asFragment } = render(
+      <Banner variant={variant as 'default' | 'info' | 'success' | 'warning' | 'danger'} aria-label={variant}>
+        {variant} Banner
+      </Banner>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+});
 
 test(`sticky banner`, () => {
-  const view = render(
+  const { asFragment } = render(
     <Banner aria-label="sticky" isSticky>
       Sticky Banner
     </Banner>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });