diff --git a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.test.js b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.test.js
index 90f75c0204..248a615992 100644
--- a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.test.js
+++ b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.test.js
@@ -13,57 +13,97 @@
 // limitations under the License.
 
 import * as React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import TraceHeader, { Attrs, EmptyAttrs } from './TraceHeader';
 import { fetchedState } from '../../../constants';
 
 describe('TraceHeader', () => {
-  const props = {
-    duration: 700,
-    error: { errorKey: 'errorValue' },
-    traceID: 'trace-id',
-    traceName: 'trace name',
-  };
-  let wrapper;
+  const renderWithProps = (passedProps = {}) => {
+    const originalProps = {
+      duration: 700,
+      error: { errorKey: 'errorValue' },
+      traceID: 'trace-id',
+      traceName: 'trace name',
+    };
 
-  beforeEach(() => {
-    wrapper = shallow(<TraceHeader {...props} />);
-  });
+    const props = {
+      ...originalProps,
+      ...passedProps,
+    };
+
+    render(<TraceHeader {...props} />);
+  };
 
   it('renders as expected', () => {
-    expect(wrapper).toMatchSnapshot();
+    renderWithProps();
+
+    expect(screen.getAllByTestId('TraceDiffHeader--traceHeader').length).toBe(1);
   });
 
-  it('renders populated attrs component when props.state === fetchedState.DONE', () => {
-    wrapper.setProps({
+  it('renders populated Attrs component when props.state === fetchedState.DONE', () => {
+    renderWithProps({
       startTime: 150,
       totalSpans: 50,
       state: fetchedState.DONE,
     });
-    expect(wrapper).toMatchSnapshot();
+
+    expect(screen.getByTestId('TraceDiffHeader--traceAttributes'));
+    expect(screen.getByTestId('TraceDiffHeader--traceAttr--date'));
+    expect(screen.getByTestId('TraceDiffHeader--traceAttr--duration'));
+    expect(screen.getByTestId('TraceDiffHeader--traceAttr--spans'));
+
+    expect(() => screen.getByTestId('TraceDiffHeader--emptyTraceAttributes')).toThrow();
+  });
+
+  it('renders populated EmptyAttrs component when props.state !== fetchedState.DONE', () => {
+    renderWithProps({
+      startTime: 150,
+      totalSpans: 50,
+      state: fetchedState.LOADING,
+    });
+
+    expect(screen.getByTestId('TraceDiffHeader--emptyTraceAttributes'));
+    expect(() => screen.getByTestId('TraceDiffHeader--traceAttributes')).toThrow();
   });
 
   it('renders "Select a Trace..." when props.traceID is not provided ', () => {
-    wrapper.setProps({
+    renderWithProps({
       traceID: null,
     });
-    expect(wrapper.find('.u-tx-muted').text()).toBe('Select a Trace...');
+
+    expect(screen.getByText('Select a Trace...'));
   });
 
   describe('EmptyAttrs', () => {
     it('renders as expected', () => {
-      expect(shallow(<EmptyAttrs />)).toMatchSnapshot();
+      render(<EmptyAttrs />);
+
+      expect(screen.getByTestId('TraceDiffHeader--traceAttr--empty'));
     });
   });
 
   describe('Attrs', () => {
     it('renders as expected when provided props', () => {
-      expect(shallow(<Attrs duration={700} startTime={150} totalSpans={50} />)).toMatchSnapshot();
+      // Represents a minute in microseconds
+      const ONE_MINUTE = 60 * 10 ** 6;
+
+      render(<Attrs duration={700} startTime={ONE_MINUTE} totalSpans={50} />);
+
+      // Test that the shown values are correctly formatted
+      expect(screen.getByText('January 1, 1970, 12:01:00 am'));
+      expect(screen.getByTestId('TraceDiffHeader--traceAttr--duration').textContent).toBe('700μs');
+      expect(screen.getByTestId('TraceDiffHeader--traceAttr--spans').textContent).toBe('50');
     });
 
     it('Attrs renders as expected when missing props', () => {
-      expect(shallow(<Attrs />)).toMatchSnapshot();
+      render(<Attrs />);
+
+      // Test that the default values are correctly
+      expect(screen.getByText('January 1, 1970, 12:00:00 am'));
+      expect(screen.getByTestId('TraceDiffHeader--traceAttr--duration').textContent).toBe('0μs');
+      expect(screen.getByTestId('TraceDiffHeader--traceAttr--spans').textContent).toBe('0');
     });
   });
 });
diff --git a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.tsx b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.tsx
index d54c50ffd8..5baba664bb 100644
--- a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.tsx
+++ b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.tsx
@@ -45,8 +45,10 @@ type AttrsProps = {
 // exported for tests
 export function EmptyAttrs() {
   return (
-    <ul className="TraecDiffHeader--traceAttributes">
-      <li className="TraecDiffHeader--traceAttr">&nbsp;</li>
+    <ul className="TraceDiffHeader--traceAttributes" data-testid="TraceDiffHeader--emptyTraceAttributes">
+      <li className="TraceDiffHeader--traceAttr" data-testid="TraceDiffHeader--traceAttr--empty">
+        &nbsp;
+      </li>
     </ul>
   );
 }
@@ -55,18 +57,19 @@ export function EmptyAttrs() {
 export function Attrs(props: AttrsProps) {
   const { startTime, duration, totalSpans } = props;
   return (
-    <ul className="TraecDiffHeader--traceAttributes">
-      <li className="TraecDiffHeader--traceAttr">
-        <strong>
+    <ul className="TraceDiffHeader--traceAttributes" data-testid="TraceDiffHeader--traceAttributes">
+      <li className="TraceDiffHeader--traceAttr" data-testid="TraceDiffHeader--traceAttr">
+        <strong data-testid="TraceDiffHeader--traceAttr--date">
           <RelativeDate value={(startTime || 0) / 1000} includeTime fullMonthName />
         </strong>
       </li>
-      <li className="TraecDiffHeader--traceAttr">
+      <li className="TraceDiffHeader--traceAttr" data-testid="TraceDiffHeader--traceAttr">
         <span className="u-tx-muted">Duration: </span>
-        <strong>{formatDuration(duration || 0)}</strong>
+        <strong data-testid="TraceDiffHeader--traceAttr--duration">{formatDuration(duration || 0)}</strong>
       </li>
-      <li className="TraecDiffHeader--traceAttr">
-        <span className="u-tx-muted">Spans: </span> <strong>{totalSpans || 0}</strong>
+      <li className="TraceDiffHeader--traceAttr" data-testid="TraceDiffHeader--traceAttr">
+        <span className="u-tx-muted">Spans: </span>{' '}
+        <strong data-testid="TraceDiffHeader--traceAttr--spans">{totalSpans || 0}</strong>
       </li>
     </ul>
   );
@@ -75,9 +78,10 @@ export function Attrs(props: AttrsProps) {
 export default function TraceHeader(props: Props) {
   const { duration, error, startTime, state, traceID, totalSpans, traceName } = props;
   const AttrsComponent = state === fetchedState.DONE ? Attrs : EmptyAttrs;
+
   return (
-    <div className="TraecDiffHeader--traceHeader">
-      <h1 className="TraecDiffHeader--traceTitle">
+    <div className="TraceDiffHeader--traceHeader" data-testid="TraceDiffHeader--traceHeader">
+      <h1 className="TraceDiffHeader--traceTitle">
         <span>
           {traceID ? (
             <React.Fragment>
@@ -91,7 +95,7 @@ export default function TraceHeader(props: Props) {
             <span className="u-tx-muted">Select a Trace...</span>
           )}
         </span>
-        <IoChevronDown className="TraecDiffHeader--traceTitleChevron" />
+        <IoChevronDown className="TraceDiffHeader--traceTitleChevron" />
       </h1>
       <AttrsComponent startTime={startTime} duration={duration} totalSpans={totalSpans} />
     </div>
diff --git a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/__snapshots__/TraceHeader.test.js.snap b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/__snapshots__/TraceHeader.test.js.snap
deleted file mode 100644
index 6cd72265c0..0000000000
--- a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/__snapshots__/TraceHeader.test.js.snap
+++ /dev/null
@@ -1,178 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TraceHeader Attrs Attrs renders as expected when missing props 1`] = `
-<ul
-  className="TraecDiffHeader--traceAttributes"
->
-  <li
-    className="TraecDiffHeader--traceAttr"
-  >
-    <strong>
-      <RelativeDate
-        fullMonthName={true}
-        includeTime={true}
-        value={0}
-      />
-    </strong>
-  </li>
-  <li
-    className="TraecDiffHeader--traceAttr"
-  >
-    <span
-      className="u-tx-muted"
-    >
-      Duration: 
-    </span>
-    <strong>
-      0μs
-    </strong>
-  </li>
-  <li
-    className="TraecDiffHeader--traceAttr"
-  >
-    <span
-      className="u-tx-muted"
-    >
-      Spans: 
-    </span>
-     
-    <strong>
-      0
-    </strong>
-  </li>
-</ul>
-`;
-
-exports[`TraceHeader Attrs renders as expected when provided props 1`] = `
-<ul
-  className="TraecDiffHeader--traceAttributes"
->
-  <li
-    className="TraecDiffHeader--traceAttr"
-  >
-    <strong>
-      <RelativeDate
-        fullMonthName={true}
-        includeTime={true}
-        value={0.15}
-      />
-    </strong>
-  </li>
-  <li
-    className="TraecDiffHeader--traceAttr"
-  >
-    <span
-      className="u-tx-muted"
-    >
-      Duration: 
-    </span>
-    <strong>
-      700μs
-    </strong>
-  </li>
-  <li
-    className="TraecDiffHeader--traceAttr"
-  >
-    <span
-      className="u-tx-muted"
-    >
-      Spans: 
-    </span>
-     
-    <strong>
-      50
-    </strong>
-  </li>
-</ul>
-`;
-
-exports[`TraceHeader EmptyAttrs renders as expected 1`] = `
-<ul
-  className="TraecDiffHeader--traceAttributes"
->
-  <li
-    className="TraecDiffHeader--traceAttr"
-  >
-     
-  </li>
-</ul>
-`;
-
-exports[`TraceHeader renders as expected 1`] = `
-<div
-  className="TraecDiffHeader--traceHeader"
->
-  <h1
-    className="TraecDiffHeader--traceTitle"
-  >
-    <span>
-      <TraceName
-        error={
-          Object {
-            "errorKey": "errorValue",
-          }
-        }
-        key="name"
-        traceName="trace name"
-      />
-       
-      <small
-        className="u-tx-muted ub-pr2"
-        key="id"
-      >
-        trace-i
-      </small>
-      <TraceTimelineLink
-        traceID="trace-id"
-      />
-    </span>
-    <IoChevronDown
-      className="TraecDiffHeader--traceTitleChevron"
-    />
-  </h1>
-  <EmptyAttrs
-    duration={700}
-  />
-</div>
-`;
-
-exports[`TraceHeader renders populated attrs component when props.state === fetchedState.DONE 1`] = `
-<div
-  className="TraecDiffHeader--traceHeader"
->
-  <h1
-    className="TraecDiffHeader--traceTitle"
-  >
-    <span>
-      <TraceName
-        error={
-          Object {
-            "errorKey": "errorValue",
-          }
-        }
-        key="name"
-        state="FETCH_DONE"
-        traceName="trace name"
-      />
-       
-      <small
-        className="u-tx-muted ub-pr2"
-        key="id"
-      >
-        trace-i
-      </small>
-      <TraceTimelineLink
-        traceID="trace-id"
-      />
-    </span>
-    <IoChevronDown
-      className="TraecDiffHeader--traceTitleChevron"
-    />
-  </h1>
-  <Attrs
-    duration={700}
-    startTime={150}
-    totalSpans={50}
-  />
-</div>
-`;