@patternfly/react-core 4.206.4 → 4.207.0

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

@@ -1,53 +1,443 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Label editable label 1`] = `"<span data-testid=\\"label-test-id\\" class=\\"pf-c-label pf-m-editable\\"><button class=\\"pf-c-label__content\\">Something</button><button aria-disabled=\\"false\\" aria-label=\\"Close Something\\" class=\\"pf-c-button pf-m-plain\\" type=\\"button\\" data-ouia-component-type=\\"PF4/Button\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Button-plain-3\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 352 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\\"></path></svg></button></span>"`;
+exports[`Label editable label 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-c-label pf-m-editable"
+  >
+    <button
+      class="pf-c-label__content"
+    >
+      Something
+    </button>
+    <button
+      aria-disabled="false"
+      aria-label="Close Something"
+      class="pf-c-button pf-m-plain"
+      data-ouia-component-id="OUIA-Generated-Button-plain-3"
+      data-ouia-component-type="PF4/Button"
+      data-ouia-safe="true"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 352 512"
+        width="1em"
+      >
+        <path
+          d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+        />
+      </svg>
+    </button>
+  </span>
+</DocumentFragment>
+`;
 
-exports[`Label editable label 2`] = `"<span data-testid=\\"label-test-id\\" class=\\"pf-c-label pf-m-editable pf-m-editable-active\\"><input class=\\"pf-c-label__content\\" type=\\"text\\" id=\\"editable-input\\" value=\\"Something\\"></span>"`;
+exports[`Label editable label 2`] = `
+<DocumentFragment>
+  <span
+    class="pf-c-label pf-m-editable pf-m-editable-active"
+  >
+    <input
+      class="pf-c-label__content"
+      id="editable-input"
+      type="text"
+      value="Something"
+    />
+  </span>
+</DocumentFragment>
+`;
 
-exports[`Label label with additional class name 1`] = `"<span data-testid=\\"label-test-id\\" class=\\"pf-c-label klass1\\"><span class=\\"pf-c-label__content\\">Something</span></span>"`;
+exports[`Label label with additional class name 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-c-label klass1"
+  >
+    <span
+      class="pf-c-label__content"
+    >
+      Something
+    </span>
+  </span>
+</DocumentFragment>
+`;
 
-exports[`Label label with additional class name and props 1`] = `"<span id=\\"label-1\\" data-label-name=\\"something\\" data-testid=\\"label-test-id\\" class=\\"pf-c-label class-1\\"><span class=\\"pf-c-label__content\\">Something</span></span>"`;
+exports[`Label label with additional class name and props 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-c-label class-1"
+    data-label-name="something"
+    id="label-1"
+  >
+    <span
+      class="pf-c-label__content"
+    >
+      Something
+    </span>
+  </span>
+</DocumentFragment>
+`;
 
-exports[`Label label with blue color 1`] = `"<span data-testid=\\"label-test-id\\" class=\\"pf-c-label pf-m-blue\\"><span class=\\"pf-c-label__content\\">Something</span></span>"`;
+exports[`Label label with blue color 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-c-label pf-m-blue"
+  >
+    <span
+      class="pf-c-label__content"
+    >
+      Something
+    </span>
+  </span>
+</DocumentFragment>
+`;
 
-exports[`Label label with blue color with outline variant 1`] = `"<span data-testid=\\"label-test-id\\" class=\\"pf-c-label pf-m-blue pf-m-outline\\"><span class=\\"pf-c-label__content\\">Something</span></span>"`;
+exports[`Label label with blue color with outline variant 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-c-label pf-m-blue pf-m-outline"
+  >
+    <span
+      class="pf-c-label__content"
+    >
+      Something
+    </span>
+  </span>
+</DocumentFragment>
+`;
 
-exports[`Label label with close button 1`] = `"<span data-testid=\\"label-test-id\\" class=\\"pf-c-label\\"><span class=\\"pf-c-label__content\\">Something</span><button aria-disabled=\\"false\\" aria-label=\\"Close Something\\" class=\\"pf-c-button pf-m-plain\\" type=\\"button\\" data-ouia-component-type=\\"PF4/Button\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Button-plain-1\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 352 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\\"></path></svg></button></span>"`;
+exports[`Label label with close button 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-c-label"
+  >
+    <span
+      class="pf-c-label__content"
+    >
+      Something
+    </span>
+    <button
+      aria-disabled="false"
+      aria-label="Close Something"
+      class="pf-c-button pf-m-plain"
+      data-ouia-component-id="OUIA-Generated-Button-plain-1"
+      data-ouia-component-type="PF4/Button"
+      data-ouia-safe="true"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 352 512"
+        width="1em"
+      >
+        <path
+          d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+        />
+      </svg>
+    </button>
+  </span>
+</DocumentFragment>
+`;
 
-exports[`Label label with close button and outline variant 1`] = `"<span data-testid=\\"label-test-id\\" class=\\"pf-c-label pf-m-outline\\"><span class=\\"pf-c-label__content\\">Something</span><button aria-disabled=\\"false\\" aria-label=\\"Close Something\\" class=\\"pf-c-button pf-m-plain\\" type=\\"button\\" data-ouia-component-type=\\"PF4/Button\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Button-plain-2\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 352 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\\"></path></svg></button></span>"`;
+exports[`Label label with close button and outline variant 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-c-label pf-m-outline"
+  >
+    <span
+      class="pf-c-label__content"
+    >
+      Something
+    </span>
+    <button
+      aria-disabled="false"
+      aria-label="Close Something"
+      class="pf-c-button pf-m-plain"
+      data-ouia-component-id="OUIA-Generated-Button-plain-2"
+      data-ouia-component-type="PF4/Button"
+      data-ouia-safe="true"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 352 512"
+        width="1em"
+      >
+        <path
+          d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+        />
+      </svg>
+    </button>
+  </span>
+</DocumentFragment>
+`;
 
-exports[`Label label with cyan color 1`] = `"<span data-testid=\\"label-test-id\\" class=\\"pf-c-label pf-m-cyan\\"><span class=\\"pf-c-label__content\\">Something</span></span>"`;
+exports[`Label label with cyan color 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-c-label pf-m-cyan"
+  >
+    <span
+      class="pf-c-label__content"
+    >
+      Something
+    </span>
+  </span>
+</DocumentFragment>
+`;
 
-exports[`Label label with cyan color with outline variant 1`] = `"<span data-testid=\\"label-test-id\\" class=\\"pf-c-label pf-m-cyan pf-m-outline\\"><span class=\\"pf-c-label__content\\">Something</span></span>"`;
+exports[`Label label with cyan color with outline variant 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-c-label pf-m-cyan pf-m-outline"
+  >
+    <span
+      class="pf-c-label__content"
+    >
+      Something
+    </span>
+  </span>
+</DocumentFragment>
+`;
 
-exports[`Label label with green color 1`] = `"<span data-testid=\\"label-test-id\\" class=\\"pf-c-label pf-m-green\\"><span class=\\"pf-c-label__content\\">Something</span></span>"`;
+exports[`Label label with green color 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-c-label pf-m-green"
+  >
+    <span
+      class="pf-c-label__content"
+    >
+      Something
+    </span>
+  </span>
+</DocumentFragment>
+`;
 
-exports[`Label label with green color with outline variant 1`] = `"<span data-testid=\\"label-test-id\\" class=\\"pf-c-label pf-m-green pf-m-outline\\"><span class=\\"pf-c-label__content\\">Something</span></span>"`;
+exports[`Label label with green color with outline variant 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-c-label pf-m-green pf-m-outline"
+  >
+    <span
+      class="pf-c-label__content"
+    >
+      Something
+    </span>
+  </span>
+</DocumentFragment>
+`;
 
-exports[`Label label with grey color 1`] = `"<span data-testid=\\"label-test-id\\" class=\\"pf-c-label\\"><span class=\\"pf-c-label__content\\">Something</span></span>"`;
+exports[`Label label with grey color 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-c-label"
+  >
+    <span
+      class="pf-c-label__content"
+    >
+      Something
+    </span>
+  </span>
+</DocumentFragment>
+`;
 
-exports[`Label label with grey color with outline variant 1`] = `"<span data-testid=\\"label-test-id\\" class=\\"pf-c-label pf-m-outline\\"><span class=\\"pf-c-label__content\\">Something</span></span>"`;
+exports[`Label label with grey color with outline variant 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-c-label pf-m-outline"
+  >
+    <span
+      class="pf-c-label__content"
+    >
+      Something
+    </span>
+  </span>
+</DocumentFragment>
+`;
 
-exports[`Label label with href 1`] = `"<span data-testid=\\"label-test-id\\" class=\\"pf-c-label\\"><a class=\\"pf-c-label__content\\" href=\\"#\\">Something</a></span>"`;
+exports[`Label label with href 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-c-label"
+  >
+    <a
+      class="pf-c-label__content"
+      href="#"
+    >
+      Something
+    </a>
+  </span>
+</DocumentFragment>
+`;
 
-exports[`Label label with href with outline variant 1`] = `"<span data-testid=\\"label-test-id\\" class=\\"pf-c-label pf-m-outline\\"><a class=\\"pf-c-label__content\\" href=\\"#\\">Something</a></span>"`;
+exports[`Label label with href with outline variant 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-c-label pf-m-outline"
+  >
+    <a
+      class="pf-c-label__content"
+      href="#"
+    >
+      Something
+    </a>
+  </span>
+</DocumentFragment>
+`;
 
-exports[`Label label with orange color 1`] = `"<span data-testid=\\"label-test-id\\" class=\\"pf-c-label pf-m-orange\\"><span class=\\"pf-c-label__content\\">Something</span></span>"`;
+exports[`Label label with orange color 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-c-label pf-m-orange"
+  >
+    <span
+      class="pf-c-label__content"
+    >
+      Something
+    </span>
+  </span>
+</DocumentFragment>
+`;
 
-exports[`Label label with orange color with outline variant 1`] = `"<span data-testid=\\"label-test-id\\" class=\\"pf-c-label pf-m-orange pf-m-outline\\"><span class=\\"pf-c-label__content\\">Something</span></span>"`;
+exports[`Label label with orange color with outline variant 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-c-label pf-m-orange pf-m-outline"
+  >
+    <span
+      class="pf-c-label__content"
+    >
+      Something
+    </span>
+  </span>
+</DocumentFragment>
+`;
 
-exports[`Label label with purple color 1`] = `"<span data-testid=\\"label-test-id\\" class=\\"pf-c-label pf-m-purple\\"><span class=\\"pf-c-label__content\\">Something</span></span>"`;
+exports[`Label label with purple color 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-c-label pf-m-purple"
+  >
+    <span
+      class="pf-c-label__content"
+    >
+      Something
+    </span>
+  </span>
+</DocumentFragment>
+`;
 
-exports[`Label label with purple color with outline variant 1`] = `"<span data-testid=\\"label-test-id\\" class=\\"pf-c-label pf-m-purple pf-m-outline\\"><span class=\\"pf-c-label__content\\">Something</span></span>"`;
+exports[`Label label with purple color with outline variant 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-c-label pf-m-purple pf-m-outline"
+  >
+    <span
+      class="pf-c-label__content"
+    >
+      Something
+    </span>
+  </span>
+</DocumentFragment>
+`;
 
-exports[`Label label with red color 1`] = `"<span data-testid=\\"label-test-id\\" class=\\"pf-c-label pf-m-red\\"><span class=\\"pf-c-label__content\\">Something</span></span>"`;
+exports[`Label label with red color 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-c-label pf-m-red"
+  >
+    <span
+      class="pf-c-label__content"
+    >
+      Something
+    </span>
+  </span>
+</DocumentFragment>
+`;
 
-exports[`Label label with red color with outline variant 1`] = `"<span data-testid=\\"label-test-id\\" class=\\"pf-c-label pf-m-red pf-m-outline\\"><span class=\\"pf-c-label__content\\">Something</span></span>"`;
+exports[`Label label with red color with outline variant 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-c-label pf-m-red pf-m-outline"
+  >
+    <span
+      class="pf-c-label__content"
+    >
+      Something
+    </span>
+  </span>
+</DocumentFragment>
+`;
 
-exports[`Label label with truncation 1`] = `"<span data-testid=\\"label-test-id\\" class=\\"pf-c-label\\"><span class=\\"pf-c-label__content\\"><span class=\\"pf-c-label__text\\">Something very very very very very long that should be truncated</span></span></span>"`;
+exports[`Label label with truncation 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-c-label"
+  >
+    <span
+      class="pf-c-label__content"
+    >
+      <span
+        class="pf-c-label__text"
+      >
+        Something very very very very very long that should be truncated
+      </span>
+    </span>
+  </span>
+</DocumentFragment>
+`;
 
-exports[`Label renders 1`] = `"<span data-testid=\\"label-test-id\\" class=\\"pf-c-label\\"><span class=\\"pf-c-label__content\\">Something</span></span>"`;
+exports[`Label renders 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-c-label"
+  >
+    <span
+      class="pf-c-label__content"
+    >
+      Something
+    </span>
+  </span>
+</DocumentFragment>
+`;
 
-exports[`Label renders with isCompact 1`] = `"<span data-testid=\\"label-test-id\\" class=\\"pf-c-label pf-m-compact\\"><span class=\\"pf-c-label__content\\">Something</span></span>"`;
+exports[`Label renders with isCompact 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-c-label pf-m-compact"
+  >
+    <span
+      class="pf-c-label__content"
+    >
+      Something
+    </span>
+  </span>
+</DocumentFragment>
+`;
 
-exports[`Label renders with outline variant 1`] = `"<span data-testid=\\"label-test-id\\" class=\\"pf-c-label pf-m-outline\\"><span class=\\"pf-c-label__content\\">Something</span></span>"`;
+exports[`Label renders with outline variant 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-c-label pf-m-outline"
+  >
+    <span
+      class="pf-c-label__content"
+    >
+      Something
+    </span>
+  </span>
+</DocumentFragment>
+`;

package/src/components/List/__tests__/Generated/ListItem.test.tsx

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

package/src/components/List/__tests__/Generated/__snapshots__/ListItem.test.tsx.snap

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

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

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
 
 import BookOpen from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
 import Key from '@patternfly/react-icons/dist/esm/icons/key-icon';

package/src/components/LoginPage/__tests__/Generated/LoginFooter.test.tsx

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

package/src/components/LoginPage/__tests__/Generated/LoginHeader.test.tsx

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

package/src/components/LoginPage/__tests__/Generated/__snapshots__/LoginFooter.test.tsx.snap

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

package/src/components/LoginPage/__tests__/Generated/__snapshots__/LoginHeader.test.tsx.snap

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

package/src/components/LoginPage/__tests__/Login.test.tsx

@@ -7,10 +7,10 @@ import { LoginHeader } from '../LoginHeader';
 test('Check login layout example against snapshot', () => {
   const Header = <LoginHeader headerBrand="HeaderBrand">Header Text</LoginHeader>;
   const Footer = <LoginFooter>Footer</LoginFooter>;
-  const view = render(
+  const { asFragment } = render(
     <Login footer={Footer} header={Header}>
       Main
     </Login>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/LoginPage/__tests__/LoginFooterItem.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { render, screen } from '@testing-library/react';
-import "@testing-library/jest-dom";
+import '@testing-library/jest-dom';
 
 import { LoginFooterItem } from '../LoginFooterItem';
 

package/src/components/LoginPage/__tests__/LoginForm.test.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
+
 import { render, screen } from '@testing-library/react';
-import { LoginForm } from '../LoginForm';
 import userEvent from '@testing-library/user-event';
 
+import { LoginForm } from '../LoginForm';
+
 describe('LoginForm', () => {
   test('should render Login form', () => {
-    render(<LoginForm data-testid="form-test-id" />);
-    expect(screen.getByTestId('form-test-id').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(<LoginForm />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('should call onChangeUsername callback', () => {
@@ -37,12 +39,12 @@ describe('LoginForm', () => {
   });
 
   test('LoginForm with rememberMeLabel', () => {
-    render(<LoginForm rememberMeLabel="Remember me" data-testid="form-test-id" />);
-    expect(screen.getByTestId('form-test-id').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(<LoginForm rememberMeLabel="Remember me" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('LoginForm with show password', () => {
-    render(<LoginForm isShowPasswordEnabled data-testid="form-test-id" />);
-    expect(screen.getByTestId('form-test-id').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(<LoginForm isShowPasswordEnabled />);
+    expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/LoginPage/__tests__/LoginMainBody.test.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { LoginMainBody } from '../LoginMainBody';
 
 describe('LoginMainBody', () => {
   test('renders with PatternFly Core styles', () => {
-    render(<LoginMainBody data-testid="test-id" />);
-    expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(<LoginMainBody />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('className is added to the root element', () => {
-    render(<LoginMainBody className="extra-class" data-testid="test-id" />);
-    expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(<LoginMainBody className="extra-class" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/LoginPage/__tests__/LoginMainFooter.test.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { LoginMainFooter } from '../LoginMainFooter';
 
 describe('LoginMainFooter', () => {
   test('renders with PatternFly Core styles', () => {
-    render(<LoginMainFooter data-testid="test-id" />);
-    expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(<LoginMainFooter />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('className is added to the root element', () => {
-    render(<LoginMainFooter className="extra-class" data-testid="test-id" />);
-    expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(<LoginMainFooter className="extra-class" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/LoginPage/__tests__/LoginMainFooterBandItem.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { render, screen } from '@testing-library/react';
-import "@testing-library/jest-dom";
+import '@testing-library/jest-dom';
 
 import { LoginMainFooterBandItem } from '../LoginMainFooterBandItem';