diff --git a/src/platform/packages/shared/kbn-unified-data-table/src/utils/get_render_cell_value.tsx b/src/platform/packages/shared/kbn-unified-data-table/src/utils/get_render_cell_value.tsx
index 03fb17d0fe906..3b373fa7f3e15 100644
--- a/src/platform/packages/shared/kbn-unified-data-table/src/utils/get_render_cell_value.tsx
+++ b/src/platform/packages/shared/kbn-unified-data-table/src/utils/get_render_cell_value.tsx
@@ -7,11 +7,17 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { useEffect, useContext, memo } from 'react';
+import React, { useEffect, useContext, memo, useMemo, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import type { DataView, DataViewField } from '@kbn/data-views-plugin/public';
-import type { EuiDataGridCellValueElementProps } from '@elastic/eui';
-import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import type { EuiDataGridCellValueElementProps, EuiTreeViewProps } from '@elastic/eui';
+import {
+  EuiButtonEmpty,
+  EuiButtonIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiTreeView,
+} from '@elastic/eui';
 import type { FieldFormatsStart } from '@kbn/field-formats-plugin/public';
 import { getDataViewFieldOrCreateFromColumnMeta } from '@kbn/data-view-utils';
 import type {
@@ -22,12 +28,517 @@ import type {
 import { formatFieldValueReact } from '@kbn/discover-utils';
 import { UnifiedDataTableContext } from '../table_context';
 import type { CustomCellRenderer } from '../types';
-import { SourceDocument } from '../components/source_document';
 import SourcePopoverContent from '../components/source_popover_content';
 import { DataTablePopoverCellValue } from '../components/data_table_cell_value';
+import { getInnerColumns } from './columns';
 
 export const CELL_CLASS = 'unifiedDataTable__cellValue';
 
+type CellTreePreviewValue = string | number | boolean | null;
+type CellTreeJsonValue =
+  | Record<string, unknown>
+  | unknown[]
+  | string
+  | number
+  | boolean
+  | null
+  | undefined;
+
+const HEAVY_NESTED_OBJECT_PREVIEW: CellTreeJsonValue = Object.fromEntries(
+  Array.from({ length: 200 }, (_, index) => {
+    const fieldNumber = index + 1;
+
+    return [
+      `object_${fieldNumber}`,
+      {
+        id: `id-${fieldNumber}`,
+        enabled: fieldNumber % 2 === 0,
+        count: fieldNumber,
+        tags: ['metrics', `object_${fieldNumber}`, 'demo'],
+        agent: {
+          name: 'policy_template',
+          version: '0.1',
+          ephemeral_id: `agent-${fieldNumber}`,
+        },
+        attributes: {
+          event: {
+            domain: 'events:metrics',
+            name: 'metrics and events',
+            kind: 'metric',
+          },
+          k8s: {
+            namespace: 'default',
+            pod: {
+              name: `metrics-pod-${fieldNumber}`,
+              uid: `pod-${fieldNumber}`,
+              labels: {
+                app: 'metrics',
+                tier: 'backend',
+              },
+            },
+          },
+        },
+        histogram: {
+          values: [0.1, 0.2, 0.3, 0.4, 0.5],
+          counts: [3, 7, 23, 12, 6],
+        },
+      },
+    ];
+  })
+);
+const ENABLE_CELL_TREE_HEAVY_DEMO = true;
+
+const renderCellTreeValue = (value: CellTreePreviewValue) => (
+  <span
+    css={({ euiTheme }) => ({
+      color:
+        value === null
+          ? euiTheme.colors.textSubdued
+          : typeof value === 'string'
+          ? euiTheme.colors.dangerText
+          : euiTheme.colors.successText,
+      whiteSpace: 'nowrap',
+    })}
+  >
+    {value === null ? 'null' : typeof value === 'string' ? `"${value}"` : String(value)}
+  </span>
+);
+
+const renderCellTreeLabel = ({
+  name,
+  value,
+  count,
+  collectionType = 'object',
+  showFilterActions = false,
+}: {
+  name: string;
+  value?: CellTreePreviewValue;
+  count?: number;
+  collectionType?: 'array' | 'object';
+  showFilterActions?: boolean;
+}) => (
+  <span
+    title={
+      typeof count === 'number'
+        ? `${count} ${collectionType === 'array' ? 'items' : 'fields'}`
+        : undefined
+    }
+    css={({ euiTheme }) => ({
+      alignItems: 'center',
+      display: 'inline-flex',
+      gap: euiTheme.size.xxs,
+      fontFamily: euiTheme.font.familyCode,
+      fontSize: euiTheme.size.m,
+      lineHeight: euiTheme.size.m,
+      minWidth: 0,
+
+      '&:hover .unifiedDataTable__cellTreeFilterActions, &:focus-within .unifiedDataTable__cellTreeFilterActions':
+        {
+          opacity: 1,
+        },
+    })}
+  >
+    <span>
+      <span css={({ euiTheme }) => ({ color: euiTheme.colors.textSubdued })}>{'"'}</span>
+      <span css={({ euiTheme }) => ({ color: euiTheme.colors.text })}>{name}</span>
+      <span css={({ euiTheme }) => ({ color: euiTheme.colors.textSubdued })}>{'"'}</span>
+    </span>
+    <span css={({ euiTheme }) => ({ color: euiTheme.colors.textSubdued })}>:</span>
+    {typeof count === 'number' ? (
+      <span css={({ euiTheme }) => ({ color: euiTheme.colors.text })}>
+        {collectionType === 'array' ? '[' : '{'}
+      </span>
+    ) : null}
+    {typeof value !== 'undefined' ? (
+      <>
+        {renderCellTreeValue(value)}
+        <span css={({ euiTheme }) => ({ color: euiTheme.colors.textSubdued })}>,</span>
+      </>
+    ) : null}
+    {showFilterActions ? (
+      <span
+        className="unifiedDataTable__cellTreeFilterActions"
+        css={({ euiTheme }) => ({
+          alignItems: 'center',
+          display: 'inline-flex',
+          gap: euiTheme.size.xs,
+          opacity: 0,
+          transition: `opacity ${euiTheme.animation.fast} ${euiTheme.animation.resistance}`,
+        })}
+      >
+        <EuiButtonIcon
+          aria-label={i18n.translate('unifiedDataTable.grid.cellTreeViewPreview.addFilterLabel', {
+            defaultMessage: 'Filter for {name}: {value}',
+            values: { name, value },
+          })}
+          color="text"
+          display="empty"
+          iconSize="s"
+          iconType="plusInCircle"
+          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
+            event.preventDefault();
+            event.stopPropagation();
+          }}
+          size="xs"
+        />
+        <EuiButtonIcon
+          aria-label={i18n.translate(
+            'unifiedDataTable.grid.cellTreeViewPreview.excludeFilterLabel',
+            {
+              defaultMessage: 'Filter out {name}: {value}',
+              values: { name, value },
+            }
+          )}
+          color="text"
+          display="empty"
+          iconSize="s"
+          iconType="minusInCircle"
+          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
+            event.preventDefault();
+            event.stopPropagation();
+          }}
+          size="xs"
+        />
+      </span>
+    ) : null}
+  </span>
+);
+
+const CELL_TREE_VIEW_PREVIEW_MIN_VISIBLE_ITEMS = 5;
+const CELL_TREE_VIEW_PREVIEW_INITIAL_VISIBLE_ITEMS = 10;
+const CELL_TREE_VIEW_PREVIEW_INCREMENT = 10;
+
+type CellTreeViewPreviewItem = EuiTreeViewProps['items'][number];
+type CellTreeViewExpansionState = Record<string, boolean>;
+
+const isCellTreeObject = (value: CellTreeJsonValue): value is Record<string, unknown> => {
+  return Boolean(value) && typeof value === 'object' && !Array.isArray(value);
+};
+
+const getCellTreeItemId = (path: string[]) => {
+  return `cell-tree-${path.join('__')}`;
+};
+
+const normalizeCellTreePrimitiveValue = (value: CellTreeJsonValue): CellTreePreviewValue => {
+  if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+    return value;
+  }
+
+  return null;
+};
+
+const buildCellTreeItem = ({
+  name,
+  path,
+  value,
+}: {
+  name: string;
+  path: string[];
+  value: CellTreeJsonValue;
+}): CellTreeViewPreviewItem => {
+  if (Array.isArray(value)) {
+    return {
+      id: getCellTreeItemId(path),
+      label: renderCellTreeLabel({ name, count: value.length, collectionType: 'array' }),
+      children: value.map((childValue, index) =>
+        buildCellTreeItem({
+          name: String(index),
+          path: [...path, String(index)],
+          value: childValue as CellTreeJsonValue,
+        })
+      ),
+    };
+  }
+
+  if (isCellTreeObject(value)) {
+    const entries = Object.entries(value);
+
+    return {
+      id: getCellTreeItemId(path),
+      label: renderCellTreeLabel({ name, count: entries.length }),
+      children: entries.map(([childName, childValue]) =>
+        buildCellTreeItem({
+          name: childName,
+          path: [...path, childName],
+          value: childValue as CellTreeJsonValue,
+        })
+      ),
+    };
+  }
+
+  return {
+    id: getCellTreeItemId(path),
+    label: renderCellTreeLabel({
+      name,
+      showFilterActions: true,
+      value: normalizeCellTreePrimitiveValue(value),
+    }),
+  };
+};
+
+const buildCellTreeItems = (json: CellTreeJsonValue): EuiTreeViewProps['items'] => {
+  if (Array.isArray(json)) {
+    return json.map((value, index) =>
+      buildCellTreeItem({
+        name: String(index),
+        path: [String(index)],
+        value: value as CellTreeJsonValue,
+      })
+    );
+  }
+
+  if (isCellTreeObject(json)) {
+    return Object.entries(json).map(([name, value]) =>
+      buildCellTreeItem({
+        name,
+        path: [name],
+        value: value as CellTreeJsonValue,
+      })
+    );
+  }
+
+  return [
+    buildCellTreeItem({
+      name: 'value',
+      path: ['value'],
+      value: json,
+    }),
+  ];
+};
+
+const getCellTreeSourceJson = ({
+  row,
+  dataView,
+  columnId,
+  useTopLevelObjectColumns,
+}: {
+  row: DataTableRecord;
+  dataView: DataView;
+  columnId: string;
+  useTopLevelObjectColumns: boolean;
+}): CellTreeJsonValue => {
+  const sourceJson = useTopLevelObjectColumns
+    ? getInnerColumns(row.raw.fields as Record<string, unknown[]>, columnId)
+    : row.raw;
+  const sourceTreeJson = sourceJson as CellTreeJsonValue;
+  const { timeFieldName } = dataView;
+
+  if (!timeFieldName || typeof row.flattened[timeFieldName] === 'undefined') {
+    return sourceTreeJson;
+  }
+
+  if (isCellTreeObject(sourceTreeJson) && typeof sourceTreeJson[timeFieldName] === 'undefined') {
+    return {
+      [timeFieldName]: row.flattened[timeFieldName],
+      ...sourceTreeJson,
+    };
+  }
+
+  return sourceTreeJson;
+};
+
+const getExpandableCellTreeItemIds = (items: EuiTreeViewProps['items']): string[] =>
+  items.flatMap((item) => {
+    if (!item.children) {
+      return [];
+    }
+
+    return [item.id, ...getExpandableCellTreeItemIds(item.children)];
+  });
+
+const setCellTreeItemsExpansionState = (
+  items: EuiTreeViewProps['items'],
+  expansionState: CellTreeViewExpansionState
+): EuiTreeViewProps['items'] =>
+  items.map((item): CellTreeViewPreviewItem => {
+    const children = item.children
+      ? setCellTreeItemsExpansionState(item.children, expansionState)
+      : undefined;
+
+    return {
+      ...item,
+      ...(children ? { children, isExpanded: expansionState[item.id] ?? false } : {}),
+    };
+  });
+
+const CellTreeViewPreview = ({ json }: { json: CellTreeJsonValue }) => {
+  const cellTreeItems = useMemo(() => buildCellTreeItems(json), [json]);
+  const [visibleItemsCount, setVisibleItemsCount] = useState(
+    CELL_TREE_VIEW_PREVIEW_INITIAL_VISIBLE_ITEMS
+  );
+  const [expansionState, setExpansionState] = useState<CellTreeViewExpansionState>({});
+  const [treeRenderVersion, setTreeRenderVersion] = useState(0);
+  const visibleItemsLimit = Math.min(visibleItemsCount, cellTreeItems.length);
+  const hiddenItemCount = Math.max(cellTreeItems.length - visibleItemsLimit, 0);
+  const canHideRows =
+    visibleItemsLimit > Math.min(CELL_TREE_VIEW_PREVIEW_MIN_VISIBLE_ITEMS, cellTreeItems.length);
+  const rawVisibleItems = cellTreeItems.slice(0, visibleItemsLimit);
+  const visibleItems = setCellTreeItemsExpansionState(rawVisibleItems, expansionState);
+
+  return (
+    <>
+      <EuiFlexGroup alignItems="center" gutterSize="xs" responsive={false}>
+        <EuiFlexItem grow={false}>
+          <EuiButtonEmpty
+            flush="left"
+            iconType="arrowDown"
+            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
+              event.preventDefault();
+              event.stopPropagation();
+              const visibleExpandableItemIds = getExpandableCellTreeItemIds(rawVisibleItems);
+              setExpansionState((previousExpansionState) => ({
+                ...previousExpansionState,
+                ...Object.fromEntries(visibleExpandableItemIds.map((id) => [id, true])),
+              }));
+              setTreeRenderVersion((previousTreeRenderVersion) => previousTreeRenderVersion + 1);
+            }}
+            size="xs"
+          >
+            {i18n.translate('unifiedDataTable.grid.cellTreeViewPreview.expandVisibleButtonLabel', {
+              defaultMessage: 'Expand visible',
+            })}
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButtonEmpty
+            flush="left"
+            iconType="arrowRight"
+            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
+              event.preventDefault();
+              event.stopPropagation();
+              const visibleExpandableItemIds = getExpandableCellTreeItemIds(rawVisibleItems);
+              setExpansionState((previousExpansionState) => ({
+                ...previousExpansionState,
+                ...Object.fromEntries(visibleExpandableItemIds.map((id) => [id, false])),
+              }));
+              setTreeRenderVersion((previousTreeRenderVersion) => previousTreeRenderVersion + 1);
+            }}
+            size="xs"
+          >
+            {i18n.translate(
+              'unifiedDataTable.grid.cellTreeViewPreview.collapseVisibleButtonLabel',
+              {
+                defaultMessage: 'Collapse visible',
+              }
+            )}
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <div
+        css={({ euiTheme }) => ({
+          fontFamily: euiTheme.font.familyCode,
+          fontSize: euiTheme.size.m,
+          lineHeight: euiTheme.size.m,
+
+          '.euiTreeView__node': {
+            marginBottom: 0,
+          },
+        })}
+      >
+        <div>{'{'}</div>
+        <EuiTreeView
+          aria-label={i18n.translate('unifiedDataTable.grid.cellTreeViewPreview', {
+            defaultMessage: 'Cell tree view preview',
+          })}
+          display="compressed"
+          id={`cellTreeViewPreview-${visibleItemsCount}-${treeRenderVersion}`}
+          items={visibleItems}
+          key={`cellTreeViewPreview-${visibleItemsCount}-${treeRenderVersion}`}
+          showExpansionArrows
+        />
+        <div>{'}'}</div>
+      </div>
+      {canHideRows || hiddenItemCount > 0 ? (
+        <EuiFlexGroup alignItems="center" gutterSize="xs" responsive={false}>
+          {canHideRows ? (
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty
+                flush="left"
+                iconType="sortUp"
+                onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  const minVisibleItems = cellTreeItems.slice(
+                    0,
+                    CELL_TREE_VIEW_PREVIEW_MIN_VISIBLE_ITEMS
+                  );
+                  const minVisibleExpandableItemIds = getExpandableCellTreeItemIds(minVisibleItems);
+
+                  setVisibleItemsCount(
+                    Math.min(CELL_TREE_VIEW_PREVIEW_MIN_VISIBLE_ITEMS, cellTreeItems.length)
+                  );
+                  setExpansionState((previousExpansionState) => ({
+                    ...previousExpansionState,
+                    ...Object.fromEntries(minVisibleExpandableItemIds.map((id) => [id, false])),
+                  }));
+                  setTreeRenderVersion(
+                    (previousTreeRenderVersion) => previousTreeRenderVersion + 1
+                  );
+                }}
+                size="xs"
+              >
+                {i18n.translate(
+                  'unifiedDataTable.grid.cellTreeViewPreview.hideAllRowsButtonLabel',
+                  {
+                    defaultMessage: 'Hide all rows',
+                  }
+                )}
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+          ) : null}
+          {hiddenItemCount > 0 ? (
+            <>
+              <EuiFlexItem grow={false}>
+                <EuiButtonEmpty
+                  flush="left"
+                  iconType="sortDown"
+                  onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    setVisibleItemsCount((previousVisibleItemsCount) =>
+                      Math.min(
+                        previousVisibleItemsCount + CELL_TREE_VIEW_PREVIEW_INCREMENT,
+                        cellTreeItems.length
+                      )
+                    );
+                  }}
+                  size="xs"
+                >
+                  {i18n.translate(
+                    'unifiedDataTable.grid.cellTreeViewPreview.showMoreFieldsButtonLabel',
+                    {
+                      defaultMessage: 'Show 10 more fields',
+                    }
+                  )}
+                </EuiButtonEmpty>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiButtonEmpty
+                  flush="left"
+                  iconType="list"
+                  onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    setVisibleItemsCount(cellTreeItems.length);
+                  }}
+                  size="xs"
+                >
+                  {i18n.translate(
+                    'unifiedDataTable.grid.cellTreeViewPreview.showFullObjectButtonLabel',
+                    {
+                      defaultMessage: 'Show full object',
+                    }
+                  )}
+                </EuiButtonEmpty>
+              </EuiFlexItem>
+            </>
+          ) : null}
+        </EuiFlexGroup>
+      ) : null}
+    </>
+  );
+};
+
 const IS_JEST_ENVIRONMENT = typeof jest !== 'undefined';
 
 export const getRenderCellValueFn = ({
@@ -140,31 +651,51 @@ export const getRenderCellValueFn = ({
       (isPlainRecord && columnId === '_source')
     ) {
       return (
-        <SourceDocument
-          useTopLevelObjectColumns={useTopLevelObjectColumns}
-          row={row}
-          dataView={dataView}
-          columnId={columnId}
-          fieldFormats={fieldFormats}
-          shouldShowFieldHandler={shouldShowFieldHandler}
-          maxEntries={maxEntries}
-          isPlainRecord={isPlainRecord}
-          isCompressed={isCompressed}
-          columnsMeta={columnsMeta}
-        />
+        <div
+          className={CELL_CLASS}
+          css={({ euiTheme }) => ({
+            padding: `${euiTheme.size.xs} 0`,
+          })}
+        >
+          <CellTreeViewPreview
+            json={
+              ENABLE_CELL_TREE_HEAVY_DEMO
+                ? HEAVY_NESTED_OBJECT_PREVIEW
+                : getCellTreeSourceJson({
+                    row,
+                    dataView,
+                    columnId,
+                    useTopLevelObjectColumns,
+                  })
+            }
+          />
+        </div>
+      );
+    }
+
+    if (columnId === dataView.timeFieldName) {
+      return (
+        <span className={CELL_CLASS}>
+          {formatFieldValueReact({
+            value: row.flattened[columnId],
+            hit: row.raw,
+            fieldFormats,
+            dataView,
+            field,
+          })}
+        </span>
       );
     }
 
     return (
-      <span className={CELL_CLASS}>
-        {formatFieldValueReact({
-          value: row.flattened[columnId],
-          hit: row.raw,
-          fieldFormats,
-          dataView,
-          field,
+      <div
+        className={CELL_CLASS}
+        css={({ euiTheme }) => ({
+          padding: `${euiTheme.size.xs} 0`,
         })}
-      </span>
+      >
+        <CellTreeViewPreview json={row.flattened[columnId] as CellTreeJsonValue} />
+      </div>
     );
   };
 
diff --git a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/indexed_fields_table/__snapshots__/indexed_fields_table.test.tsx.snap b/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/indexed_fields_table/__snapshots__/indexed_fields_table.test.tsx.snap
deleted file mode 100644
index 04098ebbe9ed7..0000000000000
--- a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/indexed_fields_table/__snapshots__/indexed_fields_table.test.tsx.snap
+++ /dev/null
@@ -1,281 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`IndexedFieldsTable IndexedFieldsTable with rollup index pattern should render normally 1`] = `
-Object {
-  "items": Array [
-    Object {
-      "displayName": "Elastic",
-      "esTypes": Array [
-        "keyword",
-      ],
-      "excluded": false,
-      "format": "",
-      "hasRuntime": false,
-      "id": "Elastic",
-      "info": Array [
-        "Rollup aggregations:",
-        "terms",
-      ],
-      "isMapped": false,
-      "isUserEditable": false,
-      "kbnType": undefined,
-      "name": "Elastic",
-      "searchable": true,
-      "type": "keyword",
-    },
-    Object {
-      "displayName": "timestamp",
-      "esTypes": Array [
-        "date",
-      ],
-      "excluded": false,
-      "format": "",
-      "hasRuntime": false,
-      "id": "timestamp",
-      "info": Array [
-        "Rollup aggregations:",
-        "date_histogram (interval: 30s, delay: 30s, UTC)",
-      ],
-      "isMapped": false,
-      "isUserEditable": false,
-      "kbnType": undefined,
-      "name": "timestamp",
-      "type": "date",
-    },
-    Object {
-      "displayName": "conflictingField",
-      "esTypes": Array [
-        "keyword",
-        "long",
-      ],
-      "excluded": false,
-      "format": "",
-      "hasRuntime": false,
-      "id": "conflictingField",
-      "info": Array [],
-      "isMapped": false,
-      "isUserEditable": false,
-      "kbnType": undefined,
-      "name": "conflictingField",
-      "type": "keyword, long",
-    },
-    Object {
-      "displayName": "amount",
-      "esTypes": Array [
-        "long",
-      ],
-      "excluded": false,
-      "format": "",
-      "hasRuntime": false,
-      "id": "amount",
-      "info": Array [
-        "Rollup aggregations:",
-        "histogram (interval: 5)",
-        "avg",
-        "max",
-        "min",
-        "sum",
-        "value_count",
-      ],
-      "isMapped": false,
-      "isUserEditable": false,
-      "kbnType": undefined,
-      "name": "amount",
-      "type": "long",
-    },
-    Object {
-      "displayName": "runtime",
-      "esTypes": Array [
-        "long",
-      ],
-      "excluded": false,
-      "format": "",
-      "hasRuntime": true,
-      "id": "runtime",
-      "info": Array [],
-      "isMapped": false,
-      "isUserEditable": false,
-      "kbnType": "number",
-      "name": "runtime",
-      "runtimeField": Object {
-        "script": Object {
-          "source": "emit('Hello');",
-        },
-        "type": "long",
-      },
-      "type": "long",
-    },
-  ],
-}
-`;
-
-exports[`IndexedFieldsTable should filter based on the query bar 1`] = `
-Object {
-  "items": Array [
-    Object {
-      "displayName": "Elastic",
-      "esTypes": Array [
-        "keyword",
-      ],
-      "excluded": false,
-      "format": "",
-      "hasRuntime": false,
-      "id": "Elastic",
-      "info": Array [],
-      "isMapped": false,
-      "isUserEditable": false,
-      "kbnType": undefined,
-      "name": "Elastic",
-      "searchable": true,
-      "type": "keyword",
-    },
-  ],
-}
-`;
-
-exports[`IndexedFieldsTable should filter based on the schema filter 1`] = `
-Object {
-  "items": Array [
-    Object {
-      "displayName": "runtime",
-      "esTypes": Array [
-        "long",
-      ],
-      "excluded": false,
-      "format": "",
-      "hasRuntime": true,
-      "id": "runtime",
-      "info": Array [],
-      "isMapped": false,
-      "isUserEditable": false,
-      "kbnType": "number",
-      "name": "runtime",
-      "runtimeField": Object {
-        "script": Object {
-          "source": "emit('Hello');",
-        },
-        "type": "long",
-      },
-      "type": "long",
-    },
-  ],
-}
-`;
-
-exports[`IndexedFieldsTable should filter based on the type filter 1`] = `
-Object {
-  "items": Array [
-    Object {
-      "displayName": "timestamp",
-      "esTypes": Array [
-        "date",
-      ],
-      "excluded": false,
-      "format": "",
-      "hasRuntime": false,
-      "id": "timestamp",
-      "info": Array [],
-      "isMapped": false,
-      "isUserEditable": false,
-      "kbnType": undefined,
-      "name": "timestamp",
-      "type": "date",
-    },
-  ],
-}
-`;
-
-exports[`IndexedFieldsTable should render normally 1`] = `
-Object {
-  "items": Array [
-    Object {
-      "displayName": "Elastic",
-      "esTypes": Array [
-        "keyword",
-      ],
-      "excluded": false,
-      "format": "",
-      "hasRuntime": false,
-      "id": "Elastic",
-      "info": Array [],
-      "isMapped": false,
-      "isUserEditable": false,
-      "kbnType": undefined,
-      "name": "Elastic",
-      "searchable": true,
-      "type": "keyword",
-    },
-    Object {
-      "displayName": "timestamp",
-      "esTypes": Array [
-        "date",
-      ],
-      "excluded": false,
-      "format": "",
-      "hasRuntime": false,
-      "id": "timestamp",
-      "info": Array [],
-      "isMapped": false,
-      "isUserEditable": false,
-      "kbnType": undefined,
-      "name": "timestamp",
-      "type": "date",
-    },
-    Object {
-      "displayName": "conflictingField",
-      "esTypes": Array [
-        "keyword",
-        "long",
-      ],
-      "excluded": false,
-      "format": "",
-      "hasRuntime": false,
-      "id": "conflictingField",
-      "info": Array [],
-      "isMapped": false,
-      "isUserEditable": false,
-      "kbnType": undefined,
-      "name": "conflictingField",
-      "type": "keyword, long",
-    },
-    Object {
-      "displayName": "amount",
-      "esTypes": Array [
-        "long",
-      ],
-      "excluded": false,
-      "format": "",
-      "hasRuntime": false,
-      "id": "amount",
-      "info": Array [],
-      "isMapped": false,
-      "isUserEditable": false,
-      "kbnType": undefined,
-      "name": "amount",
-      "type": "long",
-    },
-    Object {
-      "displayName": "runtime",
-      "esTypes": Array [
-        "long",
-      ],
-      "excluded": false,
-      "format": "",
-      "hasRuntime": true,
-      "id": "runtime",
-      "info": Array [],
-      "isMapped": false,
-      "isUserEditable": false,
-      "kbnType": "number",
-      "name": "runtime",
-      "runtimeField": Object {
-        "script": Object {
-          "source": "emit('Hello');",
-        },
-        "type": "long",
-      },
-      "type": "long",
-    },
-  ],
-}
-`;
diff --git a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/indexed_fields_table/components/table/__snapshots__/table.test.tsx.snap b/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/indexed_fields_table/components/table/__snapshots__/table.test.tsx.snap
deleted file mode 100644
index 960b367fe4b6b..0000000000000
--- a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/indexed_fields_table/components/table/__snapshots__/table.test.tsx.snap
+++ /dev/null
@@ -1,364 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Table render conflict summary modal  1`] = `
-<React.Fragment>
-  <EuiModalHeader>
-    <EuiModalHeaderTitle>
-      <Memo(MemoizedFormattedMessage)
-        defaultMessage="This field has a type conflict"
-        id="indexPatternManagement.editIndexPattern.fields.conflictModal.title"
-      />
-    </EuiModalHeaderTitle>
-  </EuiModalHeader>
-  <EuiModalBody>
-    <EuiText>
-      <p>
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="The type of the {fieldName} field changes across indices and might not be available for search, visualizations, and other analysis."
-          id="indexPatternManagement.editIndexPattern.fields.conflictModal.description"
-          values={
-            Object {
-              "fieldName": <EuiCode>
-                message
-              </EuiCode>,
-            }
-          }
-        />
-      </p>
-      <EuiBasicTable
-        columns={
-          Array [
-            Object {
-              "field": "type",
-              "name": "Type",
-            },
-            Object {
-              "field": "indices",
-              "name": "Indices",
-            },
-          ]
-        }
-        items={
-          Array [
-            Object {
-              "indices": "index_a",
-              "type": "keyword",
-            },
-            Object {
-              "indices": "index_b",
-              "type": "long",
-            },
-          ]
-        }
-        noItemsMessage={
-          <EuiI18n
-            default="No items found"
-            token="euiBasicTable.noItemsMessage"
-          />
-        }
-        rowHeader="firstName"
-        tableCaption="Field type conflicts across indices"
-        tableLayout="auto"
-      />
-    </EuiText>
-  </EuiModalBody>
-  <EuiModalFooter>
-    <EuiButton
-      fill={true}
-      onClick={[Function]}
-    >
-      <Memo(MemoizedFormattedMessage)
-        defaultMessage="Close"
-        id="indexPatternManagement.editIndexPattern.fields.conflictModal.closeBtn"
-      />
-    </EuiButton>
-  </EuiModalFooter>
-</React.Fragment>
-`;
-
-exports[`Table render name 1`] = `
-<span
-  data-test-subj="field-name-customer"
->
-  <EuiFlexGroup
-    alignItems="center"
-    gutterSize="s"
-  >
-    <WrappedFieldIcon
-      type="string"
-    />
-    customer
-  </EuiFlexGroup>
-</span>
-`;
-
-exports[`Table render name 2`] = `
-<span
-  data-test-subj="field-name-customer"
->
-  <EuiFlexGroup
-    alignItems="center"
-    gutterSize="s"
-  >
-    <WrappedFieldIcon
-      type="string"
-    />
-    customer
-    <EuiIconTip
-      content="This field exists on the data view only."
-      title="Runtime field"
-      type="indexRuntime"
-    />
-  </EuiFlexGroup>
-</span>
-`;
-
-exports[`Table should render conflicting type 1`] = `
-<span>
-  text, long
-  <span>
-     
-    <EuiBadge
-      color="warning"
-      iconType="warning"
-      onClick={[Function]}
-      onClickAriaLabel="Conflict Detail"
-    >
-      Conflict
-    </EuiBadge>
-  </span>
-</span>
-`;
-
-exports[`Table should render mixed, non-conflicting type 1`] = `
-<span>
-  keyword, constant_keyword
-</span>
-`;
-
-exports[`Table should render normal field name 1`] = `
-<span
-  data-test-subj="field-name-Elastic"
->
-  <EuiFlexGroup
-    alignItems="center"
-    gutterSize="s"
-  >
-    <WrappedFieldIcon
-      type="string"
-    />
-    Elastic
-  </EuiFlexGroup>
-</span>
-`;
-
-exports[`Table should render normal type 1`] = `
-<span>
-  string
-</span>
-`;
-
-exports[`Table should render normally 1`] = `
-<EuiInMemoryTable
-  columns={
-    Array [
-      Object {
-        "data-test-subj": "indexedFieldName",
-        "dataType": "string",
-        "field": "displayName",
-        "name": "Name",
-        "render": [Function],
-        "sortable": true,
-        "width": "38%",
-      },
-      Object {
-        "data-test-subj": "indexedFieldType",
-        "dataType": "string",
-        "field": "type",
-        "name": "Type",
-        "render": [Function],
-        "sortable": true,
-      },
-      Object {
-        "dataType": "string",
-        "field": "format",
-        "name": "Format",
-        "sortable": true,
-      },
-      Object {
-        "dataType": "boolean",
-        "description": "These fields can be used in the filter bar",
-        "field": "searchable",
-        "name": "Searchable",
-        "render": [Function],
-        "sortable": true,
-      },
-      Object {
-        "dataType": "boolean",
-        "description": "These fields can be used in visualization aggregations",
-        "field": "aggregatable",
-        "name": "Aggregatable",
-        "render": [Function],
-        "sortable": true,
-      },
-      Object {
-        "dataType": "boolean",
-        "description": "Fields that are excluded from _source when it is fetched",
-        "field": "excluded",
-        "name": "Excluded",
-        "render": [Function],
-        "sortable": true,
-      },
-      Object {
-        "actions": Array [
-          Object {
-            "available": [Function],
-            "data-test-subj": "editFieldFormat",
-            "description": "Edit",
-            "icon": "pencil",
-            "name": "Edit",
-            "onClick": [Function],
-            "type": "icon",
-          },
-          Object {
-            "available": [Function],
-            "color": "danger",
-            "data-test-subj": "deleteField",
-            "description": "Delete",
-            "icon": "trash",
-            "name": "Delete",
-            "onClick": [Function],
-            "type": "icon",
-          },
-        ],
-        "name": "Actions",
-        "width": "80px",
-      },
-    ]
-  }
-  items={
-    Array [
-      Object {
-        "displayName": "Elastic",
-        "excluded": false,
-        "hasRuntime": false,
-        "info": Array [],
-        "isMapped": true,
-        "isUserEditable": true,
-        "kbnType": "string",
-        "name": "Elastic",
-        "searchable": true,
-        "type": "name",
-      },
-      Object {
-        "displayName": "timestamp",
-        "excluded": false,
-        "hasRuntime": false,
-        "info": Array [],
-        "isMapped": true,
-        "isUserEditable": true,
-        "kbnType": "date",
-        "name": "timestamp",
-        "type": "date",
-      },
-      Object {
-        "conflictDescriptions": Object {
-          "keyword": Array [
-            "index_a",
-          ],
-          "long": Array [
-            "index_b",
-          ],
-        },
-        "displayName": "conflictingField",
-        "excluded": false,
-        "hasRuntime": false,
-        "info": Array [],
-        "isMapped": true,
-        "isUserEditable": true,
-        "kbnType": "conflict",
-        "name": "conflictingField",
-        "type": "text, long",
-      },
-      Object {
-        "displayName": "customer",
-        "excluded": false,
-        "hasRuntime": true,
-        "info": Array [],
-        "isMapped": false,
-        "isUserEditable": true,
-        "kbnType": "text",
-        "name": "customer",
-        "type": "keyword",
-      },
-      Object {
-        "displayName": "noedit",
-        "excluded": false,
-        "hasRuntime": true,
-        "info": Array [],
-        "isMapped": false,
-        "isUserEditable": false,
-        "kbnType": "text",
-        "name": "noedit",
-        "type": "keyword",
-      },
-    ]
-  }
-  onTableChange={[Function]}
-  pagination={
-    Object {
-      "pageSize": 10,
-      "pageSizeOptions": Array [
-        5,
-        10,
-        25,
-        50,
-      ],
-    }
-  }
-  searchFormat="eql"
-  sorting={
-    Object {
-      "sort": Object {
-        "direction": "asc",
-        "field": "name",
-      },
-    }
-  }
-  tableCaption="Indexed fields"
-  tableLayout="fixed"
-/>
-`;
-
-exports[`Table should render the boolean template (false) 1`] = `<span />`;
-
-exports[`Table should render the boolean template (true) 1`] = `
-<span
-  color="success"
-  data-euiicon-type="dot"
->
-  Is searchable
-</span>
-`;
-
-exports[`Table should render timestamp field name 1`] = `
-<span
-  data-test-subj="field-name-timestamp"
->
-  <EuiFlexGroup
-    alignItems="center"
-    gutterSize="s"
-  >
-    <WrappedFieldIcon
-      type="date"
-    />
-    timestamp
-    <EuiIconTip
-      aria-label="Primary time field"
-      color="primary"
-      content="This field represents the time that events occurred."
-      type="clock"
-    />
-  </EuiFlexGroup>
-</span>
-`;
diff --git a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/indexed_fields_table/components/table/table.test.tsx b/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/indexed_fields_table/components/table/table.test.tsx
index aa4482a85e695..4066342f3152d 100644
--- a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/indexed_fields_table/components/table/table.test.tsx
+++ b/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/indexed_fields_table/components/table/table.test.tsx
@@ -7,248 +7,280 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React from 'react';
-import { shallow } from 'enzyme';
-import type { DataView } from '@kbn/data-views-plugin/public';
 import type { IndexedFieldItem } from '../../types';
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { coreMock, overlayServiceMock } from '@kbn/core/public/mocks';
+import { createStubDataView } from '@kbn/data-views-plugin/public/data_views/data_view.stub';
 import {
-  TableWithoutPersist as Table,
-  renderFieldName,
   getConflictModalContent,
+  renderFieldName,
   showDelete,
+  TableWithoutPersist as Table,
 } from './table';
-import { coreMock, overlayServiceMock } from '@kbn/core/public/mocks';
+import { renderWithI18n } from '@kbn/test-jest-helpers';
+import { screen } from '@testing-library/react';
 
 const coreStart = coreMock.createStart();
 
-const indexPattern = {
-  timeFieldName: 'timestamp',
-} as DataView;
+const indexPattern = createStubDataView({
+  spec: {
+    timeFieldName: 'timestamp',
+    title: 'test-data-view',
+  },
+});
 
-const items: IndexedFieldItem[] = [
-  {
+const createIndexedField = ({
+  name,
+  ...field
+}: Pick<IndexedFieldItem, 'name'> & Partial<IndexedFieldItem>): IndexedFieldItem => ({
+  displayName: name,
+  excluded: false,
+  hasRuntime: false,
+  info: [],
+  isMapped: true,
+  isUserEditable: true,
+  kbnType: 'string',
+  name,
+  type: 'keyword',
+  ...field,
+});
+
+const items = [
+  createIndexedField({
     name: 'Elastic',
-    displayName: 'Elastic',
     searchable: true,
-    info: [],
     type: 'name',
-    kbnType: 'string',
-    excluded: false,
-    isMapped: true,
-    isUserEditable: true,
-    hasRuntime: false,
-  },
-  {
+  }),
+  createIndexedField({
+    kbnType: 'date',
     name: 'timestamp',
-    displayName: 'timestamp',
     type: 'date',
-    kbnType: 'date',
-    info: [],
-    excluded: false,
-    isMapped: true,
-    isUserEditable: true,
-    hasRuntime: false,
-  },
-  {
-    name: 'conflictingField',
-    displayName: 'conflictingField',
+  }),
+  createIndexedField({
     conflictDescriptions: { keyword: ['index_a'], long: ['index_b'] },
-    type: 'text, long',
     kbnType: 'conflict',
-    info: [],
-    excluded: false,
-    isMapped: true,
-    isUserEditable: true,
-    hasRuntime: false,
-  },
-  {
+    name: 'conflictingField',
+    type: 'text, long',
+  }),
+  createIndexedField({
+    hasRuntime: true,
+    isMapped: false,
+    kbnType: 'text',
     name: 'customer',
-    displayName: 'customer',
     type: 'keyword',
-    kbnType: 'text',
-    info: [],
-    excluded: false,
-    isMapped: false,
-    isUserEditable: true,
+  }),
+  createIndexedField({
     hasRuntime: true,
-  },
-  {
-    name: 'noedit',
-    displayName: 'noedit',
-    type: 'keyword',
-    kbnType: 'text',
-    info: [],
-    excluded: false,
     isMapped: false,
     isUserEditable: false,
-    hasRuntime: true,
-  },
+    kbnType: 'text',
+    name: 'noedit',
+    type: 'keyword',
+  }),
 ];
 
-const baseProps = {
+const mixedTypeItem = createIndexedField({
+  name: 'mixedType',
+  type: 'keyword, constant_keyword',
+});
+
+const primitiveRuntimeField = createIndexedField({
+  hasRuntime: true,
+  isMapped: false,
+  name: 'runtimePrimitive',
+  runtimeField: {
+    type: 'keyword',
+  },
+});
+
+const compositeRuntimeField = createIndexedField({
+  hasRuntime: true,
+  isMapped: false,
+  name: 'runtimeComposite',
+  runtimeField: {
+    type: 'composite',
+  },
+});
+
+const compositeRuntimeDefinition = createIndexedField({
+  hasRuntime: true,
+  isMapped: false,
+  name: 'runtimeCompositeDefinition',
+  runtimeField: {
+    type: 'composite',
+  },
+  type: 'composite',
+});
+
+const baseProps: Pick<React.ComponentProps<typeof Table>, 'euiTablePersist'> = {
   euiTablePersist: {
+    onTableChange: jest.fn(),
     pageSize: 10,
-    onTableChange: () => {},
-    sorting: { sort: { direction: 'asc' as const, field: 'name' as const } },
+    sorting: { sort: { direction: 'asc', field: 'name' } },
   },
 };
 
-const renderTable = (
-  { editField } = {
-    editField: () => {},
-  }
-) =>
-  shallow(
+const renderTable = ({
+  deleteField = jest.fn(),
+  editField = jest.fn(),
+  tableItems = items,
+}: {
+  deleteField?: React.ComponentProps<typeof Table>['deleteField'];
+  editField?: React.ComponentProps<typeof Table>['editField'];
+  tableItems?: IndexedFieldItem[];
+} = {}) =>
+  renderWithI18n(
     <Table
       {...baseProps}
-      indexPattern={indexPattern}
-      items={items}
+      deleteField={deleteField}
       editField={editField}
-      deleteField={() => {}}
+      indexPattern={indexPattern}
+      items={tableItems}
       openModal={overlayServiceMock.createStartContract().openModal}
       startServices={coreStart}
     />
   );
 
 describe('Table', () => {
-  test('should render normally', () => {
-    expect(renderTable()).toMatchSnapshot();
+  beforeEach(() => {
+    jest.spyOn(console, 'warn').mockImplementation(() => {}); // Silent EUI warnings during tests
   });
 
-  test('should render normal field name', () => {
-    const tableCell = shallow(renderTable().prop('columns')[0].render('Elastic', items[0]));
-    expect(tableCell).toMatchSnapshot();
+  afterEach(() => {
+    jest.restoreAllMocks();
   });
 
-  test('should render timestamp field name', () => {
-    const tableCell = shallow(renderTable().prop('columns')[0].render('timestamp', items[1]));
-    expect(tableCell).toMatchSnapshot();
+  it('should render normally', async () => {
+    renderTable();
+
+    expect(await screen.findByText('Elastic')).toBeVisible();
+    expect(screen.getByText('timestamp')).toBeVisible();
+    expect(screen.getByText('conflictingField')).toBeVisible();
+    expect(screen.getByText('customer')).toBeVisible();
+    expect(screen.getByText('noedit')).toBeVisible();
   });
 
-  test('should render the boolean template (true)', () => {
-    const tableCell = shallow(renderTable().prop('columns')[3].render(true));
-    expect(tableCell).toMatchSnapshot();
+  it('should render normal field name', async () => {
+    renderWithI18n(renderFieldName(items[0]));
+
+    expect(await screen.findByText('String')).toBeVisible();
+    expect(screen.getByTestId('field-name-Elastic')).toHaveTextContent('Elastic');
   });
 
-  test('should render the boolean template (false)', () => {
-    const tableCell = shallow(renderTable().prop('columns')[3].render(false, items[2]));
-    expect(tableCell).toMatchSnapshot();
+  it('should render timestamp field name', async () => {
+    renderWithI18n(renderFieldName(items[1], indexPattern.timeFieldName));
+
+    expect(await screen.findByText('Date')).toBeVisible();
+    expect(screen.getByTestId('field-name-timestamp')).toHaveTextContent('timestamp');
+    expect(screen.getByText('Primary time field')).toBeVisible();
   });
 
-  test('should render normal type', () => {
-    const tableCell = shallow(renderTable().prop('columns')[1].render('string', {}));
-    expect(tableCell).toMatchSnapshot();
+  it('should render the boolean template (true)', async () => {
+    renderTable();
+
+    expect(await screen.findByText('Is searchable')).toBeVisible();
   });
 
-  test('should render conflicting type', () => {
-    const tableCell = shallow(
-      renderTable()
-        .prop('columns')[1]
-        .render('text, long', {
-          kbnType: 'conflict',
-          conflictDescriptions: { keyword: ['index_a'], long: ['index_b'] },
-        })
+  it('should render the boolean template (false)', async () => {
+    renderTable();
+
+    expect((await screen.findByText('conflictingField')).closest('tr')).not.toHaveTextContent(
+      'Is searchable'
     );
-    expect(tableCell).toMatchSnapshot();
   });
 
-  test('should render mixed, non-conflicting type', () => {
-    const tableCell = shallow(
-      renderTable().prop('columns')[1].render('keyword, constant_keyword', {
-        kbnType: 'string',
-      })
-    );
-    expect(tableCell).toMatchSnapshot();
+  it('should render normal type', async () => {
+    renderTable();
+
+    expect((await screen.findByText('Elastic')).closest('tr')).toHaveTextContent('name');
+  });
+
+  it('should render conflicting type', async () => {
+    renderTable();
+
+    const conflictingFieldRow = (await screen.findByText('conflictingField')).closest('tr');
+    expect(conflictingFieldRow).toHaveTextContent('text, long');
+    expect(conflictingFieldRow).toHaveTextContent('Conflict');
+  });
+
+  it('should render mixed, non-conflicting type', async () => {
+    renderTable({ tableItems: [mixedTypeItem] });
+
+    const mixedTypeRow = (await screen.findByText('mixedType')).closest('tr');
+    expect(mixedTypeRow).toHaveTextContent('keyword, constant_keyword');
+    expect(mixedTypeRow).not.toHaveTextContent('Conflict');
   });
 
-  test('should allow edits', () => {
+  it('should allow edits', async () => {
+    const user = userEvent.setup();
     const editField = jest.fn();
 
-    // Click the edit button
-    renderTable({ editField }).prop('columns')[6].actions[0].onClick();
-    expect(editField).toBeCalled();
+    renderTable({ editField });
+
+    await user.click(screen.getAllByTestId('editFieldFormat')[0]);
+
+    expect(editField).toHaveBeenCalled();
   });
 
-  test('should not allow edit or deletion for user with only read access', () => {
-    const editAvailable = renderTable().prop('columns')[6].actions[0].available(items[4]);
-    const deleteAvailable = renderTable().prop('columns')[6].actions[1].available(items[4]);
-    expect(editAvailable).toBeFalsy();
-    expect(deleteAvailable).toBeFalsy();
+  it('should not allow edit or deletion for user with only read access', async () => {
+    renderTable({ tableItems: [items[4]] });
+
+    const noEditRow = (await screen.findByText('noedit')).closest('tr');
+    expect(noEditRow).toBeVisible();
+    expect(screen.queryByTestId('editFieldFormat')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('deleteField')).not.toBeInTheDocument();
   });
 
-  test('render name', () => {
-    const mappedField = {
-      name: 'customer',
-      info: [],
-      excluded: false,
-      kbnType: 'string',
-      type: 'keyword',
-      isMapped: true,
-      isUserEditable: true,
-      hasRuntime: false,
-    };
-
-    expect(renderFieldName(mappedField)).toMatchSnapshot();
-
-    const runtimeField = {
-      name: 'customer',
-      info: [],
-      excluded: false,
-      kbnType: 'string',
-      type: 'keyword',
-      isMapped: false,
-      isUserEditable: true,
+  it('render name', async () => {
+    const mappedField = createIndexedField({ name: 'customer' });
+
+    const { unmount } = renderWithI18n(renderFieldName(mappedField));
+
+    expect(await screen.findByText('String')).toBeVisible();
+    expect(screen.getByTestId('field-name-customer')).toHaveTextContent('customer');
+
+    unmount();
+
+    const runtimeField = createIndexedField({
       hasRuntime: true,
-    };
+      isMapped: false,
+      name: 'customer',
+    });
+
+    renderWithI18n(renderFieldName(runtimeField));
 
-    expect(renderFieldName(runtimeField)).toMatchSnapshot();
+    expect(await screen.findByText('String')).toBeVisible();
+    expect(screen.getByTestId('field-name-customer')).toHaveTextContent('customer');
+    expect(screen.getByText('Info')).toBeVisible();
   });
 
-  test('render conflict summary modal ', () => {
-    expect(
+  it('render conflict summary modal ', () => {
+    renderWithI18n(
       getConflictModalContent({
         closeFn: () => {},
-        fieldName: 'message',
         conflictDescriptions: { keyword: ['index_a'], long: ['index_b'] },
+        fieldName: 'message',
       })
-    ).toMatchSnapshot();
-  });
+    );
 
-  test('showDelete', () => {
-    const runtimeFields = [
-      {
-        name: 'customer',
-        info: [],
-        excluded: false,
-        kbnType: 'string',
-        type: 'keyword',
-        isMapped: false,
-        isUserEditable: true,
-        hasRuntime: true,
-        runtimeField: {
-          type: 'keyword',
-        },
-      },
-      {
-        name: 'thing',
-        info: [],
-        excluded: false,
-        kbnType: 'string',
-        type: 'keyword',
-        isMapped: false,
-        isUserEditable: true,
-        hasRuntime: true,
-        runtimeField: {
-          type: 'composite',
-        },
-      },
-    ] as IndexedFieldItem[];
+    expect(screen.getByText('This field has a type conflict')).toBeVisible();
+    expect(screen.getByText(/The type of the/)).toHaveTextContent('message');
+    expect(screen.getByText('keyword')).toBeVisible();
+    expect(screen.getByText('index_a')).toBeVisible();
+    expect(screen.getByText('long')).toBeVisible();
+    expect(screen.getByText('index_b')).toBeVisible();
+    expect(screen.getByText('Close')).toBeVisible();
+  });
 
+  it('showDelete', () => {
     // indexed field
     expect(showDelete(items[0])).toBe(false);
     // runtime field - primitive type
-    expect(showDelete(runtimeFields[0])).toBe(true);
-    // runtime field - composite type
-    expect(showDelete(runtimeFields[1])).toBe(false);
+    expect(showDelete(primitiveRuntimeField)).toBe(true);
+    // runtime field - composite subfield
+    expect(showDelete(compositeRuntimeField)).toBe(false);
+    // runtime field - composite definition
+    expect(showDelete(compositeRuntimeDefinition)).toBe(true);
   });
 });
diff --git a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/indexed_fields_table/indexed_fields_table.test.tsx b/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/indexed_fields_table/indexed_fields_table.test.tsx
index 3079c84c21410..54eedada072cf 100644
--- a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/indexed_fields_table/indexed_fields_table.test.tsx
+++ b/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/indexed_fields_table/indexed_fields_table.test.tsx
@@ -7,69 +7,15 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
+import type { RuntimeField } from '@kbn/data-views-plugin/common';
 import React from 'react';
-import type { ShallowWrapper } from 'enzyme';
-import { shallow } from 'enzyme';
 import { coreMock } from '@kbn/core/public/mocks';
-import type { DataView } from '@kbn/data-views-plugin/public';
+import { createStubDataView } from '@kbn/data-views-plugin/public/data_views/data_view.stub';
 import { DataViewField, DataViewType } from '@kbn/data-views-plugin/public';
-import { IndexedFieldsTable } from './indexed_fields_table';
 import { getFieldInfo } from '../../utils';
-import type { RuntimeField } from '@kbn/data-views-plugin/common';
-
-jest.mock('@elastic/eui', () => ({
-  EuiFlexGroup: 'eui-flex-group',
-  EuiFlexItem: 'eui-flex-item',
-  EuiIcon: 'eui-icon',
-  EuiInMemoryTable: 'eui-in-memory-table',
-}));
-
-jest.mock('./components/table', () => ({
-  // Note: this seems to fix React complaining about non lowercase attributes
-  Table: () => {
-    return 'table';
-  },
-}));
-
-const helpers = {
-  editField: (_fieldName: string) => {},
-  deleteField: (_fieldName: string[]) => {},
-  // getFieldInfo handles non rollups as well
-  getFieldInfo,
-};
-
-const indexPattern = {
-  getNonScriptedFields: () => fields,
-  getFormatterForFieldNoDefault: () => ({ params: () => ({}) }),
-} as unknown as DataView;
-
-const rollupIndexPattern = {
-  type: DataViewType.ROLLUP,
-  typeMeta: {
-    params: {
-      'rollup-index': 'rollup',
-    },
-    aggs: {
-      date_histogram: {
-        timestamp: {
-          agg: 'date_histogram',
-          fixed_interval: '30s',
-          delay: '30s',
-          time_zone: 'UTC',
-        },
-      },
-      terms: { Elastic: { agg: 'terms' } },
-      histogram: { amount: { agg: 'histogram', interval: 5 } },
-      avg: { amount: { agg: 'avg' } },
-      max: { amount: { agg: 'max' } },
-      min: { amount: { agg: 'min' } },
-      sum: { amount: { agg: 'sum' } },
-      value_count: { amount: { agg: 'value_count' } },
-    },
-  },
-  getNonScriptedFields: () => fields,
-  getFormatterForFieldNoDefault: () => ({ params: () => ({}) }),
-} as unknown as DataView;
+import { IndexedFieldsTable } from './indexed_fields_table';
+import { renderWithI18n } from '@kbn/test-jest-helpers';
+import { screen } from '@testing-library/react';
 
 const mockFieldToIndexPatternField = (
   spec: Record<string, string | string[] | boolean | undefined | RuntimeField>
@@ -78,22 +24,37 @@ const mockFieldToIndexPatternField = (
 };
 
 const runtimeField: RuntimeField = { type: 'long', script: { source: "emit('Hello');" } };
+
 const fields = [
   {
     name: 'Elastic',
     displayName: 'Elastic',
     searchable: true,
     esTypes: ['keyword'],
+    type: 'string',
+    isUserEditable: true,
+  },
+  {
+    name: 'timestamp',
+    displayName: 'timestamp',
+    esTypes: ['date'],
+    type: 'date',
     isUserEditable: true,
   },
-  { name: 'timestamp', displayName: 'timestamp', esTypes: ['date'], isUserEditable: true },
   {
     name: 'conflictingField',
     displayName: 'conflictingField',
     esTypes: ['keyword', 'long'],
+    type: 'conflict',
+    isUserEditable: true,
+  },
+  {
+    name: 'amount',
+    displayName: 'amount',
+    esTypes: ['long'],
+    type: 'number',
     isUserEditable: true,
   },
-  { name: 'amount', displayName: 'amount', esTypes: ['long'], isUserEditable: true },
   {
     name: 'runtime',
     displayName: 'runtime',
@@ -103,137 +64,147 @@ const fields = [
   },
 ].map(mockFieldToIndexPatternField);
 
-const startServices = coreMock.createStart();
+const fieldsMap = Object.fromEntries(fields.map((field) => [field.name, field.spec]));
+
+const helpers = {
+  editField: (_fieldName: string) => {},
+  deleteField: (_fieldName: string[]) => {},
+  // getFieldInfo handles non rollups as well
+  getFieldInfo,
+};
+
+const indexPattern = createStubDataView({
+  spec: {
+    title: 'test-data-view',
+    fields: fieldsMap,
+  },
+});
 
 const mockedServices = {
-  userEditPermission: false,
   openModal: () => ({ onClose: new Promise<void>(() => {}), close: async () => {} }),
-  theme: {} as any,
+  theme: {},
+  userEditPermission: false,
+};
+
+const rollupIndexPattern = createStubDataView({
+  spec: {
+    title: 'rollup-data-view',
+    fields: fieldsMap,
+    type: DataViewType.ROLLUP,
+    typeMeta: {
+      params: {
+        rollup_index: 'rollup',
+      },
+      aggs: {
+        date_histogram: {
+          timestamp: {
+            agg: 'date_histogram',
+            fixed_interval: '30s',
+            delay: '30s',
+            time_zone: 'UTC',
+          },
+        },
+        terms: { Elastic: { agg: 'terms' } },
+        histogram: { amount: { agg: 'histogram', interval: 5 } },
+        avg: { amount: { agg: 'avg' } },
+        max: { amount: { agg: 'max' } },
+        min: { amount: { agg: 'min' } },
+        sum: { amount: { agg: 'sum' } },
+        value_count: { amount: { agg: 'value_count' } },
+      },
+    },
+  },
+});
+
+const startServices = coreMock.createStart();
+
+// EUI field icons load asynchronously, so each test waits for a visible icon before
+// asserting the table contents.
+const expectFieldTypeIconVisible = async (label: string) => {
+  expect((await screen.findAllByTitle(label))[0]).toBeVisible();
+};
+
+const expectHiddenFields = (fieldNames: string[]) => {
+  fieldNames.forEach((fieldName) => {
+    expect(screen.queryByText(fieldName)).not.toBeInTheDocument();
+  });
+};
+
+const expectVisibleFields = (fieldNames: string[]) => {
+  fieldNames.forEach((fieldName) => {
+    expect(screen.getByText(fieldName)).toBeVisible();
+  });
+};
+
+const renderIndexedFieldsTable = (
+  props: Partial<React.ComponentProps<typeof IndexedFieldsTable>>
+) => {
+  renderWithI18n(
+    <IndexedFieldsTable
+      compositeRuntimeFields={{}}
+      fieldFilter=""
+      fields={fields}
+      fieldWildcardMatcher={() => {
+        return () => false;
+      }}
+      helpers={helpers}
+      indexedFieldTypeFilter={[]}
+      indexPattern={indexPattern}
+      schemaFieldTypeFilter={[]}
+      startServices={startServices}
+      {...mockedServices}
+      {...props}
+    />
+  );
 };
 
 describe('IndexedFieldsTable', () => {
-  test('should render normally', async () => {
-    const component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>> = shallow(
-      <IndexedFieldsTable
-        fields={fields}
-        indexPattern={indexPattern}
-        helpers={helpers}
-        fieldWildcardMatcher={() => {
-          return () => false;
-        }}
-        indexedFieldTypeFilter={[]}
-        schemaFieldTypeFilter={[]}
-        fieldFilter=""
-        compositeRuntimeFields={{}}
-        startServices={startServices}
-        {...mockedServices}
-      />
-    );
-
-    await new Promise((resolve) => process.nextTick(resolve));
-    component.update();
-
-    expect({ items: component.props().children.props.items }).toMatchSnapshot();
+  beforeEach(() => {
+    jest.spyOn(console, 'warn').mockImplementation(() => {}); // Silent EUI warnings during tests
   });
 
-  test('should filter based on the query bar', async () => {
-    const component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>> = shallow(
-      <IndexedFieldsTable
-        fields={fields}
-        indexPattern={indexPattern}
-        helpers={helpers}
-        fieldWildcardMatcher={() => {
-          return () => false;
-        }}
-        indexedFieldTypeFilter={[]}
-        schemaFieldTypeFilter={[]}
-        fieldFilter=""
-        compositeRuntimeFields={{}}
-        startServices={startServices}
-        {...mockedServices}
-      />
-    );
-
-    await new Promise((resolve) => process.nextTick(resolve));
-    component.setProps({ fieldFilter: 'Elast' });
-    component.update();
-
-    expect({ items: component.props().children.props.items }).toMatchSnapshot();
+  afterEach(() => {
+    jest.restoreAllMocks();
   });
 
-  test('should filter based on the type filter', async () => {
-    const component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>> = shallow(
-      <IndexedFieldsTable
-        fields={fields}
-        indexPattern={indexPattern}
-        helpers={helpers}
-        fieldWildcardMatcher={() => {
-          return () => false;
-        }}
-        indexedFieldTypeFilter={[]}
-        schemaFieldTypeFilter={[]}
-        fieldFilter=""
-        compositeRuntimeFields={{}}
-        startServices={startServices}
-        {...mockedServices}
-      />
-    );
-
-    await new Promise((resolve) => process.nextTick(resolve));
-    component.setProps({ indexedFieldTypeFilter: ['date'] });
-    component.update();
-
-    expect({ items: component.props().children.props.items }).toMatchSnapshot();
+  it('should render normally', async () => {
+    renderIndexedFieldsTable({});
+
+    await expectFieldTypeIconVisible('Keyword');
+    expect(screen.getByTestId('tableHeaderCell_displayName_0')).toBeVisible();
+    expectVisibleFields(['Elastic', 'timestamp', 'conflictingField', 'amount', 'runtime']);
   });
 
-  test('should filter based on the schema filter', async () => {
-    const component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>> = shallow(
-      <IndexedFieldsTable
-        fields={fields}
-        indexPattern={indexPattern}
-        helpers={helpers}
-        fieldWildcardMatcher={() => {
-          return () => false;
-        }}
-        indexedFieldTypeFilter={[]}
-        schemaFieldTypeFilter={[]}
-        fieldFilter=""
-        compositeRuntimeFields={{}}
-        startServices={startServices}
-        {...mockedServices}
-      />
-    );
-
-    await new Promise((resolve) => process.nextTick(resolve));
-    component.setProps({ schemaFieldTypeFilter: ['runtime'] });
-    component.update();
-
-    expect({ items: component.props().children.props.items }).toMatchSnapshot();
+  it('should filter based on the query bar', async () => {
+    renderIndexedFieldsTable({ fieldFilter: 'Elast' });
+
+    await expectFieldTypeIconVisible('Keyword');
+    expectVisibleFields(['Elastic']);
+    expectHiddenFields(['timestamp', 'conflictingField', 'amount', 'runtime']);
+  });
+
+  it('should filter based on the type filter', async () => {
+    renderIndexedFieldsTable({ indexedFieldTypeFilter: ['date'] });
+
+    await expectFieldTypeIconVisible('Date');
+    expectVisibleFields(['timestamp']);
+    expectHiddenFields(['Elastic', 'conflictingField', 'amount', 'runtime']);
+  });
+
+  it('should filter based on the schema filter', async () => {
+    renderIndexedFieldsTable({ schemaFieldTypeFilter: ['runtime'] });
+
+    await expectFieldTypeIconVisible('Number');
+    expectVisibleFields(['runtime']);
+    expectHiddenFields(['Elastic', 'timestamp', 'conflictingField', 'amount']);
   });
 
   describe('IndexedFieldsTable with rollup index pattern', () => {
-    test('should render normally', async () => {
-      const component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>> = shallow(
-        <IndexedFieldsTable
-          fields={fields}
-          indexPattern={rollupIndexPattern}
-          helpers={helpers}
-          fieldWildcardMatcher={() => {
-            return () => false;
-          }}
-          indexedFieldTypeFilter={[]}
-          schemaFieldTypeFilter={[]}
-          fieldFilter=""
-          compositeRuntimeFields={{}}
-          startServices={startServices}
-          {...mockedServices}
-        />
-      );
-
-      await new Promise((resolve) => process.nextTick(resolve));
-      component.update();
-
-      expect({ items: component.props().children.props.items }).toMatchSnapshot();
+    it('should render normally', async () => {
+      renderIndexedFieldsTable({ indexPattern: rollupIndexPattern });
+
+      await expectFieldTypeIconVisible('Keyword');
+      expectVisibleFields(['Elastic', 'timestamp', 'conflictingField', 'amount', 'runtime']);
     });
   });
 });
diff --git a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/scripted_fields_table/__snapshots__/scripted_field_table.test.tsx.snap b/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/scripted_fields_table/__snapshots__/scripted_field_table.test.tsx.snap
deleted file mode 100644
index 19172b9866085..0000000000000
--- a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/scripted_fields_table/__snapshots__/scripted_field_table.test.tsx.snap
+++ /dev/null
@@ -1,185 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ScriptedFieldsTable should filter based on the lang filter 1`] = `
-<Fragment>
-  <header />
-  <call-outs
-    deprecatedLangsInUse={
-      Array [
-        "somethingElse",
-      ]
-    }
-    painlessDocLink="painlessDoc"
-  />
-  <eui-spacer
-    size="l"
-  />
-  <Table
-    deleteField={[Function]}
-    editField={[Function]}
-    indexPattern={
-      Object {
-        "getScriptedFields": [Function],
-      }
-    }
-    items={
-      Array [
-        Object {
-          "isUserEditable": false,
-          "lang": "painless",
-          "name": "ScriptedField",
-          "script": "x++",
-        },
-        Object {
-          "isUserEditable": false,
-          "lang": "painless",
-          "name": "JustATest",
-          "script": "z++",
-        },
-      ]
-    }
-  />
-</Fragment>
-`;
-
-exports[`ScriptedFieldsTable should filter based on the query bar 1`] = `
-<Fragment>
-  <header />
-  <call-outs
-    deprecatedLangsInUse={Array []}
-    painlessDocLink="painlessDoc"
-  />
-  <eui-spacer
-    size="l"
-  />
-  <Table
-    deleteField={[Function]}
-    editField={[Function]}
-    indexPattern={
-      Object {
-        "getScriptedFields": [Function],
-      }
-    }
-    items={
-      Array [
-        Object {
-          "isUserEditable": false,
-          "lang": "painless",
-          "name": "JustATest",
-          "script": "z++",
-        },
-      ]
-    }
-  />
-</Fragment>
-`;
-
-exports[`ScriptedFieldsTable should hide the table if there are no scripted fields 1`] = `
-<Fragment>
-  <header />
-  <call-outs
-    deprecatedLangsInUse={Array []}
-    painlessDocLink="painlessDoc"
-  />
-  <eui-spacer
-    size="l"
-  />
-  <Table
-    deleteField={[Function]}
-    editField={[Function]}
-    indexPattern={
-      Object {
-        "getScriptedFields": [Function],
-      }
-    }
-    items={Array []}
-  />
-</Fragment>
-`;
-
-exports[`ScriptedFieldsTable should render normally 1`] = `
-<Fragment>
-  <header />
-  <call-outs
-    deprecatedLangsInUse={Array []}
-    painlessDocLink="painlessDoc"
-  />
-  <eui-spacer
-    size="l"
-  />
-  <Table
-    deleteField={[Function]}
-    editField={[Function]}
-    indexPattern={
-      Object {
-        "getScriptedFields": [Function],
-      }
-    }
-    items={
-      Array [
-        Object {
-          "isUserEditable": false,
-          "lang": "painless",
-          "name": "ScriptedField",
-          "script": "x++",
-        },
-        Object {
-          "isUserEditable": false,
-          "lang": "painless",
-          "name": "JustATest",
-          "script": "z++",
-        },
-      ]
-    }
-  />
-</Fragment>
-`;
-
-exports[`ScriptedFieldsTable should show a delete modal 1`] = `
-<Fragment>
-  <header />
-  <call-outs
-    deprecatedLangsInUse={Array []}
-    painlessDocLink="painlessDoc"
-  />
-  <eui-spacer
-    size="l"
-  />
-  <Table
-    deleteField={[Function]}
-    editField={[Function]}
-    indexPattern={
-      Object {
-        "getScriptedFields": [Function],
-      }
-    }
-    items={
-      Array [
-        Object {
-          "isUserEditable": false,
-          "lang": "painless",
-          "name": "ScriptedField",
-          "script": "x++",
-        },
-        Object {
-          "isUserEditable": false,
-          "lang": "painless",
-          "name": "JustATest",
-          "script": "z++",
-        },
-      ]
-    }
-  />
-  <DeleteScritpedFieldConfirmationModal
-    deleteField={[Function]}
-    field={
-      Object {
-        "lang": "",
-        "name": "ScriptedField",
-        "script": "",
-      }
-    }
-    hideDeleteConfirmationModal={[Function]}
-  />
-</Fragment>
-`;
diff --git a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/scripted_fields_table/components/call_outs/__snapshots__/call_outs.test.tsx.snap b/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/scripted_fields_table/components/call_outs/__snapshots__/call_outs.test.tsx.snap
deleted file mode 100644
index 432a526ffcafc..0000000000000
--- a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/scripted_fields_table/components/call_outs/__snapshots__/call_outs.test.tsx.snap
+++ /dev/null
@@ -1,41 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CallOuts should render normally 1`] = `
-<Fragment>
-  <EuiSpacer
-    size="m"
-  />
-  <EuiCallOut
-    color="danger"
-    iconType="cross"
-    title={
-      <Memo(MemoizedFormattedMessage)
-        defaultMessage="Deprecated languages in use"
-        id="indexPatternManagement.editIndexPattern.scripted.deprecatedLangHeader"
-      />
-    }
-  >
-    <p>
-      <MemoizedFormattedMessage
-        defaultMessage="The following deprecated languages are in use: {deprecatedLangsInUse}. Support for these languages will be removed in the next major version of Kibana and Elasticsearch. Convert your scripted fields to {link} to avoid any problems."
-        id="indexPatternManagement.editIndexPattern.scripted.deprecationLangLabel.deprecationLangDetail"
-        values={
-          Object {
-            "deprecatedLangsInUse": "php",
-            "link": <EuiLink
-              href="http://www.elastic.co/painlessDocs"
-            >
-              <Memo(MemoizedFormattedMessage)
-                defaultMessage="Painless"
-                id="indexPatternManagement.editIndexPattern.scripted.deprecationLangLabel.painlessDescription"
-              />
-            </EuiLink>,
-          }
-        }
-      />
-    </p>
-  </EuiCallOut>
-</Fragment>
-`;
-
-exports[`CallOuts should render without any call outs 1`] = `""`;
diff --git a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/scripted_fields_table/components/call_outs/call_outs.test.tsx b/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/scripted_fields_table/components/call_outs/call_outs.test.tsx
index 0e4658ea7f895..720737ff28ac2 100644
--- a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/scripted_fields_table/components/call_outs/call_outs.test.tsx
+++ b/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/scripted_fields_table/components/call_outs/call_outs.test.tsx
@@ -8,27 +8,35 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
-
 import { CallOuts } from '.';
+import { renderWithI18n } from '@kbn/test-jest-helpers';
+import { screen } from '@testing-library/react';
 
 describe('CallOuts', () => {
-  test('should render normally', () => {
-    const component = shallow(
+  it('should render normally', () => {
+    renderWithI18n(
       <CallOuts
         deprecatedLangsInUse={['php']}
         painlessDocLink="http://www.elastic.co/painlessDocs"
       />
     );
 
-    expect(component).toMatchSnapshot();
+    expect(screen.getByText('Deprecated languages in use')).toBeVisible();
+    expect(
+      screen.getByText('The following deprecated languages are in use: php.', { exact: false })
+    ).toBeVisible();
+    expect(screen.getByRole('link', { name: 'Painless' })).toHaveAttribute(
+      'href',
+      'http://www.elastic.co/painlessDocs'
+    );
   });
 
-  test('should render without any call outs', () => {
-    const component = shallow(
+  it('should render without any call outs', () => {
+    const { container } = renderWithI18n(
       <CallOuts deprecatedLangsInUse={[]} painlessDocLink="http://www.elastic.co/painlessDocs" />
     );
 
-    expect(component).toMatchSnapshot();
+    expect(container).toBeEmptyDOMElement();
+    expect(screen.queryByText('Deprecated languages in use')).not.toBeInTheDocument();
   });
 });
diff --git a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/scripted_fields_table/components/confirmation_modal/__snapshots__/confirmation_modal.test.tsx.snap b/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/scripted_fields_table/components/confirmation_modal/__snapshots__/confirmation_modal.test.tsx.snap
deleted file mode 100644
index f83f6976f0419..0000000000000
--- a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/scripted_fields_table/components/confirmation_modal/__snapshots__/confirmation_modal.test.tsx.snap
+++ /dev/null
@@ -1,18 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DeleteScritpedFieldConfirmationModal should render normally 1`] = `
-<EuiConfirmModal
-  aria-labelledby="generated-id"
-  cancelButtonText="Cancel"
-  confirmButtonText="Delete"
-  defaultFocusedButton="confirm"
-  onCancel={[Function]}
-  onConfirm={[Function]}
-  title="Delete scripted field ''?"
-  titleProps={
-    Object {
-      "id": "generated-id",
-    }
-  }
-/>
-`;
diff --git a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/scripted_fields_table/components/confirmation_modal/confirmation_modal.test.tsx b/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/scripted_fields_table/components/confirmation_modal/confirmation_modal.test.tsx
index a1aa33a0e885f..03ea124025220 100644
--- a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/scripted_fields_table/components/confirmation_modal/confirmation_modal.test.tsx
+++ b/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/scripted_fields_table/components/confirmation_modal/confirmation_modal.test.tsx
@@ -8,20 +8,20 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
-
 import { DeleteScritpedFieldConfirmationModal } from './confirmation_modal';
+import { renderWithI18n } from '@kbn/test-jest-helpers';
+import { screen } from '@testing-library/react';
 
 describe('DeleteScritpedFieldConfirmationModal', () => {
-  test('should render normally', () => {
-    const component = shallow(
+  it('should render normally', () => {
+    renderWithI18n(
       <DeleteScritpedFieldConfirmationModal
-        field={{ name: '', script: '', lang: '' }}
-        deleteField={() => {}}
-        hideDeleteConfirmationModal={() => {}}
+        deleteField={jest.fn()}
+        field={{ lang: '', name: '', script: '' }}
+        hideDeleteConfirmationModal={jest.fn()}
       />
     );
 
-    expect(component).toMatchSnapshot();
+    expect(screen.getByText("Delete scripted field ''?")).toBeVisible();
   });
 });
diff --git a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/scripted_fields_table/components/table/__snapshots__/table.test.tsx.snap b/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/scripted_fields_table/components/table/__snapshots__/table.test.tsx.snap
deleted file mode 100644
index 7905ba607b07b..0000000000000
--- a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/scripted_fields_table/components/table/__snapshots__/table.test.tsx.snap
+++ /dev/null
@@ -1,108 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Table should render normally 1`] = `
-<EuiInMemoryTable
-  columns={
-    Array [
-      Object {
-        "dataType": "string",
-        "description": "Name of the field",
-        "field": "displayName",
-        "name": "Name",
-        "sortable": true,
-        "width": "38%",
-      },
-      Object {
-        "data-test-subj": "scriptedFieldLang",
-        "dataType": "string",
-        "description": "Language used for the field",
-        "field": "lang",
-        "name": "Lang",
-        "sortable": true,
-      },
-      Object {
-        "dataType": "string",
-        "description": "Script for the field",
-        "field": "script",
-        "name": "Script",
-        "sortable": true,
-      },
-      Object {
-        "description": "Format used for the field",
-        "field": "name",
-        "name": "Format",
-        "render": [Function],
-        "sortable": false,
-      },
-      Object {
-        "actions": Array [
-          Object {
-            "available": [Function],
-            "description": "Edit this field",
-            "icon": "pencil",
-            "name": "Edit",
-            "onClick": [Function],
-            "type": "icon",
-          },
-          Object {
-            "available": [Function],
-            "color": "danger",
-            "description": "Delete this field",
-            "icon": "trash",
-            "name": "Delete",
-            "onClick": [Function],
-            "type": "icon",
-          },
-        ],
-        "name": "",
-        "width": "40px",
-      },
-    ]
-  }
-  items={
-    Array [
-      Object {
-        "isUserEditable": true,
-        "lang": "painless",
-        "name": "1",
-        "script": "",
-      },
-      Object {
-        "isUserEditable": false,
-        "lang": "painless",
-        "name": "2",
-        "script": "",
-      },
-    ]
-  }
-  onTableChange={[Function]}
-  pagination={
-    Object {
-      "pageSize": 10,
-      "pageSizeOptions": Array [
-        5,
-        10,
-        25,
-        50,
-      ],
-    }
-  }
-  searchFormat="eql"
-  sorting={
-    Object {
-      "sort": Object {
-        "direction": "asc",
-        "field": "name",
-      },
-    }
-  }
-  tableCaption="Scripted fields"
-  tableLayout="fixed"
-/>
-`;
-
-exports[`Table should render the format 1`] = `
-<span>
-  string
-</span>
-`;
diff --git a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/scripted_fields_table/components/table/table.test.tsx b/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/scripted_fields_table/components/table/table.test.tsx
index 539514a8fac8e..32a6cc160f6f5 100644
--- a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/scripted_fields_table/components/table/table.test.tsx
+++ b/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/scripted_fields_table/components/table/table.test.tsx
@@ -7,121 +7,156 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
+import type { ScriptedFieldItem } from '../../types';
 import React from 'react';
-import { shallow } from 'enzyme';
-
+import { createStubDataView } from '@kbn/data-views-plugin/public/data_views/data_view.stub';
+import { renderWithI18n } from '@kbn/test-jest-helpers';
+import { screen } from '@testing-library/react';
 import { TableWithoutPersist as Table } from './table';
-import type { ScriptedFieldItem } from '../../types';
-import type { DataView } from '@kbn/data-views-plugin/public';
-
-const getIndexPatternMock = (mockedFields: any = {}) => ({ ...mockedFields } as DataView);
-
-const items: ScriptedFieldItem[] = [
-  { name: '1', lang: 'painless', script: '', isUserEditable: true },
-  { name: '2', lang: 'painless', script: '', isUserEditable: false },
-];
+import { userEvent } from '@testing-library/user-event';
+
+const createScriptedField = ({
+  displayName,
+  ...field
+}: ScriptedFieldItem & { displayName: string }) => ({
+  displayName,
+  ...field,
+});
 
-const baseProps = {
+const baseProps: Pick<React.ComponentProps<typeof Table>, 'euiTablePersist'> = {
   euiTablePersist: {
+    onTableChange: jest.fn(),
     pageSize: 10,
-    onTableChange: () => {},
-    sorting: { sort: { direction: 'asc' as const, field: 'name' as const } },
+    sorting: { sort: { direction: 'asc', field: 'name' } },
   },
 };
 
-describe('Table', () => {
-  let indexPattern: DataView;
-
-  beforeEach(() => {
-    indexPattern = getIndexPatternMock({
-      fieldFormatMap: {
-        Elastic: {
-          type: {
-            title: 'string',
-          },
+const indexPattern = Object.assign(
+  createStubDataView({
+    spec: {
+      title: 'test-data-view',
+    },
+  }),
+  {
+    fieldFormatMap: {
+      Elastic: {
+        type: {
+          title: 'string',
         },
       },
-    });
+    },
+  }
+);
+
+const items = [
+  createScriptedField({
+    displayName: 'Elastic',
+    isUserEditable: true,
+    lang: 'painless',
+    name: 'Elastic',
+    script: "emit('one')",
+  }),
+  createScriptedField({
+    displayName: 'ReadonlyScriptedField',
+    isUserEditable: false,
+    lang: 'painless',
+    name: 'ReadonlyScriptedField',
+    script: "emit('two')",
+  }),
+];
+
+const getActionButton = (fieldName: string, buttonIndex: number) => {
+  const button = getRowByText(fieldName).querySelectorAll('button')[buttonIndex];
+
+  if (!button) {
+    throw new Error(`Unable to find action button ${buttonIndex} for field ${fieldName}`);
+  }
+
+  return button;
+};
+
+const getRowByText = (text: string) => {
+  const row = screen.getByText(text).closest('tr');
+
+  if (!row) throw new Error(`Unable to find row for ${text}`);
+
+  return row;
+};
+
+const renderTable = ({
+  deleteField = jest.fn(),
+  editField = jest.fn(),
+  tableItems = items,
+}: {
+  deleteField?: React.ComponentProps<typeof Table>['deleteField'];
+  editField?: React.ComponentProps<typeof Table>['editField'];
+  tableItems?: React.ComponentProps<typeof Table>['items'];
+} = {}) => {
+  renderWithI18n(
+    <Table
+      {...baseProps}
+      deleteField={deleteField}
+      editField={editField}
+      indexPattern={indexPattern}
+      items={tableItems}
+    />
+  );
+
+  return { deleteField, editField };
+};
+
+describe('Table', () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'warn').mockImplementation(() => {}); // Silent EUI warnings during tests
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
   });
 
-  test('should render normally', () => {
-    const component = shallow<typeof Table>(
-      <Table
-        {...baseProps}
-        indexPattern={indexPattern}
-        items={items}
-        editField={() => {}}
-        deleteField={() => {}}
-      />
-    );
-
-    expect(component).toMatchSnapshot();
+  it('should render normally', () => {
+    renderTable();
+
+    expect(screen.getByText('Elastic')).toBeVisible();
+    expect(screen.getByText('ReadonlyScriptedField')).toBeVisible();
+    expect(screen.getAllByText('painless')).toHaveLength(2);
+    expect(screen.getByText("emit('one')")).toBeVisible();
+    expect(screen.getByText("emit('two')")).toBeVisible();
   });
 
-  test('should render the format', () => {
-    const component = shallow(
-      <Table
-        {...baseProps}
-        indexPattern={indexPattern}
-        items={items}
-        editField={() => {}}
-        deleteField={() => {}}
-      />
-    );
-
-    const formatTableCell = shallow(component.prop('columns')[3].render('Elastic'));
-    expect(formatTableCell).toMatchSnapshot();
+  it('should render the format', () => {
+    renderTable();
+
+    expect(getRowByText('Elastic')).toHaveTextContent('string');
   });
 
-  test('should allow edits', () => {
+  it('should allow edits', async () => {
+    const user = userEvent.setup();
     const editField = jest.fn();
 
-    const component = shallow(
-      <Table
-        {...baseProps}
-        indexPattern={indexPattern}
-        items={items}
-        editField={editField}
-        deleteField={() => {}}
-      />
-    );
-
-    // Click the delete button
-    component.prop('columns')[4].actions[0].onClick();
-    expect(editField).toBeCalled();
+    renderTable({ editField });
+
+    await user.click(getActionButton('Elastic', 0));
+
+    expect(editField).toHaveBeenCalled();
   });
 
-  test('should allow deletes', () => {
+  it('should allow deletes', async () => {
+    const user = userEvent.setup();
     const deleteField = jest.fn();
 
-    const component = shallow(
-      <Table
-        {...baseProps}
-        indexPattern={indexPattern}
-        items={items}
-        editField={() => {}}
-        deleteField={deleteField}
-      />
-    );
-
-    // Click the delete button
-    component.prop('columns')[4].actions[1].onClick();
-    expect(deleteField).toBeCalled();
+    renderTable({ deleteField });
+
+    await user.click(getActionButton('Elastic', 1));
+
+    expect(deleteField).toHaveBeenCalled();
   });
 
-  test('should not allow edit or deletion for user with only read access', () => {
-    const component = shallow(
-      <Table
-        {...baseProps}
-        indexPattern={indexPattern}
-        items={items}
-        editField={() => {}}
-        deleteField={() => {}}
-      />
-    );
-    const editAvailable = component.prop('columns')[4].actions[0].available(items[1]);
-    const deleteAvailable = component.prop('columns')[4].actions[1].available(items[1]);
-    expect(editAvailable).toBeFalsy();
-    expect(deleteAvailable).toBeFalsy();
+  it('should not allow edit or deletion for user with only read access', () => {
+    renderTable({ tableItems: [items[1]] });
+
+    expect(screen.getByText('ReadonlyScriptedField')).toBeVisible();
+    expect(screen.queryByText('Edit')).not.toBeInTheDocument();
+    expect(screen.queryByText('Delete')).not.toBeInTheDocument();
   });
 });
diff --git a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/scripted_fields_table/scripted_field_table.test.tsx b/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/scripted_fields_table/scripted_field_table.test.tsx
index 5e1943aa894db..0c16b57fd14cd 100644
--- a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/scripted_fields_table/scripted_field_table.test.tsx
+++ b/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/scripted_fields_table/scripted_field_table.test.tsx
@@ -7,214 +7,209 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
+import type { DataView } from '@kbn/data-views-plugin/public';
+import type { FieldSpec } from '@kbn/data-views-plugin/common';
 import React from 'react';
-import type { ShallowWrapper } from 'enzyme';
-import { shallow } from 'enzyme';
-
+import userEvent from '@testing-library/user-event';
+import { createStubDataView } from '@kbn/data-views-plugin/public/data_views/data_view.stub';
+import { renderWithI18n } from '@kbn/test-jest-helpers';
+import { screen, within } from '@testing-library/react';
 import { ScriptedFieldsTable } from '.';
-import type { DataView } from '@kbn/data-views-plugin/public';
 
-jest.mock('@elastic/eui', () => ({
-  EuiTitle: 'eui-title',
-  EuiText: 'eui-text',
-  EuiHorizontalRule: 'eui-horizontal-rule',
-  EuiSpacer: 'eui-spacer',
-  EuiCallOut: 'eui-call-out',
-  EuiLink: 'eui-link',
-  EuiOverlayMask: 'eui-overlay-mask',
-  EuiConfirmModal: 'eui-confirm-modal',
-  Comparators: {
-    property: () => {},
-    default: () => {},
-  },
-}));
-jest.mock('./components/header', () => ({ Header: 'header' }));
-jest.mock('./components/call_outs', () => ({ CallOuts: 'call-outs' }));
-jest.mock('./components/table', () => ({
-  // Note: this seems to fix React complaining about non lowercase attributes
-  Table: () => {
-    return 'table';
-  },
+jest.mock('@kbn/kibana-react-plugin/public', () => ({
+  useKibana: () => ({
+    services: {
+      docLinks: {
+        links: {
+          indexPatterns: {
+            runtimeFields: '#',
+          },
+          query: {
+            queryESQL: '#',
+          },
+        },
+      },
+    },
+  }),
 }));
 
 const helpers = {
-  redirectToRoute: () => {},
-  getRouteHref: () => '#',
+  getRouteHref: jest.fn(),
+  redirectToRoute: jest.fn(),
 };
 
-const getIndexPatternMock = (mockedFields: any = {}) => ({ ...mockedFields } as DataView);
+const createDataViewWithScriptedFields = (scriptedFields: FieldSpec[]) =>
+  createStubDataView({
+    spec: {
+      title: 'test-data-view',
+      fields: Object.fromEntries(scriptedFields.map((field) => [field.name, field])),
+    },
+  });
+
+const createScriptedField = ({
+  name,
+  lang = 'painless',
+  script,
+}: {
+  name: string;
+  lang?: string;
+  script: string;
+}): FieldSpec => ({
+  aggregatable: false,
+  lang,
+  name,
+  script,
+  scripted: true,
+  searchable: false,
+  type: 'number',
+});
+
+const getDeleteButtonForField = (fieldName: string) =>
+  within(screen.getByRole('row', { name: new RegExp(fieldName) })).getAllByRole('button', {
+    name: 'Edit',
+  })[1];
 
 describe('ScriptedFieldsTable', () => {
   let indexPattern: DataView;
 
   beforeEach(() => {
-    indexPattern = getIndexPatternMock({
-      getScriptedFields: () => [
-        { isUserEditable: true, name: 'ScriptedField', lang: 'painless', script: 'x++' },
-        {
-          isUserEditable: false,
-          name: 'JustATest',
-          lang: 'painless',
-          script: 'z++',
-        },
-      ],
-    }) as DataView;
+    indexPattern = createDataViewWithScriptedFields([
+      createScriptedField({ name: 'ScriptedField', script: 'x++' }),
+      createScriptedField({ name: 'JustATest', script: 'z++' }),
+    ]);
+    jest.spyOn(console, 'warn').mockImplementation(() => {}); // Silent EUI warnings during tests
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
   });
 
-  test('should render normally', async () => {
-    const component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>> = shallow<
-      typeof ScriptedFieldsTable
-    >(
+  it('should render normally', () => {
+    renderWithI18n(
       <ScriptedFieldsTable
-        indexPattern={indexPattern}
         helpers={helpers}
+        indexPattern={indexPattern}
         painlessDocLink={'painlessDoc'}
         saveIndexPattern={async () => {}}
-        userEditPermission={false}
         scriptedFieldLanguageFilter={[]}
+        userEditPermission={false}
       />
     );
 
-    // Allow the componentWillMount code to execute
-    // https://github.com/airbnb/enzyme/issues/450
-    await component.update(); // Fire `componentWillMount()`
-    await component.update(); // Force update the component post async actions
-
-    expect(component).toMatchSnapshot();
+    expect(screen.getByText('Scripted fields are deprecated')).toBeVisible();
+    expect(screen.getByTestId('tableHeaderCell_displayName_0')).toBeVisible();
+    expect(screen.getByText('ScriptedField')).toBeVisible();
+    expect(screen.getByText('JustATest')).toBeVisible();
+    expect(screen.queryByText('Deprecated languages in use')).not.toBeInTheDocument();
   });
 
-  test('should filter based on the query bar', async () => {
-    const component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>> = shallow(
+  it('should filter based on the query bar', () => {
+    renderWithI18n(
       <ScriptedFieldsTable
-        indexPattern={indexPattern}
+        fieldFilter="Just"
         helpers={helpers}
+        indexPattern={indexPattern}
         painlessDocLink={'painlessDoc'}
         saveIndexPattern={async () => {}}
-        userEditPermission={false}
         scriptedFieldLanguageFilter={[]}
+        userEditPermission={false}
       />
     );
 
-    // Allow the componentWillMount code to execute
-    // https://github.com/airbnb/enzyme/issues/450
-    await component.update(); // Fire `componentWillMount()`
-    await component.update(); // Force update the component post async actions
-
-    component.setProps({ fieldFilter: 'Just' });
-    component.update();
-
-    expect(component).toMatchSnapshot();
+    expect(screen.queryByText('ScriptedField')).not.toBeInTheDocument();
+    expect(screen.getByText('JustATest')).toBeVisible();
   });
 
-  test('should filter based on the lang filter', async () => {
-    const component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>> = shallow<
-      typeof ScriptedFieldsTable
-    >(
+  it('should filter based on the lang filter', () => {
+    const BAD_LANG = 'somethingElse';
+    const indexPatternWithDeprecatedLang = createDataViewWithScriptedFields([
+      createScriptedField({ name: 'ScriptedField', script: 'x++' }),
+      createScriptedField({ name: 'JustATest', script: 'z++' }),
+      createScriptedField({ name: 'Bad', lang: BAD_LANG, script: 'z++' }),
+    ]);
+
+    renderWithI18n(
       <ScriptedFieldsTable
-        indexPattern={
-          getIndexPatternMock({
-            getScriptedFields: () => [
-              { isUserEditable: true, name: 'ScriptedField', lang: 'painless', script: 'x++' },
-              { isUserEditable: true, name: 'JustATest', lang: 'painless', script: 'z++' },
-              { isUserEditable: true, name: 'Bad', lang: 'somethingElse', script: 'z++' },
-            ],
-          }) as DataView
-        }
-        painlessDocLink={'painlessDoc'}
         helpers={helpers}
+        indexPattern={indexPatternWithDeprecatedLang}
+        painlessDocLink={'painlessDoc'}
         saveIndexPattern={async () => {}}
+        scriptedFieldLanguageFilter={['painless']}
         userEditPermission={false}
-        scriptedFieldLanguageFilter={[]}
       />
     );
 
-    // Allow the componentWillMount code to execute
-    // https://github.com/airbnb/enzyme/issues/450
-    await component.update(); // Fire `componentWillMount()`
-    await component.update(); // Force update the component post async actions
-
-    component.setProps({ scriptedFieldLanguageFilter: ['painless'] });
-    component.update();
-
-    expect(component).toMatchSnapshot();
+    expect(screen.getByText('Deprecated languages in use')).toBeVisible();
+    expect(
+      screen.getByText(`The following deprecated languages are in use: ${BAD_LANG}.`, {
+        exact: false,
+      })
+    ).toBeVisible();
+    expect(screen.getByText('ScriptedField')).toBeVisible();
+    expect(screen.getByText('JustATest')).toBeVisible();
+    expect(screen.queryByText('Bad')).not.toBeInTheDocument();
   });
 
-  test('should hide the table if there are no scripted fields', async () => {
-    const component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>> = shallow(
+  it('should show an empty table if there are no scripted fields', () => {
+    renderWithI18n(
       <ScriptedFieldsTable
-        indexPattern={
-          getIndexPatternMock({
-            getScriptedFields: () => [],
-          }) as DataView
-        }
-        painlessDocLink={'painlessDoc'}
         helpers={helpers}
+        indexPattern={createDataViewWithScriptedFields([])}
+        painlessDocLink={'painlessDoc'}
         saveIndexPattern={async () => {}}
-        userEditPermission={false}
         scriptedFieldLanguageFilter={[]}
+        userEditPermission={false}
       />
     );
 
-    // Allow the componentWillMount code to execute
-    // https://github.com/airbnb/enzyme/issues/450
-    await component.update(); // Fire `componentWillMount()`
-    await component.update(); // Force update the component post async actions
-
-    expect(component).toMatchSnapshot();
+    expect(screen.getByTestId('tableHeaderCell_displayName_0')).toBeVisible();
+    expect(screen.getByText('No items found')).toBeVisible();
+    expect(screen.queryByText('ScriptedField')).not.toBeInTheDocument();
+    expect(screen.queryByText('JustATest')).not.toBeInTheDocument();
   });
 
-  test('should show a delete modal', async () => {
-    const component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>> = shallow<
-      typeof ScriptedFieldsTable
-    >(
+  it('should show a delete modal', async () => {
+    const user = userEvent.setup();
+
+    renderWithI18n(
       <ScriptedFieldsTable
-        indexPattern={indexPattern}
         helpers={helpers}
+        indexPattern={indexPattern}
         painlessDocLink={'painlessDoc'}
         saveIndexPattern={async () => {}}
-        userEditPermission={false}
         scriptedFieldLanguageFilter={[]}
+        userEditPermission={true}
       />
     );
 
-    await component.update(); // Fire `componentWillMount()`
-    // @ts-expect-error lang is not valid
-    component.instance().startDeleteField({ name: 'ScriptedField', lang: '', script: '' });
-    await component.update();
+    await user.click(getDeleteButtonForField('ScriptedField'));
 
-    // Ensure the modal is visible
-    expect(component).toMatchSnapshot();
+    expect(screen.getByText("Delete scripted field 'ScriptedField'?")).toBeVisible();
   });
 
-  test('should delete a field', async () => {
-    const removeScriptedField = jest.fn();
-    const component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>> = shallow<
-      typeof ScriptedFieldsTable
-    >(
+  it('should delete a field', async () => {
+    const user = userEvent.setup();
+
+    const removeScriptedFieldSpy = jest.fn();
+    const saveIndexPatternSpy = jest.fn();
+    jest.spyOn(indexPattern, 'removeScriptedField').mockImplementation(removeScriptedFieldSpy);
+
+    renderWithI18n(
       <ScriptedFieldsTable
-        indexPattern={
-          {
-            ...indexPattern,
-            removeScriptedField,
-          } as unknown as DataView
-        }
         helpers={helpers}
+        indexPattern={indexPattern}
         painlessDocLink={'painlessDoc'}
-        saveIndexPattern={async () => {}}
-        userEditPermission={false}
+        saveIndexPattern={saveIndexPatternSpy}
         scriptedFieldLanguageFilter={[]}
+        userEditPermission={true}
       />
     );
 
-    await component.update(); // Fire `componentWillMount()`
-    // @ts-expect-error
-    component.instance().startDeleteField({ name: 'ScriptedField', lang: '', script: '' });
-
-    await component.update();
-    // @ts-expect-error
-    await component.instance().deleteField();
-    await component.update();
+    await user.click(getDeleteButtonForField('ScriptedField'));
+    expect(screen.getByText("Delete scripted field 'ScriptedField'?")).toBeVisible();
+    await user.click(screen.getByTestId('confirmModalConfirmButton'));
 
-    expect(removeScriptedField).toBeCalled();
+    expect(removeScriptedFieldSpy).toHaveBeenCalledWith('ScriptedField');
+    expect(saveIndexPatternSpy).toHaveBeenCalledWith(indexPattern);
   });
 });
diff --git a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/source_filters_table/__snapshots__/source_filters_table.test.tsx.snap b/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/source_filters_table/__snapshots__/source_filters_table.test.tsx.snap
deleted file mode 100644
index 6a2b208c47987..0000000000000
--- a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/source_filters_table/__snapshots__/source_filters_table.test.tsx.snap
+++ /dev/null
@@ -1,280 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SourceFiltersTable should add a filter 1`] = `
-<Fragment>
-  <header />
-  <AddFilter
-    onAddFilter={[Function]}
-  />
-  <eui-spacer
-    size="l"
-  />
-  <Table
-    deleteFilter={[Function]}
-    fieldWildcardMatcher={[Function]}
-    indexPattern={
-      Object {
-        "sourceFilters": Array [
-          Object {
-            "value": "tim*",
-          },
-          Object {
-            "value": "na*",
-          },
-        ],
-      }
-    }
-    isSaving={false}
-    items={
-      Array [
-        Object {
-          "clientId": 2,
-          "value": "tim*",
-        },
-        Object {
-          "clientId": 3,
-          "value": "na*",
-        },
-      ]
-    }
-    saveFilter={[Function]}
-  />
-</Fragment>
-`;
-
-exports[`SourceFiltersTable should filter based on the query bar 1`] = `
-<Fragment>
-  <header />
-  <AddFilter
-    onAddFilter={[Function]}
-  />
-  <eui-spacer
-    size="l"
-  />
-  <Table
-    deleteFilter={[Function]}
-    fieldWildcardMatcher={[Function]}
-    indexPattern={
-      Object {
-        "sourceFilters": Array [
-          Object {
-            "value": "time*",
-          },
-          Object {
-            "value": "nam*",
-          },
-          Object {
-            "value": "age*",
-          },
-        ],
-      }
-    }
-    isSaving={false}
-    items={
-      Array [
-        Object {
-          "clientId": 1,
-          "value": "time*",
-        },
-      ]
-    }
-    saveFilter={[Function]}
-  />
-</Fragment>
-`;
-
-exports[`SourceFiltersTable should remove a filter 1`] = `
-<Fragment>
-  <header />
-  <AddFilter
-    onAddFilter={[Function]}
-  />
-  <eui-spacer
-    size="l"
-  />
-  <Table
-    deleteFilter={[Function]}
-    fieldWildcardMatcher={[Function]}
-    indexPattern={
-      Object {
-        "sourceFilters": Array [
-          Object {
-            "clientId": 2,
-            "value": "na*",
-          },
-        ],
-      }
-    }
-    isSaving={false}
-    items={
-      Array [
-        Object {
-          "clientId": 3,
-          "value": "na*",
-        },
-      ]
-    }
-    saveFilter={[Function]}
-  />
-</Fragment>
-`;
-
-exports[`SourceFiltersTable should render normally 1`] = `
-<Fragment>
-  <header />
-  <AddFilter
-    onAddFilter={[Function]}
-  />
-  <eui-spacer
-    size="l"
-  />
-  <Table
-    deleteFilter={[Function]}
-    fieldWildcardMatcher={[Function]}
-    indexPattern={
-      Object {
-        "sourceFilters": Array [
-          Object {
-            "value": "time*",
-          },
-          Object {
-            "value": "nam*",
-          },
-          Object {
-            "value": "age*",
-          },
-        ],
-      }
-    }
-    isSaving={false}
-    items={
-      Array [
-        Object {
-          "clientId": 1,
-          "value": "time*",
-        },
-        Object {
-          "clientId": 2,
-          "value": "nam*",
-        },
-        Object {
-          "clientId": 3,
-          "value": "age*",
-        },
-      ]
-    }
-    saveFilter={[Function]}
-  />
-</Fragment>
-`;
-
-exports[`SourceFiltersTable should should a loading indicator when saving 1`] = `
-<Fragment>
-  <header />
-  <AddFilter
-    onAddFilter={[Function]}
-  />
-  <eui-spacer
-    size="l"
-  />
-  <Table
-    deleteFilter={[Function]}
-    fieldWildcardMatcher={[Function]}
-    indexPattern={
-      Object {
-        "sourceFilters": Array [
-          Object {
-            "value": "tim*",
-          },
-        ],
-      }
-    }
-    isSaving={true}
-    items={
-      Array [
-        Object {
-          "clientId": 1,
-          "value": "tim*",
-        },
-      ]
-    }
-    saveFilter={[Function]}
-  />
-</Fragment>
-`;
-
-exports[`SourceFiltersTable should show a delete modal 1`] = `
-<Fragment>
-  <header />
-  <AddFilter
-    onAddFilter={[Function]}
-  />
-  <eui-spacer
-    size="l"
-  />
-  <Table
-    deleteFilter={[Function]}
-    fieldWildcardMatcher={[Function]}
-    indexPattern={
-      Object {
-        "sourceFilters": Array [
-          Object {
-            "value": "tim*",
-          },
-        ],
-      }
-    }
-    isSaving={false}
-    items={
-      Array [
-        Object {
-          "clientId": 1,
-          "value": "tim*",
-        },
-      ]
-    }
-    saveFilter={[Function]}
-  />
-  <DeleteFilterConfirmationModal
-    filterToDeleteValue="tim*"
-    onCancelConfirmationModal={[Function]}
-    onDeleteFilter={[Function]}
-  />
-</Fragment>
-`;
-
-exports[`SourceFiltersTable should update a filter 1`] = `
-<Fragment>
-  <header />
-  <AddFilter
-    onAddFilter={[Function]}
-  />
-  <eui-spacer
-    size="l"
-  />
-  <Table
-    deleteFilter={[Function]}
-    fieldWildcardMatcher={[Function]}
-    indexPattern={
-      Object {
-        "sourceFilters": Array [
-          Object {
-            "clientId": 1,
-            "value": "tim*",
-          },
-        ],
-      }
-    }
-    isSaving={false}
-    items={
-      Array [
-        Object {
-          "clientId": 2,
-          "value": "tim*",
-        },
-      ]
-    }
-    saveFilter={[Function]}
-  />
-</Fragment>
-`;
diff --git a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/source_filters_table/components/confirmation_modal/__snapshots__/confirmation_modal.test.tsx.snap b/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/source_filters_table/components/confirmation_modal/__snapshots__/confirmation_modal.test.tsx.snap
deleted file mode 100644
index d3181121b75e3..0000000000000
--- a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/source_filters_table/components/confirmation_modal/__snapshots__/confirmation_modal.test.tsx.snap
+++ /dev/null
@@ -1,39 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Header should render normally 1`] = `
-<EuiConfirmModal
-  aria-labelledby="generated-id"
-  buttonColor="danger"
-  cancelButtonText={
-    <Memo(MemoizedFormattedMessage)
-      defaultMessage="Cancel"
-      id="indexPatternManagement.editIndexPattern.source.deleteFilter.cancelButtonLabel"
-    />
-  }
-  confirmButtonText={
-    <Memo(MemoizedFormattedMessage)
-      defaultMessage="Delete"
-      id="indexPatternManagement.editIndexPattern.source.deleteFilter.deleteButtonLabel"
-    />
-  }
-  defaultFocusedButton="confirm"
-  onCancel={[Function]}
-  onConfirm={[Function]}
-  title={
-    <Memo(MemoizedFormattedMessage)
-      defaultMessage="Delete field filter ''{value}''?"
-      id="indexPatternManagement.editIndexPattern.source.deleteSourceFilterLabel"
-      values={
-        Object {
-          "value": "test",
-        }
-      }
-    />
-  }
-  titleProps={
-    Object {
-      "id": "generated-id",
-    }
-  }
-/>
-`;
diff --git a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/source_filters_table/components/confirmation_modal/confirmation_modal.test.tsx b/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/source_filters_table/components/confirmation_modal/confirmation_modal.test.tsx
index 7296a77b50691..0d25db80d1f0e 100644
--- a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/source_filters_table/components/confirmation_modal/confirmation_modal.test.tsx
+++ b/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/source_filters_table/components/confirmation_modal/confirmation_modal.test.tsx
@@ -8,13 +8,13 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
-
 import { DeleteFilterConfirmationModal } from './confirmation_modal';
+import { renderWithI18n } from '@kbn/test-jest-helpers';
+import { screen } from '@testing-library/react';
 
 describe('Header', () => {
-  test('should render normally', () => {
-    const component = shallow(
+  it('should render normally', () => {
+    renderWithI18n(
       <DeleteFilterConfirmationModal
         filterToDeleteValue={'test'}
         onCancelConfirmationModal={() => {}}
@@ -22,6 +22,6 @@ describe('Header', () => {
       />
     );
 
-    expect(component).toMatchSnapshot();
+    expect(screen.getByText("Delete field filter 'test'?")).toBeVisible();
   });
 });
diff --git a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/source_filters_table/components/header/__snapshots__/header.test.tsx.snap b/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/source_filters_table/components/header/__snapshots__/header.test.tsx.snap
deleted file mode 100644
index 97486302553f5..0000000000000
--- a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/source_filters_table/components/header/__snapshots__/header.test.tsx.snap
+++ /dev/null
@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Header should render normally 1`] = `
-<Fragment>
-  <EuiText
-    size="s"
-  >
-    <p>
-      <MemoizedFormattedMessage
-        defaultMessage="Field filters can be used to exclude one or more fields when fetching a document. This happens when viewing a document in the Discover app, or with a table displaying results from a Discover session in the Dashboard app. If you have documents with large or unimportant fields you may benefit from filtering those out at this lower level."
-        id="indexPatternManagement.editIndexPattern.sourceLabel"
-      />
-    </p>
-    <p>
-      <MemoizedFormattedMessage
-        defaultMessage="Note that multi-fields will incorrectly appear as matches in the table below. These filters only actually apply to fields in the original source document, so matching multi-fields are not actually being filtered."
-        id="indexPatternManagement.editIndexPattern.source.noteLabel"
-      />
-    </p>
-  </EuiText>
-  <EuiSpacer
-    size="s"
-  />
-</Fragment>
-`;
diff --git a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/source_filters_table/components/header/header.test.tsx b/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/source_filters_table/components/header/header.test.tsx
index 83e4672cff9e4..132eb31b1cec5 100644
--- a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/source_filters_table/components/header/header.test.tsx
+++ b/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/source_filters_table/components/header/header.test.tsx
@@ -8,14 +8,23 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
-
 import { Header } from '.';
+import { renderWithI18n } from '@kbn/test-jest-helpers';
+import { screen } from '@testing-library/react';
 
 describe('Header', () => {
-  test('should render normally', () => {
-    const component = shallow(<Header />);
+  it('should render normally', () => {
+    renderWithI18n(<Header />);
 
-    expect(component).toMatchSnapshot();
+    expect(
+      screen.getByText(
+        'Field filters can be used to exclude one or more fields when fetching a document. This happens when viewing a document in the Discover app, or with a table displaying results from a Discover session in the Dashboard app. If you have documents with large or unimportant fields you may benefit from filtering those out at this lower level.'
+      )
+    ).toBeVisible();
+    expect(
+      screen.getByText(
+        'Note that multi-fields will incorrectly appear as matches in the table below. These filters only actually apply to fields in the original source document, so matching multi-fields are not actually being filtered.'
+      )
+    ).toBeVisible();
   });
 });
diff --git a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/source_filters_table/components/table/table.test.tsx b/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/source_filters_table/components/table/table.test.tsx
index 89a65123c8d3d..32571d45115c3 100644
--- a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/source_filters_table/components/table/table.test.tsx
+++ b/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/source_filters_table/components/table/table.test.tsx
@@ -57,7 +57,7 @@ describe('Table', () => {
     jest.clearAllMocks();
   });
 
-  test('renders table headers and rows', () => {
+  it('renders table headers and rows', () => {
     renderTable({ isSaving: true });
 
     expect(screen.getByRole('table')).toBeInTheDocument();
@@ -66,7 +66,7 @@ describe('Table', () => {
     expect(screen.getByText('tim*')).toBeInTheDocument();
   });
 
-  test('renders filter matches when found', () => {
+  it('renders filter matches when found', () => {
     renderTable({
       indexPattern: getIndexPatternMock(['time', 'value']),
       fieldWildcardMatcher: () => () => true,
@@ -75,7 +75,7 @@ describe('Table', () => {
     expect(screen.getByText('time, value')).toBeInTheDocument();
   });
 
-  test('renders no matches message when there are no matches', () => {
+  it('renders no matches message when there are no matches', () => {
     renderTable({
       indexPattern: getIndexPatternMock(['value']),
     });
@@ -86,7 +86,7 @@ describe('Table', () => {
   });
 
   describe('editing', () => {
-    test('shows input and save button after entering edit mode', async () => {
+    it('shows input and save button after entering edit mode', async () => {
       const user = userEvent.setup();
       renderTable();
 
@@ -96,7 +96,7 @@ describe('Table', () => {
       expect(screen.getByTestId('save_filter-tim*')).toBeInTheDocument();
     });
 
-    test('updates matches dynamically as input value changes', async () => {
+    it('updates matches dynamically as input value changes', async () => {
       const user = userEvent.setup();
       renderTable({
         indexPattern: getIndexPatternMock(['time', 'value']),
@@ -110,7 +110,7 @@ describe('Table', () => {
       expect(screen.queryByText('time, value')).not.toBeInTheDocument();
     });
 
-    test('saves edited filter when save icon is clicked and exits edit mode', async () => {
+    it('saves edited filter when save icon is clicked and exits edit mode', async () => {
       const user = userEvent.setup();
       const saveFilter = jest.fn();
       renderTable({ saveFilter });
@@ -125,7 +125,7 @@ describe('Table', () => {
     });
   });
 
-  test('allows deletes', async () => {
+  it('allows deletes', async () => {
     const user = userEvent.setup();
     const deleteFilter = jest.fn();
     renderTable({ deleteFilter });
@@ -135,7 +135,7 @@ describe('Table', () => {
     expect(deleteFilter).toHaveBeenCalledWith({ clientId: '1', value: 'tim*' });
   });
 
-  test('saves when in edit mode and Enter key is pressed', async () => {
+  it('saves when in edit mode and Enter key is pressed', async () => {
     const user = userEvent.setup();
     const saveFilter = jest.fn();
     renderTable({ saveFilter });
@@ -150,7 +150,7 @@ describe('Table', () => {
     expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
   });
 
-  test('cancels when in edit mode and Escape key is pressed', async () => {
+  it('cancels when in edit mode and Escape key is pressed', async () => {
     const user = userEvent.setup();
     const saveFilter = jest.fn();
     renderTable({ saveFilter });
diff --git a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/source_filters_table/source_filters_table.test.tsx b/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/source_filters_table/source_filters_table.test.tsx
index 4117d58051817..619f97609a635 100644
--- a/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/source_filters_table/source_filters_table.test.tsx
+++ b/src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/source_filters_table/source_filters_table.test.tsx
@@ -8,168 +8,175 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
-
+import { createStubDataView } from '@kbn/data-views-plugin/public/data_views/data_view.stub';
+import { renderWithI18n } from '@kbn/test-jest-helpers';
+import { screen, waitFor } from '@testing-library/react';
 import { SourceFiltersTable } from './source_filters_table';
-import type { DataView } from '@kbn/data-views-plugin/public';
-
-jest.mock('@elastic/eui', () => ({
-  EuiButton: 'eui-button',
-  EuiTitle: 'eui-title',
-  EuiText: 'eui-text',
-  EuiHorizontalRule: 'eui-horizontal-rule',
-  EuiSpacer: 'eui-spacer',
-  EuiCallOut: 'eui-call-out',
-  EuiLink: 'eui-link',
-  EuiOverlayMask: 'eui-overlay-mask',
-  EuiConfirmModal: 'eui-confirm-modal',
-  EuiLoadingSpinner: 'eui-loading-spinner',
-  Comparators: {
-    property: () => {},
-    default: () => {},
-  },
-}));
-
-jest.mock('./components/header', () => ({ Header: 'header' }));
-jest.mock('./components/table', () => ({
-  // Note: this seems to fix React complaining about non lowercase attributes
-  Table: () => {
-    return 'table';
-  },
-}));
-
-const getIndexPatternMock = (mockedFields: any = {}) =>
-  ({
-    sourceFilters: [{ value: 'time*' }, { value: 'nam*' }, { value: 'age*' }],
-    ...mockedFields,
-  } as DataView);
+import { userEvent } from '@testing-library/user-event';
+
+const createDataView = (
+  sourceFilters = [{ value: 'time*' }, { value: 'nam*' }, { value: 'age*' }]
+) =>
+  createStubDataView({
+    spec: {
+      fields: {
+        time: { name: 'time', type: 'date', searchable: true, aggregatable: true },
+        name: { name: 'name', type: 'string', searchable: true, aggregatable: true },
+        age: { name: 'age', type: 'number', searchable: true, aggregatable: true },
+      },
+      sourceFilters,
+      title: 'test-data-view',
+    },
+  });
+
+const fieldWildcardMatcher = (filters: string[]) => {
+  const [query = ''] = filters;
+  const normalizedQuery = query.replace('*', '');
+
+  return (field: string) => field.includes(normalizedQuery);
+};
+
+const getFilterActionButton = (filterValue: string, buttonIndex: number) => {
+  const button = getFilterRow(filterValue).querySelectorAll('button')[buttonIndex];
+
+  if (!button) {
+    throw new Error(`Unable to find action button ${buttonIndex} for filter ${filterValue}`);
+  }
+
+  return button;
+};
+
+const getFilterRow = (filterValue: string) => {
+  const row = screen.getByText(filterValue).closest('tr');
+
+  if (!row) throw new Error(`Unable to find row for filter ${filterValue}`);
+
+  return row;
+};
+
+const renderSourceFiltersTable = ({
+  filterFilter = '',
+  indexPattern = createDataView(),
+  saveIndexPattern = jest.fn(async () => {}),
+}: Partial<React.ComponentProps<typeof SourceFiltersTable>> = {}) => {
+  renderWithI18n(
+    <SourceFiltersTable
+      fieldWildcardMatcher={fieldWildcardMatcher}
+      filterFilter={filterFilter}
+      indexPattern={indexPattern}
+      saveIndexPattern={saveIndexPattern}
+    />
+  );
+
+  return { indexPattern, saveIndexPattern };
+};
 
 describe('SourceFiltersTable', () => {
-  test('should render normally', () => {
-    const component = shallow(
-      <SourceFiltersTable
-        indexPattern={getIndexPatternMock()}
-        fieldWildcardMatcher={() => {}}
-        filterFilter={''}
-        saveIndexPattern={async () => {}}
-      />
-    );
-
-    expect(component).toMatchSnapshot();
+  beforeEach(() => {
+    jest.spyOn(console, 'warn').mockImplementation(() => {}); // Silent EUI warnings during tests
   });
 
-  test('should filter based on the query bar', () => {
-    const component = shallow(
-      <SourceFiltersTable
-        indexPattern={getIndexPatternMock()}
-        fieldWildcardMatcher={() => {}}
-        filterFilter={''}
-        saveIndexPattern={async () => {}}
-      />
-    );
-
-    component.setProps({ filterFilter: 'ti' });
-    expect(component).toMatchSnapshot();
+  afterEach(() => {
+    jest.restoreAllMocks();
   });
 
-  test('should should a loading indicator when saving', () => {
-    const component = shallow(
-      <SourceFiltersTable
-        indexPattern={getIndexPatternMock({
-          sourceFilters: [{ value: 'tim*' }],
-        })}
-        filterFilter={''}
-        fieldWildcardMatcher={() => {}}
-        saveIndexPattern={async () => {}}
-      />
-    );
-
-    component.setState({ isSaving: true });
-    expect(component).toMatchSnapshot();
+  it('should render normally', () => {
+    renderSourceFiltersTable();
+
+    expect(screen.getByText('time*')).toBeVisible();
+    expect(screen.getByText('nam*')).toBeVisible();
+    expect(screen.getByText('age*')).toBeVisible();
+    expect(screen.getByTestId('fieldFilterInput')).toBeVisible();
+    expect(screen.getByText('Add')).toBeVisible();
   });
 
-  test('should show a delete modal', () => {
-    const component = shallow<SourceFiltersTable>(
-      <SourceFiltersTable
-        indexPattern={
-          getIndexPatternMock({
-            sourceFilters: [{ value: 'tim*' }],
-          }) as DataView
-        }
-        filterFilter={''}
-        fieldWildcardMatcher={() => {}}
-        saveIndexPattern={async () => {}}
-      />
-    );
-
-    component.instance().startDeleteFilter({ value: 'tim*', clientId: 1 });
-    component.update(); // We are not calling `.setState` directly so we need to re-render
-    expect(component).toMatchSnapshot();
+  it('should filter based on the query bar', () => {
+    renderSourceFiltersTable({ filterFilter: 'ti' });
+
+    expect(screen.getByText('time*')).toBeVisible();
+    expect(screen.queryByText('nam*')).not.toBeInTheDocument();
+    expect(screen.queryByText('age*')).not.toBeInTheDocument();
   });
 
-  test('should remove a filter', async () => {
+  it('should show a loading indicator when saving', async () => {
+    const user = userEvent.setup();
     const saveIndexPattern = jest.fn(async () => {});
-    const component = shallow<SourceFiltersTable>(
-      <SourceFiltersTable
-        indexPattern={
-          getIndexPatternMock({
-            sourceFilters: [{ value: 'tim*' }, { value: 'na*' }],
-          }) as DataView
-        }
-        filterFilter={''}
-        fieldWildcardMatcher={() => {}}
-        saveIndexPattern={saveIndexPattern}
-      />
-    );
-
-    component.instance().startDeleteFilter({ value: 'tim*', clientId: 1 });
-    component.update(); // We are not calling `.setState` directly so we need to re-render
-    await component.instance().deleteFilter();
-    component.update(); // We are not calling `.setState` directly so we need to re-render
 
-    expect(saveIndexPattern).toBeCalled();
-    expect(component).toMatchSnapshot();
+    renderSourceFiltersTable({
+      indexPattern: createDataView([{ value: 'tim*' }]),
+      saveIndexPattern,
+    });
+
+    await user.type(screen.getByTestId('fieldFilterInput'), 'na*');
+    await user.click(screen.getByText('Add'));
+
+    expect(saveIndexPattern).toHaveBeenCalled();
+    expect(screen.getByText('tim*')).toBeVisible();
+  });
+
+  it('should show a delete modal', async () => {
+    const user = userEvent.setup();
+    renderSourceFiltersTable({ indexPattern: createDataView([{ value: 'tim*' }]) });
+
+    await user.click(getFilterActionButton('tim*', 1));
+
+    expect(screen.getByText("Delete field filter 'tim*'?")).toBeVisible();
+  });
+
+  it('should remove a filter', async () => {
+    const user = userEvent.setup();
+    const saveIndexPattern = jest.fn(async () => {});
+
+    const { indexPattern } = renderSourceFiltersTable({
+      indexPattern: createDataView([{ value: 'tim*' }, { value: 'na*' }]),
+      saveIndexPattern,
+    });
+    await user.click(getFilterActionButton('tim*', 1));
+    await user.click(screen.getByTestId('confirmModalConfirmButton'));
+
+    expect(saveIndexPattern).toHaveBeenCalled();
+    await waitFor(() => {
+      expect(screen.queryByText('tim*')).not.toBeInTheDocument();
+    });
+
+    expect(screen.getByText('na*')).toBeVisible();
+    expect(indexPattern.sourceFilters).toEqual([{ value: 'na*', clientId: 2 }]);
   });
 
-  test('should add a filter', async () => {
+  it('should add a filter', async () => {
+    const user = userEvent.setup();
     const saveIndexPattern = jest.fn(async () => {});
-    const component = shallow<SourceFiltersTable>(
-      <SourceFiltersTable
-        indexPattern={getIndexPatternMock({
-          sourceFilters: [{ value: 'tim*' }],
-        })}
-        filterFilter={''}
-        fieldWildcardMatcher={() => {}}
-        saveIndexPattern={saveIndexPattern}
-      />
-    );
-
-    await component.instance().onAddFilter('na*');
-    component.update(); // We are not calling `.setState` directly so we need to re-render
+
+    const { indexPattern } = renderSourceFiltersTable({
+      indexPattern: createDataView([{ value: 'tim*' }]),
+      saveIndexPattern,
+    });
+
+    await user.type(screen.getByTestId('fieldFilterInput'), 'na*');
+    await user.click(screen.getByText('Add'));
 
     expect(saveIndexPattern).toBeCalled();
-    expect(component).toMatchSnapshot();
+    expect(await screen.findByText('na*')).toBeVisible();
+
+    expect(indexPattern.sourceFilters).toEqual([{ value: 'tim*' }, { value: 'na*' }]);
   });
 
-  test('should update a filter', async () => {
+  it('should update a filter', async () => {
+    const user = userEvent.setup();
     const saveIndexPattern = jest.fn(async () => {});
-    const component = shallow<SourceFiltersTable>(
-      <SourceFiltersTable
-        indexPattern={
-          getIndexPatternMock({
-            sourceFilters: [{ value: 'tim*' }],
-          }) as DataView
-        }
-        filterFilter={''}
-        fieldWildcardMatcher={() => {}}
-        saveIndexPattern={saveIndexPattern}
-      />
-    );
-
-    await component.instance().saveFilter({ clientId: 'tim*', value: 'ti*' });
-    component.update(); // We are not calling `.setState` directly so we need to re-render
+
+    const { indexPattern } = renderSourceFiltersTable({
+      indexPattern: createDataView([{ value: 'tim*' }]),
+      saveIndexPattern,
+    });
+
+    await user.click(screen.getByTestId('edit_filter-tim*'));
+    await user.clear(screen.getByTestId('filter_input_tim*'));
+    await user.type(screen.getByTestId('filter_input_tim*'), 'ti*');
+    await user.click(screen.getByTestId('save_filter-tim*'));
 
     expect(saveIndexPattern).toBeCalled();
-    expect(component).toMatchSnapshot();
+    expect(await screen.findByText('ti*')).toBeVisible();
+    expect(indexPattern.sourceFilters).toEqual([{ value: 'ti*', clientId: 1 }]);
   });
 });
diff --git a/src/platform/plugins/shared/data_view_management/public/components/field_editor/__snapshots__/field_editor.test.tsx.snap b/src/platform/plugins/shared/data_view_management/public/components/field_editor/__snapshots__/field_editor.test.tsx.snap
deleted file mode 100644
index 07a2e6ff0c270..0000000000000
--- a/src/platform/plugins/shared/data_view_management/public/components/field_editor/__snapshots__/field_editor.test.tsx.snap
+++ /dev/null
@@ -1,1455 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FieldEditor should render create new scripted field correctly 1`] = `
-<I18nProvider>
-  <eui-text>
-    <h3>
-      <MemoizedFormattedMessage
-        defaultMessage="Create scripted field"
-        id="indexPatternManagement.createHeader"
-      />
-    </h3>
-  </eui-text>
-  <eui-spacer
-    size="m"
-  />
-  <eui-form>
-    <scripting-disabled-callOut
-      isVisible={false}
-    />
-    <scripting-warning-callOut
-      isVisible={true}
-    />
-    <ScriptingHelpFlyout
-      executeScript={[Function]}
-      indexPattern={
-        Object {
-          "fields": Object {
-            "getAll": [Function],
-            "getByName": [Function],
-          },
-          "getFormatterForField": [Function],
-          "getFormatterForFieldNoDefault": [Function],
-          "setFieldCustomLabel": [Function],
-          "upsertScriptedField": [Function],
-        }
-      }
-      isVisible={false}
-      lang="painless"
-      onClose={[Function]}
-    />
-    <eui-form-row
-      error="Name is required"
-      helpText={null}
-      isInvalid={true}
-      label="Name"
-    >
-      <eui-field-text
-        data-test-subj="editorFieldName"
-        isInvalid={true}
-        onChange={[Function]}
-        placeholder="New scripted field"
-        value=""
-      />
-    </eui-form-row>
-    <eui-form-row
-      helpText={
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="Set a custom label to use when this field is displayed in Discover, Maps, and Visualize. Queries and filters don't currently support a custom label and will use the original field name."
-          id="indexPatternManagement.labelHelpText"
-        />
-      }
-      label="Custom label"
-    >
-      <eui-field-text
-        data-test-subj="editorFieldCustomLabel"
-        onChange={[Function]}
-        value=""
-      />
-    </eui-form-row>
-    <eui-form-row
-      helpText={null}
-      label="Language"
-    >
-      <eui-select
-        data-test-subj="editorFieldLang"
-        onChange={[Function]}
-        options={
-          Array [
-            Object {
-              "text": "painless",
-              "value": "painless",
-            },
-            Object {
-              "text": "testlang",
-              "value": "testlang",
-            },
-          ]
-        }
-        value="painless"
-      />
-    </eui-form-row>
-    <eui-form-row
-      label="Type"
-    >
-      <eui-select
-        data-test-subj="editorFieldType"
-        disabled={false}
-        onChange={[Function]}
-        options={
-          Array [
-            Object {
-              "text": "number",
-              "value": "number",
-            },
-            Object {
-              "text": "string",
-              "value": "string",
-            },
-            Object {
-              "text": "date",
-              "value": "date",
-            },
-            Object {
-              "text": "boolean",
-              "value": "boolean",
-            },
-          ]
-        }
-        value="number"
-      />
-    </eui-form-row>
-    <eui-form-row
-      helpText={
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="Formatting controls how values are displayed. Changing this setting might also affect the field value and highlighting in Discover."
-          id="indexPatternManagement.formatLabel"
-        />
-      }
-      label={
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="Format"
-          id="indexPatternManagement.formatHeader"
-        />
-      }
-    >
-      <eui-select
-        data-test-subj="editorSelectedFormatId"
-        onChange={[Function]}
-        options={
-          Array [
-            Object {
-              "text": "- Default -",
-              "value": "",
-            },
-            Object {
-              "text": undefined,
-              "value": "",
-            },
-          ]
-        }
-      />
-    </eui-form-row>
-    <eui-form-row
-      label="Popularity"
-    >
-      <eui-field-number
-        data-test-subj="editorFieldCount"
-        onChange={[Function]}
-      />
-    </eui-form-row>
-    <eui-form-row
-      error={
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="Script is required"
-          id="indexPatternManagement.scriptRequiredErrorMessage"
-        />
-      }
-      fullWidth={true}
-      isInvalid={true}
-      label="Script"
-    >
-      <code-editor
-        aria-label="Script editor"
-        data-test-subj="editorFieldScript"
-        height="300px"
-        languageId="painless"
-        onChange={[Function]}
-        value=""
-        width="100%"
-      />
-    </eui-form-row>
-    <eui-form-row>
-      <eui-text>
-        <MemoizedFormattedMessage
-          defaultMessage="Access fields with {code}."
-          id="indexPatternManagement.script.accessWithLabel"
-          values={
-            Object {
-              "code": <code>
-                doc['some_field'].value
-              </code>,
-            }
-          }
-        />
-      </eui-text>
-      <br />
-      <eui-link
-        data-test-subj="scriptedFieldsHelpLink"
-        onClick={[Function]}
-      >
-        <MemoizedFormattedMessage
-          defaultMessage="Get help with the syntax and preview the results of your script."
-          id="indexPatternManagement.script.getHelpLabel"
-        />
-      </eui-link>
-    </eui-form-row>
-    <eui-form-row>
-      <eui-flex-group>
-        <eui-flex-item
-          grow={false}
-        >
-          <eui-button
-            data-test-subj="fieldSaveButton"
-            fill={true}
-            isDisabled={true}
-            isLoading={false}
-            onClick={[Function]}
-          >
-            <MemoizedFormattedMessage
-              defaultMessage="Create field"
-              id="indexPatternManagement.actions.createButton"
-            />
-          </eui-button>
-        </eui-flex-item>
-        <eui-flex-item
-          grow={false}
-        >
-          <eui-button-empty
-            data-test-subj="fieldCancelButton"
-            onClick={[Function]}
-          >
-            <MemoizedFormattedMessage
-              defaultMessage="Cancel"
-              id="indexPatternManagement.actions.cancelButton"
-            />
-          </eui-button-empty>
-        </eui-flex-item>
-      </eui-flex-group>
-    </eui-form-row>
-  </eui-form>
-  <eui-spacer
-    size="l"
-  />
-</I18nProvider>
-`;
-
-exports[`FieldEditor should render edit scripted field correctly 1`] = `
-<I18nProvider>
-  <eui-text>
-    <h3>
-      <MemoizedFormattedMessage
-        defaultMessage="Edit {fieldName}"
-        id="indexPatternManagement.editHeader"
-        values={
-          Object {
-            "fieldName": "test",
-          }
-        }
-      />
-    </h3>
-  </eui-text>
-  <eui-spacer
-    size="m"
-  />
-  <eui-form>
-    <scripting-disabled-callOut
-      isVisible={false}
-    />
-    <scripting-warning-callOut
-      isVisible={true}
-    />
-    <ScriptingHelpFlyout
-      executeScript={[Function]}
-      indexPattern={
-        Object {
-          "fields": Object {
-            "getAll": [Function],
-            "getByName": [Function],
-          },
-          "getFormatterForField": [Function],
-          "getFormatterForFieldNoDefault": [Function],
-          "setFieldCustomLabel": [Function],
-          "upsertScriptedField": [Function],
-        }
-      }
-      isVisible={false}
-      lang="painless"
-      name="test"
-      onClose={[Function]}
-      script="doc.test.value"
-    />
-    <eui-form-row
-      helpText={
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="Set a custom label to use when this field is displayed in Discover, Maps, and Visualize. Queries and filters don't currently support a custom label and will use the original field name."
-          id="indexPatternManagement.labelHelpText"
-        />
-      }
-      label="Custom label"
-    >
-      <eui-field-text
-        data-test-subj="editorFieldCustomLabel"
-        onChange={[Function]}
-        placeholder="test"
-        value=""
-      />
-    </eui-form-row>
-    <eui-form-row
-      helpText={null}
-      label="Language"
-    >
-      <eui-select
-        data-test-subj="editorFieldLang"
-        onChange={[Function]}
-        options={
-          Array [
-            Object {
-              "text": "painless",
-              "value": "painless",
-            },
-            Object {
-              "text": "testlang",
-              "value": "testlang",
-            },
-          ]
-        }
-        value="painless"
-      />
-    </eui-form-row>
-    <eui-form-row
-      label="Type"
-    >
-      <eui-select
-        data-test-subj="editorFieldType"
-        disabled={false}
-        onChange={[Function]}
-        options={
-          Array [
-            Object {
-              "text": "number",
-              "value": "number",
-            },
-            Object {
-              "text": "string",
-              "value": "string",
-            },
-            Object {
-              "text": "date",
-              "value": "date",
-            },
-            Object {
-              "text": "boolean",
-              "value": "boolean",
-            },
-          ]
-        }
-        value="number"
-      />
-    </eui-form-row>
-    <eui-form-row
-      helpText={
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="Formatting controls how values are displayed. Changing this setting might also affect the field value and highlighting in Discover."
-          id="indexPatternManagement.formatLabel"
-        />
-      }
-      label={
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="Format"
-          id="indexPatternManagement.formatHeader"
-        />
-      }
-    >
-      <eui-select
-        data-test-subj="editorSelectedFormatId"
-        onChange={[Function]}
-        options={
-          Array [
-            Object {
-              "text": "- Default -",
-              "value": "",
-            },
-            Object {
-              "text": undefined,
-              "value": "",
-            },
-          ]
-        }
-      />
-    </eui-form-row>
-    <eui-form-row
-      label="Popularity"
-    >
-      <eui-field-number
-        data-test-subj="editorFieldCount"
-        onChange={[Function]}
-      />
-    </eui-form-row>
-    <eui-form-row
-      error={null}
-      fullWidth={true}
-      isInvalid={false}
-      label="Script"
-    >
-      <code-editor
-        aria-label="Script editor"
-        data-test-subj="editorFieldScript"
-        height="300px"
-        languageId="painless"
-        onChange={[Function]}
-        value="doc.test.value"
-        width="100%"
-      />
-    </eui-form-row>
-    <eui-form-row>
-      <eui-text>
-        <MemoizedFormattedMessage
-          defaultMessage="Access fields with {code}."
-          id="indexPatternManagement.script.accessWithLabel"
-          values={
-            Object {
-              "code": <code>
-                doc['some_field'].value
-              </code>,
-            }
-          }
-        />
-      </eui-text>
-      <br />
-      <eui-link
-        data-test-subj="scriptedFieldsHelpLink"
-        onClick={[Function]}
-      >
-        <MemoizedFormattedMessage
-          defaultMessage="Get help with the syntax and preview the results of your script."
-          id="indexPatternManagement.script.getHelpLabel"
-        />
-      </eui-link>
-    </eui-form-row>
-    <eui-form-row>
-      <eui-flex-group>
-        <eui-flex-item
-          grow={false}
-        >
-          <eui-button
-            data-test-subj="fieldSaveButton"
-            fill={true}
-            isDisabled={false}
-            isLoading={false}
-            onClick={[Function]}
-          >
-            <MemoizedFormattedMessage
-              defaultMessage="Save field"
-              id="indexPatternManagement.actions.saveButton"
-            />
-          </eui-button>
-        </eui-flex-item>
-        <eui-flex-item
-          grow={false}
-        >
-          <eui-button-empty
-            data-test-subj="fieldCancelButton"
-            onClick={[Function]}
-          >
-            <MemoizedFormattedMessage
-              defaultMessage="Cancel"
-              id="indexPatternManagement.actions.cancelButton"
-            />
-          </eui-button-empty>
-        </eui-flex-item>
-        <eui-flex-item>
-          <eui-flex-group
-            justifyContent="flexEnd"
-          >
-            <eui-flex-item
-              grow={false}
-            >
-              <eui-button-empty
-                color="danger"
-                onClick={[Function]}
-              >
-                <MemoizedFormattedMessage
-                  defaultMessage="Delete"
-                  id="indexPatternManagement.actions.deleteButton"
-                />
-              </eui-button-empty>
-            </eui-flex-item>
-          </eui-flex-group>
-        </eui-flex-item>
-      </eui-flex-group>
-    </eui-form-row>
-  </eui-form>
-  <eui-spacer
-    size="l"
-  />
-</I18nProvider>
-`;
-
-exports[`FieldEditor should show conflict field warning 1`] = `
-<I18nProvider>
-  <eui-text>
-    <h3>
-      <MemoizedFormattedMessage
-        defaultMessage="Create scripted field"
-        id="indexPatternManagement.createHeader"
-      />
-    </h3>
-  </eui-text>
-  <eui-spacer
-    size="m"
-  />
-  <eui-form>
-    <scripting-disabled-callOut
-      isVisible={false}
-    />
-    <scripting-warning-callOut
-      isVisible={true}
-    />
-    <ScriptingHelpFlyout
-      executeScript={[Function]}
-      indexPattern={
-        Object {
-          "fields": Object {
-            "getAll": [Function],
-            "getByName": [Function],
-          },
-          "getFormatterForField": [Function],
-          "getFormatterForFieldNoDefault": [Function],
-          "setFieldCustomLabel": [Function],
-          "upsertScriptedField": [Function],
-        }
-      }
-      isVisible={false}
-      lang="painless"
-      name="foobar"
-      onClose={[Function]}
-    />
-    <eui-form-row
-      error={false}
-      helpText={
-        <span>
-          <eui-icon
-            color="warning"
-            size="s"
-            type="warning"
-          />
-           
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="{mappingConflict} You already have a field with the name {fieldName}. Naming your scripted field with the same name means you won't be able to query both fields at the same time."
-            id="indexPatternManagement.mappingConflictLabel.mappingConflictDetail"
-            values={
-              Object {
-                "fieldName": <eui-code>
-                  foobar
-                </eui-code>,
-                "mappingConflict": <strong>
-                  <Memo(MemoizedFormattedMessage)
-                    defaultMessage="Mapping Conflict:"
-                    id="indexPatternManagement.mappingConflictLabel.mappingConflictLabel"
-                  />
-                </strong>,
-              }
-            }
-          />
-        </span>
-      }
-      isInvalid={false}
-      label="Name"
-    >
-      <eui-field-text
-        data-test-subj="editorFieldName"
-        isInvalid={false}
-        onChange={[Function]}
-        placeholder="New scripted field"
-        value="foobar"
-      />
-    </eui-form-row>
-    <eui-form-row
-      helpText={
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="Set a custom label to use when this field is displayed in Discover, Maps, and Visualize. Queries and filters don't currently support a custom label and will use the original field name."
-          id="indexPatternManagement.labelHelpText"
-        />
-      }
-      label="Custom label"
-    >
-      <eui-field-text
-        data-test-subj="editorFieldCustomLabel"
-        onChange={[Function]}
-        placeholder="foobar"
-        value=""
-      />
-    </eui-form-row>
-    <eui-form-row
-      helpText={null}
-      label="Language"
-    >
-      <eui-select
-        data-test-subj="editorFieldLang"
-        onChange={[Function]}
-        options={
-          Array [
-            Object {
-              "text": "painless",
-              "value": "painless",
-            },
-            Object {
-              "text": "testlang",
-              "value": "testlang",
-            },
-          ]
-        }
-        value="painless"
-      />
-    </eui-form-row>
-    <eui-form-row
-      label="Type"
-    >
-      <eui-select
-        data-test-subj="editorFieldType"
-        disabled={false}
-        onChange={[Function]}
-        options={
-          Array [
-            Object {
-              "text": "number",
-              "value": "number",
-            },
-            Object {
-              "text": "string",
-              "value": "string",
-            },
-            Object {
-              "text": "date",
-              "value": "date",
-            },
-            Object {
-              "text": "boolean",
-              "value": "boolean",
-            },
-          ]
-        }
-        value="number"
-      />
-    </eui-form-row>
-    <eui-form-row
-      helpText={
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="Formatting controls how values are displayed. Changing this setting might also affect the field value and highlighting in Discover."
-          id="indexPatternManagement.formatLabel"
-        />
-      }
-      label={
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="Format"
-          id="indexPatternManagement.formatHeader"
-        />
-      }
-    >
-      <eui-select
-        data-test-subj="editorSelectedFormatId"
-        onChange={[Function]}
-        options={
-          Array [
-            Object {
-              "text": "- Default -",
-              "value": "",
-            },
-            Object {
-              "text": undefined,
-              "value": "",
-            },
-          ]
-        }
-      />
-    </eui-form-row>
-    <eui-form-row
-      label="Popularity"
-    >
-      <eui-field-number
-        data-test-subj="editorFieldCount"
-        onChange={[Function]}
-      />
-    </eui-form-row>
-    <eui-form-row
-      error={
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="Script is required"
-          id="indexPatternManagement.scriptRequiredErrorMessage"
-        />
-      }
-      fullWidth={true}
-      isInvalid={true}
-      label="Script"
-    >
-      <code-editor
-        aria-label="Script editor"
-        data-test-subj="editorFieldScript"
-        height="300px"
-        languageId="painless"
-        onChange={[Function]}
-        value=""
-        width="100%"
-      />
-    </eui-form-row>
-    <eui-form-row>
-      <eui-text>
-        <MemoizedFormattedMessage
-          defaultMessage="Access fields with {code}."
-          id="indexPatternManagement.script.accessWithLabel"
-          values={
-            Object {
-              "code": <code>
-                doc['some_field'].value
-              </code>,
-            }
-          }
-        />
-      </eui-text>
-      <br />
-      <eui-link
-        data-test-subj="scriptedFieldsHelpLink"
-        onClick={[Function]}
-      >
-        <MemoizedFormattedMessage
-          defaultMessage="Get help with the syntax and preview the results of your script."
-          id="indexPatternManagement.script.getHelpLabel"
-        />
-      </eui-link>
-    </eui-form-row>
-    <eui-form-row>
-      <eui-flex-group>
-        <eui-flex-item
-          grow={false}
-        >
-          <eui-button
-            data-test-subj="fieldSaveButton"
-            fill={true}
-            isDisabled={true}
-            isLoading={false}
-            onClick={[Function]}
-          >
-            <MemoizedFormattedMessage
-              defaultMessage="Create field"
-              id="indexPatternManagement.actions.createButton"
-            />
-          </eui-button>
-        </eui-flex-item>
-        <eui-flex-item
-          grow={false}
-        >
-          <eui-button-empty
-            data-test-subj="fieldCancelButton"
-            onClick={[Function]}
-          >
-            <MemoizedFormattedMessage
-              defaultMessage="Cancel"
-              id="indexPatternManagement.actions.cancelButton"
-            />
-          </eui-button-empty>
-        </eui-flex-item>
-      </eui-flex-group>
-    </eui-form-row>
-  </eui-form>
-  <eui-spacer
-    size="l"
-  />
-</I18nProvider>
-`;
-
-exports[`FieldEditor should show deprecated lang warning 1`] = `
-<I18nProvider>
-  <eui-text>
-    <h3>
-      <MemoizedFormattedMessage
-        defaultMessage="Edit {fieldName}"
-        id="indexPatternManagement.editHeader"
-        values={
-          Object {
-            "fieldName": "test",
-          }
-        }
-      />
-    </h3>
-  </eui-text>
-  <eui-spacer
-    size="m"
-  />
-  <eui-form>
-    <scripting-disabled-callOut
-      isVisible={false}
-    />
-    <scripting-warning-callOut
-      isVisible={true}
-    />
-    <ScriptingHelpFlyout
-      executeScript={[Function]}
-      indexPattern={
-        Object {
-          "fields": Object {
-            "getAll": [Function],
-            "getByName": [Function],
-          },
-          "getFormatterForField": [Function],
-          "getFormatterForFieldNoDefault": [Function],
-          "setFieldCustomLabel": [Function],
-          "upsertScriptedField": [Function],
-        }
-      }
-      isVisible={false}
-      lang="testlang"
-      name="test"
-      onClose={[Function]}
-      script="doc.test.value"
-    />
-    <eui-form-row
-      helpText={
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="Set a custom label to use when this field is displayed in Discover, Maps, and Visualize. Queries and filters don't currently support a custom label and will use the original field name."
-          id="indexPatternManagement.labelHelpText"
-        />
-      }
-      label="Custom label"
-    >
-      <eui-field-text
-        data-test-subj="editorFieldCustomLabel"
-        onChange={[Function]}
-        placeholder="test"
-        value=""
-      />
-    </eui-form-row>
-    <eui-form-row
-      helpText={
-        <span>
-          <eui-icon
-            color="warning"
-            size="s"
-            type="warning"
-          />
-           
-          <strong>
-            <Memo(MemoizedFormattedMessage)
-              defaultMessage="Deprecation Warning:"
-              id="indexPatternManagement.warningHeader"
-            />
-          </strong>
-           
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="{language} is deprecated and support will be removed in the next major version of Kibana and Elasticsearch. We recommend using {painlessLink} for new scripted fields."
-            id="indexPatternManagement.warningLabel.warningDetail"
-            values={
-              Object {
-                "language": <eui-code>
-                  testlang
-                </eui-code>,
-                "painlessLink": <eui-link
-                  target="_blank"
-                >
-                  <Memo(MemoizedFormattedMessage)
-                    defaultMessage="Painless"
-                    id="indexPatternManagement.warningLabel.painlessLinkLabel"
-                  />
-                </eui-link>,
-              }
-            }
-          />
-        </span>
-      }
-      label="Language"
-    >
-      <eui-select
-        data-test-subj="editorFieldLang"
-        onChange={[Function]}
-        options={
-          Array [
-            Object {
-              "text": "painless",
-              "value": "painless",
-            },
-            Object {
-              "text": "testlang",
-              "value": "testlang",
-            },
-          ]
-        }
-        value="testlang"
-      />
-    </eui-form-row>
-    <eui-form-row
-      label="Type"
-    >
-      <eui-select
-        data-test-subj="editorFieldType"
-        disabled={false}
-        onChange={[Function]}
-        options={
-          Array [
-            Object {
-              "text": "string",
-              "value": "string",
-            },
-            Object {
-              "text": "number",
-              "value": "number",
-            },
-            Object {
-              "text": "number_range",
-              "value": "number_range",
-            },
-            Object {
-              "text": "date",
-              "value": "date",
-            },
-            Object {
-              "text": "date_range",
-              "value": "date_range",
-            },
-            Object {
-              "text": "ip",
-              "value": "ip",
-            },
-            Object {
-              "text": "ip_range",
-              "value": "ip_range",
-            },
-            Object {
-              "text": "boolean",
-              "value": "boolean",
-            },
-            Object {
-              "text": "object",
-              "value": "object",
-            },
-            Object {
-              "text": "nested",
-              "value": "nested",
-            },
-            Object {
-              "text": "geo_point",
-              "value": "geo_point",
-            },
-            Object {
-              "text": "geo_shape",
-              "value": "geo_shape",
-            },
-            Object {
-              "text": "attachment",
-              "value": "attachment",
-            },
-            Object {
-              "text": "murmur3",
-              "value": "murmur3",
-            },
-            Object {
-              "text": "_source",
-              "value": "_source",
-            },
-            Object {
-              "text": "histogram",
-              "value": "histogram",
-            },
-            Object {
-              "text": "exponential_histogram",
-              "value": "exponential_histogram",
-            },
-            Object {
-              "text": "tdigest",
-              "value": "tdigest",
-            },
-            Object {
-              "text": "flattened",
-              "value": "flattened",
-            },
-            Object {
-              "text": "conflict",
-              "value": "conflict",
-            },
-            Object {
-              "text": "null",
-              "value": "null",
-            },
-            Object {
-              "text": "unknown",
-              "value": "unknown",
-            },
-          ]
-        }
-        value="number"
-      />
-    </eui-form-row>
-    <eui-form-row
-      helpText={
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="Formatting controls how values are displayed. Changing this setting might also affect the field value and highlighting in Discover."
-          id="indexPatternManagement.formatLabel"
-        />
-      }
-      label={
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="Format"
-          id="indexPatternManagement.formatHeader"
-        />
-      }
-    >
-      <eui-select
-        data-test-subj="editorSelectedFormatId"
-        onChange={[Function]}
-        options={
-          Array [
-            Object {
-              "text": "- Default -",
-              "value": "",
-            },
-            Object {
-              "text": undefined,
-              "value": "",
-            },
-          ]
-        }
-      />
-    </eui-form-row>
-    <eui-form-row
-      label="Popularity"
-    >
-      <eui-field-number
-        data-test-subj="editorFieldCount"
-        onChange={[Function]}
-      />
-    </eui-form-row>
-    <eui-form-row
-      error={null}
-      fullWidth={true}
-      isInvalid={false}
-      label="Script"
-    >
-      <code-editor
-        aria-label="Script editor"
-        data-test-subj="editorFieldScript"
-        height="300px"
-        languageId="painless"
-        onChange={[Function]}
-        value="doc.test.value"
-        width="100%"
-      />
-    </eui-form-row>
-    <eui-form-row>
-      <eui-text>
-        <MemoizedFormattedMessage
-          defaultMessage="Access fields with {code}."
-          id="indexPatternManagement.script.accessWithLabel"
-          values={
-            Object {
-              "code": <code>
-                doc['some_field'].value
-              </code>,
-            }
-          }
-        />
-      </eui-text>
-      <br />
-      <eui-link
-        data-test-subj="scriptedFieldsHelpLink"
-        onClick={[Function]}
-      >
-        <MemoizedFormattedMessage
-          defaultMessage="Get help with the syntax and preview the results of your script."
-          id="indexPatternManagement.script.getHelpLabel"
-        />
-      </eui-link>
-    </eui-form-row>
-    <eui-form-row>
-      <eui-flex-group>
-        <eui-flex-item
-          grow={false}
-        >
-          <eui-button
-            data-test-subj="fieldSaveButton"
-            fill={true}
-            isDisabled={false}
-            isLoading={false}
-            onClick={[Function]}
-          >
-            <MemoizedFormattedMessage
-              defaultMessage="Save field"
-              id="indexPatternManagement.actions.saveButton"
-            />
-          </eui-button>
-        </eui-flex-item>
-        <eui-flex-item
-          grow={false}
-        >
-          <eui-button-empty
-            data-test-subj="fieldCancelButton"
-            onClick={[Function]}
-          >
-            <MemoizedFormattedMessage
-              defaultMessage="Cancel"
-              id="indexPatternManagement.actions.cancelButton"
-            />
-          </eui-button-empty>
-        </eui-flex-item>
-        <eui-flex-item>
-          <eui-flex-group
-            justifyContent="flexEnd"
-          >
-            <eui-flex-item
-              grow={false}
-            >
-              <eui-button-empty
-                color="danger"
-                onClick={[Function]}
-              >
-                <MemoizedFormattedMessage
-                  defaultMessage="Delete"
-                  id="indexPatternManagement.actions.deleteButton"
-                />
-              </eui-button-empty>
-            </eui-flex-item>
-          </eui-flex-group>
-        </eui-flex-item>
-      </eui-flex-group>
-    </eui-form-row>
-  </eui-form>
-  <eui-spacer
-    size="l"
-  />
-</I18nProvider>
-`;
-
-exports[`FieldEditor should show multiple type field warning with a table containing indices 1`] = `
-<I18nProvider>
-  <eui-text>
-    <h3>
-      <MemoizedFormattedMessage
-        defaultMessage="Create scripted field"
-        id="indexPatternManagement.createHeader"
-      />
-    </h3>
-  </eui-text>
-  <eui-spacer
-    size="m"
-  />
-  <eui-form>
-    <scripting-disabled-callOut
-      isVisible={false}
-    />
-    <scripting-warning-callOut
-      isVisible={true}
-    />
-    <ScriptingHelpFlyout
-      executeScript={[Function]}
-      indexPattern={
-        Object {
-          "fields": Object {
-            "getAll": [Function],
-            "getByName": [Function],
-          },
-          "getFormatterForField": [Function],
-          "getFormatterForFieldNoDefault": [Function],
-          "setFieldCustomLabel": [Function],
-          "upsertScriptedField": [Function],
-        }
-      }
-      isVisible={false}
-      lang="painless"
-      name="foobar"
-      onClose={[Function]}
-    />
-    <eui-form-row
-      error={false}
-      helpText={
-        <span>
-          <eui-icon
-            color="warning"
-            size="s"
-            type="warning"
-          />
-           
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="{mappingConflict} You already have a field with the name {fieldName}. Naming your scripted field with the same name means you won't be able to query both fields at the same time."
-            id="indexPatternManagement.mappingConflictLabel.mappingConflictDetail"
-            values={
-              Object {
-                "fieldName": <eui-code>
-                  foobar
-                </eui-code>,
-                "mappingConflict": <strong>
-                  <Memo(MemoizedFormattedMessage)
-                    defaultMessage="Mapping Conflict:"
-                    id="indexPatternManagement.mappingConflictLabel.mappingConflictLabel"
-                  />
-                </strong>,
-              }
-            }
-          />
-        </span>
-      }
-      isInvalid={false}
-      label="Name"
-    >
-      <eui-field-text
-        data-test-subj="editorFieldName"
-        isInvalid={false}
-        onChange={[Function]}
-        placeholder="New scripted field"
-        value="foobar"
-      />
-    </eui-form-row>
-    <eui-form-row
-      helpText={
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="Set a custom label to use when this field is displayed in Discover, Maps, and Visualize. Queries and filters don't currently support a custom label and will use the original field name."
-          id="indexPatternManagement.labelHelpText"
-        />
-      }
-      label="Custom label"
-    >
-      <eui-field-text
-        data-test-subj="editorFieldCustomLabel"
-        onChange={[Function]}
-        placeholder="foobar"
-        value=""
-      />
-    </eui-form-row>
-    <eui-form-row
-      helpText={null}
-      label="Language"
-    >
-      <eui-select
-        data-test-subj="editorFieldLang"
-        onChange={[Function]}
-        options={
-          Array [
-            Object {
-              "text": "painless",
-              "value": "painless",
-            },
-            Object {
-              "text": "testlang",
-              "value": "testlang",
-            },
-          ]
-        }
-        value="painless"
-      />
-    </eui-form-row>
-    <eui-form-row
-      label="Type"
-    >
-      <eui-select
-        data-test-subj="editorFieldType"
-        disabled={false}
-        onChange={[Function]}
-        options={
-          Array [
-            Object {
-              "text": "number",
-              "value": "number",
-            },
-            Object {
-              "text": "string",
-              "value": "string",
-            },
-            Object {
-              "text": "date",
-              "value": "date",
-            },
-            Object {
-              "text": "boolean",
-              "value": "boolean",
-            },
-          ]
-        }
-        value="number"
-      />
-    </eui-form-row>
-    <div>
-      <eui-spacer
-        size="m"
-      />
-      <eui-call-out
-        color="warning"
-        iconType="warning"
-        size="s"
-        title={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="Field type conflict"
-            id="indexPatternManagement.fieldTypeConflict"
-          />
-        }
-      >
-        <MemoizedFormattedMessage
-          defaultMessage="The type of this field changes across indices. It is unavailable for many analysis functions. The indices per type are as follows:"
-          id="indexPatternManagement.multiTypeLabelDesc"
-        />
-      </eui-call-out>
-      <eui-spacer
-        size="m"
-      />
-      <eui-basic-table
-        columns={
-          Array [
-            Object {
-              "field": "type",
-              "name": "Type",
-              "width": "100px",
-            },
-            Object {
-              "field": "indices",
-              "name": "Index names",
-            },
-          ]
-        }
-        items={
-          Array [
-            Object {
-              "indices": "index_name_1, index_name_2",
-              "type": "long",
-            },
-            Object {
-              "indices": "index_name_3",
-              "type": "text",
-            },
-          ]
-        }
-        tableCaption="Indices listed by conflicting field type"
-      />
-      <eui-spacer
-        size="m"
-      />
-    </div>
-    <eui-form-row
-      helpText={
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="Formatting controls how values are displayed. Changing this setting might also affect the field value and highlighting in Discover."
-          id="indexPatternManagement.formatLabel"
-        />
-      }
-      label={
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="Format"
-          id="indexPatternManagement.formatHeader"
-        />
-      }
-    >
-      <eui-select
-        data-test-subj="editorSelectedFormatId"
-        onChange={[Function]}
-        options={
-          Array [
-            Object {
-              "text": "- Default -",
-              "value": "",
-            },
-            Object {
-              "text": undefined,
-              "value": "",
-            },
-          ]
-        }
-      />
-    </eui-form-row>
-    <eui-form-row
-      label="Popularity"
-    >
-      <eui-field-number
-        data-test-subj="editorFieldCount"
-        onChange={[Function]}
-      />
-    </eui-form-row>
-    <eui-form-row
-      error={
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="Script is required"
-          id="indexPatternManagement.scriptRequiredErrorMessage"
-        />
-      }
-      fullWidth={true}
-      isInvalid={true}
-      label="Script"
-    >
-      <code-editor
-        aria-label="Script editor"
-        data-test-subj="editorFieldScript"
-        height="300px"
-        languageId="painless"
-        onChange={[Function]}
-        value=""
-        width="100%"
-      />
-    </eui-form-row>
-    <eui-form-row>
-      <eui-text>
-        <MemoizedFormattedMessage
-          defaultMessage="Access fields with {code}."
-          id="indexPatternManagement.script.accessWithLabel"
-          values={
-            Object {
-              "code": <code>
-                doc['some_field'].value
-              </code>,
-            }
-          }
-        />
-      </eui-text>
-      <br />
-      <eui-link
-        data-test-subj="scriptedFieldsHelpLink"
-        onClick={[Function]}
-      >
-        <MemoizedFormattedMessage
-          defaultMessage="Get help with the syntax and preview the results of your script."
-          id="indexPatternManagement.script.getHelpLabel"
-        />
-      </eui-link>
-    </eui-form-row>
-    <eui-form-row>
-      <eui-flex-group>
-        <eui-flex-item
-          grow={false}
-        >
-          <eui-button
-            data-test-subj="fieldSaveButton"
-            fill={true}
-            isDisabled={true}
-            isLoading={false}
-            onClick={[Function]}
-          >
-            <MemoizedFormattedMessage
-              defaultMessage="Create field"
-              id="indexPatternManagement.actions.createButton"
-            />
-          </eui-button>
-        </eui-flex-item>
-        <eui-flex-item
-          grow={false}
-        >
-          <eui-button-empty
-            data-test-subj="fieldCancelButton"
-            onClick={[Function]}
-          >
-            <MemoizedFormattedMessage
-              defaultMessage="Cancel"
-              id="indexPatternManagement.actions.cancelButton"
-            />
-          </eui-button-empty>
-        </eui-flex-item>
-      </eui-flex-group>
-    </eui-form-row>
-  </eui-form>
-  <eui-spacer
-    size="l"
-  />
-</I18nProvider>
-`;
diff --git a/src/platform/plugins/shared/data_view_management/public/components/field_editor/components/field_format_editor/__snapshots__/field_format_editor.test.tsx.snap b/src/platform/plugins/shared/data_view_management/public/components/field_editor/components/field_format_editor/__snapshots__/field_format_editor.test.tsx.snap
deleted file mode 100644
index 9d6a385cdfcff..0000000000000
--- a/src/platform/plugins/shared/data_view_management/public/components/field_editor/components/field_format_editor/__snapshots__/field_format_editor.test.tsx.snap
+++ /dev/null
@@ -1,57 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FieldFormatEditor should render normally 1`] = `
-<Fragment>
-  <Suspense
-    fallback={
-      <div
-        css="unknown styles"
-      >
-        <EuiDelayRender
-          delay={500}
-        >
-          <EuiSkeletonText
-            lines={4}
-          />
-        </EuiDelayRender>
-      </div>
-    }
-  >
-    <lazy
-      fieldType="number"
-      format={Object {}}
-      formatParams={Object {}}
-      onChange={[Function]}
-      onError={[Function]}
-    />
-  </Suspense>
-</Fragment>
-`;
-
-exports[`FieldFormatEditor should render nothing if there is no editor for the format 1`] = `
-<Fragment>
-  <Suspense
-    fallback={
-      <div
-        css="unknown styles"
-      >
-        <EuiDelayRender
-          delay={500}
-        >
-          <EuiSkeletonText
-            lines={4}
-          />
-        </EuiDelayRender>
-      </div>
-    }
-  >
-    <lazy
-      fieldType="number"
-      format={Object {}}
-      formatParams={Object {}}
-      onChange={[Function]}
-      onError={[Function]}
-    />
-  </Suspense>
-</Fragment>
-`;
diff --git a/src/platform/plugins/shared/data_view_management/public/components/field_editor/components/field_format_editor/field_format_editor.test.tsx b/src/platform/plugins/shared/data_view_management/public/components/field_editor/components/field_format_editor/field_format_editor.test.tsx
index ee6d5f5bac5d1..ab2f96d00604d 100644
--- a/src/platform/plugins/shared/data_view_management/public/components/field_editor/components/field_format_editor/field_format_editor.test.tsx
+++ b/src/platform/plugins/shared/data_view_management/public/components/field_editor/components/field_format_editor/field_format_editor.test.tsx
@@ -7,31 +7,28 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import type { FormatEditorServiceStart } from '@kbn/data-view-field-editor-plugin/public/service';
 import type { FieldFormat } from '@kbn/field-formats-plugin/common';
-import { shallow } from 'enzyme';
-import React, { PureComponent } from 'react';
+import type { FormatEditorServiceStart } from '@kbn/data-view-field-editor-plugin/public/service';
 import { FieldFormatEditor } from './field_format_editor';
+import { render, screen } from '@testing-library/react';
+import React, { PureComponent } from 'react';
 
 class TestEditor extends PureComponent {
-  render() {
-    if (this.props) {
-      return null;
-    }
-    return <div>Test editor</div>;
-  }
+  render = () => <div data-test-subj="test-editor">Test editor</div>;
 }
 
+const numberFormatEditorFactory = () => Promise.resolve(TestEditor);
+
 const formatEditors: FormatEditorServiceStart['fieldFormatEditors'] = {
-  getById: jest.fn(
-    () => () => Promise.resolve(TestEditor)
+  getById: jest.fn((id: string) =>
+    id === 'number' ? numberFormatEditorFactory : undefined
   ) as unknown as FormatEditorServiceStart['fieldFormatEditors']['getById'],
-  getAll: jest.fn(),
+  getAll: jest.fn(() => []),
 };
 
 describe('FieldFormatEditor', () => {
   it('should render normally', async () => {
-    const component = shallow(
+    render(
       <FieldFormatEditor
         fieldType="number"
         fieldFormat={{} as FieldFormat}
@@ -43,11 +40,12 @@ describe('FieldFormatEditor', () => {
       />
     );
 
-    expect(component).toMatchSnapshot();
+    expect(formatEditors.getById).toHaveBeenCalledWith('number');
+    expect(await screen.findByTestId('test-editor')).toBeVisible();
   });
 
   it('should render nothing if there is no editor for the format', async () => {
-    const component = shallow(
+    render(
       <FieldFormatEditor
         fieldType="number"
         fieldFormat={{} as FieldFormat}
@@ -59,6 +57,7 @@ describe('FieldFormatEditor', () => {
       />
     );
 
-    expect(component).toMatchSnapshot();
+    expect(formatEditors.getById).toHaveBeenCalledWith('ip');
+    expect(await screen.queryByTestId('test-editor')).not.toBeInTheDocument();
   });
 });
diff --git a/src/platform/plugins/shared/data_view_management/public/components/field_editor/components/scripting_call_outs/__snapshots__/disabled_call_out.test.tsx.snap b/src/platform/plugins/shared/data_view_management/public/components/field_editor/components/scripting_call_outs/__snapshots__/disabled_call_out.test.tsx.snap
deleted file mode 100644
index 21f7be4f2c091..0000000000000
--- a/src/platform/plugins/shared/data_view_management/public/components/field_editor/components/scripting_call_outs/__snapshots__/disabled_call_out.test.tsx.snap
+++ /dev/null
@@ -1,30 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ScriptingDisabledCallOut should render normally 1`] = `
-<Fragment>
-  <EuiCallOut
-    announceOnMount={false}
-    color="danger"
-    iconType="warning"
-    title={
-      <Memo(MemoizedFormattedMessage)
-        defaultMessage="Scripting disabled"
-        description="Showing the status that scripting is disabled in Elasticsearch. Not an update message, that it JUST got disabled."
-        id="indexPatternManagement.disabledCallOutHeader"
-      />
-    }
-  >
-    <p>
-      <MemoizedFormattedMessage
-        defaultMessage="All inline scripting has been disabled in Elasticsearch. You must enable inline scripting for at least one language in order to use scripted fields in Kibana."
-        id="indexPatternManagement.disabledCallOutLabel"
-      />
-    </p>
-  </EuiCallOut>
-  <EuiSpacer
-    size="m"
-  />
-</Fragment>
-`;
-
-exports[`ScriptingDisabledCallOut should render nothing if not visible 1`] = `""`;
diff --git a/src/platform/plugins/shared/data_view_management/public/components/field_editor/components/scripting_call_outs/__snapshots__/warning_call_out.test.tsx.snap b/src/platform/plugins/shared/data_view_management/public/components/field_editor/components/scripting_call_outs/__snapshots__/warning_call_out.test.tsx.snap
deleted file mode 100644
index e654de9cd9ec1..0000000000000
--- a/src/platform/plugins/shared/data_view_management/public/components/field_editor/components/scripting_call_outs/__snapshots__/warning_call_out.test.tsx.snap
+++ /dev/null
@@ -1,75 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ScriptingWarningCallOut should render normally 1`] = `
-Array [
-  <div
-    class="euiText emotion-euiText-s"
-  >
-    <p>
-      Familiarize yourself with 
-      <button
-        class="euiLink emotion-euiLink-primary"
-        type="button"
-      >
-        scripted fields
-      </button>
-       and 
-      <button
-        class="euiLink emotion-euiLink-primary"
-        type="button"
-      >
-        scripts in aggregations
-      </button>
-       before using this feature. Scripted fields can be used to display and aggregate calculated values. As such, they can be very slow and, if done incorrectly, can cause Kibana to become unusable.
-    </p>
-  </div>,
-  <div
-    class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
-  />,
-  <div
-    class="euiPanel euiPanel--warning euiPanel--paddingMedium euiCallOut euiCallOut--warning emotion-euiPanel-none-m-warning-euiCallOut"
-  >
-    <p
-      class="euiTitle euiCallOutHeader__title emotion-euiTitle-xs-euiCallOutHeader-warning"
-    >
-      <span
-        aria-hidden="true"
-        class="emotion-euiCallOut__icon"
-        color="inherit"
-        data-euiicon-type="warning"
-      />
-      Scripted fields are deprecated
-    </p>
-    <div
-      class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
-    />
-    <div
-      class="euiText emotion-euiText-s-euiTextColor-default"
-    >
-      <div
-        class="euiText emotion-euiText-s"
-      >
-        <p>
-          For greater flexibility and Painless script support, use 
-          <button
-            class="euiLink emotion-euiLink-primary"
-            type="button"
-          >
-            runtime fields
-          </button>
-          .
-        </p>
-      </div>
-    </div>
-  </div>,
-  <div
-    class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
-  />,
-]
-`;
-
-exports[`ScriptingWarningCallOut should render nothing if not visible 1`] = `
-<ScriptingWarningCallOut
-  isVisible={false}
-/>
-`;
diff --git a/src/platform/plugins/shared/data_view_management/public/components/field_editor/components/scripting_call_outs/disabled_call_out.test.tsx b/src/platform/plugins/shared/data_view_management/public/components/field_editor/components/scripting_call_outs/disabled_call_out.test.tsx
index 57debfc3c9690..8229a1142ff17 100644
--- a/src/platform/plugins/shared/data_view_management/public/components/field_editor/components/scripting_call_outs/disabled_call_out.test.tsx
+++ b/src/platform/plugins/shared/data_view_management/public/components/field_editor/components/scripting_call_outs/disabled_call_out.test.tsx
@@ -8,20 +8,31 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
-
 import { ScriptingDisabledCallOut } from './disabled_call_out';
+import { renderWithI18n } from '@kbn/test-jest-helpers';
+import { screen } from '@testing-library/react';
 
 describe('ScriptingDisabledCallOut', () => {
   it('should render normally', async () => {
-    const component = shallow(<ScriptingDisabledCallOut isVisible={true} />);
+    renderWithI18n(<ScriptingDisabledCallOut isVisible={true} />);
 
-    expect(component).toMatchSnapshot();
+    expect(screen.getByText('Scripting disabled')).toBeVisible();
+    expect(
+      screen.getByText(
+        'All inline scripting has been disabled in Elasticsearch. You must enable inline scripting for at least one language in order to use scripted fields in Kibana.'
+      )
+    ).toBeVisible();
   });
 
   it('should render nothing if not visible', async () => {
-    const component = shallow(<ScriptingDisabledCallOut />);
+    const { container } = renderWithI18n(<ScriptingDisabledCallOut />);
 
-    expect(component).toMatchSnapshot();
+    expect(container).toBeEmptyDOMElement();
+    expect(screen.queryByText('Scripting disabled')).not.toBeInTheDocument();
+    expect(
+      screen.queryByText(
+        'All inline scripting has been disabled in Elasticsearch. You must enable inline scripting for at least one language in order to use scripted fields in Kibana.'
+      )
+    ).not.toBeInTheDocument();
   });
 });
diff --git a/src/platform/plugins/shared/data_view_management/public/components/field_editor/components/scripting_call_outs/warning_call_out.test.tsx b/src/platform/plugins/shared/data_view_management/public/components/field_editor/components/scripting_call_outs/warning_call_out.test.tsx
index aa3ad6636d9d7..6028e4f604445 100644
--- a/src/platform/plugins/shared/data_view_management/public/components/field_editor/components/scripting_call_outs/warning_call_out.test.tsx
+++ b/src/platform/plugins/shared/data_view_management/public/components/field_editor/components/scripting_call_outs/warning_call_out.test.tsx
@@ -8,33 +8,47 @@
  */
 
 import React from 'react';
-import { mountWithI18nProvider } from '@kbn/test-jest-helpers';
-import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
+import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public/context';
 import { mockManagementPlugin } from '../../../../mocks';
+import { renderWithKibanaRenderContext } from '@kbn/test-jest-helpers';
+import { screen } from '@testing-library/react';
 import { ScriptingWarningCallOut } from './warning_call_out';
 
 describe('ScriptingWarningCallOut', () => {
   const mockedContext = mockManagementPlugin.createIndexPatternManagmentContext();
 
   it('should render normally', async () => {
-    const component = mountWithI18nProvider(<ScriptingWarningCallOut isVisible={true} />, {
-      wrappingComponent: KibanaContextProvider,
-      wrappingComponentProps: {
-        services: mockedContext,
-      },
-    });
+    renderWithKibanaRenderContext(
+      <KibanaContextProvider services={mockedContext}>
+        <ScriptingWarningCallOut isVisible={true} />
+      </KibanaContextProvider>
+    );
 
-    expect(component.render()).toMatchSnapshot();
+    expect(
+      screen.getByText(
+        'Scripted fields can be used to display and aggregate calculated values. As such, they can be very slow and, if done incorrectly, can cause Kibana to become unusable.',
+        { exact: false }
+      )
+    ).toBeVisible();
+    expect(screen.getByText('Scripted fields are deprecated')).toBeVisible();
+    expect(
+      screen.getByText('For greater flexibility and Painless script support, use', { exact: false })
+    ).toBeVisible();
   });
 
   it('should render nothing if not visible', async () => {
-    const component = mountWithI18nProvider(<ScriptingWarningCallOut isVisible={false} />, {
-      wrappingComponent: KibanaContextProvider,
-      wrappingComponentProps: {
-        services: mockedContext,
-      },
-    });
+    const { container } = renderWithKibanaRenderContext(
+      <KibanaContextProvider services={mockedContext}>
+        <ScriptingWarningCallOut isVisible={false} />
+      </KibanaContextProvider>
+    );
 
-    expect(component).toMatchSnapshot();
+    expect(container).toBeEmptyDOMElement();
+    expect(screen.queryByText('Scripted fields are deprecated')).not.toBeInTheDocument();
+    expect(
+      screen.queryByText('For greater flexibility and Painless script support, use', {
+        exact: false,
+      })
+    ).not.toBeInTheDocument();
   });
 });
diff --git a/src/platform/plugins/shared/data_view_management/public/components/field_editor/components/scripting_help/__snapshots__/help_flyout.test.tsx.snap b/src/platform/plugins/shared/data_view_management/public/components/field_editor/components/scripting_help/__snapshots__/help_flyout.test.tsx.snap
deleted file mode 100644
index e7264d2f15f2f..0000000000000
--- a/src/platform/plugins/shared/data_view_management/public/components/field_editor/components/scripting_help/__snapshots__/help_flyout.test.tsx.snap
+++ /dev/null
@@ -1,85 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ScriptingHelpFlyout should render normally 1`] = `
-<EuiFlyout
-  aria-label="Help"
-  data-test-subj="scriptedFieldsHelpFlyout"
-  onClose={[Function]}
->
-  <EuiFlyoutBody>
-    <EuiTabbedContent
-      autoFocus="initial"
-      initialSelectedTab={
-        Object {
-          "content": <ScriptingSyntax />,
-          "data-test-subj": "syntaxTab",
-          "id": "syntax",
-          "name": "Syntax",
-        }
-      }
-      tabs={
-        Array [
-          Object {
-            "content": <ScriptingSyntax />,
-            "data-test-subj": "syntaxTab",
-            "id": "syntax",
-            "name": "Syntax",
-          },
-          Object {
-            "content": <TestScript
-              executeScript={[Function]}
-              indexPattern={Object {}}
-              lang="painless"
-            />,
-            "data-test-subj": "testTab",
-            "id": "test",
-            "name": "Preview results",
-          },
-        ]
-      }
-    />
-  </EuiFlyoutBody>
-</EuiFlyout>
-`;
-
-exports[`ScriptingHelpFlyout should render nothing if not visible 1`] = `
-<EuiFlyout
-  aria-label="Help"
-  data-test-subj="scriptedFieldsHelpFlyout"
-  onClose={[Function]}
->
-  <EuiFlyoutBody>
-    <EuiTabbedContent
-      autoFocus="initial"
-      initialSelectedTab={
-        Object {
-          "content": <ScriptingSyntax />,
-          "data-test-subj": "syntaxTab",
-          "id": "syntax",
-          "name": "Syntax",
-        }
-      }
-      tabs={
-        Array [
-          Object {
-            "content": <ScriptingSyntax />,
-            "data-test-subj": "syntaxTab",
-            "id": "syntax",
-            "name": "Syntax",
-          },
-          Object {
-            "content": <TestScript
-              executeScript={[Function]}
-              indexPattern={Object {}}
-              lang="painless"
-            />,
-            "data-test-subj": "testTab",
-            "id": "test",
-            "name": "Preview results",
-          },
-        ]
-      }
-    />
-  </EuiFlyoutBody>
-</EuiFlyout>
-`;
diff --git a/src/platform/plugins/shared/data_view_management/public/components/field_editor/components/scripting_help/help_flyout.test.tsx b/src/platform/plugins/shared/data_view_management/public/components/field_editor/components/scripting_help/help_flyout.test.tsx
index 6f8b03764e706..34194b8c93691 100644
--- a/src/platform/plugins/shared/data_view_management/public/components/field_editor/components/scripting_help/help_flyout.test.tsx
+++ b/src/platform/plugins/shared/data_view_management/public/components/field_editor/components/scripting_help/help_flyout.test.tsx
@@ -8,48 +8,51 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
-
+import { buildDataViewMock } from '@kbn/discover-utils/src/__mocks__/data_view';
+import { renderWithI18n } from '@kbn/test-jest-helpers';
+import { screen, within } from '@testing-library/react';
 import { ScriptingHelpFlyout } from './help_flyout';
 
-import type { DataView } from '@kbn/data-views-plugin/public';
-
-import type { ExecuteScript } from '../../types';
-
-jest.mock('./test_script', () => ({
-  TestScript: () => {
-    return `<div>mockTestScript</div>`;
-  },
+jest.mock('@kbn/kibana-react-plugin/public', () => ({
+  useKibana: () => ({
+    services: {
+      docLinks: {
+        links: {
+          scriptedFields: {
+            luceneExpressions: '#',
+            painless: '#',
+            painlessApi: '#',
+            painlessSyntax: '#',
+          },
+        },
+      },
+    },
+  }),
 }));
 
-const indexPatternMock = {} as DataView;
+const renderFlyout = (isVisible: boolean) =>
+  renderWithI18n(
+    <ScriptingHelpFlyout
+      executeScript={jest.fn()}
+      indexPattern={buildDataViewMock({})}
+      isVisible={isVisible}
+      lang="painless"
+      onClose={jest.fn()}
+    />
+  );
 
 describe('ScriptingHelpFlyout', () => {
-  it('should render normally', async () => {
-    const component = shallow(
-      <ScriptingHelpFlyout
-        isVisible={true}
-        indexPattern={indexPatternMock}
-        lang="painless"
-        executeScript={(() => {}) as unknown as ExecuteScript}
-        onClose={() => {}}
-      />
-    );
+  it('should render normally', () => {
+    renderFlyout(true);
 
-    expect(component).toMatchSnapshot();
+    expect(within(screen.getByTestId('syntaxTab')).getByText('Syntax')).toBeVisible();
+    expect(within(screen.getByTestId('testTab')).getByText('Preview results')).toBeVisible();
+    expect(screen.getByText('Painless')).toBeVisible();
   });
 
-  it('should render nothing if not visible', async () => {
-    const component = shallow(
-      <ScriptingHelpFlyout
-        isVisible={true}
-        indexPattern={indexPatternMock}
-        lang="painless"
-        executeScript={(() => {}) as unknown as ExecuteScript}
-        onClose={() => {}}
-      />
-    );
+  it('should render nothing if not visible', () => {
+    const { container } = renderFlyout(false);
 
-    expect(component).toMatchSnapshot();
+    expect(container).toBeEmptyDOMElement();
   });
 });
diff --git a/src/platform/plugins/shared/data_view_management/public/components/field_editor/field_editor.test.tsx b/src/platform/plugins/shared/data_view_management/public/components/field_editor/field_editor.test.tsx
index 0b2a0d7cef33e..ba08f22ae670c 100644
--- a/src/platform/plugins/shared/data_view_management/public/components/field_editor/field_editor.test.tsx
+++ b/src/platform/plugins/shared/data_view_management/public/components/field_editor/field_editor.test.tsx
@@ -7,318 +7,318 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import type { DataView, DataViewField, DataViewsContract } from '@kbn/data-views-plugin/public';
-import type { FieldFormatInstanceType } from '@kbn/field-formats-plugin/common';
-import { findTestSubject } from '@elastic/eui/lib/test';
-
+import type { DataView, FieldSpec } from '@kbn/data-views-plugin/public';
 import type { FieldEdiorProps } from './field_editor';
-import { FieldEditor } from './field_editor';
-
-import { mockManagementPlugin } from '../../mocks';
-import { createComponentWithContext } from '../test_utils';
-
-jest.mock('@elastic/eui', () => ({
-  ...jest.requireActual('@elastic/eui'),
-  EuiBasicTable: 'eui-basic-table',
-  EuiButton: 'eui-button',
-  EuiButtonEmpty: 'eui-button-empty',
-  EuiCallOut: 'eui-call-out',
-  EuiCode: 'eui-code',
-  EuiConfirmModal: 'eui-confirm-modal',
-  EuiFieldNumber: 'eui-field-number',
-  EuiFieldText: 'eui-field-text',
-  EuiFlexGroup: 'eui-flex-group',
-  EuiFlexItem: 'eui-flex-item',
-  EuiForm: 'eui-form',
-  EuiFormRow: 'eui-form-row',
-  EuiIcon: 'eui-icon',
-  EuiLink: 'eui-link',
-  EuiOverlayMask: 'eui-overlay-mask',
-  EuiSelect: 'eui-select',
-  EuiSpacer: 'eui-spacer',
-  EuiText: 'eui-text',
-  EuiTextArea: 'eui-textArea',
-  htmlIdGenerator: () => () => 42,
-  euiPaletteColorBlind: () => ['red'],
+import { createStubDataView } from '@kbn/data-views-plugin/public/data_views/data_view.stub';
+import React from 'react';
+import { FieldFormat } from '@kbn/field-formats-plugin/common';
+import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public/context';
+import { render, screen, waitFor, within } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+
+const monacoModuleName = '@kbn/monaco';
+
+jest.doMock('@kbn/code-editor', () => ({
+  CodeEditor: ({
+    height: _height,
+    languageId: _languageId,
+    onChange,
+    value,
+    width: _width,
+    ...props
+  }: {
+    height: string;
+    languageId: string;
+    onChange: (value: string) => void;
+    value: string;
+    width: string;
+  }) => (
+    <textarea {...props} onChange={(event) => onChange(event.currentTarget.value)} value={value} />
+  ),
 }));
 
-jest.mock('@kbn/code-editor', () => {
-  const original = jest.requireActual('@kbn/code-editor');
+jest.doMock(monacoModuleName, () => ({
+  PainlessLang: {
+    ID: 'painless',
+  },
+}));
 
-  return {
-    ...original,
-    CodeEditor: `code-editor`,
-  };
-});
+jest.mock('./components/scripting_help', () => ({
+  ScriptingHelpFlyout: () => null,
+}));
 
 jest.mock('../../scripting_languages', () => ({
+  getDeprecatedScriptingLanguages: () => ['testlang'],
   getEnabledScriptingLanguages: () => ['painless', 'testlang'],
   getSupportedScriptingLanguages: () => ['painless'],
-  getDeprecatedScriptingLanguages: () => ['testlang'],
 }));
 
-jest.mock('./components/scripting_call_outs', () => ({
-  ScriptingDisabledCallOut: 'scripting-disabled-callOut',
-  ScriptingWarningCallOut: 'scripting-warning-callOut',
-  ScriptingHelpFlyout: 'scripting-help-flyout',
-}));
+const DefaultFormat = FieldFormat.from((value: unknown) => String(value));
+DefaultFormat.fieldType = '*';
+DefaultFormat.id = 'default';
+DefaultFormat.title = 'Default format';
+
+const renderWithContext = <Props extends object>(
+  Component: React.ComponentType<Props>,
+  props: Props,
+  mockedContext: Record<string, unknown>
+) => {
+  return render(
+    <KibanaContextProvider services={mockedContext}>
+      <Component {...props} />
+    </KibanaContextProvider>
+  );
+};
 
-jest.mock('./components/field_format_editor', () => ({
-  FieldFormatEditor: 'field-format-editor',
-}));
+const createFieldSpec = (overrides: Partial<FieldSpec> = {}): FieldSpec => ({
+  aggregatable: true,
+  name: '',
+  readFromDocValues: false,
+  scripted: true,
+  searchable: true,
+  type: 'number',
+  ...overrides,
+});
 
-const fieldList = [
-  {
-    name: 'foobar',
-  } as DataViewField,
-];
+const existingField = createFieldSpec({
+  name: 'foobar',
+  scripted: false,
+  type: 'string',
+});
 
-const fields = {
-  getAll: () => fieldList,
-};
+const createIndexPattern = (fields: FieldSpec[] = [existingField]): DataView => {
+  const indexPattern = createStubDataView({
+    spec: {
+      fields: Object.fromEntries(fields.map((field) => [field.name, field])),
+      title: 'test-data-view',
+    },
+  });
 
-// @ts-ignore
-fields.getByName = (name: string) => {
-  return fields.getAll().find((field) => field.name === name);
+  jest.spyOn(indexPattern, 'getFormatterForField').mockReturnValue(new DefaultFormat());
+  jest.spyOn(indexPattern, 'setFieldCustomLabel');
+
+  return indexPattern;
 };
 
-class Format {
-  static id = 'test_format';
-  static title = 'Test format';
-  params() {}
-}
+const createServices = () => {
+  const updateSavedObject = jest.fn(() => Promise.resolve());
+  const redirectAway = jest.fn();
 
-// FIXME: which interface is this?
-const field = {
-  scripted: true,
-  type: 'number',
-  lang: 'painless',
-  format: new Format(),
+  return {
+    redirectAway,
+    services: {
+      indexPatternService: {
+        updateSavedObject,
+      },
+      redirectAway,
+    },
+    updateSavedObject,
+  };
 };
 
-const services = {
-  redirectAway: () => {},
-  saveIndexPattern: async () => {},
-  indexPatternService: {} as DataViewsContract,
+const createMockedContext = () => ({
+  docLinks: {
+    links: {
+      runtimeFields: {
+        overview: 'https://docs.test/runtime-fields',
+      },
+      scriptedFields: {
+        painless: 'https://docs.test/painless',
+        scriptAggs: 'https://docs.test/script-aggs',
+        scriptFields: 'https://docs.test/script-fields',
+      },
+    },
+  },
+  fieldFormats: {
+    getByFieldType: jest.fn(() => []),
+    getDefaultType: jest.fn(() => DefaultFormat),
+  },
+  notifications: {
+    toasts: {
+      addSuccess: jest.fn(),
+    },
+  },
+});
+
+type TestServices = ReturnType<typeof createServices>['services'];
+type TestFieldEditorProps = Omit<FieldEdiorProps, 'services'> & {
+  services: TestServices;
 };
 
-describe('FieldEditor', () => {
-  let indexPattern: DataView;
+const FieldEditor = jest.requireActual<{
+  FieldEditor: React.ComponentType<TestFieldEditorProps>;
+}>('./field_editor').FieldEditor;
 
-  const mockContext = mockManagementPlugin.createIndexPatternManagmentContext();
-  mockContext.fieldFormats.getDefaultType = jest.fn(
-    () => ({} as unknown as FieldFormatInstanceType)
-  );
-  mockContext.fieldFormats.getByFieldType = jest.fn((fieldType) => {
-    if (fieldType === 'number') {
-      return [{} as unknown as FieldFormatInstanceType];
-    } else {
-      return [];
-    }
-  });
+describe('FieldEditor', () => {
+  let mockedContext: ReturnType<typeof createMockedContext>;
 
   beforeEach(() => {
-    indexPattern = {
-      fields,
-      getFormatterForField: () => ({ params: () => ({}) }),
-      getFormatterForFieldNoDefault: () => ({ params: () => ({}) }),
-      upsertScriptedField: () => undefined,
-      setFieldCustomLabel: (name: string, label: string) => {
-        indexPattern.fields.getByName(name)!.customLabel = label;
-      },
-    } as unknown as DataView;
+    mockedContext = createMockedContext();
   });
 
-  it('should render create new scripted field correctly', async () => {
-    const component = createComponentWithContext<FieldEdiorProps>(
+  const renderFieldEditor = async ({
+    indexPattern = createIndexPattern(),
+    services = createServices().services,
+    spec = createFieldSpec(),
+  }: {
+    indexPattern?: DataView;
+    services?: TestServices;
+    spec?: FieldSpec;
+  } = {}) => {
+    renderWithContext<TestFieldEditorProps>(
       FieldEditor,
       {
         indexPattern,
-        spec: field as unknown as DataViewField,
         services,
+        spec,
       },
-      mockContext
+      mockedContext
     );
 
-    await new Promise((resolve) => process.nextTick(resolve));
-    component.update();
-    expect(component).toMatchSnapshot();
+    await screen.findByTestId('fieldSaveButton');
+  };
+
+  it('should render create new scripted field correctly', async () => {
+    await renderFieldEditor();
+
+    expect(screen.getByText('Create scripted field')).toBeVisible();
+    expect(screen.getByText('Scripted fields are deprecated')).toBeVisible();
+    expect(screen.getByText('runtime fields')).toHaveAttribute(
+      'href',
+      'https://docs.test/runtime-fields'
+    );
+    expect(screen.getByTestId('editorFieldName')).toHaveValue('');
+    expect(screen.getByTestId('editorFieldLang')).toHaveValue('painless');
+    expect(screen.getByTestId('editorFieldType')).toHaveValue('number');
+    expect(screen.getByTestId('editorSelectedFormatId')).toHaveValue('');
+    expect(screen.getByText('Name is required')).toBeVisible();
+    expect(screen.getByText('Script is required')).toBeVisible();
+    expect(screen.getByTestId('fieldSaveButton')).toBeDisabled();
   });
 
   it('should render edit scripted field correctly', async () => {
-    const testField = {
-      ...field,
+    const testField = createFieldSpec({
+      lang: 'painless',
       name: 'test',
       script: 'doc.test.value',
-    };
-    fieldList.push(testField as unknown as DataViewField);
-    indexPattern.fields.getByName = (name) => {
-      const flds = {
-        [testField.name]: testField,
-      };
-      return flds[name] as unknown as DataViewField;
-    };
-
-    const component = createComponentWithContext<FieldEdiorProps>(
-      FieldEditor,
-      {
-        indexPattern,
-        spec: testField as unknown as DataViewField,
-        services,
-      },
-      mockContext
-    );
-
-    await new Promise((resolve) => process.nextTick(resolve));
-    component.update();
-    expect(component).toMatchSnapshot();
+    });
+
+    await renderFieldEditor({
+      indexPattern: createIndexPattern([existingField, testField]),
+      spec: testField,
+    });
+
+    expect(screen.getByText('Edit test')).toBeVisible();
+    expect(screen.queryByTestId('editorFieldName')).not.toBeInTheDocument();
+    expect(screen.getByTestId('editorFieldCustomLabel')).toHaveValue('');
+    expect(screen.getByTestId('editorFieldScript')).toHaveValue('doc.test.value');
+    expect(screen.getByTestId('fieldSaveButton')).toHaveTextContent('Save field');
+    expect(screen.getByText('Delete')).toBeVisible();
   });
 
   it('should display and update a custom label correctly', async () => {
-    let testField = {
+    const user = userEvent.setup();
+    const testField = createFieldSpec({
+      customLabel: 'Test',
       name: 'test',
-      format: new Format(),
-      lang: undefined,
+      scripted: false,
       type: 'string',
-      customLabel: 'Test',
-    } as unknown as DataViewField;
-    fieldList.push(testField);
-    indexPattern.fields.getByName = (name) => {
-      const flds = {
-        [testField.name]: testField,
-      };
-      return flds[name];
-    };
-    indexPattern.fields = {
-      ...indexPattern.fields,
-      ...{
-        update: (fld) => {
-          testField = fld as unknown as DataViewField;
-        },
-        add: jest.fn(),
-      },
-    };
-    indexPattern.fieldFormatMap = { test: field } as {};
-    (indexPattern.deleteFieldFormat as any) = jest.fn();
-
-    const component = createComponentWithContext<FieldEdiorProps>(
-      FieldEditor,
-      {
-        indexPattern,
-        spec: testField as unknown as DataViewField,
-        services: {
-          redirectAway: () => {},
-          indexPatternService: {
-            updateSavedObject: jest.fn(() => Promise.resolve()),
-          } as unknown as DataViewsContract,
-        },
-      },
-      mockContext
-    );
-
-    await new Promise((resolve) => process.nextTick(resolve));
-    component.update();
-    const input = findTestSubject(component, 'editorFieldCustomLabel');
-    expect(input.props().value).toBe('Test');
-    input.simulate('change', { target: { value: 'new Test' } });
-    const saveBtn = findTestSubject(component, 'fieldSaveButton');
-
-    await saveBtn.simulate('click');
-    await new Promise((resolve) => process.nextTick(resolve));
-    expect(testField.customLabel).toEqual('new Test');
+    });
+    const indexPattern = createIndexPattern([testField]);
+    const { services, updateSavedObject, redirectAway } = createServices();
+
+    await renderFieldEditor({
+      indexPattern,
+      services,
+      spec: testField,
+    });
+
+    const customLabelInput = screen.getByTestId('editorFieldCustomLabel');
+    expect(customLabelInput).toHaveValue('Test');
+
+    await user.clear(customLabelInput);
+    await user.type(customLabelInput, 'new Test');
+    await user.click(screen.getByTestId('fieldSaveButton'));
+
+    await waitFor(() => {
+      expect(indexPattern.setFieldCustomLabel).toHaveBeenCalledWith('test', 'new Test');
+    });
+    expect(updateSavedObject).toHaveBeenCalledWith(indexPattern);
+    expect(redirectAway).toHaveBeenCalled();
+    expect(indexPattern.fields.getByName('test')?.customLabel).toBe('new Test');
   });
 
   it('should show deprecated lang warning', async () => {
-    const testField = {
-      ...field,
+    const testField = createFieldSpec({
+      lang: 'testlang',
       name: 'test',
       script: 'doc.test.value',
-      lang: 'testlang',
-    };
-    fieldList.push(testField as unknown as DataViewField);
-    indexPattern.fields.getByName = (name) => {
-      const flds = {
-        [testField.name]: testField,
-      };
-      return flds[name] as unknown as DataViewField;
-    };
-
-    const component = createComponentWithContext<FieldEdiorProps>(
-      FieldEditor,
-      {
-        indexPattern,
-        spec: testField as unknown as DataViewField,
-        services,
-      },
-      mockContext
-    );
-
-    await new Promise((resolve) => process.nextTick(resolve));
-    component.update();
-    expect(component).toMatchSnapshot();
+    });
+
+    await renderFieldEditor({
+      indexPattern: createIndexPattern([existingField, testField]),
+      spec: testField,
+    });
+
+    expect(screen.getByText('Deprecation Warning:')).toBeVisible();
+    const deprecationWarning = screen.getByText('Deprecation Warning:').closest('span');
+    expect(deprecationWarning).not.toBeNull();
+    expect(within(deprecationWarning!).getByText('testlang')).toBeVisible();
+    expect(screen.getByText('Painless')).toHaveAttribute('href', 'https://docs.test/painless');
   });
 
   it('should show conflict field warning', async () => {
-    const testField = { ...field };
-    const component = createComponentWithContext<FieldEdiorProps>(
-      FieldEditor,
-      {
-        indexPattern,
-        spec: testField as unknown as DataViewField,
-        services,
-      },
-      mockContext
-    );
+    const user = userEvent.setup();
 
-    await new Promise((resolve) => process.nextTick(resolve));
-    (component.instance() as FieldEditor).onFieldChange('name', 'foobar');
-    component.update();
-    expect(component).toMatchSnapshot();
+    await renderFieldEditor();
+
+    await user.type(screen.getByTestId('editorFieldName'), 'foobar');
+
+    expect(screen.getByText('Mapping Conflict:')).toBeVisible();
+    expect(screen.getByText('foobar')).toBeVisible();
+    expect(
+      screen.getByText('You already have a field with the name', { exact: false })
+    ).toBeVisible();
   });
 
   it('should show multiple type field warning with a table containing indices', async () => {
-    const testField = {
-      ...field,
-      name: 'test-conflict',
+    const testField = createFieldSpec({
       conflictDescriptions: {
         long: ['index_name_1', 'index_name_2'],
         text: ['index_name_3'],
       },
-    };
-    const component = createComponentWithContext<FieldEdiorProps>(
-      FieldEditor,
-      {
-        indexPattern,
-        spec: testField as unknown as DataViewField,
-        services,
-      },
-      mockContext
-    );
-
-    await new Promise((resolve) => process.nextTick(resolve));
-    (component.instance() as FieldEditor).onFieldChange('name', 'foobar');
-    component.update();
-    expect(component).toMatchSnapshot();
+      name: 'test-conflict',
+    });
+
+    await renderFieldEditor({
+      spec: testField,
+    });
+
+    expect(screen.getByText('Field type conflict')).toBeVisible();
+    expect(
+      screen.getByText('The type of this field changes across indices.', { exact: false })
+    ).toBeVisible();
+    expect(screen.getByText('long')).toBeVisible();
+    expect(screen.getByText('index_name_1, index_name_2')).toBeVisible();
+    expect(screen.getByText('text')).toBeVisible();
+    expect(screen.getByText('index_name_3')).toBeVisible();
   });
 
   it('should not allow field to have * in the name', async () => {
-    const testField = {
-      ...field,
+    const user = userEvent.setup();
+    const testField = createFieldSpec({
       name: 'test-field',
-    };
-    const component = createComponentWithContext<FieldEdiorProps>(
-      FieldEditor,
-      {
-        indexPattern,
-        spec: testField as unknown as DataViewField,
-        services,
-      },
-      mockContext
-    );
+      script: 'doc.test.value',
+    });
+
+    await renderFieldEditor({
+      spec: testField,
+    });
+
+    const nameInput = screen.getByTestId('editorFieldName');
+    await user.clear(nameInput);
+    await user.type(nameInput, 'test*123');
 
-    await new Promise((resolve) => process.nextTick(resolve));
-    (component.instance() as FieldEditor).onFieldChange('name', 'test*123');
-    component.update();
-    expect(component.html().includes('The field cannot have * in the name.')).toBe(true);
+    expect(screen.getByText('The field cannot have * in the name.')).toBeVisible();
   });
 });
diff --git a/src/platform/plugins/shared/data_view_management/public/components/test_utils.tsx b/src/platform/plugins/shared/data_view_management/public/components/test_utils.tsx
deleted file mode 100644
index 85ae2f4059629..0000000000000
--- a/src/platform/plugins/shared/data_view_management/public/components/test_utils.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the "Elastic License
- * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
- * Public License v 1"; you may not use this file except in compliance with, at
- * your election, the "Elastic License 2.0", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { shallow } from 'enzyme';
-
-// since the 'shallow' from 'enzyme' doesn't support context API for React 16 and above (https://github.com/facebook/react/pull/14329)
-// we use this workaround where define legacy contextTypes for react class component
-export function createComponentWithContext<Props = Record<string, any>>(
-  MyComponent: React.ComponentClass<any>,
-  props: Props,
-  mockedContext: Record<string, any>
-) {
-  MyComponent.contextTypes = {
-    services: PropTypes.object,
-  };
-
-  // @ts-expect-error upgrade typescript v4.9.5
-  return shallow(<MyComponent {...props} />, {
-    context: {
-      services: mockedContext,
-    },
-  });
-}