diff --git a/.betterer.results b/.betterer.results
index 0f144b2aac5..662f3bb90d2 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -41,9 +41,6 @@ exports[`no enzyme tests`] = {
     "packages/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView.test.js:551014442": [
       [13, 26, 13, "RegExp match", "2409514259"]
     ],
-    "public/app/core/components/Select/MetricSelect.test.tsx:1074737147": [
-      [0, 19, 13, "RegExp match", "2409514259"]
-    ],
     "public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.test.tsx:145048794": [
       [0, 17, 13, "RegExp match", "2409514259"]
     ]
@@ -2598,10 +2595,6 @@ exports[`better eslint`] = {
     "public/app/core/components/RolePicker/RolePickerMenu.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
-    "public/app/core/components/Select/MetricSelect.test.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
-    ],
     "public/app/core/components/Select/ReadonlyFolderPicker/api.test.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
diff --git a/public/app/core/components/Select/MetricSelect.test.tsx b/public/app/core/components/Select/MetricSelect.test.tsx
index 465f406b6a6..d685b65c2b7 100644
--- a/public/app/core/components/Select/MetricSelect.test.tsx
+++ b/public/app/core/components/Select/MetricSelect.test.tsx
@@ -1,50 +1,52 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
+import { select, openMenu } from 'react-select-event';
 
-import { LegacyForms } from '@grafana/ui';
+import { MetricSelect, Props } from './MetricSelect';
 
-import { MetricSelect } from './MetricSelect';
-
-const { Select } = LegacyForms;
+const props: Props = {
+  isSearchable: false,
+  onChange: jest.fn(),
+  value: '',
+  placeholder: 'Select Reducer',
+  className: 'width-15',
+  options: [
+    {
+      label: 'foo',
+      value: 'foo',
+    },
+    {
+      label: 'bar',
+      value: 'bar',
+    },
+  ],
+  variables: [],
+};
 
 describe('MetricSelect', () => {
-  describe('When receive props', () => {
-    it('should pass correct set of props to Select component', () => {
-      const props: any = {
-        placeholder: 'Select Reducer',
-        className: 'width-15',
-        options: [],
-        variables: [],
-      };
-      const wrapper = shallow(<MetricSelect {...props} />);
-      expect(wrapper.find(Select).props()).toMatchObject({
-        className: 'width-15',
-        isMulti: false,
-        isClearable: false,
-        backspaceRemovesValue: false,
-        isSearchable: true,
-        maxMenuHeight: 500,
-        placeholder: 'Select Reducer',
-      });
+  it('passes the placeholder, options and onChange correctly to Select', async () => {
+    render(<MetricSelect {...props} />);
+    const metricSelect = screen.getByRole('combobox');
+    expect(metricSelect).toBeInTheDocument();
+    expect(screen.getByText('Select Reducer')).toBeInTheDocument();
+
+    await select(metricSelect, 'foo', {
+      container: document.body,
     });
-    it('should pass callbacks correctly to the Select component', () => {
-      const spyOnChange = jest.fn();
-      const props: any = {
-        onChange: spyOnChange,
-        options: [],
-        variables: [],
-      };
-      const wrapper = shallow(<MetricSelect {...props} />);
-      const select = wrapper.find(Select);
+    expect(props.onChange).toHaveBeenCalledWith('foo');
+  });
 
-      select.props().onChange({ value: 'foo' }, { action: 'select-option', option: undefined });
+  it('has the correct noOptionsMessage', () => {
+    const propsWithoutOptions = {
+      ...props,
+      options: [],
+    };
+    render(<MetricSelect {...propsWithoutOptions} />);
 
-      expect(select.props().noOptionsMessage).toBeDefined();
+    const metricSelect = screen.getByRole('combobox');
+    expect(metricSelect).toBeInTheDocument();
 
-      // @ts-ignore typescript doesn't understand that noOptionsMessage can't be undefined here
-      const noOptionsMessage = select.props().noOptionsMessage();
-      expect(noOptionsMessage).toEqual('No options found');
-      expect(spyOnChange).toHaveBeenCalledWith('foo');
-    });
+    openMenu(metricSelect);
+    expect(screen.getByText('No options found')).toBeInTheDocument();
   });
 });