@patternfly/react-core 4.206.4 → 4.207.0

package/src/components/ContextSelector/__tests__/__snapshots__/ContextSelectorItem.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Renders ContextSelectorItem 1`] = `
-<div>
+<DocumentFragment>
   <li
     role="none"
   >
@@ -11,11 +11,11 @@ exports[`Renders ContextSelectorItem 1`] = `
       My Project
     </button>
   </li>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Renders ContextSelectorItem disabled and hovered 1`] = `
-<div>
+<DocumentFragment>
   <li
     role="none"
   >
@@ -26,5 +26,5 @@ exports[`Renders ContextSelectorItem disabled and hovered 1`] = `
       My Project
     </button>
   </li>
-</div>
+</DocumentFragment>
 `;

package/src/components/ContextSelector/__tests__/__snapshots__/ContextSelectorMenuList.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Renders ContextSelectorMenuList closed 1`] = `
-<div>
+<DocumentFragment>
   <ul
     class="pf-c-context-selector__menu-list"
     hidden=""
@@ -53,11 +53,11 @@ exports[`Renders ContextSelectorMenuList closed 1`] = `
       </button>
     </li>
   </ul>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Renders ContextSelectorMenuList open 1`] = `
-<div>
+<DocumentFragment>
   <ul
     class="pf-c-context-selector__menu-list"
     hidden=""
@@ -109,5 +109,5 @@ exports[`Renders ContextSelectorMenuList open 1`] = `
       </button>
     </li>
   </ul>
-</div>
+</DocumentFragment>
 `;

package/src/components/ContextSelector/__tests__/__snapshots__/ContextSelectorToggle.test.tsx.snap

@@ -1,11 +1,161 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ContextSelectorToggle Renders ContextSelectorToggle 1`] = `"<button id=\\"toggle-id\\" class=\\"pf-c-context-selector__toggle\\" type=\\"button\\" aria-expanded=\\"false\\"><span class=\\"pf-c-context-selector__toggle-text\\"></span><span class=\\"pf-c-context-selector__toggle-icon\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 320 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"></path></svg></span></button>"`;
+exports[`ContextSelectorToggle Renders ContextSelectorToggle 1`] = `
+<DocumentFragment>
+  <button
+    aria-expanded="false"
+    class="pf-c-context-selector__toggle"
+    id="toggle-id"
+    type="button"
+  >
+    <span
+      class="pf-c-context-selector__toggle-text"
+    />
+    <span
+      class="pf-c-context-selector__toggle-icon"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 320 512"
+        width="1em"
+      >
+        <path
+          d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+        />
+      </svg>
+    </span>
+  </button>
+</DocumentFragment>
+`;
 
-exports[`ContextSelectorToggle Verify ESC press 1`] = `"<button id=\\"toggle-id\\" class=\\"pf-c-context-selector__toggle\\" type=\\"button\\" aria-expanded=\\"true\\"><span class=\\"pf-c-context-selector__toggle-text\\"></span><span class=\\"pf-c-context-selector__toggle-icon\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 320 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"></path></svg></span></button>"`;
+exports[`ContextSelectorToggle Verify ESC press 1`] = `
+<DocumentFragment>
+  <button
+    aria-expanded="true"
+    class="pf-c-context-selector__toggle"
+    id="toggle-id"
+    type="button"
+  >
+    <span
+      class="pf-c-context-selector__toggle-text"
+    />
+    <span
+      class="pf-c-context-selector__toggle-icon"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 320 512"
+        width="1em"
+      >
+        <path
+          d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+        />
+      </svg>
+    </span>
+  </button>
+</DocumentFragment>
+`;
 
-exports[`ContextSelectorToggle Verify ESC press with not isOpen 1`] = `"<button id=\\"toggle-id\\" class=\\"pf-c-context-selector__toggle\\" type=\\"button\\" aria-expanded=\\"false\\"><span class=\\"pf-c-context-selector__toggle-text\\"></span><span class=\\"pf-c-context-selector__toggle-icon\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 320 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"></path></svg></span></button>"`;
+exports[`ContextSelectorToggle Verify ESC press with not isOpen 1`] = `
+<DocumentFragment>
+  <button
+    aria-expanded="false"
+    class="pf-c-context-selector__toggle"
+    id="toggle-id"
+    type="button"
+  >
+    <span
+      class="pf-c-context-selector__toggle-text"
+    />
+    <span
+      class="pf-c-context-selector__toggle-icon"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 320 512"
+        width="1em"
+      >
+        <path
+          d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+        />
+      </svg>
+    </span>
+  </button>
+</DocumentFragment>
+`;
 
-exports[`ContextSelectorToggle Verify keydown enter  1`] = `"<button id=\\"toggle-id\\" class=\\"pf-c-context-selector__toggle\\" type=\\"button\\" aria-expanded=\\"false\\"><span class=\\"pf-c-context-selector__toggle-text\\"></span><span class=\\"pf-c-context-selector__toggle-icon\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 320 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"></path></svg></span></button>"`;
+exports[`ContextSelectorToggle Verify keydown enter  1`] = `
+<DocumentFragment>
+  <button
+    aria-expanded="false"
+    class="pf-c-context-selector__toggle"
+    id="toggle-id"
+    type="button"
+  >
+    <span
+      class="pf-c-context-selector__toggle-text"
+    />
+    <span
+      class="pf-c-context-selector__toggle-icon"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 320 512"
+        width="1em"
+      >
+        <path
+          d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+        />
+      </svg>
+    </span>
+  </button>
+</DocumentFragment>
+`;
 
-exports[`ContextSelectorToggle Verify keydown tab  1`] = `"<button id=\\"toggle-id\\" class=\\"pf-c-context-selector__toggle\\" type=\\"button\\" aria-expanded=\\"true\\"><span class=\\"pf-c-context-selector__toggle-text\\"></span><span class=\\"pf-c-context-selector__toggle-icon\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 320 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"></path></svg></span></button>"`;
+exports[`ContextSelectorToggle Verify keydown tab  1`] = `
+<DocumentFragment>
+  <button
+    aria-expanded="true"
+    class="pf-c-context-selector__toggle"
+    id="toggle-id"
+    type="button"
+  >
+    <span
+      class="pf-c-context-selector__toggle-text"
+    />
+    <span
+      class="pf-c-context-selector__toggle-icon"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 320 512"
+        width="1em"
+      >
+        <path
+          d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+        />
+      </svg>
+    </span>
+  </button>
+</DocumentFragment>
+`;

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

@@ -15,41 +15,45 @@ import { DropdownItem, Dropdown, KebabToggle, DropdownPosition } from '../../Dro
 
 describe('DataList', () => {
   test('List default', () => {
-    const view = render(<DataList aria-label="this is a simple list" />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<DataList aria-label="this is a simple list" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('List compact', () => {
-    const view = render(<DataList aria-label="this is a simple list" isCompact />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<DataList aria-label="this is a simple list" isCompact />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   describe('DataList variants', () => {
     ['none', 'always', 'sm', 'md', 'lg', 'xl', '2xl'].forEach(oneBreakpoint => {
       test(`Breakpoint - ${oneBreakpoint}`, () => {
-        const view = render(<DataList aria-label="this is a simple list" gridBreakpoint={oneBreakpoint as any} />);
-        expect(view.container).toMatchSnapshot();
+        const { asFragment } = render(
+          <DataList aria-label="this is a simple list" gridBreakpoint={oneBreakpoint as any} />
+        );
+        expect(asFragment()).toMatchSnapshot();
       });
     });
   });
 
   test('List draggable', () => {
-    const view = render(<DataList aria-label="this is a simple list" isCompact onDragFinish={jest.fn()} />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<DataList aria-label="this is a simple list" isCompact onDragFinish={jest.fn()} />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('List', () => {
-    const view = render(<DataList key="list-id-1" className="data-list-custom" aria-label="this is a simple list" />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(
+      <DataList key="list-id-1" className="data-list-custom" aria-label="this is a simple list" />
+    );
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Item default', () => {
-    render(
+    const { asFragment } = render(
       <DataListItem key="item-id-1" aria-labelledby="item-1">
         test
       </DataListItem>
     );
-    expect(screen.getByRole('listitem').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Item expanded', () => {
@@ -58,30 +62,30 @@ describe('DataList', () => {
         test
       </DataListItem>
     );
-    expect(screen.getByRole('listitem').className).toBe('pf-c-data-list__item pf-m-expanded');
+    expect(screen.getByRole('listitem')).toHaveClass('pf-c-data-list__item pf-m-expanded');
   });
 
   test('Item', () => {
-    const view = render(
+    const { asFragment } = render(
       <DataListItem className="data-list-item-custom" aria-labelledby="item-1">
         test
       </DataListItem>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('item row default', () => {
-    const view = render(<DataListItemRow>test</DataListItemRow>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<DataListItemRow>test</DataListItemRow>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Cell default', () => {
-    const view = render(<DataListCell>Secondary</DataListCell>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<DataListCell>Secondary</DataListCell>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Cells', () => {
-    const view = render(
+    const { asFragment } = render(
       <DataListItemCells
         dataListCells={[
           <DataListCell key="list-id-1" id="primary-item" className="data-list-custom">
@@ -93,7 +97,7 @@ describe('DataList', () => {
         ]}
       />
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Cell with width modifier', () => {
@@ -115,8 +119,8 @@ describe('DataList', () => {
       const dataListCell = screen.getByTestId(testId);
 
       testCase.class === ''
-        ? expect(dataListCell.className).toBe('pf-c-data-list__cell')
-        : expect(dataListCell.className).toBe(`pf-c-data-list__cell ${testCase.class}`);
+        ? expect(dataListCell).toHaveClass('pf-c-data-list__cell')
+        : expect(dataListCell).toHaveClass(`pf-c-data-list__cell ${testCase.class}`);
     });
   });
 
@@ -138,26 +142,26 @@ describe('DataList', () => {
       const dataListCell = screen.getByTestId(testId);
 
       testCase.class === ''
-        ? expect(dataListCell.className).toBe('pf-c-data-list__cell')
-        : expect(dataListCell.className).toBe(`pf-c-data-list__cell ${testCase.class}`);
+        ? expect(dataListCell).toHaveClass('pf-c-data-list__cell')
+        : expect(dataListCell).toHaveClass(`pf-c-data-list__cell ${testCase.class}`);
     });
   });
 
   test('Toggle default with aria label', () => {
     render(<DataListToggle aria-label="Toggle details for" id="ex-toggle2" />);
 
-    expect(screen.getByRole('button').getAttribute('aria-labelledby')).toEqual(null);
-    expect(screen.getByRole('button').getAttribute('aria-label')).toEqual('Toggle details for');
-    expect(screen.getByRole('button').getAttribute('aria-expanded')).toEqual('false');
+    expect(screen.getByRole('button')).not.toHaveAttribute('aria-labelledby');
+    expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'Toggle details for');
+    expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false');
   });
 
   test('Toggle expanded', () => {
     render(<DataListToggle aria-label="Toggle details for" id="ex-toggle2" isExpanded />);
-    expect(screen.getByRole('button').getAttribute('aria-expanded')).toEqual('true');
+    expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
   });
 
   test('DataListAction dropdown', () => {
-    const view = render(
+    const { asFragment } = render(
       <DataListAction aria-label="Actions" aria-labelledby="ex-action" id="ex-action" isPlainButtonAction>
         <Dropdown
           isPlain
@@ -174,16 +178,16 @@ describe('DataList', () => {
         />
       </DataListAction>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('DataListAction button', () => {
-    const view = render(
+    const { asFragment } = render(
       <DataListAction aria-label="Actions" aria-labelledby="ex-action" id="ex-action">
         <Button id="delete-item-1">Delete</Button>
       </DataListAction>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('DataListAction visibility - show button when lg', () => {
@@ -198,8 +202,8 @@ describe('DataList', () => {
       </DataListAction>
     );
 
-    expect(screen.getByRole('button').parentElement.className).toContain('pf-m-hidden');
-    expect(screen.getByRole('button').parentElement.className).toContain('pf-m-visible-on-lg');
+    expect(screen.getByRole('button').parentElement).toHaveClass('pf-m-hidden');
+    expect(screen.getByRole('button').parentElement).toHaveClass('pf-m-visible-on-lg');
   });
 
   test('DataListAction visibility - hide button on 2xl', () => {
@@ -214,20 +218,20 @@ describe('DataList', () => {
       </DataListAction>
     );
 
-    expect(screen.getByRole('button').parentElement.className).toContain('pf-m-hidden-on-2xl');
+    expect(screen.getByRole('button').parentElement).toHaveClass('pf-m-hidden-on-2xl');
   });
 
   test('DataListContent', () => {
-    const view = render(<DataListContent aria-label="Primary Content Details"> test</DataListContent>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<DataListContent aria-label="Primary Content Details"> test</DataListContent>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('DataListContent hasNoPadding', () => {
-    const view = render(
+    const { asFragment } = render(
       <DataListContent aria-label="Primary Content Details" hidden hasNoPadding>
         test
       </DataListContent>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/DataList/__tests__/Generated/DataListAction.test.tsx

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

package/src/components/DataList/__tests__/Generated/DataListCell.test.tsx

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

package/src/components/DataList/__tests__/Generated/DataListCheck.test.tsx

@@ -8,7 +8,7 @@ import { DataListCheck } from '../../DataListCheck';
 import {} from '../..';
 
 it('DataListCheck should match snapshot (auto-generated)', () => {
-  const view = render(
+  const { asFragment } = render(
     <DataListCheck
       className={"''"}
       isValid={true}
@@ -19,5 +19,5 @@ it('DataListCheck should match snapshot (auto-generated)', () => {
       aria-labelledby={'string'}
     />
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/DataList/__tests__/Generated/DataListContent.test.tsx

@@ -8,7 +8,7 @@ import { DataListContent } from '../../DataListContent';
 import {} from '../..';
 
 it('DataListContent should match snapshot (auto-generated)', () => {
-  const view = render(
+  const { asFragment } = render(
     <DataListContent
       children={<>ReactNode</>}
       className={"''"}
@@ -19,5 +19,5 @@ it('DataListContent should match snapshot (auto-generated)', () => {
       aria-label={'string'}
     />
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/DataList/__tests__/Generated/DataListItem.test.tsx

@@ -8,7 +8,7 @@ import { DataListItem } from '../../DataListItem';
 import {} from '../..';
 
 it('DataListItem should match snapshot (auto-generated)', () => {
-  const view = render(
+  const { asFragment } = render(
     <DataListItem
       isExpanded={false}
       children={<div>ReactNode</div>}
@@ -17,5 +17,5 @@ it('DataListItem should match snapshot (auto-generated)', () => {
       id={"''"}
     />
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/DataList/__tests__/Generated/DataListItemCells.test.tsx

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

package/src/components/DataList/__tests__/Generated/DataListItemRow.test.tsx

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

package/src/components/DataList/__tests__/Generated/DataListToggle.test.tsx

@@ -8,7 +8,7 @@ import { DataListToggle } from '../../DataListToggle';
 import {} from '../..';
 
 it('DataListToggle should match snapshot (auto-generated)', () => {
-  const view = render(
+  const { asFragment } = render(
     <DataListToggle
       className={"''"}
       isExpanded={false}
@@ -19,5 +19,5 @@ it('DataListToggle should match snapshot (auto-generated)', () => {
       aria-controls={"''"}
     />
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/DataList/__tests__/Generated/__snapshots__/DataListAction.test.tsx.snap

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

package/src/components/DataList/__tests__/Generated/__snapshots__/DataListCell.test.tsx.snap

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

package/src/components/DataList/__tests__/Generated/__snapshots__/DataListCheck.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DataListCheck should match snapshot (auto-generated) 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-data-list__item-control ''"
   >
@@ -15,5 +15,5 @@ exports[`DataListCheck should match snapshot (auto-generated) 1`] = `
       />
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;

package/src/components/DataList/__tests__/Generated/__snapshots__/DataListContent.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DataListContent should match snapshot (auto-generated) 1`] = `
-<div>
+<DocumentFragment>
   <section
     aria-label="string"
     class="pf-c-data-list__expandable-content ''"
@@ -13,5 +13,5 @@ exports[`DataListContent should match snapshot (auto-generated) 1`] = `
       ReactNode
     </div>
   </section>
-</div>
+</DocumentFragment>
 `;

package/src/components/DataList/__tests__/Generated/__snapshots__/DataListItem.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DataListItem should match snapshot (auto-generated) 1`] = `
-<div>
+<DocumentFragment>
   <li
     aria-labelledby="string"
     class="pf-c-data-list__item ''"
@@ -13,5 +13,5 @@ exports[`DataListItem should match snapshot (auto-generated) 1`] = `
       ReactNode
     </div>
   </li>
-</div>
+</DocumentFragment>
 `;

package/src/components/DataList/__tests__/Generated/__snapshots__/DataListItemCells.test.tsx.snap

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