diff --git a/public/app/core/components/NavBar/NavBarItem.test.tsx b/public/app/core/components/NavBar/NavBarItem.test.tsx
index e0c27b55b76..acd180d0893 100644
--- a/public/app/core/components/NavBar/NavBarItem.test.tsx
+++ b/public/app/core/components/NavBar/NavBarItem.test.tsx
@@ -21,7 +21,7 @@ const defaults: Props = {
   },
 };
 
-function getTestContext(overrides: Partial<Props> = {}, subUrl = '') {
+async function getTestContext(overrides: Partial<Props> = {}, subUrl = '') {
   jest.clearAllMocks();
   config.appSubUrl = subUrl;
   locationUtil.initialize({ config, getTimeRangeForUrl: jest.fn(), getVariablesUrlParams: jest.fn() });
@@ -38,20 +38,23 @@ function getTestContext(overrides: Partial<Props> = {}, subUrl = '') {
     </TestProvider>
   );
 
+  // Need to click this first to set the correct selection range
+  // see https://github.com/testing-library/user-event/issues/901#issuecomment-1087192424
+  await userEvent.click(document.body);
   return { rerender, pushMock };
 }
 
 describe('NavBarItem', () => {
   describe('when url property is not set', () => {
-    it('then it renders the menu trigger as a button', () => {
-      getTestContext();
+    it('then it renders the menu trigger as a button', async () => {
+      await getTestContext();
 
       expect(screen.getAllByRole('button')).toHaveLength(1);
     });
 
     describe('and clicking on the menu trigger button', () => {
       it('then the onClick handler should be called', async () => {
-        getTestContext();
+        await getTestContext();
 
         await userEvent.click(screen.getByRole('button'));
         expect(onClickMock).toHaveBeenCalledTimes(1);
@@ -60,7 +63,7 @@ describe('NavBarItem', () => {
 
     describe('and hovering over the menu trigger button', () => {
       it('then the menu items should be visible', async () => {
-        getTestContext();
+        await getTestContext();
 
         await userEvent.hover(screen.getByRole('button'));
 
@@ -72,7 +75,7 @@ describe('NavBarItem', () => {
 
     describe('and tabbing to the menu trigger button', () => {
       it('then the menu items should be visible', async () => {
-        getTestContext();
+        await getTestContext();
 
         await userEvent.tab();
 
@@ -84,7 +87,7 @@ describe('NavBarItem', () => {
 
     describe('and pressing arrow right on the menu trigger button', () => {
       it('then the correct menu item should receive focus', async () => {
-        getTestContext();
+        await getTestContext();
 
         await userEvent.tab();
         expect(screen.getAllByRole('menuitem')).toHaveLength(3);
@@ -92,7 +95,7 @@ describe('NavBarItem', () => {
         expect(screen.getAllByRole('menuitem')[1]).toHaveAttribute('tabIndex', '-1');
         expect(screen.getAllByRole('menuitem')[2]).toHaveAttribute('tabIndex', '-1');
 
-        await userEvent.keyboard('{arrowright}');
+        await userEvent.keyboard('{ArrowRight}');
         expect(screen.getAllByRole('menuitem')).toHaveLength(3);
         expect(screen.getAllByRole('menuitem')[0]).toHaveAttribute('tabIndex', '0');
         expect(screen.getAllByRole('menuitem')[1]).toHaveAttribute('tabIndex', '-1');
@@ -102,8 +105,8 @@ describe('NavBarItem', () => {
   });
 
   describe('when url property is set', () => {
-    it('then it renders the menu trigger as a link', () => {
-      getTestContext({ link: { ...defaults.link, url: 'https://www.grafana.com' } });
+    it('then it renders the menu trigger as a link', async () => {
+      await getTestContext({ link: { ...defaults.link, url: 'https://www.grafana.com' } });
 
       expect(screen.getAllByRole('link')).toHaveLength(1);
       expect(screen.getByRole('link')).toHaveAttribute('href', 'https://www.grafana.com');
@@ -111,7 +114,7 @@ describe('NavBarItem', () => {
 
     describe('and hovering over the menu trigger link', () => {
       it('then the menu items should be visible', async () => {
-        getTestContext({ link: { ...defaults.link, url: 'https://www.grafana.com' } });
+        await getTestContext({ link: { ...defaults.link, url: 'https://www.grafana.com' } });
 
         await userEvent.hover(screen.getByRole('link'));
 
@@ -123,7 +126,7 @@ describe('NavBarItem', () => {
 
     describe('and tabbing to the menu trigger link', () => {
       it('then the menu items should be visible', async () => {
-        getTestContext({ link: { ...defaults.link, url: 'https://www.grafana.com' } });
+        await getTestContext({ link: { ...defaults.link, url: 'https://www.grafana.com' } });
 
         await userEvent.tab();
 
@@ -135,7 +138,7 @@ describe('NavBarItem', () => {
 
     describe('and pressing arrow right on the menu trigger link', () => {
       it('then the correct menu item should receive focus', async () => {
-        getTestContext({ link: { ...defaults.link, url: 'https://www.grafana.com' } });
+        await getTestContext({ link: { ...defaults.link, url: 'https://www.grafana.com' } });
 
         await userEvent.tab();
         expect(screen.getAllByRole('link')[0]).toHaveFocus();
@@ -144,7 +147,7 @@ describe('NavBarItem', () => {
         expect(screen.getAllByRole('menuitem')[1]).toHaveAttribute('tabIndex', '-1');
         expect(screen.getAllByRole('menuitem')[2]).toHaveAttribute('tabIndex', '-1');
 
-        await userEvent.keyboard('{arrowright}');
+        await userEvent.keyboard('{ArrowRight}');
         expect(screen.getAllByRole('link')[0]).not.toHaveFocus();
         expect(screen.getAllByRole('menuitem')).toHaveLength(3);
         expect(screen.getAllByRole('menuitem')[0]).toHaveAttribute('tabIndex', '0');
@@ -155,17 +158,17 @@ describe('NavBarItem', () => {
 
     describe('and pressing arrow left on a menu item', () => {
       it('then the nav bar item should receive focus', async () => {
-        getTestContext({ link: { ...defaults.link, url: 'https://www.grafana.com' } });
+        await getTestContext({ link: { ...defaults.link, url: 'https://www.grafana.com' } });
 
         await userEvent.tab();
-        await userEvent.keyboard('{arrowright}');
+        await userEvent.keyboard('{ArrowRight}');
         expect(screen.getAllByRole('link')[0]).not.toHaveFocus();
         expect(screen.getAllByRole('menuitem')).toHaveLength(3);
         expect(screen.getAllByRole('menuitem')[0]).toHaveAttribute('tabIndex', '0');
         expect(screen.getAllByRole('menuitem')[1]).toHaveAttribute('tabIndex', '-1');
         expect(screen.getAllByRole('menuitem')[2]).toHaveAttribute('tabIndex', '-1');
 
-        await userEvent.keyboard('{arrowleft}');
+        await userEvent.keyboard('{ArrowLeft}');
         expect(screen.getAllByRole('link')[0]).toHaveFocus();
         expect(screen.getAllByRole('menuitem')).toHaveLength(3);
         expect(screen.getAllByRole('menuitem')[0]).toHaveAttribute('tabIndex', '-1');
@@ -176,7 +179,7 @@ describe('NavBarItem', () => {
 
     describe('when appSubUrl is configured and user clicks on menuitem link', () => {
       it('then location service should be called with correct url', async () => {
-        const { pushMock } = getTestContext(
+        const { pushMock } = await getTestContext(
           {
             link: {
               ...defaults.link,
@@ -203,7 +206,7 @@ describe('NavBarItem', () => {
 
     describe('when appSubUrl is not configured and user clicks on menuitem link', () => {
       it('then location service should be called with correct url', async () => {
-        const { pushMock } = getTestContext({
+        const { pushMock } = await getTestContext({
           link: {
             ...defaults.link,
             url: 'https://www.grafana.com',