diff --git a/.betterer.results b/.betterer.results
index e96c38df1a7..32a9c19ec5a 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -26,9 +26,6 @@ exports[`no enzyme tests`] = {
     "packages/grafana-ui/src/components/Typeahead/PartialHighlighter.test.tsx:1751923376": [
       [0, 31, 13, "RegExp match", "2409514259"]
     ],
-    "packages/grafana-ui/src/components/Typeahead/Typeahead.test.tsx:972524250": [
-      [0, 17, 13, "RegExp match", "2409514259"]
-    ],
     "packages/grafana-ui/src/slate-plugins/braces.test.tsx:1440546721": [
       [0, 19, 13, "RegExp match", "2409514259"]
     ],
diff --git a/packages/grafana-ui/src/components/Typeahead/Typeahead.test.tsx b/packages/grafana-ui/src/components/Typeahead/Typeahead.test.tsx
index a2ac0365890..8c81f7885b8 100644
--- a/packages/grafana-ui/src/components/Typeahead/Typeahead.test.tsx
+++ b/packages/grafana-ui/src/components/Typeahead/Typeahead.test.tsx
@@ -1,57 +1,45 @@
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 
-import { CompletionItemGroup, CompletionItemKind } from '../../types';
+import { CompletionItemGroup } from '../../types';
 
-import { Typeahead, State } from './Typeahead';
-import { TypeaheadItem } from './TypeaheadItem';
+import { Typeahead } from './Typeahead';
 
 describe('Typeahead', () => {
-  const completionItemGroups = [{ label: 'my group', items: [{ label: 'first item' }] }];
+  const completionItemGroups: CompletionItemGroup[] = [{ label: 'my group', items: [{ label: 'first item' }] }];
+
   describe('when closed', () => {
     it('renders nothing when no items given', () => {
-      const component = mount(<Typeahead origin="test" groupedItems={[]} />);
-      expect(component.find('.typeahead')).toHaveLength(0);
+      render(<Typeahead origin="test" groupedItems={[]} />);
+      expect(screen.queryByTestId('typeahead')).not.toBeInTheDocument();
     });
+
     it('renders nothing when items given', () => {
-      const component = mount(<Typeahead origin="test" groupedItems={completionItemGroups} />);
-      expect(component.find('.typeahead')).toHaveLength(0);
+      render(<Typeahead origin="test" groupedItems={completionItemGroups} />);
+      expect(screen.queryByTestId('typeahead')).not.toBeInTheDocument();
     });
   });
+
   describe('when open', () => {
     it('renders given items and nothing is selected', () => {
-      const component = mount(<Typeahead origin="test" groupedItems={completionItemGroups} isOpen />);
-      expect(component.find('.typeahead')).toHaveLength(1);
-      const items = component.find(TypeaheadItem);
+      render(<Typeahead origin="test" groupedItems={completionItemGroups} isOpen />);
+      expect(screen.getByTestId('typeahead')).toBeInTheDocument();
+
+      const items = screen.getAllByRole('listitem');
       expect(items).toHaveLength(2);
-      expect(items.get(0).props.item.kind).toEqual(CompletionItemKind.GroupTitle);
-      expect(items.get(0).props.isSelected).toBeFalsy();
-      expect(items.get(1).props.item.label).toEqual('first item');
-      expect(items.get(1).props.isSelected).toBeFalsy();
+      expect(items[0]).toHaveTextContent('my group');
+      expect(items[1]).toHaveTextContent('first item');
+    });
+
+    it('can be rendered properly even if the size of items is large', () => {
+      const completionItemGroups: CompletionItemGroup[] = [{ label: 'my group', items: [] }];
+      const itemsSize = 1000000;
+      for (let i = 0; i < itemsSize; i++) {
+        completionItemGroups[0].items.push({ label: 'item' + i });
+      }
+
+      render(<Typeahead origin="test" groupedItems={completionItemGroups} isOpen />);
+      expect(screen.getByTestId('typeahead')).toBeInTheDocument();
     });
   });
-  it('selected the first non-group item on moving to first item', () => {
-    const component = mount(<Typeahead origin="test" groupedItems={completionItemGroups} isOpen />);
-    expect(component.find('.typeahead')).toHaveLength(1);
-    let items = component.find(TypeaheadItem);
-
-    expect(items).toHaveLength(2);
-    expect((component.state() as State).typeaheadIndex).toBe(null);
-    (component.instance() as Typeahead).moveMenuIndex(1);
-    expect((component.state() as State).typeaheadIndex).toBe(1);
-    component.setProps({});
-    items = component.find(TypeaheadItem);
-    expect(items.get(0).props.isSelected).toBeFalsy();
-    expect(items.get(1).props.isSelected).toBeTruthy();
-  });
-  it('can be rendered properly even if the size of items is large', () => {
-    const completionItemGroups: CompletionItemGroup[] = [{ label: 'my group', items: [] }];
-    const itemsSize = 1000000;
-    for (let i = 0; i < itemsSize; i++) {
-      completionItemGroups[0].items.push({ label: 'item' + i });
-    }
-
-    const component = mount(<Typeahead origin="test" groupedItems={completionItemGroups} isOpen />);
-    expect(component.find('.typeahead')).toHaveLength(1);
-  });
 });
diff --git a/packages/grafana-ui/src/components/Typeahead/Typeahead.tsx b/packages/grafana-ui/src/components/Typeahead/Typeahead.tsx
index 01526c98439..2c1175a6494 100644
--- a/packages/grafana-ui/src/components/Typeahead/Typeahead.tsx
+++ b/packages/grafana-ui/src/components/Typeahead/Typeahead.tsx
@@ -162,7 +162,7 @@ export class Typeahead extends React.PureComponent<Props, State> {
 
     return (
       <Portal origin={origin} isOpen={isOpen} style={this.menuPosition}>
-        <ul className="typeahead">
+        <ul className="typeahead" data-testid="typeahead">
           <FixedSizeList
             ref={this.listRef}
             itemCount={allItems.length}