From 7fca893ba5f6be743805639b941e60c27e59e740 Mon Sep 17 00:00:00 2001
From: Jeff Puzzo <jpuzzo@redhat.com>
Date: Wed, 16 Mar 2022 14:00:00 -0400
Subject: [PATCH] chore: migrate tests to rtl

---
 .../CodeEditor/__test__/CodeEditor.test.tsx   |  50 +-
 .../__snapshots__/CodeEditor.test.tsx.snap    | 599 +++++++++++-
 .../AboutModal/__tests__/AboutModal.test.tsx  | 101 +-
 .../Accordion/__tests__/Accordion.test.tsx    |  40 +-
 .../components/Alert/__tests__/Alert.test.tsx | 379 ++++----
 .../Generated/AlertActionCloseButton.test.tsx |  36 +-
 .../AlertActionCloseButton.test.tsx.snap      |  30 +-
 .../__snapshots__/Alert.test.tsx.snap         | 750 +--------------
 .../AlertGroup/__tests__/AlertGroup.test.tsx  | 141 ++-
 .../__snapshots__/AlertGroup.test.tsx.snap    | 894 +-----------------
 .../ApplicationLauncherSeparator.test.tsx     |  23 +-
 ...ApplicationLauncherSeparator.test.tsx.snap |  13 +-
 .../Button/__tests__/Button.test.tsx          | 223 ++---
 .../__snapshots__/Button.test.tsx.snap        |  42 +-
 .../components/Card/__tests__/Card.test.tsx   | 219 +++--
 .../Card/__tests__/CardBody.test.tsx          |  63 +-
 .../Card/__tests__/CardFooter.test.tsx        |  52 +-
 .../Card/__tests__/CardHeadMain.test.tsx      |  33 +-
 .../Card/__tests__/CardHeader.test.tsx        |  28 +-
 .../Card/__tests__/CardHeaderMain.test.tsx    |  33 +-
 .../Card/__tests__/CardTitle.test.tsx         |  25 +
 .../__snapshots__/Card.test.tsx.snap          |  40 +-
 .../__snapshots__/CardBody.test.tsx.snap      |   6 +-
 .../__snapshots__/CardFooter.test.tsx.snap    |   4 +-
 .../__snapshots__/CardHeadMain.test.tsx.snap  |  12 +-
 .../__snapshots__/CardHeader.test.tsx.snap    |  12 +-
 .../CardHeaderMain.test.tsx.snap              |  12 +-
 .../__snapshots__/CardTitle.test.tsx.snap     |   3 +
 .../Checkbox/__tests__/Checkbox.test.tsx      | 136 ++-
 .../__snapshots__/Checkbox.test.tsx.snap      | 213 +----
 30 files changed, 1533 insertions(+), 2679 deletions(-)
 create mode 100644 packages/react-core/src/components/Card/__tests__/CardTitle.test.tsx
 create mode 100644 packages/react-core/src/components/Card/__tests__/__snapshots__/CardTitle.test.tsx.snap

diff --git a/packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditor.test.tsx b/packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditor.test.tsx
index d179e6e9467..5ef5014bcd0 100644
--- a/packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditor.test.tsx
+++ b/packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditor.test.tsx
@@ -1,26 +1,32 @@
-import { CodeEditor, Language } from '../CodeEditor';
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
+import { CodeEditor, Language } from '../CodeEditor';
 
-test(`CodeEditor`, () => {
-  const view = shallow(<CodeEditor />);
-  expect(view).toMatchSnapshot();
-});
+describe('CodeEditor', () => {
+  beforeAll(() => {
+    window.HTMLCanvasElement.prototype.getContext = () => ({} as any);
+  });
+
+  test('matches snapshot without props', () => {
+    const view = render(<CodeEditor />);
+    expect(view.container).toMatchSnapshot();
+  });
 
-test(`CodeEditor with all flags`, () => {
-  const view = shallow(
-    <CodeEditor
-      isReadOnly
-      isDarkTheme
-      isLineNumbersVisible={false}
-      isUploadEnabled
-      isLanguageLabelVisible
-      isDownloadEnabled
-      isCopyEnabled
-      height="400px"
-      code={'test'}
-      language={Language.javascript}
-    />
-  );
-  expect(view).toMatchSnapshot();
+  test('matches snapshot with all props', () => {
+    const view = render(
+      <CodeEditor
+        isReadOnly
+        isDarkTheme
+        isLineNumbersVisible={false}
+        isUploadEnabled
+        isLanguageLabelVisible
+        isDownloadEnabled
+        isCopyEnabled
+        height="400px"
+        code={'test'}
+        language={Language.javascript}
+      />
+    );
+    expect(view.container).toMatchSnapshot();
+  });
 });
diff --git a/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap b/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap
index 492ff8420cb..bc17554226f 100644
--- a/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap
+++ b/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap
@@ -1,31 +1,578 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CodeEditor 1`] = `
-<t
-  disabled={false}
-  getDataTransferItems={[Function]}
-  maxSize={Infinity}
-  minSize={0}
-  multiple={false}
-  onDropAccepted={[Function]}
-  onDropRejected={[Function]}
-  preventDropOnDocument={true}
->
-  <Component />
-</t>
+exports[`CodeEditor matches snapshot with all props 1`] = `
+<div>
+  <div
+    class="pf-c-code-editor pf-m-read-only"
+  >
+    <div
+      class="pf-c-file-upload undefined false"
+      tabindex="0"
+    >
+      <div
+        class="pf-c-code-editor__header"
+      >
+        <div
+          class="pf-c-code-editor__controls"
+        >
+          <button
+            aria-disabled="false"
+            aria-label="Copy code to clipboard"
+            class="pf-c-button pf-m-control"
+            data-ouia-component-id="OUIA-Generated-Button-control-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 448 512"
+              width="1em"
+            >
+              <path
+                d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
+              />
+            </svg>
+          </button>
+          <button
+            aria-disabled="false"
+            aria-label="Upload code"
+            class="pf-c-button pf-m-control"
+            data-ouia-component-id="OUIA-Generated-Button-control-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 512 512"
+              width="1em"
+            >
+              <path
+                d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
+              />
+            </svg>
+          </button>
+          <button
+            aria-disabled="false"
+            aria-label="Download code"
+            class="pf-c-button pf-m-control"
+            data-ouia-component-id="OUIA-Generated-Button-control-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 512 512"
+              width="1em"
+            >
+              <path
+                d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
+              />
+            </svg>
+          </button>
+        </div>
+        <div
+          class="pf-c-code-editor__header-main"
+        />
+        <div
+          class="pf-c-code-editor__tab"
+        >
+          <span
+            class="pf-c-code-editor__tab-icon"
+          >
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              viewBox="0 0 640 512"
+              width="1em"
+            >
+              <path
+                d="M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z"
+              />
+            </svg>
+          </span>
+          <span
+            class="pf-c-code-editor__tab-text"
+          >
+            JAVASCRIPT
+          </span>
+        </div>
+      </div>
+      <div
+        class="pf-c-code-editor__main"
+      >
+        <input
+          autocomplete="off"
+          style="display: none;"
+          tabindex="-1"
+          type="file"
+        />
+        <div
+          class="pf-c-code-editor__code"
+          tabindex="0"
+        >
+          <div
+            class="react-monaco-editor-container"
+            data-keybinding-context="1"
+            data-mode-id="plaintext"
+            style="height: 400px;"
+          >
+            <div
+              class="monaco-editor showUnused showDeprecated vs-dark"
+              data-uri="inmemory://model/2"
+              style="width: 5px; height: 5px;"
+            >
+              <div
+                class="overflow-guard"
+                data-mprt="3"
+                style="width: 5px; height: 5px;"
+              >
+                <div
+                  aria-hidden="true"
+                  class="margin"
+                  role="presentation"
+                  style="position: absolute;"
+                >
+                  <div
+                    class="glyph-margin"
+                  />
+                  <div
+                    aria-hidden="true"
+                    class="margin-view-zones"
+                    role="presentation"
+                    style="position: absolute;"
+                  />
+                  <div
+                    aria-hidden="true"
+                    class="margin-view-overlays"
+                    role="presentation"
+                    style="position: absolute; width: 1px; font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; font-feature-settings: \\"liga\\" off, \\"calt\\" off; line-height: 19px; letter-spacing: 0px;"
+                  />
+                </div>
+                <div
+                  class="monaco-scrollable-element editor-scrollable vs-dark"
+                  data-mprt="5"
+                  role="presentation"
+                  style="position: absolute; overflow: hidden; left: 26px; width: -21px; height: 5px;"
+                >
+                  <div
+                    class="lines-content monaco-editor-background"
+                    style="position: absolute; overflow: hidden; width: 1000000px; height: 1000000px; transform: translate3d(0px, 0px, 0px); contain: strict; top: 0px; left: 0px;"
+                  >
+                    <div
+                      aria-hidden="true"
+                      class="view-overlays"
+                      role="presentation"
+                      style="position: absolute; height: 0px;"
+                    />
+                    <div
+                      aria-hidden="true"
+                      class="view-rulers"
+                      role="presentation"
+                    />
+                    <div
+                      aria-hidden="true"
+                      class="view-zones"
+                      role="presentation"
+                      style="position: absolute;"
+                    />
+                    <div
+                      aria-hidden="true"
+                      class="view-lines monaco-mouse-cursor-text"
+                      data-mprt="7"
+                      role="presentation"
+                      style="position: absolute; font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; font-feature-settings: \\"liga\\" off, \\"calt\\" off; line-height: 19px; letter-spacing: 0px; width: 45px; height: 5px;"
+                    >
+                      <div
+                        class="view-line"
+                        style="top:0px;height:19px;"
+                      >
+                        <span>
+                          <span
+                            class="mtk1"
+                          >
+                            test
+                          </span>
+                        </span>
+                      </div>
+                    </div>
+                    <div
+                      class="contentWidgets"
+                      data-mprt="1"
+                      style="position: absolute; top: 0px;"
+                    />
+                    <div
+                      aria-hidden="true"
+                      class="cursors-layer cursor-line-style cursor-solid"
+                      role="presentation"
+                    >
+                      <div
+                        class="cursor monaco-mouse-cursor-text"
+                        style="height: 19px; top: 0px; left: 0px; font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; font-feature-settings: \\"liga\\" off, \\"calt\\" off; line-height: 19px; letter-spacing: 0px; display: none; visibility: hidden;"
+                      />
+                    </div>
+                  </div>
+                  <div
+                    aria-hidden="true"
+                    class="invisible scrollbar horizontal"
+                    role="presentation"
+                    style="position: absolute; width: 0px; height: 12px; left: 0px; bottom: 0px;"
+                  >
+                    <div
+                      class="slider"
+                      style="position: absolute; top: 0px; left: 0px; height: 12px; transform: translate3d(0px, 0px, 0px); contain: strict; width: 20px;"
+                    />
+                  </div>
+                  <canvas
+                    aria-hidden="true"
+                    class="decorationsOverviewRuler"
+                    height="5"
+                    style="position: absolute; transform: translate3d(0px, 0px, 0px); contain: strict; top: 0px; right: 0px; width: 14px; height: 5px;"
+                    width="14"
+                  />
+                  <div
+                    aria-hidden="true"
+                    class="invisible scrollbar vertical"
+                    role="presentation"
+                    style="position: absolute; width: 14px; height: 5px; right: 0px; top: 0px;"
+                  >
+                    <div
+                      class="slider"
+                      style="position: absolute; top: 0px; left: 0px; width: 14px; transform: translate3d(0px, 0px, 0px); contain: strict; height: 5px;"
+                    />
+                  </div>
+                </div>
+                <div
+                  aria-hidden="true"
+                  role="presentation"
+                />
+                <textarea
+                  aria-autocomplete="both"
+                  aria-haspopup="false"
+                  aria-label="Editor content;Press Alt+F1 for Accessibility Options."
+                  aria-multiline="true"
+                  aria-roledescription="editor"
+                  autocapitalize="off"
+                  autocomplete="off"
+                  autocorrect="off"
+                  class="inputarea monaco-mouse-cursor-text"
+                  data-mprt="6"
+                  readonly="true"
+                  role="textbox"
+                  spellcheck="false"
+                  style="font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; font-feature-settings: \\"liga\\" off, \\"calt\\" off; line-height: 19px; letter-spacing: 0px; top: 0px; left: 0px; width: 1px; height: 1px;"
+                  tabindex="-1"
+                  wrap="off"
+                />
+                <div
+                  class="monaco-editor-background textAreaCover"
+                  style="position: absolute; top: 0px; left: 0px; width: 1px; height: 1px;"
+                />
+                <div
+                  class="overlayWidgets"
+                  data-mprt="4"
+                >
+                  <div
+                    style="position: absolute;"
+                    widgetid="editor.contrib.quickInputWidget"
+                  />
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="minimap slider-mouseover"
+                  data-mprt="8"
+                  role="presentation"
+                  style="position: absolute; left: 0px; width: 0px; height: 5px;"
+                >
+                  <div
+                    class="minimap-shadow-hidden"
+                    style="height: 5px;"
+                  />
+                  <canvas
+                    height="5"
+                    style="position: absolute; left: 0px; width: 0px; height: 5px;"
+                    width="0"
+                  />
+                  <canvas
+                    class="minimap-decorations-layer"
+                    height="5"
+                    style="position: absolute; left: 0px; width: 0px; height: 5px;"
+                    width="0"
+                  />
+                  <div
+                    class="minimap-slider"
+                    style="position: absolute; transform: translate3d(0px, 0px, 0px); contain: strict; width: 0px;"
+                  >
+                    <div
+                      class="minimap-slider-horizontal"
+                      style="position: absolute;"
+                    />
+                  </div>
+                </div>
+              </div>
+              <div
+                class="overflowingContentWidgets"
+                data-mprt="2"
+              />
+              <div
+                aria-hidden="true"
+                class="context-view"
+                style="display: none;"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 `;
 
-exports[`CodeEditor with all flags 1`] = `
-<t
-  disabled={false}
-  getDataTransferItems={[Function]}
-  maxSize={Infinity}
-  minSize={0}
-  multiple={false}
-  onDropAccepted={[Function]}
-  onDropRejected={[Function]}
-  preventDropOnDocument={true}
->
-  <Component />
-</t>
+exports[`CodeEditor matches snapshot without props 1`] = `
+<div>
+  <div
+    class="pf-c-code-editor"
+  >
+    <div
+      class="pf-c-code-editor__header"
+    >
+      <div
+        class="pf-c-code-editor__controls"
+      />
+      <div
+        class="pf-c-code-editor__header-main"
+      />
+    </div>
+    <div
+      class="pf-c-code-editor__main"
+    >
+      <div
+        class="pf-c-code-editor__code"
+        tabindex="0"
+      >
+        <div
+          class="react-monaco-editor-container"
+          data-keybinding-context="1"
+          data-mode-id="plaintext"
+        >
+          <div
+            class="monaco-editor showUnused showDeprecated vs"
+            data-uri="inmemory://model/1"
+            style="width: 5px; height: 5px;"
+          >
+            <div
+              class="overflow-guard"
+              data-mprt="3"
+              style="width: 5px; height: 5px;"
+            >
+              <div
+                aria-hidden="true"
+                class="margin"
+                role="presentation"
+                style="position: absolute;"
+              >
+                <div
+                  class="glyph-margin"
+                />
+                <div
+                  aria-hidden="true"
+                  class="margin-view-zones"
+                  role="presentation"
+                  style="position: absolute;"
+                />
+                <div
+                  aria-hidden="true"
+                  class="margin-view-overlays"
+                  role="presentation"
+                  style="position: absolute; width: 1px; font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; font-feature-settings: \\"liga\\" off, \\"calt\\" off; line-height: 19px; letter-spacing: 0px;"
+                />
+              </div>
+              <div
+                class="monaco-scrollable-element editor-scrollable vs"
+                data-mprt="5"
+                role="presentation"
+                style="position: absolute; overflow: hidden; left: 51px; width: -46px; height: 5px;"
+              >
+                <div
+                  class="lines-content monaco-editor-background"
+                  style="position: absolute; overflow: hidden; width: 1000000px; height: 1000000px; transform: translate3d(0px, 0px, 0px); contain: strict; top: 0px; left: 0px;"
+                >
+                  <div
+                    aria-hidden="true"
+                    class="view-overlays"
+                    role="presentation"
+                    style="position: absolute; height: 0px;"
+                  />
+                  <div
+                    aria-hidden="true"
+                    class="view-rulers"
+                    role="presentation"
+                  />
+                  <div
+                    aria-hidden="true"
+                    class="view-zones"
+                    role="presentation"
+                    style="position: absolute;"
+                  />
+                  <div
+                    aria-hidden="true"
+                    class="view-lines monaco-mouse-cursor-text"
+                    data-mprt="7"
+                    role="presentation"
+                    style="position: absolute; font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; font-feature-settings: \\"liga\\" off, \\"calt\\" off; line-height: 19px; letter-spacing: 0px; width: 26px; height: 5px;"
+                  >
+                    <div
+                      class="view-line"
+                      style="top:0px;height:19px;"
+                    >
+                      <span>
+                        <span />
+                      </span>
+                    </div>
+                  </div>
+                  <div
+                    class="contentWidgets"
+                    data-mprt="1"
+                    style="position: absolute; top: 0px;"
+                  />
+                  <div
+                    aria-hidden="true"
+                    class="cursors-layer cursor-line-style cursor-solid"
+                    role="presentation"
+                  >
+                    <div
+                      class="cursor monaco-mouse-cursor-text"
+                      style="height: 19px; top: 0px; left: 0px; font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; font-feature-settings: \\"liga\\" off, \\"calt\\" off; line-height: 19px; letter-spacing: 0px; display: none; visibility: hidden;"
+                    />
+                  </div>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="invisible scrollbar horizontal"
+                  role="presentation"
+                  style="position: absolute; width: 0px; height: 12px; left: 0px; bottom: 0px;"
+                >
+                  <div
+                    class="slider"
+                    style="position: absolute; top: 0px; left: 0px; height: 12px; transform: translate3d(0px, 0px, 0px); contain: strict; width: 20px;"
+                  />
+                </div>
+                <canvas
+                  aria-hidden="true"
+                  class="decorationsOverviewRuler"
+                  height="5"
+                  style="position: absolute; transform: translate3d(0px, 0px, 0px); contain: strict; top: 0px; right: 0px; width: 14px; height: 5px;"
+                  width="14"
+                />
+                <div
+                  aria-hidden="true"
+                  class="invisible scrollbar vertical"
+                  role="presentation"
+                  style="position: absolute; width: 14px; height: 5px; right: 0px; top: 0px;"
+                >
+                  <div
+                    class="slider"
+                    style="position: absolute; top: 0px; left: 0px; width: 14px; transform: translate3d(0px, 0px, 0px); contain: strict; height: 5px;"
+                  />
+                </div>
+              </div>
+              <div
+                aria-hidden="true"
+                role="presentation"
+              />
+              <textarea
+                aria-autocomplete="both"
+                aria-haspopup="false"
+                aria-label="Editor content;Press Alt+F1 for Accessibility Options."
+                aria-multiline="true"
+                aria-roledescription="editor"
+                autocapitalize="off"
+                autocomplete="off"
+                autocorrect="off"
+                class="inputarea monaco-mouse-cursor-text"
+                data-mprt="6"
+                role="textbox"
+                spellcheck="false"
+                style="font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; font-feature-settings: \\"liga\\" off, \\"calt\\" off; line-height: 19px; letter-spacing: 0px; top: 0px; left: 0px; width: 1px; height: 1px;"
+                tabindex="-1"
+                wrap="off"
+              />
+              <div
+                class="monaco-editor-background textAreaCover line-numbers"
+                style="position: absolute; top: 0px; left: 0px; width: 1px; height: 1px;"
+              />
+              <div
+                class="overlayWidgets"
+                data-mprt="4"
+              >
+                <div
+                  style="position: absolute;"
+                  widgetid="editor.contrib.quickInputWidget"
+                />
+              </div>
+              <div
+                aria-hidden="true"
+                class="minimap slider-mouseover"
+                data-mprt="8"
+                role="presentation"
+                style="position: absolute; left: 0px; width: 0px; height: 5px;"
+              >
+                <div
+                  class="minimap-shadow-hidden"
+                  style="height: 5px;"
+                />
+                <canvas
+                  height="5"
+                  style="position: absolute; left: 0px; width: 0px; height: 5px;"
+                  width="0"
+                />
+                <canvas
+                  class="minimap-decorations-layer"
+                  height="5"
+                  style="position: absolute; left: 0px; width: 0px; height: 5px;"
+                  width="0"
+                />
+                <div
+                  class="minimap-slider"
+                  style="position: absolute; transform: translate3d(0px, 0px, 0px); contain: strict; width: 0px;"
+                >
+                  <div
+                    class="minimap-slider-horizontal"
+                    style="position: absolute;"
+                  />
+                </div>
+              </div>
+            </div>
+            <div
+              class="overflowingContentWidgets"
+              data-mprt="2"
+            />
+            <div
+              aria-hidden="true"
+              class="context-view"
+              style="display: none;"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 `;
diff --git a/packages/react-core/src/components/AboutModal/__tests__/AboutModal.test.tsx b/packages/react-core/src/components/AboutModal/__tests__/AboutModal.test.tsx
index bf4c1def0b9..fe68390a106 100644
--- a/packages/react-core/src/components/AboutModal/__tests__/AboutModal.test.tsx
+++ b/packages/react-core/src/components/AboutModal/__tests__/AboutModal.test.tsx
@@ -1,72 +1,53 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { shallow } from 'enzyme';
-import { AboutModal } from '../AboutModal';
-import { KEY_CODES } from '../../../helpers/constants';
 
-const mockListener = jest.spyOn(ReactDOM, 'createPortal');
-jest.spyOn(document, 'createElement');
-jest.spyOn(document.body, 'addEventListener');
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
-mockListener.mockImplementation(node => node as React.ReactPortal);
+import { AboutModal, AboutModalProps } from '../AboutModal';
 
-const props = {
+const props: AboutModalProps = {
   onClose: jest.fn(),
   children: 'modal content',
   productName: 'Product Name',
   trademark: 'Trademark and copyright information here',
   brandImageSrc: 'brandImg...',
-  brandImageAlt: 'Brand Image',
-  logoImageSrc: 'logoImg...',
-  logoImageAlt: 'AboutModal Logo'
+  brandImageAlt: 'Brand Image'
 };
 
-test('AboutModal creates a container element once for div', () => {
-  const view = shallow(<AboutModal {...props}> Test About Modal </AboutModal>);
-  view.update();
-  expect(document.createElement).toBeCalledWith('div');
-  expect(document.createElement).toHaveBeenCalledTimes(1);
-});
-
-test('About Modal closes with escape', () => {
-  shallow(
-    <AboutModal {...props} isOpen>
-      Test About Modal
-    </AboutModal>
-  );
-  const [event, handler] = (document.body.addEventListener as any).mock.calls[0];
-  expect(event).toBe('keydown');
-  handler({ keyCode: KEY_CODES.ESCAPE_KEY });
-  expect(props.onClose).toBeCalled();
-});
-
-test('modal does not call onClose for esc key if it is not open', () => {
-  shallow(<AboutModal {...props} />);
-  const [event, handler] = (document.body.addEventListener as any).mock.calls[0];
-  expect(event).toBe('keydown');
-  handler({ keyCode: KEY_CODES.ESCAPE_KEY });
-  expect(props.onClose).not.toBeCalled();
-});
-
-test('Each modal is given new aria-describedby and aria-labelledby', () => {
-  const first = new AboutModal(props);
-  const second = new AboutModal(props);
-  expect(first.ariaLabelledBy).not.toBe(second.ariaLabelledBy);
-  expect(first.ariaDescribedBy).not.toBe(second.ariaDescribedBy);
-});
-
-test('Console error is generated when the logoImageSrc is provided without logoImageAlt', () => {
-  const noImgAltrops = {
-    onClose: jest.fn(),
-    children: 'modal content',
-    productName: 'Product Name',
-    trademark: 'Trademark and copyright information here',
-    brandImageSrc: 'brandImg...',
-    logoImageSrc: 'logoImg...'
-  };
-  const myMock = jest.fn() as any;
-  global.console = { error: myMock } as any;
-  const JSAboutModal = AboutModal as any;
-  shallow(<JSAboutModal {...noImgAltrops}> Test About Modal </JSAboutModal>);
-  expect(myMock).toBeCalled();
+describe('AboutModal', () => {
+  test('closes with escape', () => {
+    render(<AboutModal {...props} isOpen />);
+
+    userEvent.type(screen.getByRole('dialog'), '{esc}');
+    expect(props.onClose).toBeCalled();
+  });
+
+  test('does not render the modal when isOpen is not specified', () => {
+    render(<AboutModal {...props} />);
+    expect(screen.queryByRole('dialog')).toBeNull();
+  });
+
+  test('Each modal is given new aria-describedby and aria-labelledby', () => {
+    const first = new AboutModal(props);
+    const second = new AboutModal(props);
+
+    expect(first.ariaLabelledBy).not.toBe(second.ariaLabelledBy);
+    expect(first.ariaDescribedBy).not.toBe(second.ariaDescribedBy);
+  });
+
+  test('Console error is generated when the logoImageSrc is provided without logoImageAlt', () => {
+    const noImgAltrops = {
+      onClose: jest.fn(),
+      children: 'modal content',
+      productName: 'Product Name',
+      trademark: 'Trademark and copyright information here',
+      brandImageSrc: 'brandImg...',
+      logoImageSrc: 'logoImg...'
+    } as any;
+    const myMock = jest.fn() as any;
+    global.console = { error: myMock } as any;
+
+    render(<AboutModal {...noImgAltrops}>Test About Modal</AboutModal>);
+    expect(myMock).toBeCalled();
+  });
 });
diff --git a/packages/react-core/src/components/Accordion/__tests__/Accordion.test.tsx b/packages/react-core/src/components/Accordion/__tests__/Accordion.test.tsx
index 07dedc1824f..9c151100671 100644
--- a/packages/react-core/src/components/Accordion/__tests__/Accordion.test.tsx
+++ b/packages/react-core/src/components/Accordion/__tests__/Accordion.test.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import { mount } from 'enzyme';
+
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
 import { Accordion } from '../Accordion';
 import { AccordionToggle } from '../AccordionToggle';
 import { AccordionContent } from '../AccordionContent';
@@ -26,31 +28,34 @@ describe('Accordion', () => {
   });
 
   test('It should pass optional aria props', () => {
-    const view = mount(
+    render(
       <Accordion asDefinitionList>
         <AccordionToggle aria-label="Toggle details for" aria-labelledby="ex-toggle2 ex-item2" id="ex-toggle2" />
       </Accordion>
     );
-    const button = view.find('button[id="ex-toggle2"]').getElement();
-    expect(button.props['aria-label']).toBe('Toggle details for');
-    expect(button.props['aria-labelledby']).toBe('ex-toggle2 ex-item2');
-    expect(button.props['aria-expanded']).toBe(false);
+    const button = screen.getByRole('button');
+
+    expect(button.getAttribute('aria-label')).toEqual('Toggle details for');
+    expect(button.getAttribute('aria-labelledby')).toEqual('ex-toggle2 ex-item2');
+    expect(button.getAttribute('aria-expanded')).toEqual('false');
   });
 
   test('Toggle expanded', () => {
-    const view = mount(
+    render(
       <Accordion asDefinitionList>
         <AccordionToggle aria-label="Toggle details for" id="ex-toggle2" isExpanded />
       </Accordion>
     );
-    const button = view.find('button[id="ex-toggle2"]').getElement();
-    expect(button.props['aria-expanded']).toBe(true);
-    expect(button.props.className).toContain('pf-m-expanded');
+    const button = screen.getByRole('button');
+
+    expect(button.getAttribute('aria-expanded')).toEqual('true');
+    expect(button.className).toContain('pf-m-expanded');
   });
 
-  test('Custom containers', () => {
+  test('renders content with custom Toggle and Content containers', () => {
     const container = 'a';
-    const view = mount(
+
+    const view = render(
       <Accordion headingLevel="h2">
         <AccordionItem>
           <AccordionToggle id="item-1" component={container}>
@@ -60,8 +65,9 @@ describe('Accordion', () => {
         </AccordionItem>
       </Accordion>
     );
-    expect(view.find(AccordionToggle).getDOMNode().tagName).toBe(container.toLocaleUpperCase());
-    expect(view.find(AccordionContent).getDOMNode().tagName).toBe(container.toLocaleUpperCase());
+
+    expect(screen.getByText('Item One')).toBeInTheDocument();
+    expect(screen.getByText('Item One Content')).toBeInTheDocument();
   });
 
   test('Accordion bordered', () => {
@@ -78,7 +84,7 @@ describe('Accordion', () => {
 
   test('Accordion display large', () => {
     const view = render(
-      <Accordion displaySize='large'>
+      <Accordion displaySize="large">
         <AccordionItem>
           <AccordionToggle id="item-1">Item One</AccordionToggle>
           <AccordionContent>Item One Content</AccordionContent>
@@ -96,7 +102,7 @@ describe('Accordion', () => {
           <AccordionContent isCustomContent>
             <AccordionExpandedContentBody>Item one content body 1</AccordionExpandedContentBody>
             <AccordionExpandedContentBody>Item one Content body 2</AccordionExpandedContentBody>
-            </AccordionContent>
+          </AccordionContent>
         </AccordionItem>
       </Accordion>
     );
diff --git a/packages/react-core/src/components/Alert/__tests__/Alert.test.tsx b/packages/react-core/src/components/Alert/__tests__/Alert.test.tsx
index 5096e9f7b3d..a982f2fb497 100644
--- a/packages/react-core/src/components/Alert/__tests__/Alert.test.tsx
+++ b/packages/react-core/src/components/Alert/__tests__/Alert.test.tsx
@@ -1,197 +1,208 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { Alert, AlertVariant } from '../Alert';
 import { AlertActionLink } from '../AlertActionLink';
 import { AlertActionCloseButton } from '../AlertActionCloseButton';
 import { UsersIcon } from '@patternfly/react-icons';
 
-test('default Alert variant is default', () => {
-  const view = mount(<Alert title="this is a test">Alert testing</Alert>);
-  expect(
-    view
-      .find('Alert')
-      .childAt(0)
-      .prop('className')
-  ).toContain('pf-c-alert');
-});
-
-Object.values(AlertVariant).forEach(variant => {
-  describe(`Alert - ${variant}`, () => {
-    test('Description', () => {
-      const view = render(
-        <Alert variant={variant} title="">
-          Some alert
-        </Alert>
-      );
-      expect(view.container).toMatchSnapshot();
-    });
-
-    test('Title', () => {
-      const view = render(
-        <Alert variant={variant} title="Some title">
-          Some alert
-        </Alert>
-      );
-      expect(view.container).toMatchSnapshot();
-    });
-
-    test('Heading level', () => {
-      const view = render(
-        <Alert variant={variant} title="Some title" titleHeadingLevel="h1">
-          Some alert
-        </Alert>
-      );
-      expect(view.container).toMatchSnapshot();
-    });
-
-    test('Action Link', () => {
-      const view = render(
-        <Alert variant={variant} actionLinks={[<AlertActionLink key={'action-1'}>test</AlertActionLink>]} title="">
-          Some alert
-        </Alert>
-      );
-      expect(view.container).toMatchSnapshot();
-    });
-
-    test('Action Close Button', () => {
-      const onClose = jest.fn();
-      const view = mount(
-        <Alert
-          variant={variant}
-          actionClose={<AlertActionCloseButton aria-label="Close" onClose={onClose} />}
-          title={`Sample ${variant} alert`}
-        >
-          Some alert
-        </Alert>
-      );
-      expect(view).toMatchSnapshot();
-      view.find('button[aria-label="Close"]').simulate('click');
-      expect(onClose).toHaveBeenCalled();
-    });
-
-    test('Action and Title', () => {
-      const view = render(
-        <Alert variant={variant} actionLinks={[<AlertActionLink key={'action-1'}>test</AlertActionLink>]} title="Some title">
-          Some alert
-        </Alert>
-      );
-      expect(view.container).toMatchSnapshot();
-    });
-
-    test('Custom aria label', () => {
-      const view = render(
-        <Alert
-          variant={variant}
-          aria-label={`Custom aria label for ${variant}`}
-          actionLinks={[<AlertActionLink key={'action-1'}>test</AlertActionLink>]}
-          title="Some title"
-        >
-          Some alert
-        </Alert>
-      );
-      expect(view.container).toMatchSnapshot();
-    });
-
-    test('inline variation', () => {
-      const view = render(
-        <Alert variant={variant} isInline title="Some title">
-          Some alert
-        </Alert>
-      );
-      expect(view.container).toMatchSnapshot();
-    });
-
-    test('expandable variation', () => {
-      const view = render(
-        <Alert variant={variant} title="Some title" isExpandable>
-          <p>Success alert description. This should tell the user more information about the alert.</p>
-        </Alert>
-      )
-      expect(view.container).toMatchSnapshot();
-    })
-
-    test('expandable variation description hidden', () => {
-      const wrapper = mount(
-        <Alert variant={variant} title="Some title" isExpandable>
-          <p>Success alert description. This should tell the user more information about the alert.</p>
-        </Alert>
-      )
-      const descriptionExists = wrapper.find('.pf-c-alert__description').exists();
-      expect(descriptionExists).toBeFalsy();
-    })
-
-    test('Toast alerts match snapsnot', () => {
-      const view = render(
-        <Alert isLiveRegion={true} variant={variant} aria-label={`${variant} toast alert`} title="Some title">
-          Some toast alert
-        </Alert>
-      );
-      expect(view.container).toMatchSnapshot();
-    });
-
-    test('Toast alerts contain default live region', () => {
-      const wrapper = mount(
-        <Alert isLiveRegion={true} variant={variant} aria-label={`${variant} toast alert`} title="Some title">
-          Some toast alert
-        </Alert>
-      );
-      const liveRegion = wrapper.find({ 'aria-live': 'polite' }).length;
-      expect(liveRegion).toBe(1);
-    });
-
-    test('Toast alert live regions are not atomic', () => {
-      const wrapper = mount(
-        <Alert isLiveRegion={true} variant={variant} aria-label={`${variant} toast alert`} title="Some title">
-          Some toast alert
-        </Alert>
-      );
-      expect(wrapper.find('.pf-c-alert').prop('aria-atomic')).toBe('false');
-    });
-
-    test('Non-toast alerts can have custom live region settings', () => {
-      const wrapper = mount(
-        <Alert
-          aria-live="assertive"
-          aria-relevant="all"
-          aria-atomic="true"
-          variant={variant}
-          aria-label={`${variant} toast alert`}
-          title="Some title"
-        >
-          Some noisy alert
-        </Alert>
-      );
-      const alert = wrapper.find(Alert);
-
-      expect(alert.prop('aria-live')).toBe('assertive');
-      expect(alert.prop('aria-relevant')).toBe('all');
-      expect(alert.prop('aria-atomic')).toBe('true');
-    });
+describe('Alert', () => {
+  test('default Alert variant is default', () => {
+    render(<Alert title="this is a test">Alert testing</Alert>);
+    expect(screen.getByText('this is a test').className).toContain('pf-c-alert');
+  });
 
-    test('Custom icon', () => {
-      const view = render(
-        <Alert
-          customIcon={<UsersIcon />}
-          variant={variant}
-          aria-label={`${variant} custom icon alert`}
-          title="custom icon alert title"
-        >
-          Some noisy alert
-        </Alert>
-      );
-      expect(view.container).toMatchSnapshot();
+  Object.values(AlertVariant).forEach(variant => {
+    describe(`Alert - ${variant}`, () => {
+      test('Description', () => {
+        const view = render(
+          <Alert variant={variant} title="">
+            Some alert
+          </Alert>
+        );
+        expect(view.container).toMatchSnapshot();
+      });
+
+      test('Title', () => {
+        const view = render(
+          <Alert variant={variant} title="Some title">
+            Some alert
+          </Alert>
+        );
+        expect(view.container).toMatchSnapshot();
+      });
+
+      test('Heading level', () => {
+        const view = render(
+          <Alert variant={variant} title="Some title" titleHeadingLevel="h1">
+            Some alert
+          </Alert>
+        );
+        expect(view.container).toMatchSnapshot();
+      });
+
+      test('Action Link', () => {
+        const view = render(
+          <Alert variant={variant} actionLinks={[<AlertActionLink key={'action-1'}>test</AlertActionLink>]} title="">
+            Some alert
+          </Alert>
+        );
+        expect(view.container).toMatchSnapshot();
+      });
+
+      test('Action Close Button', () => {
+        const onClose = jest.fn();
+
+        render(
+          <Alert
+            variant={variant}
+            actionClose={<AlertActionCloseButton aria-label="Close" onClose={onClose} />}
+            title={`Sample ${variant} alert`}
+          >
+            Some alert
+          </Alert>
+        );
+
+        userEvent.click(screen.getByLabelText('Close'));
+        expect(onClose).toHaveBeenCalled();
+      });
+
+      test('Action and Title', () => {
+        const view = render(
+          <Alert
+            variant={variant}
+            actionLinks={[<AlertActionLink key={'action-1'}>test</AlertActionLink>]}
+            title="Some title"
+          >
+            Some alert
+          </Alert>
+        );
+        expect(view.container).toMatchSnapshot();
+      });
+
+      test('Custom aria label', () => {
+        const view = render(
+          <Alert
+            variant={variant}
+            aria-label={`Custom aria label for ${variant}`}
+            actionLinks={[<AlertActionLink key={'action-1'}>test</AlertActionLink>]}
+            title="Some title"
+          >
+            Some alert
+          </Alert>
+        );
+        expect(view.container).toMatchSnapshot();
+      });
+
+      test('inline variation', () => {
+        const view = render(
+          <Alert variant={variant} isInline title="Some title">
+            Some alert
+          </Alert>
+        );
+        expect(view.container).toMatchSnapshot();
+      });
+
+      test('expandable variation', () => {
+        const view = render(
+          <Alert variant={variant} title="Some title" isExpandable>
+            <p>Success alert description. This should tell the user more information about the alert.</p>
+          </Alert>
+        );
+        expect(view.container).toMatchSnapshot();
+      });
+
+      test('expandable variation description hidden', () => {
+        const description = 'Success alert description.';
+
+        render(
+          <Alert variant={variant} title="Some title" isExpandable>
+            <p>{description}</p>
+          </Alert>
+        );
+
+        expect(screen.queryByText(description)).toBeNull();
+      });
+
+      test('Toast alerts match snapsnot', () => {
+        const view = render(
+          <Alert isLiveRegion={true} variant={variant} aria-label={`${variant} toast alert`} title="Some title">
+            Some toast alert
+          </Alert>
+        );
+        expect(view.container).toMatchSnapshot();
+      });
+
+      test('Toast alerts contain default live region', () => {
+        const ariaLabel = `${variant} toast alert`;
+
+        render(
+          <Alert isLiveRegion={true} variant={variant} aria-label={ariaLabel} title="Some title">
+            Some toast alert
+          </Alert>
+        );
+
+        expect(screen.getByLabelText(ariaLabel).getAttribute('aria-live')).toEqual('polite');
+      });
+
+      test('Toast alert live regions are not atomic', () => {
+        const ariaLabel = `${variant} toast alert`;
+
+        render(
+          <Alert isLiveRegion={true} variant={variant} aria-label={ariaLabel} title="Some title">
+            Some toast alert
+          </Alert>
+        );
+
+        expect(screen.getByLabelText(ariaLabel).getAttribute('aria-atomic')).toEqual('false');
+      });
+
+      test('Non-toast alerts can have custom live region settings', () => {
+        const ariaLabel = `${variant} toast alert`;
+
+        render(
+          <Alert
+            aria-live="assertive"
+            aria-relevant="all"
+            aria-atomic="true"
+            variant={variant}
+            aria-label={ariaLabel}
+            title="Some title"
+          >
+            Some noisy alert
+          </Alert>
+        );
+        const alert = screen.getByLabelText(ariaLabel);
+
+        expect(alert.getAttribute('aria-live')).toEqual('assertive');
+        expect(alert.getAttribute('aria-relevant')).toEqual('all');
+        expect(alert.getAttribute('aria-atomic')).toEqual('true');
+      });
+
+      test('Custom icon', () => {
+        const view = render(
+          <Alert
+            customIcon={<UsersIcon />}
+            variant={variant}
+            aria-label={`${variant} custom icon alert`}
+            title="custom icon alert title"
+          >
+            Some noisy alert
+          </Alert>
+        );
+        expect(view.container).toMatchSnapshot();
+      });
     });
   });
-});
 
+  test('Alert truncate title', () => {
+    render(
+      <Alert truncateTitle={1} title="this is a test">
+        Alert testing
+      </Alert>
+    );
 
-test('Alert truncate title', () => {
-  const view = mount(<Alert truncateTitle={1} title="this is a test">Alert testing</Alert>);
-  expect(
-    view
-      .find('h4')
-      .prop('className')
-  ).toContain('pf-m-truncate');
+    expect(screen.getByText('this is a test').className).toContain('pf-m-truncate');
+  });
 });
diff --git a/packages/react-core/src/components/Alert/__tests__/Generated/AlertActionCloseButton.test.tsx b/packages/react-core/src/components/Alert/__tests__/Generated/AlertActionCloseButton.test.tsx
index 5c0379a6353..e02b22c56ce 100644
--- a/packages/react-core/src/components/Alert/__tests__/Generated/AlertActionCloseButton.test.tsx
+++ b/packages/react-core/src/components/Alert/__tests__/Generated/AlertActionCloseButton.test.tsx
@@ -1,20 +1,22 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { shallow } from 'enzyme';
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
 import { AlertActionCloseButton } from '../../AlertActionCloseButton';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
+import { AlertContext } from '../../AlertContext';
 
-it('AlertActionCloseButton should match snapshot (auto-generated)', () => {
-  const view = shallow(
-    <AlertActionCloseButton
-      className={"''"}
-      onClose={() => undefined as any}
-      aria-label={"''"}
-      variantLabel={'string'}
-    />
-  );
-  expect(view).toMatchSnapshot();
+describe('AlertActionCloseButton', () => {
+  it('should match snapshot', () => {
+    const view = render(
+      <AlertContext.Provider value={{ title: 'test title', variantLabel: 'some label' }}>
+        <AlertActionCloseButton
+          className=""
+          onClose={() => console.log('close clicked')}
+          aria-label=""
+          variantLabel=""
+        />
+      </AlertContext.Provider>
+    );
+    expect(view.container).toMatchSnapshot();
+  });
 });
diff --git a/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap b/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap
index f7e3d8cba40..cc0841b3d4d 100644
--- a/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap
+++ b/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap
@@ -1,7 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`AlertActionCloseButton should match snapshot (auto-generated) 1`] = `
-<ContextConsumer>
-  <Component />
-</ContextConsumer>
+exports[`AlertActionCloseButton should match snapshot 1`] = `
+<div>
+  <button
+    aria-disabled="false"
+    aria-label="Close some label alert: test title"
+    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>
+</div>
 `;
diff --git a/packages/react-core/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap b/packages/react-core/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap
index ea4b0f049b6..4f2118a687b 100644
--- a/packages/react-core/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap
+++ b/packages/react-core/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap
@@ -1,136 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Alert - danger Action Close Button 1`] = `
-<Alert
-  actionClose={
-    <AlertActionCloseButton
-      aria-label="Close"
-      onClose={[MockFunction]}
-    />
-  }
-  title="Sample danger alert"
-  variant="danger"
->
-  <div
-    aria-label="Danger Alert"
-    className="pf-c-alert pf-m-danger"
-    data-ouia-component-id="OUIA-Generated-Alert-danger-5"
-    data-ouia-component-type="PF4/Alert"
-    data-ouia-safe={true}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-  >
-    <AlertIcon
-      variant="danger"
-    >
-      <div
-        className="pf-c-alert__icon"
-      >
-        <ExclamationCircleIcon
-          color="currentColor"
-          noVerticalAlign={false}
-          size="sm"
-        >
-          <svg
-            aria-hidden={true}
-            aria-labelledby={null}
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style={
-              Object {
-                "verticalAlign": "-0.125em",
-              }
-            }
-            viewBox="0 0 512 512"
-            width="1em"
-          >
-            <path
-              d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-            />
-          </svg>
-        </ExclamationCircleIcon>
-      </div>
-    </AlertIcon>
-    <h4
-      className="pf-c-alert__title"
-    >
-      <span
-        className="pf-u-screen-reader"
-      >
-        Danger alert:
-      </span>
-      Sample danger alert
-    </h4>
-    <div
-      className="pf-c-alert__action"
-    >
-      <AlertActionCloseButton
-        aria-label="Close"
-        onClose={[MockFunction]}
-      >
-        <Button
-          aria-label="Close"
-          onClick={[MockFunction]}
-          variant="plain"
-        >
-          <ButtonBase
-            aria-label="Close"
-            innerRef={null}
-            onClick={[MockFunction]}
-            variant="plain"
-          >
-            <button
-              aria-disabled={false}
-              aria-label="Close"
-              className="pf-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-4"
-              data-ouia-component-type="PF4/Button"
-              data-ouia-safe={true}
-              disabled={false}
-              onClick={[MockFunction]}
-              role={null}
-              type="button"
-            >
-              <TimesIcon
-                color="currentColor"
-                noVerticalAlign={false}
-                size="sm"
-              >
-                <svg
-                  aria-hidden={true}
-                  aria-labelledby={null}
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  style={
-                    Object {
-                      "verticalAlign": "-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>
-              </TimesIcon>
-            </button>
-          </ButtonBase>
-        </Button>
-      </AlertActionCloseButton>
-    </div>
-    <div
-      className="pf-c-alert__description"
-    >
-      Some alert
-    </div>
-  </div>
-</Alert>
-`;
-
-exports[`Alert - danger Action Link 1`] = `
+exports[`Alert Alert - danger Action Link 1`] = `
 <div>
   <div
     aria-label="Danger Alert"
@@ -189,7 +59,7 @@ exports[`Alert - danger Action Link 1`] = `
 </div>
 `;
 
-exports[`Alert - danger Action and Title 1`] = `
+exports[`Alert Alert - danger Action and Title 1`] = `
 <div>
   <div
     aria-label="Danger Alert"
@@ -248,7 +118,7 @@ exports[`Alert - danger Action and Title 1`] = `
 </div>
 `;
 
-exports[`Alert - danger Custom aria label 1`] = `
+exports[`Alert Alert - danger Custom aria label 1`] = `
 <div>
   <div
     aria-label="Custom aria label for danger"
@@ -307,7 +177,7 @@ exports[`Alert - danger Custom aria label 1`] = `
 </div>
 `;
 
-exports[`Alert - danger Custom icon 1`] = `
+exports[`Alert Alert - danger Custom icon 1`] = `
 <div>
   <div
     aria-label="danger custom icon alert"
@@ -352,7 +222,7 @@ exports[`Alert - danger Custom icon 1`] = `
 </div>
 `;
 
-exports[`Alert - danger Description 1`] = `
+exports[`Alert Alert - danger Description 1`] = `
 <div>
   <div
     aria-label="Danger Alert"
@@ -397,7 +267,7 @@ exports[`Alert - danger Description 1`] = `
 </div>
 `;
 
-exports[`Alert - danger Heading level 1`] = `
+exports[`Alert Alert - danger Heading level 1`] = `
 <div>
   <div
     aria-label="Danger Alert"
@@ -442,7 +312,7 @@ exports[`Alert - danger Heading level 1`] = `
 </div>
 `;
 
-exports[`Alert - danger Title 1`] = `
+exports[`Alert Alert - danger Title 1`] = `
 <div>
   <div
     aria-label="Danger Alert"
@@ -487,7 +357,7 @@ exports[`Alert - danger Title 1`] = `
 </div>
 `;
 
-exports[`Alert - danger Toast alerts match snapsnot 1`] = `
+exports[`Alert Alert - danger Toast alerts match snapsnot 1`] = `
 <div>
   <div
     aria-atomic="false"
@@ -534,7 +404,7 @@ exports[`Alert - danger Toast alerts match snapsnot 1`] = `
 </div>
 `;
 
-exports[`Alert - danger expandable variation 1`] = `
+exports[`Alert Alert - danger expandable variation 1`] = `
 <div>
   <div
     aria-label="Danger Alert"
@@ -606,7 +476,7 @@ exports[`Alert - danger expandable variation 1`] = `
 </div>
 `;
 
-exports[`Alert - danger inline variation 1`] = `
+exports[`Alert Alert - danger inline variation 1`] = `
 <div>
   <div
     aria-label="Danger Alert"
@@ -651,137 +521,7 @@ exports[`Alert - danger inline variation 1`] = `
 </div>
 `;
 
-exports[`Alert - default Action Close Button 1`] = `
-<Alert
-  actionClose={
-    <AlertActionCloseButton
-      aria-label="Close"
-      onClose={[MockFunction]}
-    />
-  }
-  title="Sample default alert"
-  variant="default"
->
-  <div
-    aria-label="Default Alert"
-    className="pf-c-alert"
-    data-ouia-component-id="OUIA-Generated-Alert-default-6"
-    data-ouia-component-type="PF4/Alert"
-    data-ouia-safe={true}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-  >
-    <AlertIcon
-      variant="default"
-    >
-      <div
-        className="pf-c-alert__icon"
-      >
-        <BellIcon
-          color="currentColor"
-          noVerticalAlign={false}
-          size="sm"
-        >
-          <svg
-            aria-hidden={true}
-            aria-labelledby={null}
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style={
-              Object {
-                "verticalAlign": "-0.125em",
-              }
-            }
-            viewBox="0 0 896 1024"
-            width="1em"
-          >
-            <path
-              d="M448,0 C465.333333,0 480.333333,6.33333333 493,19 C505.666667,31.6666667 512,46.6666667 512,64 L512,106 L514.23,106.45 C587.89,121.39 648.48,157.24 696,214 C744,271.333333 768,338.666667 768,416 C768,500 780,568.666667 804,622 C818.666667,652.666667 841.333333,684 872,716 C873.773676,718.829136 875.780658,721.505113 878,724 C890,737.333333 896,752.333333 896,769 C896,785.666667 890,800.333333 878,813 C866,825.666667 850.666667,832 832,832 L63.3,832 C44.9533333,831.84 29.8533333,825.506667 18,813 C6,800.333333 0,785.666667 0,769 C0,752.333333 6,737.333333 18,724 L24,716 L25.06,714.9 C55.1933333,683.28 77.5066667,652.313333 92,622 C116,568.666667 128,500 128,416 C128,338.666667 152,271.333333 200,214 C248,156.666667 309.333333,120.666667 384,106 L384,63.31 C384.166667,46.27 390.5,31.5 403,19 C415.666667,6.33333333 430.666667,0 448,0 Z M576,896 L576,897.08 C575.74,932.6 563.073333,962.573333 538,987 C512.666667,1011.66667 482.666667,1024 448,1024 C413.333333,1024 383.333333,1011.66667 358,987 C332.666667,962.333333 320,932 320,896 L576,896 Z"
-            />
-          </svg>
-        </BellIcon>
-      </div>
-    </AlertIcon>
-    <h4
-      className="pf-c-alert__title"
-    >
-      <span
-        className="pf-u-screen-reader"
-      >
-        Default alert:
-      </span>
-      Sample default alert
-    </h4>
-    <div
-      className="pf-c-alert__action"
-    >
-      <AlertActionCloseButton
-        aria-label="Close"
-        onClose={[MockFunction]}
-      >
-        <Button
-          aria-label="Close"
-          onClick={[MockFunction]}
-          variant="plain"
-        >
-          <ButtonBase
-            aria-label="Close"
-            innerRef={null}
-            onClick={[MockFunction]}
-            variant="plain"
-          >
-            <button
-              aria-disabled={false}
-              aria-label="Close"
-              className="pf-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-13"
-              data-ouia-component-type="PF4/Button"
-              data-ouia-safe={true}
-              disabled={false}
-              onClick={[MockFunction]}
-              role={null}
-              type="button"
-            >
-              <TimesIcon
-                color="currentColor"
-                noVerticalAlign={false}
-                size="sm"
-              >
-                <svg
-                  aria-hidden={true}
-                  aria-labelledby={null}
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  style={
-                    Object {
-                      "verticalAlign": "-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>
-              </TimesIcon>
-            </button>
-          </ButtonBase>
-        </Button>
-      </AlertActionCloseButton>
-    </div>
-    <div
-      className="pf-c-alert__description"
-    >
-      Some alert
-    </div>
-  </div>
-</Alert>
-`;
-
-exports[`Alert - default Action Link 1`] = `
+exports[`Alert Alert - default Action Link 1`] = `
 <div>
   <div
     aria-label="Default Alert"
@@ -840,7 +580,7 @@ exports[`Alert - default Action Link 1`] = `
 </div>
 `;
 
-exports[`Alert - default Action and Title 1`] = `
+exports[`Alert Alert - default Action and Title 1`] = `
 <div>
   <div
     aria-label="Default Alert"
@@ -899,7 +639,7 @@ exports[`Alert - default Action and Title 1`] = `
 </div>
 `;
 
-exports[`Alert - default Custom aria label 1`] = `
+exports[`Alert Alert - default Custom aria label 1`] = `
 <div>
   <div
     aria-label="Custom aria label for default"
@@ -958,7 +698,7 @@ exports[`Alert - default Custom aria label 1`] = `
 </div>
 `;
 
-exports[`Alert - default Custom icon 1`] = `
+exports[`Alert Alert - default Custom icon 1`] = `
 <div>
   <div
     aria-label="default custom icon alert"
@@ -1003,7 +743,7 @@ exports[`Alert - default Custom icon 1`] = `
 </div>
 `;
 
-exports[`Alert - default Description 1`] = `
+exports[`Alert Alert - default Description 1`] = `
 <div>
   <div
     aria-label="Default Alert"
@@ -1048,7 +788,7 @@ exports[`Alert - default Description 1`] = `
 </div>
 `;
 
-exports[`Alert - default Heading level 1`] = `
+exports[`Alert Alert - default Heading level 1`] = `
 <div>
   <div
     aria-label="Default Alert"
@@ -1093,7 +833,7 @@ exports[`Alert - default Heading level 1`] = `
 </div>
 `;
 
-exports[`Alert - default Title 1`] = `
+exports[`Alert Alert - default Title 1`] = `
 <div>
   <div
     aria-label="Default Alert"
@@ -1138,7 +878,7 @@ exports[`Alert - default Title 1`] = `
 </div>
 `;
 
-exports[`Alert - default Toast alerts match snapsnot 1`] = `
+exports[`Alert Alert - default Toast alerts match snapsnot 1`] = `
 <div>
   <div
     aria-atomic="false"
@@ -1185,7 +925,7 @@ exports[`Alert - default Toast alerts match snapsnot 1`] = `
 </div>
 `;
 
-exports[`Alert - default expandable variation 1`] = `
+exports[`Alert Alert - default expandable variation 1`] = `
 <div>
   <div
     aria-label="Default Alert"
@@ -1257,7 +997,7 @@ exports[`Alert - default expandable variation 1`] = `
 </div>
 `;
 
-exports[`Alert - default inline variation 1`] = `
+exports[`Alert Alert - default inline variation 1`] = `
 <div>
   <div
     aria-label="Default Alert"
@@ -1302,137 +1042,7 @@ exports[`Alert - default inline variation 1`] = `
 </div>
 `;
 
-exports[`Alert - info Action Close Button 1`] = `
-<Alert
-  actionClose={
-    <AlertActionCloseButton
-      aria-label="Close"
-      onClose={[MockFunction]}
-    />
-  }
-  title="Sample info alert"
-  variant="info"
->
-  <div
-    aria-label="Info Alert"
-    className="pf-c-alert pf-m-info"
-    data-ouia-component-id="OUIA-Generated-Alert-info-5"
-    data-ouia-component-type="PF4/Alert"
-    data-ouia-safe={true}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-  >
-    <AlertIcon
-      variant="info"
-    >
-      <div
-        className="pf-c-alert__icon"
-      >
-        <InfoCircleIcon
-          color="currentColor"
-          noVerticalAlign={false}
-          size="sm"
-        >
-          <svg
-            aria-hidden={true}
-            aria-labelledby={null}
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style={
-              Object {
-                "verticalAlign": "-0.125em",
-              }
-            }
-            viewBox="0 0 512 512"
-            width="1em"
-          >
-            <path
-              d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"
-            />
-          </svg>
-        </InfoCircleIcon>
-      </div>
-    </AlertIcon>
-    <h4
-      className="pf-c-alert__title"
-    >
-      <span
-        className="pf-u-screen-reader"
-      >
-        Info alert:
-      </span>
-      Sample info alert
-    </h4>
-    <div
-      className="pf-c-alert__action"
-    >
-      <AlertActionCloseButton
-        aria-label="Close"
-        onClose={[MockFunction]}
-      >
-        <Button
-          aria-label="Close"
-          onClick={[MockFunction]}
-          variant="plain"
-        >
-          <ButtonBase
-            aria-label="Close"
-            innerRef={null}
-            onClick={[MockFunction]}
-            variant="plain"
-          >
-            <button
-              aria-disabled={false}
-              aria-label="Close"
-              className="pf-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-10"
-              data-ouia-component-type="PF4/Button"
-              data-ouia-safe={true}
-              disabled={false}
-              onClick={[MockFunction]}
-              role={null}
-              type="button"
-            >
-              <TimesIcon
-                color="currentColor"
-                noVerticalAlign={false}
-                size="sm"
-              >
-                <svg
-                  aria-hidden={true}
-                  aria-labelledby={null}
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  style={
-                    Object {
-                      "verticalAlign": "-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>
-              </TimesIcon>
-            </button>
-          </ButtonBase>
-        </Button>
-      </AlertActionCloseButton>
-    </div>
-    <div
-      className="pf-c-alert__description"
-    >
-      Some alert
-    </div>
-  </div>
-</Alert>
-`;
-
-exports[`Alert - info Action Link 1`] = `
+exports[`Alert Alert - info Action Link 1`] = `
 <div>
   <div
     aria-label="Info Alert"
@@ -1491,7 +1101,7 @@ exports[`Alert - info Action Link 1`] = `
 </div>
 `;
 
-exports[`Alert - info Action and Title 1`] = `
+exports[`Alert Alert - info Action and Title 1`] = `
 <div>
   <div
     aria-label="Info Alert"
@@ -1550,7 +1160,7 @@ exports[`Alert - info Action and Title 1`] = `
 </div>
 `;
 
-exports[`Alert - info Custom aria label 1`] = `
+exports[`Alert Alert - info Custom aria label 1`] = `
 <div>
   <div
     aria-label="Custom aria label for info"
@@ -1609,7 +1219,7 @@ exports[`Alert - info Custom aria label 1`] = `
 </div>
 `;
 
-exports[`Alert - info Custom icon 1`] = `
+exports[`Alert Alert - info Custom icon 1`] = `
 <div>
   <div
     aria-label="info custom icon alert"
@@ -1654,7 +1264,7 @@ exports[`Alert - info Custom icon 1`] = `
 </div>
 `;
 
-exports[`Alert - info Description 1`] = `
+exports[`Alert Alert - info Description 1`] = `
 <div>
   <div
     aria-label="Info Alert"
@@ -1699,7 +1309,7 @@ exports[`Alert - info Description 1`] = `
 </div>
 `;
 
-exports[`Alert - info Heading level 1`] = `
+exports[`Alert Alert - info Heading level 1`] = `
 <div>
   <div
     aria-label="Info Alert"
@@ -1744,7 +1354,7 @@ exports[`Alert - info Heading level 1`] = `
 </div>
 `;
 
-exports[`Alert - info Title 1`] = `
+exports[`Alert Alert - info Title 1`] = `
 <div>
   <div
     aria-label="Info Alert"
@@ -1789,7 +1399,7 @@ exports[`Alert - info Title 1`] = `
 </div>
 `;
 
-exports[`Alert - info Toast alerts match snapsnot 1`] = `
+exports[`Alert Alert - info Toast alerts match snapsnot 1`] = `
 <div>
   <div
     aria-atomic="false"
@@ -1836,7 +1446,7 @@ exports[`Alert - info Toast alerts match snapsnot 1`] = `
 </div>
 `;
 
-exports[`Alert - info expandable variation 1`] = `
+exports[`Alert Alert - info expandable variation 1`] = `
 <div>
   <div
     aria-label="Info Alert"
@@ -1908,7 +1518,7 @@ exports[`Alert - info expandable variation 1`] = `
 </div>
 `;
 
-exports[`Alert - info inline variation 1`] = `
+exports[`Alert Alert - info inline variation 1`] = `
 <div>
   <div
     aria-label="Info Alert"
@@ -1953,137 +1563,7 @@ exports[`Alert - info inline variation 1`] = `
 </div>
 `;
 
-exports[`Alert - success Action Close Button 1`] = `
-<Alert
-  actionClose={
-    <AlertActionCloseButton
-      aria-label="Close"
-      onClose={[MockFunction]}
-    />
-  }
-  title="Sample success alert"
-  variant="success"
->
-  <div
-    aria-label="Success Alert"
-    className="pf-c-alert pf-m-success"
-    data-ouia-component-id="OUIA-Generated-Alert-success-5"
-    data-ouia-component-type="PF4/Alert"
-    data-ouia-safe={true}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-  >
-    <AlertIcon
-      variant="success"
-    >
-      <div
-        className="pf-c-alert__icon"
-      >
-        <CheckCircleIcon
-          color="currentColor"
-          noVerticalAlign={false}
-          size="sm"
-        >
-          <svg
-            aria-hidden={true}
-            aria-labelledby={null}
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style={
-              Object {
-                "verticalAlign": "-0.125em",
-              }
-            }
-            viewBox="0 0 512 512"
-            width="1em"
-          >
-            <path
-              d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
-            />
-          </svg>
-        </CheckCircleIcon>
-      </div>
-    </AlertIcon>
-    <h4
-      className="pf-c-alert__title"
-    >
-      <span
-        className="pf-u-screen-reader"
-      >
-        Success alert:
-      </span>
-      Sample success alert
-    </h4>
-    <div
-      className="pf-c-alert__action"
-    >
-      <AlertActionCloseButton
-        aria-label="Close"
-        onClose={[MockFunction]}
-      >
-        <Button
-          aria-label="Close"
-          onClick={[MockFunction]}
-          variant="plain"
-        >
-          <ButtonBase
-            aria-label="Close"
-            innerRef={null}
-            onClick={[MockFunction]}
-            variant="plain"
-          >
-            <button
-              aria-disabled={false}
-              aria-label="Close"
-              className="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}
-              disabled={false}
-              onClick={[MockFunction]}
-              role={null}
-              type="button"
-            >
-              <TimesIcon
-                color="currentColor"
-                noVerticalAlign={false}
-                size="sm"
-              >
-                <svg
-                  aria-hidden={true}
-                  aria-labelledby={null}
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  style={
-                    Object {
-                      "verticalAlign": "-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>
-              </TimesIcon>
-            </button>
-          </ButtonBase>
-        </Button>
-      </AlertActionCloseButton>
-    </div>
-    <div
-      className="pf-c-alert__description"
-    >
-      Some alert
-    </div>
-  </div>
-</Alert>
-`;
-
-exports[`Alert - success Action Link 1`] = `
+exports[`Alert Alert - success Action Link 1`] = `
 <div>
   <div
     aria-label="Success Alert"
@@ -2142,7 +1622,7 @@ exports[`Alert - success Action Link 1`] = `
 </div>
 `;
 
-exports[`Alert - success Action and Title 1`] = `
+exports[`Alert Alert - success Action and Title 1`] = `
 <div>
   <div
     aria-label="Success Alert"
@@ -2201,7 +1681,7 @@ exports[`Alert - success Action and Title 1`] = `
 </div>
 `;
 
-exports[`Alert - success Custom aria label 1`] = `
+exports[`Alert Alert - success Custom aria label 1`] = `
 <div>
   <div
     aria-label="Custom aria label for success"
@@ -2260,7 +1740,7 @@ exports[`Alert - success Custom aria label 1`] = `
 </div>
 `;
 
-exports[`Alert - success Custom icon 1`] = `
+exports[`Alert Alert - success Custom icon 1`] = `
 <div>
   <div
     aria-label="success custom icon alert"
@@ -2305,7 +1785,7 @@ exports[`Alert - success Custom icon 1`] = `
 </div>
 `;
 
-exports[`Alert - success Description 1`] = `
+exports[`Alert Alert - success Description 1`] = `
 <div>
   <div
     aria-label="Success Alert"
@@ -2350,7 +1830,7 @@ exports[`Alert - success Description 1`] = `
 </div>
 `;
 
-exports[`Alert - success Heading level 1`] = `
+exports[`Alert Alert - success Heading level 1`] = `
 <div>
   <div
     aria-label="Success Alert"
@@ -2395,7 +1875,7 @@ exports[`Alert - success Heading level 1`] = `
 </div>
 `;
 
-exports[`Alert - success Title 1`] = `
+exports[`Alert Alert - success Title 1`] = `
 <div>
   <div
     aria-label="Success Alert"
@@ -2440,7 +1920,7 @@ exports[`Alert - success Title 1`] = `
 </div>
 `;
 
-exports[`Alert - success Toast alerts match snapsnot 1`] = `
+exports[`Alert Alert - success Toast alerts match snapsnot 1`] = `
 <div>
   <div
     aria-atomic="false"
@@ -2487,7 +1967,7 @@ exports[`Alert - success Toast alerts match snapsnot 1`] = `
 </div>
 `;
 
-exports[`Alert - success expandable variation 1`] = `
+exports[`Alert Alert - success expandable variation 1`] = `
 <div>
   <div
     aria-label="Success Alert"
@@ -2559,7 +2039,7 @@ exports[`Alert - success expandable variation 1`] = `
 </div>
 `;
 
-exports[`Alert - success inline variation 1`] = `
+exports[`Alert Alert - success inline variation 1`] = `
 <div>
   <div
     aria-label="Success Alert"
@@ -2604,137 +2084,7 @@ exports[`Alert - success inline variation 1`] = `
 </div>
 `;
 
-exports[`Alert - warning Action Close Button 1`] = `
-<Alert
-  actionClose={
-    <AlertActionCloseButton
-      aria-label="Close"
-      onClose={[MockFunction]}
-    />
-  }
-  title="Sample warning alert"
-  variant="warning"
->
-  <div
-    aria-label="Warning Alert"
-    className="pf-c-alert pf-m-warning"
-    data-ouia-component-id="OUIA-Generated-Alert-warning-5"
-    data-ouia-component-type="PF4/Alert"
-    data-ouia-safe={true}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-  >
-    <AlertIcon
-      variant="warning"
-    >
-      <div
-        className="pf-c-alert__icon"
-      >
-        <ExclamationTriangleIcon
-          color="currentColor"
-          noVerticalAlign={false}
-          size="sm"
-        >
-          <svg
-            aria-hidden={true}
-            aria-labelledby={null}
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style={
-              Object {
-                "verticalAlign": "-0.125em",
-              }
-            }
-            viewBox="0 0 576 512"
-            width="1em"
-          >
-            <path
-              d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-            />
-          </svg>
-        </ExclamationTriangleIcon>
-      </div>
-    </AlertIcon>
-    <h4
-      className="pf-c-alert__title"
-    >
-      <span
-        className="pf-u-screen-reader"
-      >
-        Warning alert:
-      </span>
-      Sample warning alert
-    </h4>
-    <div
-      className="pf-c-alert__action"
-    >
-      <AlertActionCloseButton
-        aria-label="Close"
-        onClose={[MockFunction]}
-      >
-        <Button
-          aria-label="Close"
-          onClick={[MockFunction]}
-          variant="plain"
-        >
-          <ButtonBase
-            aria-label="Close"
-            innerRef={null}
-            onClick={[MockFunction]}
-            variant="plain"
-          >
-            <button
-              aria-disabled={false}
-              aria-label="Close"
-              className="pf-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-7"
-              data-ouia-component-type="PF4/Button"
-              data-ouia-safe={true}
-              disabled={false}
-              onClick={[MockFunction]}
-              role={null}
-              type="button"
-            >
-              <TimesIcon
-                color="currentColor"
-                noVerticalAlign={false}
-                size="sm"
-              >
-                <svg
-                  aria-hidden={true}
-                  aria-labelledby={null}
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  style={
-                    Object {
-                      "verticalAlign": "-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>
-              </TimesIcon>
-            </button>
-          </ButtonBase>
-        </Button>
-      </AlertActionCloseButton>
-    </div>
-    <div
-      className="pf-c-alert__description"
-    >
-      Some alert
-    </div>
-  </div>
-</Alert>
-`;
-
-exports[`Alert - warning Action Link 1`] = `
+exports[`Alert Alert - warning Action Link 1`] = `
 <div>
   <div
     aria-label="Warning Alert"
@@ -2793,7 +2143,7 @@ exports[`Alert - warning Action Link 1`] = `
 </div>
 `;
 
-exports[`Alert - warning Action and Title 1`] = `
+exports[`Alert Alert - warning Action and Title 1`] = `
 <div>
   <div
     aria-label="Warning Alert"
@@ -2852,7 +2202,7 @@ exports[`Alert - warning Action and Title 1`] = `
 </div>
 `;
 
-exports[`Alert - warning Custom aria label 1`] = `
+exports[`Alert Alert - warning Custom aria label 1`] = `
 <div>
   <div
     aria-label="Custom aria label for warning"
@@ -2911,7 +2261,7 @@ exports[`Alert - warning Custom aria label 1`] = `
 </div>
 `;
 
-exports[`Alert - warning Custom icon 1`] = `
+exports[`Alert Alert - warning Custom icon 1`] = `
 <div>
   <div
     aria-label="warning custom icon alert"
@@ -2956,7 +2306,7 @@ exports[`Alert - warning Custom icon 1`] = `
 </div>
 `;
 
-exports[`Alert - warning Description 1`] = `
+exports[`Alert Alert - warning Description 1`] = `
 <div>
   <div
     aria-label="Warning Alert"
@@ -3001,7 +2351,7 @@ exports[`Alert - warning Description 1`] = `
 </div>
 `;
 
-exports[`Alert - warning Heading level 1`] = `
+exports[`Alert Alert - warning Heading level 1`] = `
 <div>
   <div
     aria-label="Warning Alert"
@@ -3046,7 +2396,7 @@ exports[`Alert - warning Heading level 1`] = `
 </div>
 `;
 
-exports[`Alert - warning Title 1`] = `
+exports[`Alert Alert - warning Title 1`] = `
 <div>
   <div
     aria-label="Warning Alert"
@@ -3091,7 +2441,7 @@ exports[`Alert - warning Title 1`] = `
 </div>
 `;
 
-exports[`Alert - warning Toast alerts match snapsnot 1`] = `
+exports[`Alert Alert - warning Toast alerts match snapsnot 1`] = `
 <div>
   <div
     aria-atomic="false"
@@ -3138,7 +2488,7 @@ exports[`Alert - warning Toast alerts match snapsnot 1`] = `
 </div>
 `;
 
-exports[`Alert - warning expandable variation 1`] = `
+exports[`Alert Alert - warning expandable variation 1`] = `
 <div>
   <div
     aria-label="Warning Alert"
@@ -3210,7 +2560,7 @@ exports[`Alert - warning expandable variation 1`] = `
 </div>
 `;
 
-exports[`Alert - warning inline variation 1`] = `
+exports[`Alert Alert - warning inline variation 1`] = `
 <div>
   <div
     aria-label="Warning Alert"
diff --git a/packages/react-core/src/components/AlertGroup/__tests__/AlertGroup.test.tsx b/packages/react-core/src/components/AlertGroup/__tests__/AlertGroup.test.tsx
index 0dcdda5e06c..fcf8fd70895 100644
--- a/packages/react-core/src/components/AlertGroup/__tests__/AlertGroup.test.tsx
+++ b/packages/react-core/src/components/AlertGroup/__tests__/AlertGroup.test.tsx
@@ -1,87 +1,82 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
-import { mount, shallow } from 'enzyme';
+
+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';
 import { AlertActionCloseButton } from '../../../components/Alert/AlertActionCloseButton';
 
-jest.spyOn(document, 'createElement');
-jest.spyOn(document.body, 'addEventListener');
+describe('AlertGroup', () => {
+  test('Alert Group renders without children', () => {
+    const view = render(<AlertGroup />);
+    expect(view.container).toMatchSnapshot();
+  });
 
-test('Alert Group works with zero children', () => {
-  const view = render(<AlertGroup></AlertGroup>);
-  expect(view).toBeTruthy();
-});
+  test('Alert Group works with n children', () => {
+    const view = render(
+      <AlertGroup>
+        <Alert variant="success" title="alert title" />
+        <Alert variant="warning" title="another alert title" />
+      </AlertGroup>
+    );
+    expect(view).toBeTruthy();
+  });
 
-test('Alert Group should match snapshot', () => {
-  const view = render(<AlertGroup></AlertGroup>);
-  expect(view.container).toMatchSnapshot();
-});
+  test('Alert group overflow shows up', () => {
+    const overflowMessage = 'View 2 more alerts';
+    const onOverflowClick = jest.fn();
 
-test('Alert Group works with n children', () => {
-  const view = render(
-    <AlertGroup>
-      <Alert variant="success" title="alert title" />
-      <Alert variant="warning" title="another alert title" />
-    </AlertGroup>
-  );
-  expect(view).toBeTruthy();
-});
+    render(
+      <AlertGroup overflowMessage={overflowMessage} onOverflowClick={onOverflowClick}>
+        <Alert variant="danger" title="alert title" />
+      </AlertGroup>
+    );
 
-test('Alert group overflow shows up', () => {
-  const overflowMessage = "View 2 more alerts";
-  const onOverflowClick = jest.fn();
-  const wrapper = mount(
-    <AlertGroup overflowMessage={overflowMessage} onOverflowClick={onOverflowClick}>
-      <Alert variant="danger" title="alert title" />
-    </AlertGroup>
-  )
-  expect(wrapper.find('.pf-c-alert-group > li')).toHaveLength(2);
-  expect(wrapper.find('.pf-c-alert-group__overflow-button').text()).toContain(overflowMessage);
-  expect(wrapper).toMatchSnapshot();
-  wrapper.find('.pf-c-alert-group__overflow-button').simulate('click');
-  expect(onOverflowClick).toBeCalled();
-});
+    expect(screen.getAllByRole('listitem')).toHaveLength(2);
 
-test('Standard Alert Group is not a toast alert group', () => {
-  const wrapper = mount(
-    <AlertGroup>
-      <Alert variant="danger" title="alert title" />
-    </AlertGroup>
-  );
-  expect(wrapper.find('.pf-c-alert-group.pf-m-toast')).toHaveLength(0);
-  expect(wrapper).toMatchSnapshot();
-});
+    const overflowButton = screen.getByRole('button', { name: 'View 2 more alerts' });
+    expect(overflowButton).toBeInTheDocument();
 
-test('Toast Alert Group contains expected modifier class', () => {
-  const wrapper = mount(
-    <AlertGroup isToast>
-      <Alert variant="warning" title="alert title" />
-    </AlertGroup>
-  );
-  expect(wrapper.find('.pf-c-alert-group.pf-m-toast')).toHaveLength(1);
-  expect(wrapper).toMatchSnapshot();
-});
+    userEvent.click(overflowButton);
+    expect(onOverflowClick).toBeCalled();
+  });
 
-test('Alert Group creates a container element once for div', () => {
-  const view = shallow(<AlertGroup> Test About Modal </AlertGroup>);
-  view.update();
-  expect(document.createElement).toBeCalledWith('div');
-  expect(document.createElement).toHaveBeenCalledTimes(1);
-});
+  test('Standard Alert Group is not a toast alert group', () => {
+    render(
+      <AlertGroup>
+        <Alert variant="danger" title="alert title" />
+      </AlertGroup>
+    );
+
+    expect(screen.getByText('alert title').parentElement).not.toHaveClass('pf-m-toast');
+  });
+
+  test('Toast Alert Group contains expected modifier class', () => {
+    render(
+      <AlertGroup isToast aria-label="group label">
+        <Alert variant="warning" title="alert title" />
+      </AlertGroup>
+    );
+
+    expect(screen.getByLabelText('group label')).toHaveClass('pf-m-toast');
+  });
+
+  test('alertgroup closes when alerts are closed', () => {
+    const onClose = jest.fn();
+
+    render(
+      <AlertGroup isToast appendTo={document.body}>
+        <Alert
+          isLiveRegion
+          title={'Test Alert'}
+          actionClose={<AlertActionCloseButton aria-label="Close" onClose={onClose} />}
+        />
+      </AlertGroup>
+    );
 
-test('alertgroup closes when alerts are closed', () => {
-  const onClose = jest.fn();
-  const wrapper = mount(
-    <AlertGroup isToast appendTo={document.body}>
-      <Alert
-        isLiveRegion
-        title={'Test Alert'}
-        actionClose={<AlertActionCloseButton aria-label="Close" onClose={onClose} />}
-      />
-    </AlertGroup>
-  );
-  expect(wrapper).toMatchSnapshot();
-  wrapper.find('button[aria-label="Close"]').simulate('click');
-  expect(onClose).toBeCalled();
+    userEvent.click(screen.getByLabelText('Close'));
+    expect(onClose).toBeCalled();
+  });
 });
diff --git a/packages/react-core/src/components/AlertGroup/__tests__/__snapshots__/AlertGroup.test.tsx.snap b/packages/react-core/src/components/AlertGroup/__tests__/__snapshots__/AlertGroup.test.tsx.snap
index 7927049f608..26368230b48 100644
--- a/packages/react-core/src/components/AlertGroup/__tests__/__snapshots__/AlertGroup.test.tsx.snap
+++ b/packages/react-core/src/components/AlertGroup/__tests__/__snapshots__/AlertGroup.test.tsx.snap
@@ -1,901 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Alert Group should match snapshot 1`] = `
+exports[`AlertGroup Alert Group renders without children 1`] = `
 <div>
   <ul
     class="pf-c-alert-group"
   />
 </div>
 `;
-
-exports[`Alert group overflow shows up 1`] = `
-<AlertGroup
-  onOverflowClick={[MockFunction]}
-  overflowMessage="View 2 more alerts"
->
-  <AlertGroupInline
-    onOverflowClick={[MockFunction]}
-    overflowMessage="View 2 more alerts"
-  >
-    <ul
-      aria-atomic={null}
-      aria-live={null}
-      className="pf-c-alert-group"
-    >
-      <li
-        key="0"
-      >
-        <Alert
-          key=".0"
-          title="alert title"
-          variant="danger"
-        >
-          <div
-            aria-label="Danger Alert"
-            className="pf-c-alert pf-m-danger"
-            data-ouia-component-id="OUIA-Generated-Alert-danger-1"
-            data-ouia-component-type="PF4/Alert"
-            data-ouia-safe={true}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-          >
-            <AlertIcon
-              variant="danger"
-            >
-              <div
-                className="pf-c-alert__icon"
-              >
-                <ExclamationCircleIcon
-                  color="currentColor"
-                  noVerticalAlign={false}
-                  size="sm"
-                >
-                  <svg
-                    aria-hidden={true}
-                    aria-labelledby={null}
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    style={
-                      Object {
-                        "verticalAlign": "-0.125em",
-                      }
-                    }
-                    viewBox="0 0 512 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-                    />
-                  </svg>
-                </ExclamationCircleIcon>
-              </div>
-            </AlertIcon>
-            <h4
-              className="pf-c-alert__title"
-            >
-              <span
-                className="pf-u-screen-reader"
-              >
-                Danger alert:
-              </span>
-              alert title
-            </h4>
-          </div>
-        </Alert>
-      </li>
-      <li>
-        <button
-          className="pf-c-alert-group__overflow-button"
-          onClick={[MockFunction]}
-        >
-          View 2 more alerts
-        </button>
-      </li>
-    </ul>
-  </AlertGroupInline>
-</AlertGroup>
-`;
-
-exports[`Standard Alert Group is not a toast alert group 1`] = `
-<AlertGroup>
-  <AlertGroupInline>
-    <ul
-      aria-atomic={null}
-      aria-live={null}
-      className="pf-c-alert-group"
-    >
-      <li
-        key="0"
-      >
-        <Alert
-          key=".0"
-          title="alert title"
-          variant="danger"
-        >
-          <div
-            aria-label="Danger Alert"
-            className="pf-c-alert pf-m-danger"
-            data-ouia-component-id="OUIA-Generated-Alert-danger-2"
-            data-ouia-component-type="PF4/Alert"
-            data-ouia-safe={true}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-          >
-            <AlertIcon
-              variant="danger"
-            >
-              <div
-                className="pf-c-alert__icon"
-              >
-                <ExclamationCircleIcon
-                  color="currentColor"
-                  noVerticalAlign={false}
-                  size="sm"
-                >
-                  <svg
-                    aria-hidden={true}
-                    aria-labelledby={null}
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    style={
-                      Object {
-                        "verticalAlign": "-0.125em",
-                      }
-                    }
-                    viewBox="0 0 512 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-                    />
-                  </svg>
-                </ExclamationCircleIcon>
-              </div>
-            </AlertIcon>
-            <h4
-              className="pf-c-alert__title"
-            >
-              <span
-                className="pf-u-screen-reader"
-              >
-                Danger alert:
-              </span>
-              alert title
-            </h4>
-          </div>
-        </Alert>
-      </li>
-    </ul>
-  </AlertGroupInline>
-</AlertGroup>
-`;
-
-exports[`Toast Alert Group contains expected modifier class 1`] = `
-<AlertGroup
-  isToast={true}
->
-  <Portal
-    containerInfo={
-      <div>
-        <ul
-          class="pf-c-alert-group pf-m-toast"
-        >
-          <li>
-            <div
-              aria-label="Warning Alert"
-              class="pf-c-alert pf-m-warning"
-              data-ouia-component-id="OUIA-Generated-Alert-warning-2"
-              data-ouia-component-type="PF4/Alert"
-              data-ouia-safe="true"
-            >
-              <div
-                class="pf-c-alert__icon"
-              >
-                <svg
-                  aria-hidden="true"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  style="vertical-align: -0.125em;"
-                  viewBox="0 0 576 512"
-                  width="1em"
-                >
-                  <path
-                    d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-                  />
-                </svg>
-              </div>
-              <h4
-                class="pf-c-alert__title"
-              >
-                <span
-                  class="pf-u-screen-reader"
-                >
-                  Warning alert:
-                </span>
-                alert title
-              </h4>
-              
-            </div>
-          </li>
-        </ul>
-      </div>
-    }
-  >
-    <AlertGroupInline
-      isToast={true}
-    >
-      <ul
-        aria-atomic={null}
-        aria-live={null}
-        className="pf-c-alert-group pf-m-toast"
-      >
-        <li
-          key="0"
-        >
-          <Alert
-            key=".0"
-            title="alert title"
-            variant="warning"
-          >
-            <div
-              aria-label="Warning Alert"
-              className="pf-c-alert pf-m-warning"
-              data-ouia-component-id="OUIA-Generated-Alert-warning-2"
-              data-ouia-component-type="PF4/Alert"
-              data-ouia-safe={true}
-              onMouseEnter={[Function]}
-              onMouseLeave={[Function]}
-            >
-              <AlertIcon
-                variant="warning"
-              >
-                <div
-                  className="pf-c-alert__icon"
-                >
-                  <ExclamationTriangleIcon
-                    color="currentColor"
-                    noVerticalAlign={false}
-                    size="sm"
-                  >
-                    <svg
-                      aria-hidden={true}
-                      aria-labelledby={null}
-                      fill="currentColor"
-                      height="1em"
-                      role="img"
-                      style={
-                        Object {
-                          "verticalAlign": "-0.125em",
-                        }
-                      }
-                      viewBox="0 0 576 512"
-                      width="1em"
-                    >
-                      <path
-                        d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-                      />
-                    </svg>
-                  </ExclamationTriangleIcon>
-                </div>
-              </AlertIcon>
-              <h4
-                className="pf-c-alert__title"
-              >
-                <span
-                  className="pf-u-screen-reader"
-                >
-                  Warning alert:
-                </span>
-                alert title
-              </h4>
-            </div>
-          </Alert>
-        </li>
-      </ul>
-    </AlertGroupInline>
-  </Portal>
-</AlertGroup>
-`;
-
-exports[`alertgroup closes when alerts are closed 1`] = `
-<AlertGroup
-  appendTo={
-    <body>
-      <div />
-      <div />
-      <div>
-        <ul
-          class="pf-c-alert-group pf-m-toast"
-        >
-          <li>
-            <div
-              aria-label="Warning Alert"
-              class="pf-c-alert pf-m-warning"
-              data-ouia-component-id="OUIA-Generated-Alert-warning-2"
-              data-ouia-component-type="PF4/Alert"
-              data-ouia-safe="true"
-            >
-              <div
-                class="pf-c-alert__icon"
-              >
-                <svg
-                  aria-hidden="true"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  style="vertical-align: -0.125em;"
-                  viewBox="0 0 576 512"
-                  width="1em"
-                >
-                  <path
-                    d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-                  />
-                </svg>
-              </div>
-              <h4
-                class="pf-c-alert__title"
-              >
-                <span
-                  class="pf-u-screen-reader"
-                >
-                  Warning alert:
-                </span>
-                alert title
-              </h4>
-              
-            </div>
-          </li>
-        </ul>
-      </div>
-      <div />
-      <div>
-        <ul
-          appendto="[object HTMLBodyElement]"
-          class="pf-c-alert-group pf-m-toast"
-        >
-          <li>
-            <div
-              aria-atomic="false"
-              aria-label="Default Alert"
-              aria-live="polite"
-              class="pf-c-alert"
-              data-ouia-component-id="OUIA-Generated-Alert-default-1"
-              data-ouia-component-type="PF4/Alert"
-              data-ouia-safe="true"
-            >
-              <div
-                class="pf-c-alert__icon"
-              >
-                <svg
-                  aria-hidden="true"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  style="vertical-align: -0.125em;"
-                  viewBox="0 0 896 1024"
-                  width="1em"
-                >
-                  <path
-                    d="M448,0 C465.333333,0 480.333333,6.33333333 493,19 C505.666667,31.6666667 512,46.6666667 512,64 L512,106 L514.23,106.45 C587.89,121.39 648.48,157.24 696,214 C744,271.333333 768,338.666667 768,416 C768,500 780,568.666667 804,622 C818.666667,652.666667 841.333333,684 872,716 C873.773676,718.829136 875.780658,721.505113 878,724 C890,737.333333 896,752.333333 896,769 C896,785.666667 890,800.333333 878,813 C866,825.666667 850.666667,832 832,832 L63.3,832 C44.9533333,831.84 29.8533333,825.506667 18,813 C6,800.333333 0,785.666667 0,769 C0,752.333333 6,737.333333 18,724 L24,716 L25.06,714.9 C55.1933333,683.28 77.5066667,652.313333 92,622 C116,568.666667 128,500 128,416 C128,338.666667 152,271.333333 200,214 C248,156.666667 309.333333,120.666667 384,106 L384,63.31 C384.166667,46.27 390.5,31.5 403,19 C415.666667,6.33333333 430.666667,0 448,0 Z M576,896 L576,897.08 C575.74,932.6 563.073333,962.573333 538,987 C512.666667,1011.66667 482.666667,1024 448,1024 C413.333333,1024 383.333333,1011.66667 358,987 C332.666667,962.333333 320,932 320,896 L576,896 Z"
-                  />
-                </svg>
-              </div>
-              <h4
-                class="pf-c-alert__title"
-              >
-                <span
-                  class="pf-u-screen-reader"
-                >
-                  Default alert:
-                </span>
-                Test Alert
-              </h4>
-              <div
-                class="pf-c-alert__action"
-              >
-                <button
-                  aria-disabled="false"
-                  aria-label="Close"
-                  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>
-              </div>
-              
-            </div>
-          </li>
-        </ul>
-      </div>
-    </body>
-  }
-  isToast={true}
->
-  <Portal
-    containerInfo={
-      <div>
-        <ul
-          appendto="[object HTMLBodyElement]"
-          class="pf-c-alert-group pf-m-toast"
-        >
-          <li>
-            <div
-              aria-atomic="false"
-              aria-label="Default Alert"
-              aria-live="polite"
-              class="pf-c-alert"
-              data-ouia-component-id="OUIA-Generated-Alert-default-1"
-              data-ouia-component-type="PF4/Alert"
-              data-ouia-safe="true"
-            >
-              <div
-                class="pf-c-alert__icon"
-              >
-                <svg
-                  aria-hidden="true"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  style="vertical-align: -0.125em;"
-                  viewBox="0 0 896 1024"
-                  width="1em"
-                >
-                  <path
-                    d="M448,0 C465.333333,0 480.333333,6.33333333 493,19 C505.666667,31.6666667 512,46.6666667 512,64 L512,106 L514.23,106.45 C587.89,121.39 648.48,157.24 696,214 C744,271.333333 768,338.666667 768,416 C768,500 780,568.666667 804,622 C818.666667,652.666667 841.333333,684 872,716 C873.773676,718.829136 875.780658,721.505113 878,724 C890,737.333333 896,752.333333 896,769 C896,785.666667 890,800.333333 878,813 C866,825.666667 850.666667,832 832,832 L63.3,832 C44.9533333,831.84 29.8533333,825.506667 18,813 C6,800.333333 0,785.666667 0,769 C0,752.333333 6,737.333333 18,724 L24,716 L25.06,714.9 C55.1933333,683.28 77.5066667,652.313333 92,622 C116,568.666667 128,500 128,416 C128,338.666667 152,271.333333 200,214 C248,156.666667 309.333333,120.666667 384,106 L384,63.31 C384.166667,46.27 390.5,31.5 403,19 C415.666667,6.33333333 430.666667,0 448,0 Z M576,896 L576,897.08 C575.74,932.6 563.073333,962.573333 538,987 C512.666667,1011.66667 482.666667,1024 448,1024 C413.333333,1024 383.333333,1011.66667 358,987 C332.666667,962.333333 320,932 320,896 L576,896 Z"
-                  />
-                </svg>
-              </div>
-              <h4
-                class="pf-c-alert__title"
-              >
-                <span
-                  class="pf-u-screen-reader"
-                >
-                  Default alert:
-                </span>
-                Test Alert
-              </h4>
-              <div
-                class="pf-c-alert__action"
-              >
-                <button
-                  aria-disabled="false"
-                  aria-label="Close"
-                  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>
-              </div>
-              
-            </div>
-          </li>
-        </ul>
-      </div>
-    }
-  >
-    <AlertGroupInline
-      appendTo={
-        <body>
-          <div />
-          <div />
-          <div>
-            <ul
-              class="pf-c-alert-group pf-m-toast"
-            >
-              <li>
-                <div
-                  aria-label="Warning Alert"
-                  class="pf-c-alert pf-m-warning"
-                  data-ouia-component-id="OUIA-Generated-Alert-warning-2"
-                  data-ouia-component-type="PF4/Alert"
-                  data-ouia-safe="true"
-                >
-                  <div
-                    class="pf-c-alert__icon"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      fill="currentColor"
-                      height="1em"
-                      role="img"
-                      style="vertical-align: -0.125em;"
-                      viewBox="0 0 576 512"
-                      width="1em"
-                    >
-                      <path
-                        d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-                      />
-                    </svg>
-                  </div>
-                  <h4
-                    class="pf-c-alert__title"
-                  >
-                    <span
-                      class="pf-u-screen-reader"
-                    >
-                      Warning alert:
-                    </span>
-                    alert title
-                  </h4>
-                  
-                </div>
-              </li>
-            </ul>
-          </div>
-          <div />
-          <div>
-            <ul
-              appendto="[object HTMLBodyElement]"
-              class="pf-c-alert-group pf-m-toast"
-            >
-              <li>
-                <div
-                  aria-atomic="false"
-                  aria-label="Default Alert"
-                  aria-live="polite"
-                  class="pf-c-alert"
-                  data-ouia-component-id="OUIA-Generated-Alert-default-1"
-                  data-ouia-component-type="PF4/Alert"
-                  data-ouia-safe="true"
-                >
-                  <div
-                    class="pf-c-alert__icon"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      fill="currentColor"
-                      height="1em"
-                      role="img"
-                      style="vertical-align: -0.125em;"
-                      viewBox="0 0 896 1024"
-                      width="1em"
-                    >
-                      <path
-                        d="M448,0 C465.333333,0 480.333333,6.33333333 493,19 C505.666667,31.6666667 512,46.6666667 512,64 L512,106 L514.23,106.45 C587.89,121.39 648.48,157.24 696,214 C744,271.333333 768,338.666667 768,416 C768,500 780,568.666667 804,622 C818.666667,652.666667 841.333333,684 872,716 C873.773676,718.829136 875.780658,721.505113 878,724 C890,737.333333 896,752.333333 896,769 C896,785.666667 890,800.333333 878,813 C866,825.666667 850.666667,832 832,832 L63.3,832 C44.9533333,831.84 29.8533333,825.506667 18,813 C6,800.333333 0,785.666667 0,769 C0,752.333333 6,737.333333 18,724 L24,716 L25.06,714.9 C55.1933333,683.28 77.5066667,652.313333 92,622 C116,568.666667 128,500 128,416 C128,338.666667 152,271.333333 200,214 C248,156.666667 309.333333,120.666667 384,106 L384,63.31 C384.166667,46.27 390.5,31.5 403,19 C415.666667,6.33333333 430.666667,0 448,0 Z M576,896 L576,897.08 C575.74,932.6 563.073333,962.573333 538,987 C512.666667,1011.66667 482.666667,1024 448,1024 C413.333333,1024 383.333333,1011.66667 358,987 C332.666667,962.333333 320,932 320,896 L576,896 Z"
-                      />
-                    </svg>
-                  </div>
-                  <h4
-                    class="pf-c-alert__title"
-                  >
-                    <span
-                      class="pf-u-screen-reader"
-                    >
-                      Default alert:
-                    </span>
-                    Test Alert
-                  </h4>
-                  <div
-                    class="pf-c-alert__action"
-                  >
-                    <button
-                      aria-disabled="false"
-                      aria-label="Close"
-                      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>
-                  </div>
-                  
-                </div>
-              </li>
-            </ul>
-          </div>
-        </body>
-      }
-      isToast={true}
-    >
-      <ul
-        appendTo={
-          <body>
-            <div />
-            <div />
-            <div>
-              <ul
-                class="pf-c-alert-group pf-m-toast"
-              >
-                <li>
-                  <div
-                    aria-label="Warning Alert"
-                    class="pf-c-alert pf-m-warning"
-                    data-ouia-component-id="OUIA-Generated-Alert-warning-2"
-                    data-ouia-component-type="PF4/Alert"
-                    data-ouia-safe="true"
-                  >
-                    <div
-                      class="pf-c-alert__icon"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        style="vertical-align: -0.125em;"
-                        viewBox="0 0 576 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-                        />
-                      </svg>
-                    </div>
-                    <h4
-                      class="pf-c-alert__title"
-                    >
-                      <span
-                        class="pf-u-screen-reader"
-                      >
-                        Warning alert:
-                      </span>
-                      alert title
-                    </h4>
-                    
-                  </div>
-                </li>
-              </ul>
-            </div>
-            <div />
-            <div>
-              <ul
-                appendto="[object HTMLBodyElement]"
-                class="pf-c-alert-group pf-m-toast"
-              >
-                <li>
-                  <div
-                    aria-atomic="false"
-                    aria-label="Default Alert"
-                    aria-live="polite"
-                    class="pf-c-alert"
-                    data-ouia-component-id="OUIA-Generated-Alert-default-1"
-                    data-ouia-component-type="PF4/Alert"
-                    data-ouia-safe="true"
-                  >
-                    <div
-                      class="pf-c-alert__icon"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        style="vertical-align: -0.125em;"
-                        viewBox="0 0 896 1024"
-                        width="1em"
-                      >
-                        <path
-                          d="M448,0 C465.333333,0 480.333333,6.33333333 493,19 C505.666667,31.6666667 512,46.6666667 512,64 L512,106 L514.23,106.45 C587.89,121.39 648.48,157.24 696,214 C744,271.333333 768,338.666667 768,416 C768,500 780,568.666667 804,622 C818.666667,652.666667 841.333333,684 872,716 C873.773676,718.829136 875.780658,721.505113 878,724 C890,737.333333 896,752.333333 896,769 C896,785.666667 890,800.333333 878,813 C866,825.666667 850.666667,832 832,832 L63.3,832 C44.9533333,831.84 29.8533333,825.506667 18,813 C6,800.333333 0,785.666667 0,769 C0,752.333333 6,737.333333 18,724 L24,716 L25.06,714.9 C55.1933333,683.28 77.5066667,652.313333 92,622 C116,568.666667 128,500 128,416 C128,338.666667 152,271.333333 200,214 C248,156.666667 309.333333,120.666667 384,106 L384,63.31 C384.166667,46.27 390.5,31.5 403,19 C415.666667,6.33333333 430.666667,0 448,0 Z M576,896 L576,897.08 C575.74,932.6 563.073333,962.573333 538,987 C512.666667,1011.66667 482.666667,1024 448,1024 C413.333333,1024 383.333333,1011.66667 358,987 C332.666667,962.333333 320,932 320,896 L576,896 Z"
-                        />
-                      </svg>
-                    </div>
-                    <h4
-                      class="pf-c-alert__title"
-                    >
-                      <span
-                        class="pf-u-screen-reader"
-                      >
-                        Default alert:
-                      </span>
-                      Test Alert
-                    </h4>
-                    <div
-                      class="pf-c-alert__action"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-label="Close"
-                        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>
-                    </div>
-                    
-                  </div>
-                </li>
-              </ul>
-            </div>
-          </body>
-        }
-        aria-atomic={null}
-        aria-live={null}
-        className="pf-c-alert-group pf-m-toast"
-      >
-        <li
-          key="0"
-        >
-          <Alert
-            actionClose={
-              <AlertActionCloseButton
-                aria-label="Close"
-                onClose={[MockFunction]}
-              />
-            }
-            isLiveRegion={true}
-            key=".0"
-            title="Test Alert"
-          >
-            <div
-              aria-atomic="false"
-              aria-label="Default Alert"
-              aria-live="polite"
-              className="pf-c-alert"
-              data-ouia-component-id="OUIA-Generated-Alert-default-1"
-              data-ouia-component-type="PF4/Alert"
-              data-ouia-safe={true}
-              onMouseEnter={[Function]}
-              onMouseLeave={[Function]}
-            >
-              <AlertIcon
-                variant="default"
-              >
-                <div
-                  className="pf-c-alert__icon"
-                >
-                  <BellIcon
-                    color="currentColor"
-                    noVerticalAlign={false}
-                    size="sm"
-                  >
-                    <svg
-                      aria-hidden={true}
-                      aria-labelledby={null}
-                      fill="currentColor"
-                      height="1em"
-                      role="img"
-                      style={
-                        Object {
-                          "verticalAlign": "-0.125em",
-                        }
-                      }
-                      viewBox="0 0 896 1024"
-                      width="1em"
-                    >
-                      <path
-                        d="M448,0 C465.333333,0 480.333333,6.33333333 493,19 C505.666667,31.6666667 512,46.6666667 512,64 L512,106 L514.23,106.45 C587.89,121.39 648.48,157.24 696,214 C744,271.333333 768,338.666667 768,416 C768,500 780,568.666667 804,622 C818.666667,652.666667 841.333333,684 872,716 C873.773676,718.829136 875.780658,721.505113 878,724 C890,737.333333 896,752.333333 896,769 C896,785.666667 890,800.333333 878,813 C866,825.666667 850.666667,832 832,832 L63.3,832 C44.9533333,831.84 29.8533333,825.506667 18,813 C6,800.333333 0,785.666667 0,769 C0,752.333333 6,737.333333 18,724 L24,716 L25.06,714.9 C55.1933333,683.28 77.5066667,652.313333 92,622 C116,568.666667 128,500 128,416 C128,338.666667 152,271.333333 200,214 C248,156.666667 309.333333,120.666667 384,106 L384,63.31 C384.166667,46.27 390.5,31.5 403,19 C415.666667,6.33333333 430.666667,0 448,0 Z M576,896 L576,897.08 C575.74,932.6 563.073333,962.573333 538,987 C512.666667,1011.66667 482.666667,1024 448,1024 C413.333333,1024 383.333333,1011.66667 358,987 C332.666667,962.333333 320,932 320,896 L576,896 Z"
-                      />
-                    </svg>
-                  </BellIcon>
-                </div>
-              </AlertIcon>
-              <h4
-                className="pf-c-alert__title"
-              >
-                <span
-                  className="pf-u-screen-reader"
-                >
-                  Default alert:
-                </span>
-                Test Alert
-              </h4>
-              <div
-                className="pf-c-alert__action"
-              >
-                <AlertActionCloseButton
-                  aria-label="Close"
-                  onClose={[MockFunction]}
-                >
-                  <Button
-                    aria-label="Close"
-                    onClick={[MockFunction]}
-                    variant="plain"
-                  >
-                    <ButtonBase
-                      aria-label="Close"
-                      innerRef={null}
-                      onClick={[MockFunction]}
-                      variant="plain"
-                    >
-                      <button
-                        aria-disabled={false}
-                        aria-label="Close"
-                        className="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}
-                        disabled={false}
-                        onClick={[MockFunction]}
-                        role={null}
-                        type="button"
-                      >
-                        <TimesIcon
-                          color="currentColor"
-                          noVerticalAlign={false}
-                          size="sm"
-                        >
-                          <svg
-                            aria-hidden={true}
-                            aria-labelledby={null}
-                            fill="currentColor"
-                            height="1em"
-                            role="img"
-                            style={
-                              Object {
-                                "verticalAlign": "-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>
-                        </TimesIcon>
-                      </button>
-                    </ButtonBase>
-                  </Button>
-                </AlertActionCloseButton>
-              </div>
-            </div>
-          </Alert>
-        </li>
-      </ul>
-    </AlertGroupInline>
-  </Portal>
-</AlertGroup>
-`;
diff --git a/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherSeparator.test.tsx b/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherSeparator.test.tsx
index 615c1554954..02971bcbc9c 100644
--- a/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherSeparator.test.tsx
+++ b/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherSeparator.test.tsx
@@ -1,13 +1,16 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { shallow } from 'enzyme';
+import React from 'react';
+import { render } from '@testing-library/react';
+
 import { ApplicationLauncherSeparator } from '../../ApplicationLauncherSeparator';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
+import { DropdownArrowContext } from '../../../Dropdown/dropdownConstants';
 
-it('ApplicationLauncherSeparator should match snapshot (auto-generated)', () => {
-  const view = shallow(<ApplicationLauncherSeparator />);
-  expect(view).toMatchSnapshot();
+describe('ApplicationLauncherSeparator', () => {
+  it('should match snapshot', () => {
+    const view = render(
+      <DropdownArrowContext.Provider value={{ sendRef: jest.fn(), keyHandler: undefined }}>
+        <ApplicationLauncherSeparator />
+      </DropdownArrowContext.Provider>
+    );
+    expect(view.container).toMatchSnapshot();
+  });
 });
diff --git a/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherSeparator.test.tsx.snap b/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherSeparator.test.tsx.snap
index 31de6a2c872..fa9744a96ac 100644
--- a/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherSeparator.test.tsx.snap
+++ b/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherSeparator.test.tsx.snap
@@ -1,3 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ApplicationLauncherSeparator should match snapshot (auto-generated) 1`] = `<DropdownSeparator />`;
+exports[`ApplicationLauncherSeparator should match snapshot 1`] = `
+<div>
+  <li
+    role="separator"
+  >
+    <div
+      class="pf-c-divider"
+      role="separator"
+    />
+  </li>
+</div>
+`;
diff --git a/packages/react-core/src/components/Button/__tests__/Button.test.tsx b/packages/react-core/src/components/Button/__tests__/Button.test.tsx
index 3cc349e220d..26fcfb993de 100644
--- a/packages/react-core/src/components/Button/__tests__/Button.test.tsx
+++ b/packages/react-core/src/components/Button/__tests__/Button.test.tsx
@@ -1,132 +1,141 @@
-import { Button, ButtonVariant } from '../Button';
 import React from 'react';
-import { render } from '@testing-library/react';
-import { mount } from 'enzyme';
+
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
 import CartArrowDownIcon from '@patternfly/react-icons/dist/esm/icons/cart-arrow-down-icon';
+import { Button, ButtonVariant } from '../Button';
+
+describe('Button', () => {
+  Object.values(ButtonVariant).forEach(variant => {
+    test(`${variant} button`, () => {
+      const view = render(
+        <Button variant={variant} aria-label={variant}>
+          {variant} Button
+        </Button>
+      );
+      expect(view.container).toMatchSnapshot();
+    });
+  });
+
+  test('it adds an aria-label to plain buttons', () => {
+    const label = 'aria-label test';
+    render(<Button aria-label={label} />);
 
-Object.values(ButtonVariant).forEach(variant => {
-  test(`${variant} button`, () => {
+    expect(screen.getByLabelText(label)).toBeTruthy();
+  });
+
+  test('link with icon', () => {
     const view = render(
-      <Button variant={variant} aria-label={variant}>
-        {variant} Button
+      <Button variant={ButtonVariant.link} icon={<CartArrowDownIcon />}>
+        Block Button
       </Button>
     );
     expect(view.container).toMatchSnapshot();
   });
-});
 
-test('it adds an aria-label to plain buttons', () => {
-  const label = 'aria-label test';
-  const view = mount(<Button aria-label={label} />);
-  expect(view.find('button').props()['aria-label']).toBe(label);
-});
+  test('isBlock', () => {
+    const view = render(<Button isBlock>Block Button</Button>);
+    expect(view.container).toMatchSnapshot();
+  });
 
-test('link with icon', () => {
-  const view = render(
-    <Button variant={ButtonVariant.link} icon={<CartArrowDownIcon />}>
-      Block Button
-    </Button>
-  );
-  expect(view.container).toMatchSnapshot();
-});
+  test('isDisabled', () => {
+    const view = render(<Button isDisabled>Disabled Button</Button>);
+    expect(view.container).toMatchSnapshot();
+  });
 
-test('isBlock', () => {
-  const view = render(<Button isBlock>Block Button</Button>);
-  expect(view.container).toMatchSnapshot();
-});
+  test('isDanger secondary', () => {
+    const view = render(
+      <Button variant="secondary" isDanger>
+        Disabled Button
+      </Button>
+    );
+    expect(view.container).toMatchSnapshot();
+  });
 
-test('isDisabled', () => {
-  const view = render(<Button isDisabled>Disabled Button</Button>);
-  expect(view.container).toMatchSnapshot();
-});
+  test('isDanger link', () => {
+    const view = render(
+      <Button variant="link" isDanger>
+        Disabled Button
+      </Button>
+    );
+    expect(view.container).toMatchSnapshot();
+  });
 
-test('isDanger secondary', () => {
-  const view = render(
-    <Button variant="secondary" isDanger>
-      Disabled Button
-    </Button>
-  );
-  expect(view.container).toMatchSnapshot();
-});
+  test('isAriaDisabled button', () => {
+    const view = render(<Button isAriaDisabled>Disabled yet focusable button</Button>);
+    expect(view.container).toMatchSnapshot();
+  });
 
-test('isDanger link', () => {
-  const view = render(
-    <Button variant="link" isDanger>
-      Disabled Button
-    </Button>
-  );
-  expect(view.container).toMatchSnapshot();
-});
+  test('isAriaDisabled link button', () => {
+    const view = render(
+      <Button isAriaDisabled component="a">
+        Disabled yet focusable button
+      </Button>
+    );
+    expect(view.container).toMatchSnapshot();
+  });
 
-test('isAriaDisabled button', () => {
-  const view = render(<Button isAriaDisabled>Disabled yet focusable button</Button>);
-  expect(view.container).toMatchSnapshot();
-});
+  test('isInline', () => {
+    const view = render(
+      <Button variant={ButtonVariant.link} isInline>
+        Hovered Button
+      </Button>
+    );
+    expect(view.container).toMatchSnapshot();
+  });
 
-test('isAriaDisabled link button', () => {
-  const view = render(
-    <Button isAriaDisabled component="a">
-      Disabled yet focusable button
-    </Button>
-  );
-  expect(view.container).toMatchSnapshot();
-});
+  test('isSmall', () => {
+    const view = render(<Button isSmall>Small Button</Button>);
+    expect(view.container).toMatchSnapshot();
+  });
 
-test('isInline', () => {
-  const view = render(
-    <Button variant={ButtonVariant.link} isInline>
-      Hovered Button
-    </Button>
-  );
-  expect(view.container).toMatchSnapshot();
-});
+  test('isLarge', () => {
+    const view = render(<Button isLarge>Large Button</Button>);
+    expect(view.container).toMatchSnapshot();
+  });
 
-test('isSmall', () => {
-  const view = render(<Button isSmall>Small Button</Button>);
-  expect(view.container).toMatchSnapshot();
-});
+  test('isLoading', () => {
+    const view = render(
+      <Button isLoading spinnerAriaValueText="Loading">
+        Loading Button
+      </Button>
+    );
+    expect(view.container).toMatchSnapshot();
+  });
 
-test('isLarge', () => {
-  const view = render(<Button isLarge>Large Button</Button>);
-  expect(view.container).toMatchSnapshot();
-});
+  test('allows passing in a string as the component', () => {
+    const component = 'a';
+    render(<Button component={component}>anchor button</Button>);
 
-test('isLoading', () => {
-  const view = render(
-    <Button isLoading spinnerAriaValueText="Loading">
-      Loading Button
-    </Button>
-  );
-  expect(view.container).toMatchSnapshot();
-});
+    expect(screen.getByText('anchor button')).toBeInTheDocument();
+  });
 
-test('allows passing in a string as the component', () => {
-  const component = 'a';
-  const view = mount(<Button component={component} />);
-  expect(view.find(component).type()).toBe(component);
-});
+  test('allows passing in a React Component as the component', () => {
+    const Component = () => <div>im a div</div>;
+    render(<Button component={Component} />);
 
-test('allows passing in a React Component as the component', () => {
-  const Component = () => <div>im a div</div>;
-  const view = mount(<Button component={Component} />);
-  expect(view.find(Component).type()).toBe(Component);
-});
+    expect(screen.getByText('im a div')).toBeInTheDocument();
+  });
 
-test('aria-disabled is set to true and tabIndex to -1 if component is not a button and is disabled', () => {
-  const view = render(
-    <Button component="a" isDisabled>
-      Disabled Anchor Button
-    </Button>
-  );
-  expect(view.container).toMatchSnapshot();
-});
+  test('aria-disabled is set to true and tabIndex to -1 if component is not a button and is disabled', () => {
+    const view = render(
+      <Button component="a" isDisabled>
+        Disabled Anchor Button
+      </Button>
+    );
+    expect(view.container).toMatchSnapshot();
+  });
 
-test('setting tab index through props', () => {
-  const view = mount(<Button tabIndex={0}>TabIndex 0 Button</Button>);
-  expect(view.find('button').props().tabIndex).toBe(0);
-});
+  test('setting tab index through props', () => {
+    render(<Button tabIndex={0}>TabIndex 0 Button</Button>);
+    expect(screen.getByRole('button').getAttribute('tabindex')).toEqual('0');
+  });
 
-test('isLoading icon only', () => {
-  const view = render(<Button variant="plain" isLoading aria-label="Upload" spinnerAriaValueText="Loading" icon={<div>ICON</div>} />)
-  expect(view.container).toMatchSnapshot();
-})
+  test('isLoading icon only', () => {
+    const view = render(
+      <Button variant="plain" isLoading aria-label="Upload" spinnerAriaValueText="Loading" icon={<div>ICON</div>} />
+    );
+    expect(view.container).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap b/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
index 4c672f5bb81..7692968c927 100644
--- a/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`aria-disabled is set to true and tabIndex to -1 if component is not a button and is disabled 1`] = `
+exports[`Button aria-disabled is set to true and tabIndex to -1 if component is not a button and is disabled 1`] = `
 <div>
   <a
     aria-disabled="true"
@@ -15,7 +15,7 @@ exports[`aria-disabled is set to true and tabIndex to -1 if component is not a b
 </div>
 `;
 
-exports[`control button 1`] = `
+exports[`Button control button 1`] = `
 <div>
   <button
     aria-disabled="false"
@@ -32,7 +32,7 @@ exports[`control button 1`] = `
 </div>
 `;
 
-exports[`danger button 1`] = `
+exports[`Button danger button 1`] = `
 <div>
   <button
     aria-disabled="false"
@@ -49,7 +49,7 @@ exports[`danger button 1`] = `
 </div>
 `;
 
-exports[`isAriaDisabled button 1`] = `
+exports[`Button isAriaDisabled button 1`] = `
 <div>
   <button
     aria-disabled="true"
@@ -64,7 +64,7 @@ exports[`isAriaDisabled button 1`] = `
 </div>
 `;
 
-exports[`isAriaDisabled link button 1`] = `
+exports[`Button isAriaDisabled link button 1`] = `
 <div>
   <a
     aria-disabled="true"
@@ -78,7 +78,7 @@ exports[`isAriaDisabled link button 1`] = `
 </div>
 `;
 
-exports[`isBlock 1`] = `
+exports[`Button isBlock 1`] = `
 <div>
   <button
     aria-disabled="false"
@@ -93,7 +93,7 @@ exports[`isBlock 1`] = `
 </div>
 `;
 
-exports[`isDanger link 1`] = `
+exports[`Button isDanger link 1`] = `
 <div>
   <button
     aria-disabled="false"
@@ -108,7 +108,7 @@ exports[`isDanger link 1`] = `
 </div>
 `;
 
-exports[`isDanger secondary 1`] = `
+exports[`Button isDanger secondary 1`] = `
 <div>
   <button
     aria-disabled="false"
@@ -123,7 +123,7 @@ exports[`isDanger secondary 1`] = `
 </div>
 `;
 
-exports[`isDisabled 1`] = `
+exports[`Button isDisabled 1`] = `
 <div>
   <button
     aria-disabled="true"
@@ -139,7 +139,7 @@ exports[`isDisabled 1`] = `
 </div>
 `;
 
-exports[`isInline 1`] = `
+exports[`Button isInline 1`] = `
 <div>
   <button
     aria-disabled="false"
@@ -154,7 +154,7 @@ exports[`isInline 1`] = `
 </div>
 `;
 
-exports[`isLarge 1`] = `
+exports[`Button isLarge 1`] = `
 <div>
   <button
     aria-disabled="false"
@@ -169,7 +169,7 @@ exports[`isLarge 1`] = `
 </div>
 `;
 
-exports[`isLoading 1`] = `
+exports[`Button isLoading 1`] = `
 <div>
   <button
     aria-disabled="false"
@@ -204,7 +204,7 @@ exports[`isLoading 1`] = `
 </div>
 `;
 
-exports[`isLoading icon only 1`] = `
+exports[`Button isLoading icon only 1`] = `
 <div>
   <button
     aria-disabled="false"
@@ -242,7 +242,7 @@ exports[`isLoading icon only 1`] = `
 </div>
 `;
 
-exports[`isSmall 1`] = `
+exports[`Button isSmall 1`] = `
 <div>
   <button
     aria-disabled="false"
@@ -257,7 +257,7 @@ exports[`isSmall 1`] = `
 </div>
 `;
 
-exports[`link button 1`] = `
+exports[`Button link button 1`] = `
 <div>
   <button
     aria-disabled="false"
@@ -274,7 +274,7 @@ exports[`link button 1`] = `
 </div>
 `;
 
-exports[`link with icon 1`] = `
+exports[`Button link with icon 1`] = `
 <div>
   <button
     aria-disabled="false"
@@ -306,7 +306,7 @@ exports[`link with icon 1`] = `
 </div>
 `;
 
-exports[`plain button 1`] = `
+exports[`Button plain button 1`] = `
 <div>
   <button
     aria-disabled="false"
@@ -323,7 +323,7 @@ exports[`plain button 1`] = `
 </div>
 `;
 
-exports[`primary button 1`] = `
+exports[`Button primary button 1`] = `
 <div>
   <button
     aria-disabled="false"
@@ -340,7 +340,7 @@ exports[`primary button 1`] = `
 </div>
 `;
 
-exports[`secondary button 1`] = `
+exports[`Button secondary button 1`] = `
 <div>
   <button
     aria-disabled="false"
@@ -357,7 +357,7 @@ exports[`secondary button 1`] = `
 </div>
 `;
 
-exports[`tertiary button 1`] = `
+exports[`Button tertiary button 1`] = `
 <div>
   <button
     aria-disabled="false"
@@ -374,7 +374,7 @@ exports[`tertiary button 1`] = `
 </div>
 `;
 
-exports[`warning button 1`] = `
+exports[`Button warning button 1`] = `
 <div>
   <button
     aria-disabled="false"
diff --git a/packages/react-core/src/components/Card/__tests__/Card.test.tsx b/packages/react-core/src/components/Card/__tests__/Card.test.tsx
index 466660ab2d9..bd9cdcd9160 100644
--- a/packages/react-core/src/components/Card/__tests__/Card.test.tsx
+++ b/packages/react-core/src/components/Card/__tests__/Card.test.tsx
@@ -1,105 +1,124 @@
 import React from 'react';
-import { Card } from '../Card';
-import { shallow } from 'enzyme';
-
-test('renders with PatternFly Core styles', () => {
-  const view = shallow(<Card />).dive();
-  expect(view).toMatchSnapshot();
-});
-
-test('className is added to the root element', () => {
-  const view = shallow(<Card className="extra-class" />).dive();
-  expect(view.prop('className')).toMatchSnapshot();
-});
-
-test('extra props are spread to the root element', () => {
-  const testId = 'card';
-  const view = shallow(<Card data-testid={testId} />).dive();
-  expect(view.prop('data-testid')).toBe(testId);
-});
-
-test('allows passing in a string as the component', () => {
-  const component = 'section';
-  const view = shallow(<Card component={component} />).dive();
-  expect(view.type()).toBe(component);
-});
-
-test('allows passing in a React Component as the component', () => {
-  const Component = () => <div>im a div</div>;
-  const view = shallow(<Card component={(Component as unknown) as keyof JSX.IntrinsicElements} />).dive();
-  expect(view.type()).toBe(Component);
-});
-
-test('card with isHoverable applied ', () => {
-  const view = shallow(<Card isHoverable />).dive();
-  expect(view).toMatchSnapshot();
-});
-
-test('card with isCompact applied ', () => {
-  const view = shallow(<Card isCompact />).dive();
-  expect(view).toMatchSnapshot();
-});
-
-test('card with isSelectable applied ', () => {
-  const view = shallow(<Card isSelectable />).dive();
-  expect(view.prop('className')).toMatch(/selectable/);
-  expect(view.prop('tabIndex')).toBe('0');
-});
 
-test('card with isSelectable and isSelected applied ', () => {
-  const view = shallow(<Card isSelectable isSelected />).dive();
-  expect(view.prop('className')).toMatch(/selectable/);
-  expect(view.prop('className')).toMatch(/selected/);
-  expect(view.prop('tabIndex')).toBe('0');
-});
-
-test('card with only isSelected applied - not change', () => {
-  const view = shallow(<Card isSelected />).dive();
-  expect(view.prop('className')).not.toMatch(/selected/);
-  expect(view.prop('tabIndex')).toBe(undefined);
-});
-
-test('card with isDisabledRaised applied', () => {
-  const view = shallow(<Card isDisabledRaised />).dive();
-  expect(view.prop('className')).toMatch(/non-selectable-raised/);
-});
-
-test('card with isSelectableRaised applied - not change', () => {
-  const view = shallow(<Card isSelectableRaised />).dive();
-  expect(view.prop('className')).toMatch(/selectable-raised/);
-  expect(view.prop('tabIndex')).toBe('0');
-});
-
-test('card with isSelectableRaised and isSelected applied ', () => {
-  const view = shallow(<Card isSelected isSelectableRaised />).dive();
-  expect(view.prop('className')).toMatch(/selectable-raised/);
-  expect(view.prop('className')).toMatch(/selected-raised/);
-  expect(view.prop('tabIndex')).toBe('0');
-});
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
-test('card with isFlat applied', () => {
-  const view = shallow(<Card isFlat />).dive();
-  expect(view.prop('className')).toMatch(/m-flat/);
-});
-
-test('card with isExpanded applied', () => {
-  const view = shallow(<Card isExpanded />).dive();
-  expect(view.prop('className')).toMatch(/m-expanded/);
-});
-
-test('card with isRounded applied', () => {
-  const view = shallow(<Card isRounded />).dive();
-  expect(view.prop('className')).toMatch(/m-rounded/);
-});
-
-test('card with isLarge applied', () => {
-  const view = shallow(<Card isLarge />).dive();
-  expect(view.prop('className')).toMatch(/m-display-lg/);
-});
+import { Card } from '../Card';
 
-test('card warns when isLarge and isCompact', () => {
-  const consoleWarnMock = jest.fn();
-  global.console = { warn: consoleWarnMock } as any;
-  shallow(<Card isLarge isCompact />);
-  expect(consoleWarnMock).toBeCalled();
+describe('Card', () => {
+  test('renders with PatternFly Core styles', () => {
+    const view = render(<Card />);
+    expect(view.container).toMatchSnapshot();
+  });
+
+  test('className is added to the root element', () => {
+    render(<Card className="extra-class" />);
+    expect(screen.getByRole('article').className).toContain('extra-class');
+  });
+
+  test('extra props are spread to the root element', () => {
+    const testId = 'card';
+
+    render(<Card data-testid={testId} />);
+    expect(screen.getByTestId(testId)).toBeInTheDocument();
+  });
+
+  test('allows passing in a string as the component', () => {
+    const component = 'section';
+
+    render(<Card component={component}>section content</Card>);
+    expect(screen.getByText('section content')).toBeInTheDocument();
+  });
+
+  test('allows passing in a React Component as the component', () => {
+    const Component = () => <div>im a div</div>;
+
+    render(<Card component={(Component as unknown) as keyof JSX.IntrinsicElements} />);
+    expect(screen.getByText('im a div')).toBeInTheDocument();
+  });
+
+  test('card with isHoverable applied ', () => {
+    render(<Card isHoverable />);
+    expect(screen.getByRole('article').outerHTML).toMatchSnapshot();
+  });
+
+  test('card with isCompact applied ', () => {
+    render(<Card isCompact />);
+    expect(screen.getByRole('article').outerHTML).toMatchSnapshot();
+  });
+
+  test('card with isSelectable applied ', () => {
+    render(<Card isSelectable />);
+
+    const card = screen.getByRole('article');
+    expect(card.className).toContain('selectable');
+    expect(card.getAttribute('tabindex')).toEqual('0');
+  });
+
+  test('card with isSelectable and isSelected applied ', () => {
+    render(<Card isSelectable isSelected />);
+
+    const card = screen.getByRole('article');
+    expect(card.className).toContain('selectable');
+    expect(card.className).toContain('selected');
+    expect(card.getAttribute('tabindex')).toEqual('0');
+  });
+
+  test('card with only isSelected applied - not change', () => {
+    render(<Card isSelected />);
+
+    const card = screen.getByRole('article');
+    expect(card.className).not.toContain('selected');
+    expect(card.getAttribute('tabindex')).toBeNull();
+  });
+
+  test('card with isDisabledRaised applied', () => {
+    render(<Card isDisabledRaised />);
+    expect(screen.getByRole('article').className).toContain('non-selectable-raised');
+  });
+
+  test('card with isSelectableRaised applied - not change', () => {
+    render(<Card isSelectableRaised />);
+
+    const card = screen.getByRole('article');
+    expect(card.className).toContain('selectable-raised');
+    expect(card.getAttribute('tabindex')).toEqual('0');
+  });
+
+  test('card with isSelectableRaised and isSelected applied ', () => {
+    render(<Card isSelected isSelectableRaised />);
+
+    const card = screen.getByRole('article');
+    expect(card.className).toContain('selectable-raised');
+    expect(card.className).toContain('selected-raised');
+    expect(card.getAttribute('tabindex')).toEqual('0');
+  });
+
+  test('card with isFlat applied', () => {
+    render(<Card isFlat />);
+    expect(screen.getByRole('article').className).toContain('m-flat');
+  });
+
+  test('card with isExpanded applied', () => {
+    render(<Card isExpanded />);
+    expect(screen.getByRole('article').className).toContain('m-expanded');
+  });
+
+  test('card with isRounded applied', () => {
+    render(<Card isRounded />);
+    expect(screen.getByRole('article').className).toContain('m-rounded');
+  });
+
+  test('card with isLarge applied', () => {
+    render(<Card isLarge />);
+    expect(screen.getByRole('article').className).toContain('m-display-lg');
+  });
+
+  test('card warns when isLarge and isCompact', () => {
+    const consoleWarnMock = jest.fn();
+    global.console = { warn: consoleWarnMock } as any;
+
+    render(<Card isLarge isCompact />);
+    expect(consoleWarnMock).toBeCalled();
+  });
 });
diff --git a/packages/react-core/src/components/Card/__tests__/CardBody.test.tsx b/packages/react-core/src/components/Card/__tests__/CardBody.test.tsx
index 82c4027540c..ce5dca84388 100644
--- a/packages/react-core/src/components/Card/__tests__/CardBody.test.tsx
+++ b/packages/react-core/src/components/Card/__tests__/CardBody.test.tsx
@@ -1,37 +1,44 @@
 import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
 import { CardBody } from '../CardBody';
-import { render } from '@testing-library/react';
-import { shallow } from 'enzyme';
 
-test('renders with PatternFly Core styles', () => {
-  const view = render(<CardBody />);
-  expect(view.container).toMatchSnapshot();
-});
+describe('CardBody', () => {
+  test('renders with PatternFly Core styles', () => {
+    const view = render(<CardBody />);
+    expect(view.container).toMatchSnapshot();
+  });
 
-test('className is added to the root element', () => {
-  const view = shallow(<CardBody className="extra-class" />);
-  expect(view.prop('className')).toMatchSnapshot();
-});
+  test('className is added to the root element', () => {
+    render(<CardBody className="extra-class" data-testid="test-id" />);
+    expect(screen.getByTestId('test-id').className).toContain('extra-class');
+  });
 
-test('extra props are spread to the root element', () => {
-  const testId = 'card-body';
-  const view = shallow(<CardBody data-testid={testId} />);
-  expect(view.prop('data-testid')).toBe(testId);
-});
+  test('extra props are spread to the root element', () => {
+    const testId = 'card-body';
 
-test('allows passing in a string as the component', () => {
-  const component = 'section';
-  const view = shallow(<CardBody component={component} />);
-  expect(view.type()).toBe(component);
-});
+    render(<CardBody data-testid={testId} />);
+    expect(screen.getByTestId(testId)).toBeInTheDocument();
+  });
 
-test('allows passing in a React Component as the component', () => {
-  const Component = () => <div>im a div</div>;
-  const view = shallow(<CardBody component={(Component as unknown) as keyof JSX.IntrinsicElements} />);
-  expect(view.type()).toBe(Component);
-});
+  test('allows passing in a string as the component', () => {
+    const component = 'section';
+
+    render(<CardBody component={component}>section content</CardBody>);
+    expect(screen.getByText('section content')).toBeInTheDocument();
+  });
+
+  test('allows passing in a React Component as the component', () => {
+    const Component = () => <div>im a div</div>;
+
+    render(<CardBody component={(Component as unknown) as keyof JSX.IntrinsicElements} />);
+    expect(screen.getByText('im a div')).toBeInTheDocument();
+  });
 
-test('body with no-fill applied ', () => {
-  const view = render(<CardBody isFilled={false} />);
-  expect(view.container).toMatchSnapshot();
+  test('body with no-fill applied', () => {
+    const view = render(<CardBody isFilled={false} />);
+    expect(view.container).toMatchSnapshot();
+  });
 });
diff --git a/packages/react-core/src/components/Card/__tests__/CardFooter.test.tsx b/packages/react-core/src/components/Card/__tests__/CardFooter.test.tsx
index 778f149a6a5..bfa2e55eb66 100644
--- a/packages/react-core/src/components/Card/__tests__/CardFooter.test.tsx
+++ b/packages/react-core/src/components/Card/__tests__/CardFooter.test.tsx
@@ -1,32 +1,36 @@
 import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
 import { CardFooter } from '../CardFooter';
-import { render } from '@testing-library/react';
-import { shallow } from 'enzyme';
 
-test('renders with PatternFly Core styles', () => {
-  const view = render(<CardFooter />);
-  expect(view.container).toMatchSnapshot();
-});
+describe('CardFooter', () => {
+  test('renders with PatternFly Core styles', () => {
+    const view = render(<CardFooter />);
+    expect(view.container).toMatchSnapshot();
+  });
 
-test('className is added to the root element', () => {
-  const view = shallow(<CardFooter className="extra-class" />);
-  expect(view.prop('className')).toMatchSnapshot();
-});
+  test('className is added to the root element', () => {
+    render(<CardFooter className="extra-class">text</CardFooter>);
+    expect(screen.getByText('text').className).toContain('extra-class');
+  });
 
-test('extra props are spread to the root element', () => {
-  const testId = 'card-footer';
-  const view = shallow(<CardFooter data-testid={testId} />);
-  expect(view.prop('data-testid')).toBe(testId);
-});
+  test('extra props are spread to the root element', () => {
+    const testId = 'card-footer';
 
-test('allows passing in a string as the component', () => {
-  const component = 'div';
-  const view = shallow(<CardFooter component={component} />);
-  expect(view.type()).toBe(component);
-});
+    render(<CardFooter data-testid={testId} />);
+    expect(screen.getByTestId(testId)).toBeInTheDocument();
+  });
+
+  test('allows passing in a string as the component', () => {
+    render(<CardFooter component={'div'}>div content</CardFooter>);
+    expect(screen.getByText('div content')).toBeInTheDocument();
+  });
 
-test('allows passing in a React Component as the component', () => {
-  const Component = () => <div>im a div</div>;
-  const view = shallow(<CardFooter component={(Component as unknown) as keyof JSX.IntrinsicElements} />);
-  expect(view.type()).toBe(Component);
+  test('allows passing in a React Component as the component', () => {
+    const Component = () => <div>im a div</div>;
+    render(<CardFooter component={(Component as unknown) as keyof JSX.IntrinsicElements} />);
+    expect(screen.getByText('im a div')).toBeInTheDocument();
+  });
 });
diff --git a/packages/react-core/src/components/Card/__tests__/CardHeadMain.test.tsx b/packages/react-core/src/components/Card/__tests__/CardHeadMain.test.tsx
index e1932b2e9cc..f2b88eb577f 100644
--- a/packages/react-core/src/components/Card/__tests__/CardHeadMain.test.tsx
+++ b/packages/react-core/src/components/Card/__tests__/CardHeadMain.test.tsx
@@ -1,20 +1,25 @@
 import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
 import { CardHeadMain } from '../CardHeadMain';
-import { render } from '@testing-library/react';
-import { shallow } from 'enzyme';
 
-test('renders with PatternFly Core styles', () => {
-  const view = render(<CardHeadMain>text</CardHeadMain>);
-  expect(view.container).toMatchSnapshot();
-});
+describe('CardHeadMain', () => {
+  test('renders with PatternFly Core styles', () => {
+    render(<CardHeadMain>text</CardHeadMain>);
+    expect(screen.getByText('text').outerHTML).toMatchSnapshot();
+  });
 
-test('className is added to the root element', () => {
-  const view = shallow(<CardHeadMain className="extra-class">text</CardHeadMain>);
-  expect(view.prop('className')).toMatchSnapshot();
-});
+  test('className is added to the root element', () => {
+    render(<CardHeadMain className="extra-class">text</CardHeadMain>);
+    expect(screen.getByText('text').className).toContain('extra-class');
+  });
+
+  test('extra props are spread to the root element', () => {
+    const testId = 'card-head-main';
 
-test('extra props are spread to the root element', () => {
-  const testId = 'card-head-main';
-  const view = shallow(<CardHeadMain data-testid={testId} />);
-  expect(view.prop('data-testid')).toBe(testId);
+    render(<CardHeadMain data-testid={testId} />);
+    expect(screen.getByTestId(testId)).toBeInTheDocument();
+  });
 });
diff --git a/packages/react-core/src/components/Card/__tests__/CardHeader.test.tsx b/packages/react-core/src/components/Card/__tests__/CardHeader.test.tsx
index 193af3fd795..58611997e63 100644
--- a/packages/react-core/src/components/Card/__tests__/CardHeader.test.tsx
+++ b/packages/react-core/src/components/Card/__tests__/CardHeader.test.tsx
@@ -1,26 +1,10 @@
 import React from 'react';
-import { CardTitle } from '../CardTitle';
-import { CardHeader } from '../CardHeader';
 import { render } from '@testing-library/react';
-import { shallow } from 'enzyme';
-
-test('renders with PatternFly Core styles', () => {
-  const view = render(<CardTitle />);
-  expect(view.container).toMatchSnapshot();
-});
-
-test('className is added to the root element', () => {
-  const view = shallow(<CardTitle className="extra-class" />);
-  expect(view.prop('className')).toMatchSnapshot();
-});
-
-test('extra props are spread to the root element', () => {
-  const testId = 'card-header';
-  const view = shallow(<CardTitle data-testid={testId} />);
-  expect(view.prop('data-testid')).toBe(testId);
-});
+import { CardHeader } from '../CardHeader';
 
-test('onExpand adds the toggle button', () => {
-  const view = render(<CardHeader onExpand={jest.fn()} />);
-  expect(view.container).toMatchSnapshot();
+describe('CardHeader', () => {
+  test('onExpand adds the toggle button', () => {
+    const view = render(<CardHeader onExpand={jest.fn()} />);
+    expect(view.container).toMatchSnapshot();
+  });
 });
diff --git a/packages/react-core/src/components/Card/__tests__/CardHeaderMain.test.tsx b/packages/react-core/src/components/Card/__tests__/CardHeaderMain.test.tsx
index 8a48d52b798..54b9c9827dc 100644
--- a/packages/react-core/src/components/Card/__tests__/CardHeaderMain.test.tsx
+++ b/packages/react-core/src/components/Card/__tests__/CardHeaderMain.test.tsx
@@ -1,20 +1,25 @@
 import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
 import { CardHeaderMain } from '../CardHeaderMain';
-import { render } from '@testing-library/react';
-import { shallow } from 'enzyme';
 
-test('renders with PatternFly Core styles', () => {
-  const view = render(<CardHeaderMain>text</CardHeaderMain>);
-  expect(view.container).toMatchSnapshot();
-});
+describe('CardHeaderMain', () => {
+  test('renders with PatternFly Core styles', () => {
+    render(<CardHeaderMain>text</CardHeaderMain>);
+    expect(screen.getByText('text').outerHTML).toMatchSnapshot();
+  });
 
-test('className is added to the root element', () => {
-  const view = shallow(<CardHeaderMain className="extra-class">text</CardHeaderMain>);
-  expect(view.prop('className')).toMatchSnapshot();
-});
+  test('className is added to the root element', () => {
+    render(<CardHeaderMain className="extra-class">text</CardHeaderMain>);
+    expect(screen.getByText('text').className).toContain('extra-class');
+  });
+
+  test('extra props are spread to the root element', () => {
+    const testId = 'card-head-main';
 
-test('extra props are spread to the root element', () => {
-  const testId = 'card-head-main';
-  const view = shallow(<CardHeaderMain data-testid={testId} />);
-  expect(view.prop('data-testid')).toBe(testId);
+    render(<CardHeaderMain data-testid={testId} />);
+    expect(screen.getByTestId(testId)).toBeInTheDocument();
+  });
 });
diff --git a/packages/react-core/src/components/Card/__tests__/CardTitle.test.tsx b/packages/react-core/src/components/Card/__tests__/CardTitle.test.tsx
new file mode 100644
index 00000000000..b2863bc4add
--- /dev/null
+++ b/packages/react-core/src/components/Card/__tests__/CardTitle.test.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { CardTitle } from '../CardTitle';
+
+describe('CardTitle', () => {
+  test('renders with PatternFly Core styles', () => {
+    render(<CardTitle>text</CardTitle>);
+    expect(screen.getByText('text').outerHTML).toMatchSnapshot();
+  });
+
+  test('className is added to the root element', () => {
+    render(<CardTitle className="extra-class">text</CardTitle>);
+    expect(screen.getByText('text').className).toContain('extra-class');
+  });
+
+  test('extra props are spread to the root element', () => {
+    const testId = 'card-header';
+
+    render(<CardTitle data-testid={testId} />);
+    expect(screen.getByTestId(testId)).toBeInTheDocument();
+  });
+});
diff --git a/packages/react-core/src/components/Card/__tests__/__snapshots__/Card.test.tsx.snap b/packages/react-core/src/components/Card/__tests__/__snapshots__/Card.test.tsx.snap
index 459c896de70..d5e41218635 100644
--- a/packages/react-core/src/components/Card/__tests__/__snapshots__/Card.test.tsx.snap
+++ b/packages/react-core/src/components/Card/__tests__/__snapshots__/Card.test.tsx.snap
@@ -1,33 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`card with isCompact applied  1`] = `
-<article
-  className="pf-c-card pf-m-compact"
-  data-ouia-component-id="OUIA-Generated-Card-7"
-  data-ouia-component-type="PF4/Card"
-  data-ouia-safe={true}
-  id=""
-/>
-`;
-
-exports[`card with isHoverable applied  1`] = `
-<article
-  className="pf-c-card pf-m-selectable"
-  data-ouia-component-id="OUIA-Generated-Card-6"
-  data-ouia-component-type="PF4/Card"
-  data-ouia-safe={true}
-  id=""
-/>
-`;
+exports[`Card card with isCompact applied  1`] = `"<article id=\\"\\" class=\\"pf-c-card pf-m-compact\\" data-ouia-component-type=\\"PF4/Card\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Card-7\\"></article>"`;
 
-exports[`className is added to the root element 1`] = `"pf-c-card extra-class"`;
+exports[`Card card with isHoverable applied  1`] = `"<article id=\\"\\" class=\\"pf-c-card pf-m-selectable\\" data-ouia-component-type=\\"PF4/Card\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Card-6\\"></article>"`;
 
-exports[`renders with PatternFly Core styles 1`] = `
-<article
-  className="pf-c-card"
-  data-ouia-component-id="OUIA-Generated-Card-1"
-  data-ouia-component-type="PF4/Card"
-  data-ouia-safe={true}
-  id=""
-/>
+exports[`Card renders with PatternFly Core styles 1`] = `
+<div>
+  <article
+    class="pf-c-card"
+    data-ouia-component-id="OUIA-Generated-Card-1"
+    data-ouia-component-type="PF4/Card"
+    data-ouia-safe="true"
+    id=""
+  />
+</div>
 `;
diff --git a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardBody.test.tsx.snap b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardBody.test.tsx.snap
index 47e3756c533..73132ee7e70 100644
--- a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardBody.test.tsx.snap
+++ b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardBody.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`body with no-fill applied  1`] = `
+exports[`CardBody body with no-fill applied 1`] = `
 <div>
   <div
     class="pf-c-card__body pf-m-no-fill"
@@ -8,9 +8,7 @@ exports[`body with no-fill applied  1`] = `
 </div>
 `;
 
-exports[`className is added to the root element 1`] = `"pf-c-card__body extra-class"`;
-
-exports[`renders with PatternFly Core styles 1`] = `
+exports[`CardBody renders with PatternFly Core styles 1`] = `
 <div>
   <div
     class="pf-c-card__body"
diff --git a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardFooter.test.tsx.snap b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardFooter.test.tsx.snap
index 4e88210d910..10e0d44fd4f 100644
--- a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardFooter.test.tsx.snap
+++ b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardFooter.test.tsx.snap
@@ -1,8 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`className is added to the root element 1`] = `"pf-c-card__footer extra-class"`;
-
-exports[`renders with PatternFly Core styles 1`] = `
+exports[`CardFooter renders with PatternFly Core styles 1`] = `
 <div>
   <div
     class="pf-c-card__footer"
diff --git a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeadMain.test.tsx.snap b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeadMain.test.tsx.snap
index be75a137b39..afb02d353ec 100644
--- a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeadMain.test.tsx.snap
+++ b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeadMain.test.tsx.snap
@@ -1,13 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`className is added to the root element 1`] = `"pf-c-card__head-main extra-class"`;
-
-exports[`renders with PatternFly Core styles 1`] = `
-<div>
-  <div
-    class="pf-c-card__head-main"
-  >
-    text
-  </div>
-</div>
-`;
+exports[`CardHeadMain renders with PatternFly Core styles 1`] = `"<div class=\\"pf-c-card__head-main\\">text</div>"`;
diff --git a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snap b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snap
index 5ecee036cba..031316680c3 100644
--- a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snap
+++ b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snap
@@ -1,8 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`className is added to the root element 1`] = `"pf-c-card__title extra-class"`;
-
-exports[`onExpand adds the toggle button 1`] = `
+exports[`CardHeader onExpand adds the toggle button 1`] = `
 <div>
   <div
     class="pf-c-card__header"
@@ -40,11 +38,3 @@ exports[`onExpand adds the toggle button 1`] = `
   </div>
 </div>
 `;
-
-exports[`renders with PatternFly Core styles 1`] = `
-<div>
-  <div
-    class="pf-c-card__title"
-  />
-</div>
-`;
diff --git a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeaderMain.test.tsx.snap b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeaderMain.test.tsx.snap
index 0ebd86d2694..7a621767d63 100644
--- a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeaderMain.test.tsx.snap
+++ b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeaderMain.test.tsx.snap
@@ -1,13 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`className is added to the root element 1`] = `"extra-class"`;
-
-exports[`renders with PatternFly Core styles 1`] = `
-<div>
-  <div
-    class=""
-  >
-    text
-  </div>
-</div>
-`;
+exports[`CardHeaderMain renders with PatternFly Core styles 1`] = `"<div class=\\"\\">text</div>"`;
diff --git a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardTitle.test.tsx.snap b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardTitle.test.tsx.snap
new file mode 100644
index 00000000000..ba526d9978a
--- /dev/null
+++ b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardTitle.test.tsx.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CardTitle renders with PatternFly Core styles 1`] = `"<div class=\\"pf-c-card__title\\">text</div>"`;
diff --git a/packages/react-core/src/components/Checkbox/__tests__/Checkbox.test.tsx b/packages/react-core/src/components/Checkbox/__tests__/Checkbox.test.tsx
index 53f56eba314..bbc629c0b38 100644
--- a/packages/react-core/src/components/Checkbox/__tests__/Checkbox.test.tsx
+++ b/packages/react-core/src/components/Checkbox/__tests__/Checkbox.test.tsx
@@ -1,86 +1,82 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { shallow } from 'enzyme';
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+
 import { Checkbox } from '../Checkbox';
 
-const props = {
-  onChange: jest.fn(),
-  isChecked: false
-};
+describe('Checkbox', () => {
+  test('controlled', () => {
+    render(<Checkbox isChecked id="check" aria-label="check" />);
+    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+  });
 
-test('controlled', () => {
-  const view = render(<Checkbox isChecked id="check" aria-label="check" />);
-  expect(view.container).toMatchSnapshot();
-});
+  test('controlled - 3rd state', () => {
+    render(<Checkbox isChecked={null} id="check" aria-label="check" />);
+    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+  });
 
-test('controlled - 3rd state', () => {
-  const view = render(<Checkbox isChecked={null} id="check" aria-label="check" />);
-  expect(view.container).toMatchSnapshot();
-});
+  test('uncontrolled', () => {
+    render(<Checkbox id="check" aria-label="check" />);
+    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+  });
 
-test('uncontrolled', () => {
-  const view = render(<Checkbox id="check" aria-label="check" />);
-  expect(view.container).toMatchSnapshot();
-});
+  test('isDisabled', () => {
+    render(<Checkbox id="check" isDisabled aria-label="check" />);
+    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+  });
 
-test('isDisabled', () => {
-  const view = render(<Checkbox id="check" isDisabled aria-label="check" />);
-  expect(view.container).toMatchSnapshot();
-});
+  test('label is string', () => {
+    render(<Checkbox label="Label" id="check" isChecked aria-label="check" />);
+    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+  });
 
-test('label is string', () => {
-  const view = render(<Checkbox label="Label" id="check" isChecked aria-label="check" />);
-  expect(view.container).toMatchSnapshot();
-});
+  test('label is function', () => {
+    const functionLabel = () => <h1>Header</h1>;
+    render(<Checkbox label={functionLabel()} id="check" isChecked aria-label="check" />);
+    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+  });
 
-test('label is function', () => {
-  const functionLabel = () => <h1>Header</h1>;
-  const view = render(<Checkbox label={functionLabel()} id="check" isChecked aria-label="check" />);
-  expect(view.container).toMatchSnapshot();
-});
+  test('label is node', () => {
+    render(<Checkbox label={<h1>Header</h1>} id="check" isChecked aria-label="check" />);
+    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+  });
 
-test('label is node', () => {
-  const view = render(<Checkbox label={<h1>Header</h1>} id="check" isChecked aria-label="check" />);
-  expect(view.container).toMatchSnapshot();
-});
+  test('passing class', () => {
+    render(<Checkbox label="label" className="class-123" id="check" isChecked aria-label="check" />);
+    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+  });
 
-test('passing class', () => {
-  const view = render(<Checkbox label="label" className="class-123" id="check" isChecked aria-label="check" />);
-  expect(view.container).toMatchSnapshot();
-});
+  test('passing HTML attribute', () => {
+    render(<Checkbox label="label" aria-labelledby="labelId" id="check" isChecked aria-label="check" />);
+    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+  });
 
-test('passing HTML attribute', () => {
-  const view = render(<Checkbox label="label" aria-labelledby="labelId" id="check" isChecked aria-label="check" />);
-  expect(view.container).toMatchSnapshot();
-});
+  test('passing description', () => {
+    render(<Checkbox id="check" label="checkbox" description="Text description..." />);
+    expect(screen.getByText('Text description...')).toBeInTheDocument();
+  });
 
-test('passing description', () => {
-  const view = shallow(<Checkbox id="check" label="checkbox" description="Text description..." />);
-  const descriptionEl = view.find('span[className="pf-c-check__description"]');
-  expect(descriptionEl.length).toBe(1);
-  expect(descriptionEl.text()).toBe('Text description...');
-});
+  test('passing body', () => {
+    render(<Checkbox id="check" label="checkbox" body="This is where custom content goes." />);
 
-test('passing body', () => {
-  const view = shallow(<Checkbox id="check" label="checkbox" body="This is where custom content goes." />);
-  const bodyEl = view.find('span[className="pf-c-check__body"]');
-  expect(bodyEl.length).toBe(1);
-  expect(bodyEl.text()).toBe('This is where custom content goes.');
-});
+    expect(screen.getByText('This is where custom content goes.')).toBeInTheDocument();
+  });
 
-test('checkbox passes value and event to onChange handler', () => {
-  const newValue = true;
-  const event = {
-    currentTarget: { checked: newValue }
-  };
-  const view = shallow(<Checkbox id="check" {...props} aria-label="check" />);
-  view.find('input').simulate('change', event);
-  expect(props.onChange).toBeCalledWith(newValue, event);
-});
+  test('checkbox onChange handler called when component is clicked', () => {
+    const onChangeHandler = jest.fn();
+    render(<Checkbox id="check" onChange={onChangeHandler} aria-label="check" isChecked={false} />);
+
+    userEvent.click(screen.getByLabelText('check'));
+    expect(onChangeHandler).toBeCalled();
+  });
+
+  test('should throw console error when no id is given', () => {
+    const myMock = jest.fn();
+    global.console = { ...global.console, error: myMock };
 
-test('should throw console error when no id is given', () => {
-  const myMock = jest.fn();
-  global.console = { ...global.console, error: myMock };
-  render(<Checkbox {...props} />);
-  expect(myMock).toBeCalled();
+    render(<Checkbox id={undefined} />);
+    expect(myMock).toBeCalled();
+  });
 });
diff --git a/packages/react-core/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap b/packages/react-core/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap
index 4ac95705e2c..2a5e42bf9d6 100644
--- a/packages/react-core/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap
+++ b/packages/react-core/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap
@@ -1,214 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`controlled - 3rd state 1`] = `
-<div>
-  <div
-    class="pf-c-check pf-m-standalone"
-  >
-    <input
-      aria-invalid="false"
-      aria-label="check"
-      class="pf-c-check__input"
-      data-ouia-component-id="OUIA-Generated-Checkbox-2"
-      data-ouia-component-type="PF4/Checkbox"
-      data-ouia-safe="true"
-      id="check"
-      type="checkbox"
-    />
-  </div>
-</div>
-`;
+exports[`Checkbox controlled - 3rd state 1`] = `"<input id=\\"check\\" class=\\"pf-c-check__input\\" type=\\"checkbox\\" aria-invalid=\\"false\\" aria-label=\\"check\\" data-ouia-component-type=\\"PF4/Checkbox\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Checkbox-2\\">"`;
 
-exports[`controlled 1`] = `
-<div>
-  <div
-    class="pf-c-check pf-m-standalone"
-  >
-    <input
-      aria-invalid="false"
-      aria-label="check"
-      checked=""
-      class="pf-c-check__input"
-      data-ouia-component-id="OUIA-Generated-Checkbox-1"
-      data-ouia-component-type="PF4/Checkbox"
-      data-ouia-safe="true"
-      id="check"
-      type="checkbox"
-    />
-  </div>
-</div>
-`;
+exports[`Checkbox controlled 1`] = `"<input id=\\"check\\" class=\\"pf-c-check__input\\" type=\\"checkbox\\" aria-invalid=\\"false\\" aria-label=\\"check\\" data-ouia-component-type=\\"PF4/Checkbox\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Checkbox-1\\" checked=\\"\\">"`;
 
-exports[`isDisabled 1`] = `
-<div>
-  <div
-    class="pf-c-check pf-m-standalone"
-  >
-    <input
-      aria-invalid="false"
-      aria-label="check"
-      class="pf-c-check__input"
-      data-ouia-component-id="OUIA-Generated-Checkbox-4"
-      data-ouia-component-type="PF4/Checkbox"
-      data-ouia-safe="true"
-      disabled=""
-      id="check"
-      type="checkbox"
-    />
-  </div>
-</div>
-`;
+exports[`Checkbox isDisabled 1`] = `"<input id=\\"check\\" class=\\"pf-c-check__input\\" type=\\"checkbox\\" aria-invalid=\\"false\\" aria-label=\\"check\\" disabled=\\"\\" data-ouia-component-type=\\"PF4/Checkbox\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Checkbox-4\\">"`;
 
-exports[`label is function 1`] = `
-<div>
-  <div
-    class="pf-c-check"
-  >
-    <input
-      aria-invalid="false"
-      aria-label="check"
-      checked=""
-      class="pf-c-check__input"
-      data-ouia-component-id="OUIA-Generated-Checkbox-6"
-      data-ouia-component-type="PF4/Checkbox"
-      data-ouia-safe="true"
-      id="check"
-      type="checkbox"
-    />
-    <label
-      class="pf-c-check__label"
-      for="check"
-    >
-      <h1>
-        Header
-      </h1>
-    </label>
-  </div>
-</div>
-`;
+exports[`Checkbox label is function 1`] = `"<input id=\\"check\\" class=\\"pf-c-check__input\\" type=\\"checkbox\\" aria-invalid=\\"false\\" aria-label=\\"check\\" data-ouia-component-type=\\"PF4/Checkbox\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Checkbox-6\\" checked=\\"\\">"`;
 
-exports[`label is node 1`] = `
-<div>
-  <div
-    class="pf-c-check"
-  >
-    <input
-      aria-invalid="false"
-      aria-label="check"
-      checked=""
-      class="pf-c-check__input"
-      data-ouia-component-id="OUIA-Generated-Checkbox-7"
-      data-ouia-component-type="PF4/Checkbox"
-      data-ouia-safe="true"
-      id="check"
-      type="checkbox"
-    />
-    <label
-      class="pf-c-check__label"
-      for="check"
-    >
-      <h1>
-        Header
-      </h1>
-    </label>
-  </div>
-</div>
-`;
+exports[`Checkbox label is node 1`] = `"<input id=\\"check\\" class=\\"pf-c-check__input\\" type=\\"checkbox\\" aria-invalid=\\"false\\" aria-label=\\"check\\" data-ouia-component-type=\\"PF4/Checkbox\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Checkbox-7\\" checked=\\"\\">"`;
 
-exports[`label is string 1`] = `
-<div>
-  <div
-    class="pf-c-check"
-  >
-    <input
-      aria-invalid="false"
-      aria-label="check"
-      checked=""
-      class="pf-c-check__input"
-      data-ouia-component-id="OUIA-Generated-Checkbox-5"
-      data-ouia-component-type="PF4/Checkbox"
-      data-ouia-safe="true"
-      id="check"
-      type="checkbox"
-    />
-    <label
-      class="pf-c-check__label"
-      for="check"
-    >
-      Label
-    </label>
-  </div>
-</div>
-`;
+exports[`Checkbox label is string 1`] = `"<input id=\\"check\\" class=\\"pf-c-check__input\\" type=\\"checkbox\\" aria-invalid=\\"false\\" aria-label=\\"check\\" data-ouia-component-type=\\"PF4/Checkbox\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Checkbox-5\\" checked=\\"\\">"`;
 
-exports[`passing HTML attribute 1`] = `
-<div>
-  <div
-    class="pf-c-check"
-  >
-    <input
-      aria-invalid="false"
-      aria-label="check"
-      aria-labelledby="labelId"
-      checked=""
-      class="pf-c-check__input"
-      data-ouia-component-id="OUIA-Generated-Checkbox-9"
-      data-ouia-component-type="PF4/Checkbox"
-      data-ouia-safe="true"
-      id="check"
-      type="checkbox"
-    />
-    <label
-      class="pf-c-check__label"
-      for="check"
-    >
-      label
-    </label>
-  </div>
-</div>
-`;
+exports[`Checkbox passing HTML attribute 1`] = `"<input aria-labelledby=\\"labelId\\" id=\\"check\\" class=\\"pf-c-check__input\\" type=\\"checkbox\\" aria-invalid=\\"false\\" aria-label=\\"check\\" data-ouia-component-type=\\"PF4/Checkbox\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Checkbox-9\\" checked=\\"\\">"`;
 
-exports[`passing class 1`] = `
-<div>
-  <div
-    class="pf-c-check class-123"
-  >
-    <input
-      aria-invalid="false"
-      aria-label="check"
-      checked=""
-      class="pf-c-check__input"
-      data-ouia-component-id="OUIA-Generated-Checkbox-8"
-      data-ouia-component-type="PF4/Checkbox"
-      data-ouia-safe="true"
-      id="check"
-      type="checkbox"
-    />
-    <label
-      class="pf-c-check__label"
-      for="check"
-    >
-      label
-    </label>
-  </div>
-</div>
-`;
+exports[`Checkbox passing class 1`] = `"<input id=\\"check\\" class=\\"pf-c-check__input\\" type=\\"checkbox\\" aria-invalid=\\"false\\" aria-label=\\"check\\" data-ouia-component-type=\\"PF4/Checkbox\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Checkbox-8\\" checked=\\"\\">"`;
 
-exports[`uncontrolled 1`] = `
-<div>
-  <div
-    class="pf-c-check pf-m-standalone"
-  >
-    <input
-      aria-invalid="false"
-      aria-label="check"
-      class="pf-c-check__input"
-      data-ouia-component-id="OUIA-Generated-Checkbox-3"
-      data-ouia-component-type="PF4/Checkbox"
-      data-ouia-safe="true"
-      id="check"
-      type="checkbox"
-    />
-  </div>
-</div>
-`;
+exports[`Checkbox uncontrolled 1`] = `"<input id=\\"check\\" class=\\"pf-c-check__input\\" type=\\"checkbox\\" aria-invalid=\\"false\\" aria-label=\\"check\\" data-ouia-component-type=\\"PF4/Checkbox\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Checkbox-3\\">"`;