diff --git a/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/HeaderToolbar.test.js b/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/HeaderToolbar.test.js
index 3896865c87..91dac4033d 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/HeaderToolbar.test.js
+++ b/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/HeaderToolbar.test.js
@@ -1,19 +1,68 @@
-import { testComponentSnapshotsWithFixtures } from 'foremanReact/common/testHelpers';
-import { hasTaxonomiesMock } from '../../Layout.fixtures';
-import { noop } from '../../../../common/helpers';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
+import { hasTaxonomiesMock } from '../../Layout.fixtures';
 import HeaderToolbar from './HeaderToolbar';
 
-const fixtures = {
-  'render HeaderToolbar': {
-    ...hasTaxonomiesMock.data,
-    currentLocation: hasTaxonomiesMock.currentLocation,
-    currentOrganization: hasTaxonomiesMock.currentOrganization,
-    isLoading: false,
-  },
+// Stub the connected/async children so the toolbar's own composition can be
+// tested without a redux store or the notifications API.
+jest.mock('../TaxonomySwitcher/TaxonomySwitcher', () => () => (
+  <div data-testid="taxonomy-switcher" />
+));
+jest.mock('./UserDropdowns', () => ({ user }) => (
+  <div data-testid="user-dropdowns">{user.current_user.name}</div>
+));
+jest.mock('../ImpersonateIcon', () => ({ stopImpersonationUrl }) => (
+  <div data-testid="impersonate-icon">{stopImpersonationUrl}</div>
+));
+jest.mock(
+  '../../../notifications/components/NotificationIcon',
+  () => () => <div data-testid="notification-icon" />
+);
+jest.mock('../../../notifications', () => () => (
+  <div data-testid="notifications" />
+));
+jest.mock('../../../notifications/NotificationsContext', () => ({
+  NotificationsContextWrapper: ({ children }) => <div>{children}</div>,
+}));
+
+const props = {
+  ...hasTaxonomiesMock.data,
+  currentLocation: hasTaxonomiesMock.currentLocation,
+  currentOrganization: hasTaxonomiesMock.currentOrganization,
+  isLoading: false,
 };
 
 describe('HeaderToolbar', () => {
-  describe('rendering', () =>
-    testComponentSnapshotsWithFixtures(HeaderToolbar, fixtures));
+  it('render HeaderToolbar', () => {
+    render(<HeaderToolbar {...props} />);
+
+    expect(screen.getByTestId('taxonomy-switcher')).toBeInTheDocument();
+    expect(screen.getByTestId('notification-icon')).toBeInTheDocument();
+    expect(screen.getByTestId('notifications')).toBeInTheDocument();
+
+    // user dropdown receives the current user
+    expect(screen.getByTestId('user-dropdowns')).toHaveTextContent(
+      'Admin User'
+    );
+
+    // the user is impersonated, so the impersonate icon renders with its url
+    expect(screen.getByTestId('impersonate-icon')).toHaveTextContent(
+      '/users/stop_impersonation'
+    );
+  });
+
+  it('hides the impersonate icon when not impersonated', () => {
+    render(
+      <HeaderToolbar
+        {...props}
+        user={{ ...props.user, impersonated_by: false }}
+      />
+    );
+
+    expect(screen.queryByTestId('impersonate-icon')).not.toBeInTheDocument();
+    // the rest of the toolbar still renders
+    expect(screen.getByTestId('user-dropdowns')).toBeInTheDocument();
+  });
 });
diff --git a/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/UserDropdowns.test.js b/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/UserDropdowns.test.js
index a68f9a5ec7..90c3ec8d62 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/UserDropdowns.test.js
+++ b/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/UserDropdowns.test.js
@@ -1,10 +1,20 @@
-import { testComponentSnapshotsWithFixtures } from '../../../../common/testHelpers';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import UserDropdowns from './UserDropdowns';
 import { userDropdownProps } from '../../Layout.fixtures';
 
-const fixtures = {
-  render: userDropdownProps,
-};
-describe('UserDropdown', () =>
-  testComponentSnapshotsWithFixtures(UserDropdowns, fixtures));
+describe('UserDropdown', () => {
+  it('render', () => {
+    render(<UserDropdowns {...userDropdownProps} />);
+
+    // the toggle shows the current user's name
+    expect(screen.getByText('G L')).toBeInTheDocument();
+
+    // the open menu shows the account item linking to its url
+    const accountItem = screen.getByRole('menuitem', { name: 'My Account' });
+    expect(accountItem).toBeInTheDocument();
+    expect(accountItem).toHaveAttribute('href', '/');
+  });
+});
diff --git a/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/__snapshots__/HeaderToolbar.test.js.snap b/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/__snapshots__/HeaderToolbar.test.js.snap
deleted file mode 100644
index 056271262b..0000000000
--- a/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/__snapshots__/HeaderToolbar.test.js.snap
+++ /dev/null
@@ -1,123 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`HeaderToolbar rendering render HeaderToolbar 1`] = `
-<Toolbar
-  id="data-toolbar"
-  isFullHeight={true}
-  isStatic={true}
-  ouiaId="data-toolbar"
->
-  <ToolbarContent
-    isExpanded={false}
-    showClearFiltersButton={false}
-  >
-    <ForwardRef
-      className="header-tool-item-hidden-lg"
-    >
-      <TaxonomySwitcher
-        isLoading={false}
-        locations={
-          Array [
-            Object {
-              "href": "/locations/2-london/select",
-              "id": 2,
-              "title": "london",
-            },
-            Object {
-              "href": "/locations/3-norway/select",
-              "id": 3,
-              "title": "norway",
-            },
-          ]
-        }
-        organizations={
-          Array [
-            Object {
-              "href": "/organizations/1-org1/select",
-              "id": 1,
-              "title": "org1",
-            },
-            Object {
-              "href": "/organizations/2-org2/select",
-              "id": 2,
-              "title": "org2",
-            },
-          ]
-        }
-      />
-    </ForwardRef>
-    <ForwardRef
-      align={
-        Object {
-          "default": "alignRight",
-        }
-      }
-    >
-      <ToolbarItem>
-        <NotificationsContextWrapper>
-          <NotificationIcon />
-          <Notifications />
-        </NotificationsContextWrapper>
-      </ToolbarItem>
-      <ToolbarItem
-        className="impersonation-item"
-      >
-        <Connect(ImpersonateIcon)
-          stopImpersonationUrl="/users/stop_impersonation"
-        />
-      </ToolbarItem>
-      <ToolbarItem
-        className="header-tool-item-hidden-lg user-nav-item"
-      >
-        <UserDropdowns
-          className=""
-          instanceTitle=""
-          notificationUrl="/notification_recipients"
-          user={
-            Object {
-              "current_user": Object {
-                "firstname": "Admin",
-                "id": 4,
-                "lastname": "User",
-                "login": "admin",
-                "name": "Admin User",
-              },
-              "impersonated_by": true,
-              "user_dropdown": Array [
-                Object {
-                  "children": Array [
-                    Object {
-                      "href": "/a",
-                      "id": "menu_item_aa",
-                      "isDivider": false,
-                      "onClick": [MockFunction],
-                      "title": "Aa",
-                    },
-                    Object {
-                      "href": "/c",
-                      "id": "menu_item_cc",
-                      "isDivider": false,
-                      "onClick": [MockFunction],
-                      "title": "Cc",
-                    },
-                    Object {
-                      "href": "/ac",
-                      "id": "menu_item_ac",
-                      "isDivider": false,
-                      "onClick": [MockFunction],
-                      "title": "Ac",
-                    },
-                  ],
-                  "icon": "fa fa-user",
-                  "name": "User",
-                  "type": "sub_menu",
-                },
-              ],
-            }
-          }
-        />
-      </ToolbarItem>
-    </ForwardRef>
-  </ToolbarContent>
-</Toolbar>
-`;
diff --git a/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/__snapshots__/UserDropdowns.test.js.snap b/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/__snapshots__/UserDropdowns.test.js.snap
deleted file mode 100644
index 433cc648bc..0000000000
--- a/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/__snapshots__/UserDropdowns.test.js.snap
+++ /dev/null
@@ -1,40 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`UserDropdown render 1`] = `
-<Dropdown
-  className=""
-  dropdownItems={
-    Array [
-      <DropdownItem
-        className="user_menuitem"
-        href="/"
-        ouiaId="user-dropdown-item-0"
-      >
-        My Account
-      </DropdownItem>,
-      <DropdownSeparator
-        ouiaId="user-dropdown-separator"
-      />,
-    ]
-  }
-  isOpen={true}
-  isPlain={true}
-  notification_url="/"
-  onSelect={[Function]}
-  ouiaId="user-info-dropdown"
-  position="right"
-  toggle={
-    <DropdownToggle
-      onToggle={[Function]}
-      ouiaId="user-dropdown-toggle"
-    >
-      <Icon
-        className="user-icon"
-      >
-        <UserAltIcon />
-      </Icon>
-      G L
-    </DropdownToggle>
-  }
-/>
-`;