diff --git a/packages/react/__tests__/src/components/NavBar/NavBar.js b/packages/react/__tests__/src/components/NavBar/NavBar.js
deleted file mode 100644
index 849ba1f08..000000000
--- a/packages/react/__tests__/src/components/NavBar/NavBar.js
+++ /dev/null
@@ -1,199 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import NavBar, { NavItem } from 'src/components/NavBar';
-import { act } from 'react-dom/test-utils';
-
-let wrapperNode;
-let mountNode;
-
-beforeEach(() => {
-  wrapperNode = document.createElement('div');
-  wrapperNode.innerHTML = `
-    <a href="#foo" data-test>Click Me!</a>
-    <div id="#mount"></div>
-  `;
-  document.body.appendChild(wrapperNode);
-  mountNode = document.getElementById('mount');
-});
-
-afterEach(() => {
-  document.body.innerHTML = '';
-  wrapperNode = null;
-  mountNode = null;
-});
-
-test('mounts without error', () => {
-  expect(() =>
-    mount(
-      <NavBar>
-        <div />
-      </NavBar>
-    )
-  ).not.toThrow();
-});
-
-test('renders className prop', () => {
-  const MountedNavBar = mount(
-    <NavBar className="find--me">
-      <div />
-    </NavBar>
-  );
-  expect(MountedNavBar.find('.find--me').exists()).toBe(true);
-});
-
-test('renders propId', () => {
-  const MountedNavBar = mount(
-    <NavBar propId="someid">
-      <div />
-    </NavBar>
-  );
-
-  expect(MountedNavBar.find('ul#someid').exists()).toBe(true);
-});
-
-test('renders NavBar trigger button when collapsed prop is true', () => {
-  const MountedNavBar = mount(
-    <NavBar collapsed>
-      <NavItem>
-        <p>first item</p>
-      </NavItem>
-    </NavBar>
-  );
-
-  expect(MountedNavBar.find('.NavBar__trigger').exists()).toBe(true);
-  expect(MountedNavBar.find('.NavBar__trigger--active').exists()).toBe(false);
-  expect(MountedNavBar.find('NavItem').exists()).toBe(false);
-  expect(MountedNavBar.find('button').prop('aria-expanded')).toBe(false);
-  expect(MountedNavBar.find('Icon').prop('type')).toEqual('hamburger-menu');
-});
-
-test('renders navTriggerLabel properly', () => {
-  const MountedNavBar = mount(
-    <NavBar collapsed navTriggerLabel="I am a label">
-      <NavItem>
-        <p>first item</p>
-      </NavItem>
-    </NavBar>
-  );
-
-  expect(MountedNavBar.find('.NavBar__trigger').exists()).toBe(true);
-  expect(
-    MountedNavBar.find('.NavBar__trigger')
-      .find('button')
-      .text()
-  ).toEqual('I am a label');
-  expect(MountedNavBar.find('NavItem').exists()).toBe(false);
-});
-
-test('renders aria-controls prop on trigger button', () => {
-  const MountedTrigger = mount(
-    <NavBar collapsed propId="someid">
-      <NavItem>
-        <p>first item</p>
-      </NavItem>
-    </NavBar>
-  );
-  expect(
-    MountedTrigger.find('button.NavBar__trigger').prop('aria-controls')
-  ).toEqual('someid');
-});
-
-test('shows NavItems after clicking NavBar trigger button', () => {
-  const MountedNavBar = mount(
-    <NavBar collapsed>
-      <NavItem>
-        <p>first item</p>
-      </NavItem>
-    </NavBar>
-  );
-
-  MountedNavBar.find('.NavBar__trigger').simulate('click');
-  MountedNavBar.update();
-  expect(MountedNavBar.find('NavItem').exists()).toBe(true);
-  expect(MountedNavBar.find('.NavBar__trigger--active').exists()).toBe(true);
-  expect(
-    MountedNavBar.find('button.NavBar__trigger').prop('aria-expanded')
-  ).toBe(true);
-  expect(MountedNavBar.find('Icon').prop('type')).toEqual('close');
-});
-
-test('hides NavItems after pressing escape key', () => {
-  const MountedNavBar = mount(
-    <NavBar collapsed>
-      <NavItem>
-        <p>first item</p>
-      </NavItem>
-    </NavBar>
-  );
-
-  MountedNavBar.find('.NavBar__trigger').simulate('click');
-  MountedNavBar.update();
-
-  MountedNavBar.find('ul').simulate('keydown', { key: 'Escape' });
-  MountedNavBar.update();
-
-  expect(MountedNavBar.find('NavItem').exists()).toBe(false);
-});
-
-test('does not hide NavItems after pressing other keys', () => {
-  const MountedNavBar = mount(
-    <NavBar collapsed>
-      <NavItem>
-        <p>first item</p>
-      </NavItem>
-    </NavBar>
-  );
-
-  MountedNavBar.find('.NavBar__trigger').simulate('click');
-  MountedNavBar.update();
-
-  MountedNavBar.find('ul').simulate('keydown', { key: 'Home' });
-  MountedNavBar.update();
-
-  expect(MountedNavBar.find('NavItem').exists()).toBe(true);
-});
-
-test('hides NavItems when focusing outside nav', async () => {
-  const MountedNavBar = mount(
-    <NavBar collapsed>
-      <NavItem>
-        <p>first item</p>
-      </NavItem>
-    </NavBar>,
-    { attachTo: mountNode }
-  );
-
-  MountedNavBar.find('.NavBar__trigger').simulate('click');
-  MountedNavBar.update();
-
-  act(() => {
-    wrapperNode
-      .querySelector('a')
-      .dispatchEvent(new Event('focusin', { bubbles: true }));
-  });
-
-  MountedNavBar.update();
-
-  expect(MountedNavBar.find('NavItem').exists()).toBe(false);
-});
-
-test('does not hides NavItems when focusing inside nav', async () => {
-  const MountedNavBar = mount(
-    <NavBar collapsed>
-      <NavItem>
-        <p>first item</p>
-      </NavItem>
-    </NavBar>,
-    { attachTo: mountNode }
-  );
-
-  MountedNavBar.find('.NavBar__trigger').simulate('click');
-  MountedNavBar.update();
-
-  MountedNavBar.find('NavItem')
-    .at(0)
-    .simulate('focus');
-  MountedNavBar.update();
-
-  expect(MountedNavBar.find('NavItem').exists()).toBe(true);
-});
diff --git a/packages/react/src/components/NavBar/navBar.test.tsx b/packages/react/src/components/NavBar/navBar.test.tsx
new file mode 100644
index 000000000..8e12065fe
--- /dev/null
+++ b/packages/react/src/components/NavBar/navBar.test.tsx
@@ -0,0 +1,179 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import NavBar, { NavItem } from './';
+import axe from '../../axe';
+
+let wrapperNode: HTMLDivElement | null;
+let mountNode: HTMLElement | null;
+
+beforeEach(() => {
+  wrapperNode = document.createElement('div');
+  wrapperNode.innerHTML = `
+      <a href="#foo" data-testid="link">Click Me!</a>
+      <div id="#mount"></div>
+    `;
+  document.body.appendChild(wrapperNode);
+  mountNode = document.getElementById('mount');
+});
+
+afterEach(() => {
+  document.body.innerHTML = '';
+  wrapperNode = null;
+  mountNode = null;
+});
+
+test('should render without error', () => {
+  render(
+    <NavBar>
+      <div />
+    </NavBar>
+  );
+  expect(screen.getByRole('navigation')).toBeInTheDocument();
+});
+
+test('should render with propId', () => {
+  render(
+    <NavBar propId="someid">
+      <div />
+    </NavBar>
+  );
+  expect(screen.getByRole('list')).toHaveAttribute('id', 'someid');
+});
+
+test('should render NavBar trigger button when collapsed prop is true', () => {
+  render(
+    <NavBar collapsed>
+      <NavItem active={false}>
+        <p>first item</p>
+      </NavItem>
+    </NavBar>
+  );
+
+  expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false');
+  expect(screen.getByRole('button')).toHaveClass('NavBar__trigger');
+  expect(screen.getByRole('button')).not.toHaveClass('NavBar__trigger--active');
+  expect(screen.queryByRole('listitem')).not.toBeInTheDocument();
+  expect(screen.getByRole('navigation').querySelector('.Icon')).toHaveClass(
+    'Icon',
+    'Icon--hamburger-menu'
+  );
+});
+
+test('should render navTriggerLabel properly', () => {
+  render(
+    <NavBar collapsed navTriggerLabel="I am a label">
+      <NavItem active={false}>
+        <p>first item</p>
+      </NavItem>
+    </NavBar>
+  );
+
+  expect(screen.getByRole('button')).toHaveAccessibleName('I am a label');
+});
+
+test('should render aria-controls prop on trigger button', () => {
+  render(
+    <NavBar collapsed propId="someid">
+      <NavItem active={false}>
+        <p>first item</p>
+      </NavItem>
+    </NavBar>
+  );
+
+  expect(screen.getByRole('button')).toHaveAttribute('aria-controls', 'someid');
+});
+
+test('should render aria-controls prop on trigger button', () => {
+  render(
+    <NavBar collapsed>
+      <NavItem active>
+        <p>first item</p>
+      </NavItem>
+    </NavBar>
+  );
+
+  fireEvent.click(screen.getByRole('button'));
+  expect(screen.getByText('first item')).toBeInTheDocument();
+});
+
+test('should hide NavItems after pressing escape key', () => {
+  render(
+    <NavBar collapsed>
+      <NavItem active>
+        <p>first item</p>
+      </NavItem>
+    </NavBar>
+  );
+
+  fireEvent.click(screen.getByRole('button'));
+  fireEvent.keyDown(screen.getByRole('list'), { key: 'Escape' });
+  expect(screen.queryByRole('listitem')).not.toBeInTheDocument();
+});
+
+test('should not hide NavItems after pressing other keys', () => {
+  render(
+    <NavBar collapsed>
+      <NavItem active>
+        <p>first item</p>
+      </NavItem>
+    </NavBar>
+  );
+
+  fireEvent.click(screen.getByRole('button'));
+  fireEvent.keyDown(screen.getByRole('list'), { key: 'Home' });
+  expect(screen.queryByRole('listitem')).toBeInTheDocument();
+});
+
+test('should hide NavItems when focusing outside nav', () => {
+  render(
+    <NavBar collapsed>
+      <NavItem active>
+        <p>first item</p>
+      </NavItem>
+    </NavBar>
+  );
+
+  fireEvent.click(screen.getByTestId('link'));
+  fireEvent.focusIn(screen.getByTestId('link'));
+  expect(screen.queryByRole('listitem')).not.toBeInTheDocument();
+});
+
+test('should not hide NavItems when focusing inside nav', () => {
+  render(
+    <NavBar collapsed>
+      <NavItem active>
+        <p>first item</p>
+      </NavItem>
+    </NavBar>
+  );
+
+  fireEvent.click(screen.getByRole('button'));
+  fireEvent.focusIn(screen.getByRole('listitem'));
+  expect(screen.getByRole('listitem')).toBeInTheDocument();
+});
+
+test('returns no axe violations when collapsed is true', async () => {
+  const { container } = render(
+    <NavBar collapsed>
+      <NavItem active>
+        <p>I am a child</p>
+      </NavItem>
+    </NavBar>
+  );
+
+  const results = await axe(container);
+  expect(results).toHaveNoViolations();
+});
+
+test('returns no axe violations when collapsed is false', async () => {
+  const { container } = render(
+    <NavBar>
+      <NavItem active>
+        <p>I am a child</p>
+      </NavItem>
+    </NavBar>
+  );
+
+  const results = await axe(container);
+  expect(results).toHaveNoViolations();
+});