diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/components/ColumnOption.test.tsx b/superset-frontend/packages/superset-ui-chart-controls/test/components/ColumnOption.test.tsx
index 2f3f8f706..24cb7743b 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/test/components/ColumnOption.test.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/test/components/ColumnOption.test.tsx
@@ -16,87 +16,98 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { isValidElement } from 'react';
-import { shallow, ShallowWrapper } from 'enzyme';
-import { GenericDataType } from '@superset-ui/core';
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import {
+  ThemeProvider,
+  supersetTheme,
+  GenericDataType,
+} from '@superset-ui/core';
 
-import { ColumnOption, ColumnOptionProps, ColumnTypeLabel } from '../../src';
-import { SQLPopover } from '../../src/components/SQLPopover';
+import { ColumnOption, ColumnOptionProps } from '../../src';
 
-describe('ColumnOption', () => {
-  const defaultProps: ColumnOptionProps = {
+jest.mock('../../src/components/SQLPopover', () => ({
+  SQLPopover: () => <div data-test="mock-sql-popover" />,
+}));
+jest.mock('../../src/components/ColumnTypeLabel/ColumnTypeLabel', () => ({
+  ColumnTypeLabel: ({ type }: { type: string }) => (
+    <div data-test="mock-column-type-label">{type}</div>
+  ),
+}));
+
+const defaultProps: ColumnOptionProps = {
+  column: {
+    column_name: 'foo',
+    verbose_name: 'Foo',
+    expression: 'SUM(foo)',
+    description: 'Foo is the greatest column of all',
+  },
+  showType: false,
+};
+
+const setup = (props: Partial<ColumnOptionProps> = {}) =>
+  render(
+    <ThemeProvider theme={supersetTheme}>
+      <ColumnOption {...defaultProps} {...props} />
+    </ThemeProvider>,
+  );
+test('shows a label with verbose_name', () => {
+  const { container } = setup();
+  const lbl = container.getElementsByClassName('option-label');
+  expect(lbl).toHaveLength(1);
+  expect(`${lbl[0].textContent}`).toEqual(defaultProps.column.verbose_name);
+});
+test('shows SQL Popover trigger', () => {
+  const { getByTestId } = setup();
+  expect(getByTestId('mock-sql-popover')).toBeInTheDocument();
+});
+test('shows a label with column_name when no verbose_name', () => {
+  const { getByText } = setup({
+    column: {
+      ...defaultProps.column,
+      verbose_name: undefined,
+    },
+  });
+  expect(getByText(defaultProps.column.column_name)).toBeInTheDocument();
+});
+test('shows a column type label when showType is true', () => {
+  const { getByTestId } = setup({
+    showType: true,
     column: {
       column_name: 'foo',
-      verbose_name: 'Foo',
-      expression: 'SUM(foo)',
-      description: 'Foo is the greatest column of all',
+      type: 'VARCHAR',
+      type_generic: GenericDataType.String,
     },
-    showType: false,
-  };
-
-  let wrapper: ShallowWrapper;
-  let props: ColumnOptionProps;
-  const factory = (o: ColumnOptionProps) => <ColumnOption {...o} />;
-  beforeEach(() => {
-    wrapper = shallow(factory(defaultProps));
-    props = { ...defaultProps };
-  });
-  it('is a valid element', () => {
-    expect(isValidElement(<ColumnOption {...defaultProps} />)).toBe(true);
-  });
-  it('shows a label with verbose_name', () => {
-    const lbl = wrapper.find('.option-label');
-    expect(lbl).toHaveLength(1);
-    expect(lbl.first().text()).toBe('Foo');
-  });
-  it('shows SQL Popover trigger', () => {
-    expect(wrapper.find(SQLPopover)).toHaveLength(1);
-  });
-  it('shows a label with column_name when no verbose_name', () => {
-    delete props.column.verbose_name;
-    wrapper = shallow(factory(props));
-    expect(wrapper.find('.option-label').first().text()).toBe('foo');
-  });
-  it('shows a column type label when showType is true', () => {
-    wrapper = shallow(
-      factory({
-        ...props,
-        showType: true,
-        column: {
-          column_name: 'foo',
-          type: 'VARCHAR',
-          type_generic: GenericDataType.String,
-        },
-      }),
-    );
-    expect(wrapper.find(ColumnTypeLabel)).toHaveLength(1);
-  });
-  it('column with expression has correct column label if showType is true', () => {
-    props.showType = true;
-    wrapper = shallow(factory(props));
-    expect(wrapper.find(ColumnTypeLabel)).toHaveLength(1);
-    expect(wrapper.find(ColumnTypeLabel).props().type).toBe('expression');
-  });
-  it('shows no column type label when type is null', () => {
-    wrapper = shallow(
-      factory({
-        ...props,
-        showType: true,
-        column: {
-          column_name: 'foo',
-        },
-      }),
-    );
-    expect(wrapper.find(ColumnTypeLabel)).toHaveLength(0);
-  });
-  it('dttm column has correct column label if showType is true', () => {
-    props.showType = true;
-    props.column.expression = undefined;
-    props.column.type_generic = GenericDataType.Temporal;
-    wrapper = shallow(factory(props));
-    expect(wrapper.find(ColumnTypeLabel)).toHaveLength(1);
-    expect(wrapper.find(ColumnTypeLabel).props().type).toBe(
-      GenericDataType.Temporal,
-    );
   });
+  expect(getByTestId('mock-column-type-label')).toBeInTheDocument();
+});
+test('column with expression has correct column label if showType is true', () => {
+  const { getByTestId } = setup({
+    showType: true,
+  });
+  expect(getByTestId('mock-column-type-label')).toBeInTheDocument();
+  expect(getByTestId('mock-column-type-label')).toHaveTextContent('expression');
+});
+test('shows no column type label when type is null', () => {
+  const { queryByTestId } = setup({
+    showType: true,
+    column: {
+      column_name: 'foo',
+    },
+  });
+  expect(queryByTestId('mock-column-type-label')).not.toBeInTheDocument();
+});
+test('dttm column has correct column label if showType is true', () => {
+  const { getByTestId } = setup({
+    showType: true,
+    column: {
+      ...defaultProps.column,
+      expression: undefined,
+      type_generic: GenericDataType.Temporal,
+    },
+  });
+  expect(getByTestId('mock-column-type-label')).toBeInTheDocument();
+  expect(getByTestId('mock-column-type-label')).toHaveTextContent(
+    String(GenericDataType.Temporal),
+  );
 });
diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/components/InfoTooltipWithTrigger.test.tsx b/superset-frontend/packages/superset-ui-chart-controls/test/components/InfoTooltipWithTrigger.test.tsx
index 33e2d8c7f..0011f862b 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/test/components/InfoTooltipWithTrigger.test.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/test/components/InfoTooltipWithTrigger.test.tsx
@@ -16,42 +16,69 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { shallow } from 'enzyme';
-import { Tooltip } from '../../src/components/Tooltip';
-import { InfoTooltipWithTrigger } from '../../src';
+import '@testing-library/jest-dom';
+import { fireEvent, render } from '@testing-library/react';
+import { ThemeProvider, supersetTheme } from '@superset-ui/core';
+import { InfoTooltipWithTrigger, InfoTooltipWithTriggerProps } from '../../src';
 
-describe('InfoTooltipWithTrigger', () => {
-  it('renders a tooltip', () => {
-    const wrapper = shallow(
-      <InfoTooltipWithTrigger label="test" tooltip="this is a test" />,
-    );
-    expect(wrapper.find(Tooltip)).toHaveLength(1);
-  });
+jest.mock('../../src/components/Tooltip', () => ({
+  Tooltip: ({ children }: { children: React.ReactNode }) => (
+    <div data-test="mock-tooltip">{children}</div>
+  ),
+}));
 
-  it('renders an info icon', () => {
-    const wrapper = shallow(<InfoTooltipWithTrigger />);
-    expect(wrapper.find('.fa-info-circle')).toHaveLength(1);
-  });
+const defaultProps = {};
 
-  it('responds to keypresses', () => {
-    const clickHandler = jest.fn();
-    const wrapper = shallow(
-      <InfoTooltipWithTrigger
-        label="test"
-        tooltip="this is a test"
-        onClick={clickHandler}
-      />,
-    );
-    wrapper.find('.fa-info-circle').simulate('keypress', { key: 'Tab' });
-    expect(clickHandler).toHaveBeenCalledTimes(0);
-    wrapper.find('.fa-info-circle').simulate('keypress', { key: 'Enter' });
-    expect(clickHandler).toHaveBeenCalledTimes(1);
-    wrapper.find('.fa-info-circle').simulate('keypress', { key: ' ' });
-    expect(clickHandler).toHaveBeenCalledTimes(2);
-  });
+const setup = (props: Partial<InfoTooltipWithTriggerProps> = {}) =>
+  render(
+    <ThemeProvider theme={supersetTheme}>
+      <InfoTooltipWithTrigger {...defaultProps} {...props} />
+    </ThemeProvider>,
+  );
 
-  it('has a bsStyle', () => {
-    const wrapper = shallow(<InfoTooltipWithTrigger bsStyle="something" />);
-    expect(wrapper.find('.text-something')).toHaveLength(1);
+test('renders a tooltip', () => {
+  const { getAllByTestId } = setup({
+    label: 'test',
+    tooltip: 'this is a test',
   });
+  expect(getAllByTestId('mock-tooltip').length).toEqual(1);
+});
+
+test('renders an info icon', () => {
+  const { container } = setup();
+  expect(container.getElementsByClassName('fa-info-circle')).toHaveLength(1);
+});
+
+test('responds to keypresses', () => {
+  const clickHandler = jest.fn();
+  const { getByRole } = setup({
+    label: 'test',
+    tooltip: 'this is a test',
+    onClick: clickHandler,
+  });
+  fireEvent.keyPress(getByRole('button'), {
+    key: 'Tab',
+    code: 9,
+    charCode: 9,
+  });
+  expect(clickHandler).toHaveBeenCalledTimes(0);
+  fireEvent.keyPress(getByRole('button'), {
+    key: 'Enter',
+    code: 13,
+    charCode: 13,
+  });
+  expect(clickHandler).toHaveBeenCalledTimes(1);
+  fireEvent.keyPress(getByRole('button'), {
+    key: ' ',
+    code: 32,
+    charCode: 32,
+  });
+  expect(clickHandler).toHaveBeenCalledTimes(2);
+});
+
+test('has a bsStyle', () => {
+  const { container } = setup({
+    bsStyle: 'something',
+  });
+  expect(container.getElementsByClassName('text-something')).toHaveLength(1);
 });
diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/components/MetricOption.test.tsx b/superset-frontend/packages/superset-ui-chart-controls/test/components/MetricOption.test.tsx
index 929d6db8a..49b78159f 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/test/components/MetricOption.test.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/test/components/MetricOption.test.tsx
@@ -16,72 +16,97 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { isValidElement } from 'react';
-import { shallow, ShallowWrapper } from 'enzyme';
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import { ThemeProvider, supersetTheme } from '@superset-ui/core';
 import { MetricOption, MetricOptionProps } from '../../src';
 
-describe('MetricOption', () => {
-  const defaultProps = {
-    metric: {
-      metric_name: 'foo',
-      verbose_name: 'Foo',
-      expression: 'SUM(foo)',
-      label: 'test',
-      description: 'Foo is the greatest metric of all',
-      warning_text: 'Be careful when using foo',
-    },
-    openInNewWindow: false,
-    showFormula: true,
-    showType: true,
-    url: '',
-  };
+jest.mock('../../src/components/InfoTooltipWithTrigger', () => () => (
+  <div data-test="mock-info-tooltip-with-trigger" />
+));
+jest.mock('../../src/components/ColumnTypeLabel/ColumnTypeLabel', () => ({
+  ColumnTypeLabel: () => <div data-test="mock-column-type-label" />,
+}));
+jest.mock(
+  '../../src/components/Tooltip',
+  () =>
+    ({ children }: { children: React.ReactNode }) => (
+      <div data-test="mock-tooltip">{children}</div>
+    ),
+);
+jest.mock('../../src/components/SQLPopover', () => ({
+  SQLPopover: () => <div data-test="mock-sql-popover" />,
+}));
 
-  let wrapper: ShallowWrapper;
-  let props: MetricOptionProps;
-  const factory = (o: MetricOptionProps) => <MetricOption {...o} />;
-  beforeEach(() => {
-    wrapper = shallow(factory(defaultProps));
-    props = { ...defaultProps };
-  });
-  it('is a valid element', () => {
-    expect(isValidElement(<MetricOption {...defaultProps} />)).toBe(true);
-  });
-  it('shows a label with verbose_name', () => {
-    const lbl = wrapper.find('.option-label');
-    expect(lbl).toHaveLength(1);
-    expect(lbl.first().text()).toBe('Foo');
-  });
-  it('shows a InfoTooltipWithTrigger', () => {
-    expect(wrapper.find('InfoTooltipWithTrigger')).toHaveLength(1);
-  });
-  it('shows SQL Popover trigger', () => {
-    expect(wrapper.find('SQLPopover')).toHaveLength(1);
-  });
-  it('shows a label with metric_name when no verbose_name', () => {
-    props.metric.verbose_name = '';
-    wrapper = shallow(factory(props));
-    expect(wrapper.find('.option-label').first().text()).toBe('foo');
-  });
-  it('doesnt show InfoTooltipWithTrigger when no warning', () => {
-    props.metric.warning_text = '';
-    wrapper = shallow(factory(props));
-    expect(wrapper.find('InfoTooltipWithTrigger')).toHaveLength(0);
-  });
-  it('sets target="_blank" when openInNewWindow is true', () => {
-    props.url = 'https://github.com/apache/incubator-superset';
-    wrapper = shallow(factory(props));
-    expect(wrapper.find('a').prop('target')).toBe('');
+const defaultProps = {
+  metric: {
+    metric_name: 'foo',
+    verbose_name: 'Foo',
+    expression: 'SUM(foo)',
+    label: 'test',
+    description: 'Foo is the greatest metric of all',
+    warning_text: 'Be careful when using foo',
+  },
+  openInNewWindow: false,
+  showFormula: true,
+  showType: true,
+  url: '',
+};
 
-    props.openInNewWindow = true;
-    wrapper = shallow(factory(props));
-    expect(wrapper.find('a').prop('target')).toBe('_blank');
-  });
-  it('shows a metric type label when showType is true', () => {
-    props.showType = true;
-    wrapper = shallow(factory(props));
-    expect(wrapper.find('ColumnTypeLabel')).toHaveLength(1);
-  });
-  it('shows a Tooltip for the verbose metric name', () => {
-    expect(wrapper.find('Tooltip')).toHaveLength(1);
-  });
+const setup = (props: Partial<MetricOptionProps> = {}) =>
+  render(
+    <ThemeProvider theme={supersetTheme}>
+      <MetricOption {...defaultProps} {...props} />
+    </ThemeProvider>,
+  );
+test('shows a label with verbose_name', () => {
+  const { container } = setup();
+  const lbl = container.getElementsByClassName('option-label');
+  expect(lbl).toHaveLength(1);
+  expect(`${lbl[0].textContent}`).toEqual(defaultProps.metric.verbose_name);
+});
+test('shows a InfoTooltipWithTrigger', () => {
+  const { getByTestId } = setup();
+  expect(getByTestId('mock-info-tooltip-with-trigger')).toBeInTheDocument();
+});
+test('shows SQL Popover trigger', () => {
+  const { getByTestId } = setup();
+  expect(getByTestId('mock-sql-popover')).toBeInTheDocument();
+});
+test('shows a label with metric_name when no verbose_name', () => {
+  const { getByText } = setup({
+    metric: {
+      ...defaultProps.metric,
+      verbose_name: '',
+    },
+  });
+  expect(getByText(defaultProps.metric.metric_name)).toBeInTheDocument();
+});
+test('doesnt show InfoTooltipWithTrigger when no warning', () => {
+  const { queryByText } = setup({
+    metric: {
+      ...defaultProps.metric,
+      warning_text: '',
+    },
+  });
+  expect(queryByText('mock-info-tooltip-with-trigger')).not.toBeInTheDocument();
+});
+test('sets target="_blank" when openInNewWindow is true', () => {
+  const { getByRole } = setup({
+    url: 'https://github.com/apache/incubator-superset',
+    openInNewWindow: true,
+  });
+  expect(
+    getByRole('link', { name: defaultProps.metric.verbose_name }),
+  ).toHaveAttribute('target', '_blank');
+});
+test('shows a metric type label when showType is true', () => {
+  const { getByTestId } = setup({
+    showType: true,
+  });
+  expect(getByTestId('mock-column-type-label')).toBeInTheDocument();
+});
+test('shows a Tooltip for the verbose metric name', () => {
+  const { getByTestId } = setup();
+  expect(getByTestId('mock-tooltip')).toBeInTheDocument();
 });