diff --git a/.betterer.results b/.betterer.results
index 69d2e61c0b9..c4ecf72cd83 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -71,9 +71,6 @@ exports[`no enzyme tests`] = {
     "packages/jaeger-ui-components/src/TraceTimelineViewer/ListView/index.test.js:1734982398": [
       [14, 26, 13, "RegExp match", "2409514259"]
     ],
-    "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBar.test.js:1478502145": [
-      [14, 17, 13, "RegExp match", "2409514259"]
-    ],
     "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.test.js:1451240090": [
       [14, 26, 13, "RegExp match", "2409514259"]
     ],
diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts
index 66bf730396a..2bcbed6db14 100644
--- a/packages/grafana-e2e-selectors/src/selectors/components.ts
+++ b/packages/grafana-e2e-selectors/src/selectors/components.ts
@@ -265,7 +265,7 @@ export const Components = {
     placeholder: 'Choose starting day of the week',
   },
   TraceViewer: {
-    spanBar: () => '[data-test-id="SpanBar--wrapper"]',
+    spanBar: 'data-testid SpanBar--wrapper',
   },
   QueryField: { container: 'Query field' },
   ValuePicker: {
diff --git a/packages/jaeger-ui-components/package.json b/packages/jaeger-ui-components/package.json
index 96bef0d2d30..65f5e0e0dd3 100644
--- a/packages/jaeger-ui-components/package.json
+++ b/packages/jaeger-ui-components/package.json
@@ -10,6 +10,8 @@
   },
   "devDependencies": {
     "@grafana/tsconfig": "^1.2.0-rc1",
+    "@testing-library/react": "12.1.4",
+    "@testing-library/user-event": "14.2.0",
     "@types/classnames": "^2.2.7",
     "@types/deep-freeze": "^0.1.1",
     "@types/grafana__slate-react": "npm:@types/slate-react@0.22.5",
@@ -27,6 +29,7 @@
   "dependencies": {
     "@emotion/css": "11.7.1",
     "@grafana/data": "9.0.0-pre",
+    "@grafana/e2e-selectors": "9.0.0-pre",
     "@grafana/ui": "9.0.0-pre",
     "chance": "^1.0.10",
     "classnames": "^2.2.5",
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBar.test.js b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBar.test.js
index 70c745183f6..28ee2a909d8 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBar.test.js
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBar.test.js
@@ -12,11 +12,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { act } from 'react-dom/test-utils';
 
-import { Popover } from '../common/Popover';
+import { selectors } from '@grafana/e2e-selectors';
 
 import SpanBar from './SpanBar';
 
@@ -75,25 +75,23 @@ describe('<SpanBar>', () => {
     },
   };
 
-  it('renders without exploding', () => {
-    const wrapper = mount(<SpanBar {...props} />);
-    expect(wrapper).toBeDefined();
-    const { onMouseOver, onMouseLeave } = wrapper.find('[data-test-id="SpanBar--wrapper"]').props();
-    const labelElm = wrapper.find('[data-test-id="SpanBar--label"]');
-    expect(labelElm.text()).toBe(shortLabel);
-    act(() => {
-      onMouseOver();
-    });
-    expect(labelElm.text()).toBe(longLabel);
-    act(() => {
-      onMouseLeave();
-    });
-    expect(labelElm.text()).toBe(shortLabel);
+  it('renders without exploding', async () => {
+    render(<SpanBar {...props} />);
+    expect(screen.getByText(shortLabel)).toBeInTheDocument();
+    expect(screen.queryByText(longLabel)).not.toBeInTheDocument();
+
+    await userEvent.hover(screen.getByTestId(selectors.components.TraceViewer.spanBar));
+    expect(screen.queryByText(shortLabel)).not.toBeInTheDocument();
+    expect(screen.getByText(longLabel)).toBeInTheDocument();
+
+    await userEvent.unhover(screen.getByTestId(selectors.components.TraceViewer.spanBar));
+    expect(screen.getByText(shortLabel)).toBeInTheDocument();
+    expect(screen.queryByText(longLabel)).not.toBeInTheDocument();
   });
 
   it('log markers count', () => {
     // 3 log entries, two grouped together with the same timestamp
-    const wrapper = mount(<SpanBar {...props} />);
-    expect(wrapper.find(Popover).length).toEqual(2);
+    render(<SpanBar {...props} />);
+    expect(screen.getAllByTestId('SpanBar--logMarker')).toHaveLength(2);
   });
 });
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBar.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBar.tsx
index ed41d2c4416..22897db0b25 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBar.tsx
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBar.tsx
@@ -18,6 +18,7 @@ import { groupBy as _groupBy } from 'lodash';
 import React, { useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 import { useStyles2 } from '@grafana/ui';
 
 import { autoColor } from '../Theme';
@@ -150,7 +151,7 @@ function SpanBar({
       onMouseLeave={setShortLabel}
       onMouseOver={setLongLabel}
       aria-hidden
-      data-test-id="SpanBar--wrapper"
+      data-testid={selectors.components.TraceViewer.spanBar}
     >
       <div
         aria-label={label}
@@ -161,7 +162,7 @@ function SpanBar({
           width: toPercent(viewEnd - viewStart),
         }}
       >
-        <div className={cx(styles.label, labelClassName)} data-test-id="SpanBar--label">
+        <div className={cx(styles.label, labelClassName)} data-testid="SpanBar--label">
           {label}
         </div>
       </div>
@@ -173,7 +174,7 @@ function SpanBar({
               <AccordianLogs interactive={false} isOpen logs={logGroups[positionKey]} timestamp={traceStartTime} />
             }
           >
-            <div className={styles.logMarker} style={{ left: positionKey }} />
+            <div data-testid="SpanBar--logMarker" className={styles.logMarker} style={{ left: positionKey }} />
           </Popover>
         ))}
       </div>
diff --git a/yarn.lock b/yarn.lock
index 7d075727b52..6229e8a246a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4978,8 +4978,11 @@ __metadata:
   dependencies:
     "@emotion/css": 11.7.1
     "@grafana/data": 9.0.0-pre
+    "@grafana/e2e-selectors": 9.0.0-pre
     "@grafana/tsconfig": ^1.2.0-rc1
     "@grafana/ui": 9.0.0-pre
+    "@testing-library/react": 12.1.4
+    "@testing-library/user-event": 14.2.0
     "@types/classnames": ^2.2.7
     "@types/deep-freeze": ^0.1.1
     "@types/grafana__slate-react": "npm:@types/slate-react@0.22.5"