diff --git a/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
index a317bc6e831..7bcf150efde 100644
--- a/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
+++ b/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popover allowing users to set column visibility and order 1`] = `
+exports[`useDataGridColumnSelector columnSelector [React 17] renders a toolbar button/popover allowing users to set column visibility and order 1`] = `
 <div
   class="euiPopover emotion-euiPopover"
   data-test-subj="dataGridColumnSelectorPopover"
@@ -31,7 +31,7 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov
 </div>
 `;
 
-exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popover allowing users to set column visibility and order 2`] = `
+exports[`useDataGridColumnSelector columnSelector [React 17] renders a toolbar button/popover allowing users to set column visibility and order 2`] = `
 <div
   aria-describedby="generated-id"
   aria-live="off"
@@ -294,3 +294,298 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov
   </div>
 </div>
 `;
+
+exports[`useDataGridColumnSelector columnSelector [React 18] renders a toolbar button/popover allowing users to set column visibility and order 1`] = `
+<div
+  class="euiPopover emotion-euiPopover"
+  data-test-subj="dataGridColumnSelectorPopover"
+>
+  <div
+    class="euiPopover__anchor css-16vtueo-render"
+  >
+    <button
+      class="euiButtonEmpty euiDataGrid__controlBtn emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text"
+      data-test-subj="dataGridColumnSelectorButton"
+      type="button"
+    >
+      <span
+        class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
+      >
+        <span
+          color="inherit"
+          data-euiicon-type="listAdd"
+        />
+        <span
+          class="eui-textTruncate euiButtonEmpty__text"
+        >
+          Columns
+        </span>
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`useDataGridColumnSelector columnSelector [React 18] renders a toolbar button/popover allowing users to set column visibility and order 2`] = `
+<div
+  aria-describedby="generated-id"
+  aria-live="off"
+  aria-modal="true"
+  class="euiPanel euiPanel--plain euiPanel--paddingSmall euiPopover__panel emotion-euiPanel-grow-m-s-plain-euiPopover__panel-hasDragDrop-bottom"
+  data-autofocus="true"
+  data-popover-panel="true"
+  role="dialog"
+  style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
+  tabindex="0"
+>
+  <div
+    class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
+    data-popover-arrow="bottom"
+    style="left: 10px; top: 0px;"
+  />
+  <p
+    class="emotion-euiScreenReaderOnly"
+    id="generated-id"
+  >
+    You are in a dialog. Press Escape, or tap/click outside the dialog to close.
+  </p>
+  <div>
+    <div>
+      <div
+        class="euiPopoverTitle emotion-euiPopoverTitle-s-s"
+      >
+        <div
+          class="euiFormControlLayout euiFormControlLayout--compressed"
+        >
+          <div
+            class="euiFormControlLayout__childrenWrapper"
+          >
+            <input
+              aria-label="Search columns"
+              class="euiFieldText euiFieldText--compressed"
+              data-test-subj="dataGridColumnSelectorSearch"
+              placeholder="Search"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiDataGrid__controlScroll"
+      >
+        <div
+          class="euiDroppable euiDroppable--noGrow"
+          data-rfd-droppable-context-id=":r0:"
+          data-rfd-droppable-id="columnOrder"
+          data-test-subj="droppable"
+        >
+          <div
+            class="euiDraggable euiDraggable--hasCustomDragHandle"
+            data-rfd-draggable-context-id=":r0:"
+            data-rfd-draggable-id="columnA"
+            data-test-subj="draggable"
+            role="group"
+          >
+            <div
+              class="euiDataGridColumnSelector__item false euiDraggable__item euiDraggable__item--hasCustomDragHandle"
+              data-test-subj="dataGridColumnSelectorColumnItem-columnA"
+            >
+              <div
+                class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
+              >
+                <div
+                  class="euiFlexItem emotion-euiFlexItem-growZero"
+                >
+                  <div
+                    class="euiSwitch euiSwitch--compressed euiSwitch--mini emotion-euiSwitch"
+                  >
+                    <button
+                      aria-checked="true"
+                      aria-label="columnA"
+                      class="euiSwitch__button"
+                      data-test-subj="dataGridColumnSelectorToggleColumnVisibility-columnA"
+                      id="generated-id"
+                      name="columnA"
+                      role="switch"
+                      type="button"
+                    >
+                      <span
+                        class="euiSwitch__body"
+                      >
+                        <span
+                          class="euiSwitch__thumb"
+                        />
+                        <span
+                          class="euiSwitch__track"
+                        />
+                      </span>
+                    </button>
+                  </div>
+                </div>
+                <div
+                  aria-describedby="rfd-hidden-text-:r0:-hidden-text-:r1:"
+                  aria-hidden="true"
+                  class="euiFlexItem emotion-euiFlexItem-grow-1"
+                  data-rfd-drag-handle-context-id=":r0:"
+                  data-rfd-drag-handle-draggable-id="columnA"
+                  draggable="false"
+                  role="button"
+                  tabindex="-1"
+                >
+                  <span
+                    class="euiDataGridColumnSelector__itemLabel"
+                  >
+                    columnA
+                  </span>
+                </div>
+                <div
+                  aria-describedby="rfd-hidden-text-:r0:-hidden-text-:r1:"
+                  aria-label="Drag handle"
+                  class="euiFlexItem emotion-euiFlexItem-growZero"
+                  data-rfd-drag-handle-context-id=":r0:"
+                  data-rfd-drag-handle-draggable-id="columnA"
+                  draggable="false"
+                  role="button"
+                  tabindex="0"
+                >
+                  <span
+                    color="subdued"
+                    data-euiicon-type="grab"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiDraggable euiDraggable--hasCustomDragHandle"
+            data-rfd-draggable-context-id=":r0:"
+            data-rfd-draggable-id="columnB"
+            data-test-subj="draggable"
+            role="group"
+          >
+            <div
+              class="euiDataGridColumnSelector__item false euiDraggable__item euiDraggable__item--hasCustomDragHandle"
+              data-test-subj="dataGridColumnSelectorColumnItem-columnB"
+            >
+              <div
+                class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
+              >
+                <div
+                  class="euiFlexItem emotion-euiFlexItem-growZero"
+                >
+                  <div
+                    class="euiSwitch euiSwitch--compressed euiSwitch--mini emotion-euiSwitch"
+                  >
+                    <button
+                      aria-checked="true"
+                      aria-label="columnB"
+                      class="euiSwitch__button"
+                      data-test-subj="dataGridColumnSelectorToggleColumnVisibility-columnB"
+                      id="generated-id"
+                      name="columnB"
+                      role="switch"
+                      type="button"
+                    >
+                      <span
+                        class="euiSwitch__body"
+                      >
+                        <span
+                          class="euiSwitch__thumb"
+                        />
+                        <span
+                          class="euiSwitch__track"
+                        />
+                      </span>
+                    </button>
+                  </div>
+                </div>
+                <div
+                  aria-describedby="rfd-hidden-text-:r0:-hidden-text-:r1:"
+                  aria-hidden="true"
+                  class="euiFlexItem emotion-euiFlexItem-grow-1"
+                  data-rfd-drag-handle-context-id=":r0:"
+                  data-rfd-drag-handle-draggable-id="columnB"
+                  draggable="false"
+                  role="button"
+                  tabindex="-1"
+                >
+                  <span
+                    class="euiDataGridColumnSelector__itemLabel"
+                  >
+                    columnB
+                  </span>
+                </div>
+                <div
+                  aria-describedby="rfd-hidden-text-:r0:-hidden-text-:r1:"
+                  aria-label="Drag handle"
+                  class="euiFlexItem emotion-euiFlexItem-growZero"
+                  data-rfd-drag-handle-context-id=":r0:"
+                  data-rfd-drag-handle-draggable-id="columnB"
+                  draggable="false"
+                  role="button"
+                  tabindex="0"
+                >
+                  <span
+                    color="subdued"
+                    data-euiicon-type="grab"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiDroppable__placeholder"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="euiPopoverFooter emotion-euiPopoverFooter-s-s"
+    >
+      <div
+        class="euiFlexGroup emotion-euiFlexGroup-s-spaceBetween-stretch-row"
+      >
+        <div
+          class="euiFlexItem emotion-euiFlexItem-growZero"
+        >
+          <button
+            class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-flush-left"
+            data-test-subj="dataGridColumnSelectorShowAllButton"
+            type="button"
+          >
+            <span
+              class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
+            >
+              <span
+                class="eui-textTruncate euiButtonEmpty__text"
+              >
+                Show all
+              </span>
+            </span>
+          </button>
+        </div>
+        <div
+          class="euiFlexItem emotion-euiFlexItem-growZero"
+        >
+          <button
+            class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-flush-right"
+            data-test-subj="dataGridColumnSelectorHideAllButton"
+            type="button"
+          >
+            <span
+              class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
+            >
+              <span
+                class="eui-textTruncate euiButtonEmpty__text"
+              >
+                Hide all
+              </span>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
index bcb9d73e0da..1d1a40eb83d 100644
--- a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
+++ b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover allowing users to set column sorting 1`] = `
+exports[`useDataGridColumnSorting columnSorting [React 18] renders a toolbar button/popover allowing users to set column sorting 1`] = `
 <div
   class="euiPopover emotion-euiPopover"
   data-test-subj="dataGridColumnSortingPopover"
@@ -31,7 +31,7 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover
 </div>
 `;
 
-exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover allowing users to set column sorting 2`] = `
+exports[`useDataGridColumnSorting columnSorting [React 18] renders a toolbar button/popover allowing users to set column sorting 2`] = `
 <div
   aria-describedby="generated-id"
   aria-live="off"
@@ -62,13 +62,13 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover
     >
       <div
         class="euiDroppable euiDroppable--noGrow"
-        data-rfd-droppable-context-id="0"
+        data-rfd-droppable-context-id=":r0:"
         data-rfd-droppable-id="columnSorting"
         data-test-subj="droppable"
       >
         <div
           class="euiDraggable euiDraggable--hasCustomDragHandle"
-          data-rfd-draggable-context-id="0"
+          data-rfd-draggable-context-id=":r0:"
           data-rfd-draggable-id="columnA"
           data-test-subj="draggable"
           role="group"
@@ -102,10 +102,10 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover
                 </button>
               </div>
               <div
-                aria-describedby="rfd-hidden-text-0-hidden-text-0"
+                aria-describedby="rfd-hidden-text-:r0:-hidden-text-:r1:"
                 aria-hidden="true"
                 class="euiFlexItem euiDataGridColumnSorting__name emotion-euiFlexItem-grow-1"
-                data-rfd-drag-handle-context-id="0"
+                data-rfd-drag-handle-context-id=":r0:"
                 data-rfd-drag-handle-draggable-id="columnA"
                 draggable="false"
                 role="button"
@@ -205,10 +205,10 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover
                 </fieldset>
               </div>
               <div
-                aria-describedby="rfd-hidden-text-0-hidden-text-0"
+                aria-describedby="rfd-hidden-text-:r0:-hidden-text-:r1:"
                 aria-label="Drag handle"
                 class="euiFlexItem emotion-euiFlexItem-growZero"
-                data-rfd-drag-handle-context-id="0"
+                data-rfd-drag-handle-context-id=":r0:"
                 data-rfd-drag-handle-draggable-id="columnA"
                 draggable="false"
                 role="button"
diff --git a/src/components/datagrid/controls/column_selector.test.tsx b/src/components/datagrid/controls/column_selector.test.tsx
index ba54f9124d3..60c8daaa801 100644
--- a/src/components/datagrid/controls/column_selector.test.tsx
+++ b/src/components/datagrid/controls/column_selector.test.tsx
@@ -9,7 +9,7 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { shallow, mount, ReactWrapper } from 'enzyme';
-import { findTestSubject } from '../../../test';
+import { findTestSubject, testByReactVersion } from '../../../test';
 
 import { EuiDataGridToolBarVisibilityOptions } from '../data_grid_types';
 
@@ -76,15 +76,18 @@ describe('useDataGridColumnSelector', () => {
       component.setProps({});
     };
 
-    it('renders a toolbar button/popover allowing users to set column visibility and order', () => {
-      const component = mount(<MockComponent showColumnSelector={true} />);
-      openPopover(component);
-      expect(component.render()).toMatchSnapshot();
-      expect(
-        component.find('[data-popover-panel]').first().render()
-      ).toMatchSnapshot();
-      closePopover(component);
-    });
+    testByReactVersion(
+      'renders a toolbar button/popover allowing users to set column visibility and order',
+      () => {
+        const component = mount(<MockComponent showColumnSelector={true} />);
+        openPopover(component);
+        expect(component.render()).toMatchSnapshot();
+        expect(
+          component.find('[data-popover-panel]').first().render()
+        ).toMatchSnapshot();
+        closePopover(component);
+      }
+    );
 
     it('does not render if all valid sub-options are disabled', () => {
       const component = shallow(
diff --git a/src/components/datagrid/controls/column_sorting.test.tsx b/src/components/datagrid/controls/column_sorting.test.tsx
index 96ccbaae831..a476095f794 100644
--- a/src/components/datagrid/controls/column_sorting.test.tsx
+++ b/src/components/datagrid/controls/column_sorting.test.tsx
@@ -9,7 +9,7 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { mount, ReactWrapper } from 'enzyme';
-import { findTestSubject } from '../../../test';
+import { findTestSubject, testByReactVersion } from '../../../test';
 
 import { schemaDetectors } from '../utils/data_grid_schema';
 
@@ -73,16 +73,19 @@ describe('useDataGridColumnSorting', () => {
       component.setProps({});
     };
 
-    it('renders a toolbar button/popover allowing users to set column sorting', () => {
-      const component = mount(<MockComponent />);
-      openPopover(component);
-      expect(component.render()).toMatchSnapshot();
-      expect(
-        component.find('[data-popover-panel]').first().render()
-      ).toMatchSnapshot();
-      closePopover(component);
-      expect(component.text()).toEqual('1 field sorted');
-    });
+    testByReactVersion(
+      'renders a toolbar button/popover allowing users to set column sorting',
+      () => {
+        const component = mount(<MockComponent />);
+        openPopover(component);
+        expect(component.render()).toMatchSnapshot();
+        expect(
+          component.find('[data-popover-panel]').first().render()
+        ).toMatchSnapshot();
+        closePopover(component);
+        expect(component.text()).toEqual('1 field sorted');
+      }
+    );
 
     it('returns null if sorting is not defined', () => {
       // @ts-ignore - normally this would be undefined vs. null, but we have = fallbacks up above for testing QOL
diff --git a/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap b/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap
index abd15d8fe55..5057e393180 100644
--- a/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap
+++ b/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiDraggable renders 1`] = `
+exports[`[React 17] EuiDraggable renders 1`] = `
 <div
   class="euiDroppable euiDroppable--noGrow"
   data-rfd-droppable-context-id="0"
@@ -30,3 +30,34 @@ exports[`EuiDraggable renders 1`] = `
   />
 </div>
 `;
+
+exports[`[React 18] EuiDraggable renders 1`] = `
+<div
+  class="euiDroppable euiDroppable--noGrow"
+  data-rfd-droppable-context-id=":r0:"
+  data-rfd-droppable-id="testDroppable"
+  data-test-subj="droppable"
+>
+  <div
+    aria-describedby="rfd-hidden-text-:r0:-hidden-text-:r1:"
+    class="euiDraggable"
+    data-rfd-drag-handle-context-id=":r0:"
+    data-rfd-drag-handle-draggable-id="testDraggable"
+    data-rfd-draggable-context-id=":r0:"
+    data-rfd-draggable-id="testDraggable"
+    data-test-subj="draggable"
+    draggable="false"
+    role="button"
+    tabindex="0"
+  >
+    <div
+      class="euiDraggable__item"
+    >
+      Hello
+    </div>
+  </div>
+  <div
+    class="euiDroppable__placeholder"
+  />
+</div>
+`;
diff --git a/src/components/drag_and_drop/__snapshots__/droppable.test.tsx.snap b/src/components/drag_and_drop/__snapshots__/droppable.test.tsx.snap
index b32ca6f89f5..ca502ceeded 100644
--- a/src/components/drag_and_drop/__snapshots__/droppable.test.tsx.snap
+++ b/src/components/drag_and_drop/__snapshots__/droppable.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiDroppable can be given ReactElement children 1`] = `
+exports[`[React 17] EuiDroppable can be given ReactElement children 1`] = `
 <div
   class="euiDroppable euiDroppable--noGrow"
   data-rfd-droppable-context-id="0"
@@ -14,7 +14,7 @@ exports[`EuiDroppable can be given ReactElement children 1`] = `
 </div>
 `;
 
-exports[`EuiDroppable can be given multiple ReactElement children 1`] = `
+exports[`[React 17] EuiDroppable can be given multiple ReactElement children 1`] = `
 <div
   class="euiDroppable euiDroppable--noGrow"
   data-rfd-droppable-context-id="0"
@@ -30,7 +30,7 @@ exports[`EuiDroppable can be given multiple ReactElement children 1`] = `
 </div>
 `;
 
-exports[`EuiDroppable is rendered 1`] = `
+exports[`[React 17] EuiDroppable is rendered 1`] = `
 <div
   class="euiDroppable euiDroppable--noGrow"
   data-rfd-droppable-context-id="0"
@@ -43,3 +43,47 @@ exports[`EuiDroppable is rendered 1`] = `
   />
 </div>
 `;
+
+exports[`[React 18] EuiDroppable can be given ReactElement children 1`] = `
+<div
+  class="euiDroppable euiDroppable--noGrow"
+  data-rfd-droppable-context-id=":r3:"
+  data-rfd-droppable-id="testDroppable"
+  data-test-subj="droppable"
+>
+  <div />
+  <div
+    class="euiDroppable__placeholder"
+  />
+</div>
+`;
+
+exports[`[React 18] EuiDroppable can be given multiple ReactElement children 1`] = `
+<div
+  class="euiDroppable euiDroppable--noGrow"
+  data-rfd-droppable-context-id=":r6:"
+  data-rfd-droppable-id="testDroppable"
+  data-test-subj="droppable"
+>
+  <div />
+  <div />
+  <div />
+  <div
+    class="euiDroppable__placeholder"
+  />
+</div>
+`;
+
+exports[`[React 18] EuiDroppable is rendered 1`] = `
+<div
+  class="euiDroppable euiDroppable--noGrow"
+  data-rfd-droppable-context-id=":r0:"
+  data-rfd-droppable-id="testDroppable"
+  data-test-subj="droppable"
+>
+  <div />
+  <div
+    class="euiDroppable__placeholder"
+  />
+</div>
+`;
diff --git a/src/components/drag_and_drop/draggable.test.tsx b/src/components/drag_and_drop/draggable.test.tsx
index 8689b87a52d..4565f1cf580 100644
--- a/src/components/drag_and_drop/draggable.test.tsx
+++ b/src/components/drag_and_drop/draggable.test.tsx
@@ -8,10 +8,10 @@
 
 import React from 'react';
 import { render, screen } from '../../test/rtl';
-import { requiredProps } from '../../test/required_props';
+import { requiredProps, describeByReactVersion } from '../../test';
 import { EuiDragDropContext, EuiDraggable, EuiDroppable } from './';
 
-describe('EuiDraggable', () => {
+describeByReactVersion('EuiDraggable', () => {
   it('renders', () => {
     const handler = jest.fn();
 
diff --git a/src/components/drag_and_drop/droppable.test.tsx b/src/components/drag_and_drop/droppable.test.tsx
index dcbe400a536..08849d37d8b 100644
--- a/src/components/drag_and_drop/droppable.test.tsx
+++ b/src/components/drag_and_drop/droppable.test.tsx
@@ -14,6 +14,7 @@ import {
   findTestSubject,
   requiredProps,
   invokeOnReactVersion,
+  describeByReactVersion,
 } from '../../test';
 
 import { EuiDragDropContext, EuiDroppable } from './';
@@ -27,7 +28,7 @@ function snapshotDragDropContext(component: ReactWrapper) {
   return container.firstChild;
 }
 
-describe('EuiDroppable', () => {
+describeByReactVersion('EuiDroppable', () => {
   afterEach(() => {
     // Resetting DND server context is only required in older versions of React
     invokeOnReactVersion(['16', '17'], resetServerContext);
diff --git a/src/components/highlight/highlight.tsx b/src/components/highlight/highlight.tsx
index 0914ea78e7b..3e3a7f499c9 100644
--- a/src/components/highlight/highlight.tsx
+++ b/src/components/highlight/highlight.tsx
@@ -111,11 +111,11 @@ const highlight = (
 
   return (
     <Fragment>
-      {preMatch}
+      {preMatch || undefined}
       <EuiMark hasScreenReaderHelpText={hasScreenReaderHelpText}>
         {match}
       </EuiMark>
-      {postMatch}
+      {postMatch || undefined}
     </Fragment>
   );
 };
diff --git a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
index 20785f4a3b0..2573fe9ecbf 100644
--- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
+++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
@@ -928,7 +928,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
         data-test-subj="euiMarkdownEditorTextArea"
         id="editorId"
         rows="6"
-        style="height:100%;max-height:"
+        style="height:100%"
       />
       <div
         class="euiMarkdownEditorFooter"
diff --git a/src/components/markdown_editor/markdown_editor_text_area.tsx b/src/components/markdown_editor/markdown_editor_text_area.tsx
index cada4930d35..52d38eb8ec0 100644
--- a/src/components/markdown_editor/markdown_editor_text_area.tsx
+++ b/src/components/markdown_editor/markdown_editor_text_area.tsx
@@ -6,7 +6,12 @@
  * Side Public License, v 1.
  */
 
-import React, { TextareaHTMLAttributes, forwardRef, useContext } from 'react';
+import React, {
+  TextareaHTMLAttributes,
+  forwardRef,
+  useContext,
+  CSSProperties,
+} from 'react';
 import classNames from 'classnames';
 import { CommonProps } from '../common';
 import { EuiMarkdownContext } from './markdown_context';
@@ -45,11 +50,20 @@ export const EuiMarkdownEditorTextArea = forwardRef<
       'euiMarkdownEditorTextArea-isReadOnly': readOnly,
     });
 
+    // Ignore invalid empty string style values
+    const style: CSSProperties = {};
+    if (height !== '') {
+      style.height = height;
+    }
+    if (maxHeight !== '') {
+      style.maxHeight = maxHeight;
+    }
+
     return (
       <textarea
         ref={ref}
         data-test-subj="euiMarkdownEditorTextArea"
-        style={{ height, maxHeight }}
+        style={style}
         className={classes}
         {...rest}
         rows={6}
diff --git a/src/components/selectable/selectable_list/__snapshots__/selectable_list.test.tsx.snap b/src/components/selectable/selectable_list/__snapshots__/selectable_list.test.tsx.snap
index 6ff7033da9a..65d52778ea9 100644
--- a/src/components/selectable/selectable_list/__snapshots__/selectable_list.test.tsx.snap
+++ b/src/components/selectable/selectable_list/__snapshots__/selectable_list.test.tsx.snap
@@ -2150,7 +2150,6 @@ exports[`EuiSelectableListItem props renderOption 1`] = `
               class="euiSelectableListItem__text euiSelectableListItem__text--truncate"
             >
               <span>
-                
                  =&gt; 
                 Titan
               </span>
@@ -2179,7 +2178,6 @@ exports[`EuiSelectableListItem props renderOption 1`] = `
               class="euiSelectableListItem__text euiSelectableListItem__text--truncate"
             >
               <span>
-                
                  =&gt; 
                 Enceladus
               </span>
@@ -2208,7 +2206,6 @@ exports[`EuiSelectableListItem props renderOption 1`] = `
               class="euiSelectableListItem__text euiSelectableListItem__text--truncate"
             >
               <span>
-                
                  =&gt; 
                 Mimas
               </span>
@@ -2237,7 +2234,6 @@ exports[`EuiSelectableListItem props renderOption 1`] = `
               class="euiSelectableListItem__text euiSelectableListItem__text--truncate"
             >
               <span>
-                
                  =&gt; 
                 Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
               </span>
@@ -2266,7 +2262,6 @@ exports[`EuiSelectableListItem props renderOption 1`] = `
               class="euiSelectableListItem__text euiSelectableListItem__text--truncate"
             >
               <span>
-                
                  =&gt; 
                 Tethys
               </span>
@@ -2295,7 +2290,6 @@ exports[`EuiSelectableListItem props renderOption 1`] = `
               class="euiSelectableListItem__text euiSelectableListItem__text--truncate"
             >
               <span>
-                
                  =&gt; 
                 Hyperion
               </span>
@@ -2596,7 +2590,6 @@ exports[`EuiSelectableListItem props searchValue 1`] = `
               class="euiSelectableListItem__text euiSelectableListItem__text--truncate"
             >
               <span>
-                
                 <mark
                   class="euiMark emotion-euiMark-hasScreenReaderHelpText"
                 >
@@ -2792,7 +2785,6 @@ exports[`EuiSelectableListItem props searchValue 2`] = `
               class="euiSelectableListItem__text euiSelectableListItem__text--truncate"
             >
               <span>
-                
                 <mark
                   class="euiMark emotion-euiMark-hasScreenReaderHelpText"
                 >
diff --git a/src/components/selectable/selectable_list/selectable_list.test.tsx b/src/components/selectable/selectable_list/selectable_list.test.tsx
index 0bb9ee60b70..6d671212cba 100644
--- a/src/components/selectable/selectable_list/selectable_list.test.tsx
+++ b/src/components/selectable/selectable_list/selectable_list.test.tsx
@@ -98,7 +98,7 @@ describe('EuiSelectableListItem', () => {
           renderOption={(option: EuiSelectableOption, searchValue?: string) => {
             return (
               <span>
-                {searchValue} =&gt; {option.label}
+                {searchValue || undefined} =&gt; {option.label}
               </span>
             );
           }}
diff --git a/src/test/react_version.ts b/src/test/react_version.ts
index bae0cb26d62..7c83098ff99 100644
--- a/src/test/react_version.ts
+++ b/src/test/react_version.ts
@@ -8,19 +8,34 @@
 
 export type ReactVersion = '16' | '17' | '18';
 
+export const SUPPORTED_REACT_VERSIONS: ReactVersion[] = ['16', '17', '18'];
+
 /**
  * Get major version of React that's currently used.
  *
  */
 export const getReactVersion = (): ReactVersion => {
   const reactVersion = process.env.REACT_VERSION;
-  if (reactVersion !== undefined && ['16', '17', '18'].includes(reactVersion)) {
+  if (
+    reactVersion !== undefined &&
+    SUPPORTED_REACT_VERSIONS.includes(reactVersion as ReactVersion)
+  ) {
     return reactVersion as ReactVersion;
   }
 
   return '18';
 };
 
+export const isReactVersion = (
+  versionOrVersions: ReactVersion | ReactVersion[]
+): boolean => {
+  if (!Array.isArray(versionOrVersions)) {
+    versionOrVersions = [versionOrVersions];
+  }
+
+  return versionOrVersions.includes(getReactVersion());
+};
+
 /**
  * Invoke passed function when running on specified version(s) of React
  */
@@ -28,11 +43,43 @@ export const invokeOnReactVersion = (
   versionOrVersions: ReactVersion | ReactVersion[],
   func: Function
 ) => {
-  if (!Array.isArray(versionOrVersions)) {
-    versionOrVersions = [versionOrVersions];
-  }
-
-  if (versionOrVersions.includes(getReactVersion())) {
+  if (isReactVersion(versionOrVersions)) {
     func();
   }
 };
+
+/**
+ * Jest describe wrapper calling describe() for every supported React version
+ * and prefixing the name with version numbers. Only the currently running
+ * version isn't skipped.
+ *
+ * It's primary use is to separate snapshots by React version in case there are
+ * differences with, for example, unique ID generation.
+ */
+export const describeByReactVersion = (name: string, func: () => void) => {
+  const currentVersion = getReactVersion();
+
+  SUPPORTED_REACT_VERSIONS.forEach((version) => {
+    const describeFunc = version === currentVersion ? describe : describe.skip;
+
+    describeFunc(`[React ${version}] ${name}`, func);
+  });
+};
+
+/**
+ * Jest test wrapper calling test() for every supported React version
+ * and prefixing the name with version numbers. Only the currently running
+ * version isn't skipped.
+ *
+ * It's primary use is to separate snapshots by React version in case there
+ * are differences with, for example, unique ID generation.
+ */
+export const testByReactVersion = (name: string, func: () => void) => {
+  const currentVersion = getReactVersion();
+
+  SUPPORTED_REACT_VERSIONS.forEach((version) => {
+    const testFunc = version === currentVersion ? test : test.skip;
+
+    testFunc(`[React ${version}] ${name}`, func);
+  });
+};