diff --git a/packages/react/src/components/CommandBar/CommandBar.test.tsx b/packages/react/src/components/CommandBar/CommandBar.test.tsx
index 0249b4a9241d0b..810d6b58c18808 100644
--- a/packages/react/src/components/CommandBar/CommandBar.test.tsx
+++ b/packages/react/src/components/CommandBar/CommandBar.test.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
-import * as renderer from 'react-test-renderer';
-
+import { act, render, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { CommandBar } from './CommandBar';
-import { mount } from 'enzyme';
 import { isConformant } from '../../common/isConformant';
 import { resetIds } from '../../Utilities';
 import type { IContextualMenuItem } from '../../ContextualMenu';
@@ -13,44 +12,35 @@ describe('CommandBar', () => {
   });
 
   afterEach(() => {
-    for (let i = 0; i < document.body.children.length; i++) {
-      if (document.body.children[i].tagName === 'DIV') {
-        document.body.removeChild(document.body.children[i]);
-        i--;
-      }
+    if ((setTimeout as any).mock) {
+      jest.useRealTimers();
     }
   });
 
   it('renders commands correctly', () => {
-    expect(
-      renderer
-        .create(
-          <CommandBar
-            items={[
-              { key: '1', text: 'asdf' },
-              { key: '2', text: 'asdf' },
-            ]}
-            className={'TestClassName'}
-          />,
-        )
-        .toJSON(),
-    ).toMatchSnapshot();
+    const { container } = render(
+      <CommandBar
+        items={[
+          { key: '1', text: 'asdf' },
+          { key: '2', text: 'asdf' },
+        ]}
+        className={'TestClassName'}
+      />,
+    );
+    expect(container).toMatchSnapshot();
   });
 
   it('renders empty farItems correctly', () => {
-    expect(
-      renderer
-        .create(
-          <CommandBar
-            items={[
-              { key: '1', text: 'asdf' },
-              { key: '2', text: 'asdf' },
-            ]}
-            farItems={[]}
-          />,
-        )
-        .toJSON(),
-    ).toMatchSnapshot();
+    const { container } = render(
+      <CommandBar
+        items={[
+          { key: '1', text: 'asdf' },
+          { key: '2', text: 'asdf' },
+        ]}
+        farItems={[]}
+      />,
+    );
+    expect(container).toMatchSnapshot();
   });
 
   isConformant({
@@ -62,7 +52,9 @@ describe('CommandBar', () => {
   });
 
   it('opens a menu with IContextualMenuItem.subMenuProps.items property', () => {
-    const commandBar = mount(
+    jest.useFakeTimers();
+
+    const { getByRole } = render(
       <CommandBar
         items={[
           {
@@ -82,17 +74,20 @@ describe('CommandBar', () => {
         ]}
       />,
     );
+    //Initial rendering of component is "hidden" while measurements are made
+    // therefore we need to wait a bit before getting roles.
+    act(() => {
+      jest.runAllTimers();
+    });
 
-    const menuItem = commandBar.find('.MenuItem button');
-
-    expect(menuItem.length).toEqual(1);
-
-    menuItem.simulate('click');
-
-    expect(document.querySelector('.SubMenuClass')).toBeTruthy();
+    const menuItem = getByRole('menuitem');
+    userEvent.click(menuItem);
+    expect(getByRole('menu')).toBeTruthy();
   });
 
   it('passes event and item to button onClick callbacks', () => {
+    jest.useFakeTimers();
+
     let testValue: IContextualMenuItem | undefined;
 
     const itemData: IContextualMenuItem = {
@@ -107,95 +102,114 @@ describe('CommandBar', () => {
       },
     };
 
-    const commandBar = mount(<CommandBar items={[itemData]} />);
-
-    const menuItem = commandBar.find('.MenuItem button');
+    const { getByRole } = render(<CommandBar items={[itemData]} />);
 
-    menuItem.simulate('click');
+    //Initial rendering of component is "hidden" while measurements are made
+    // therefore we need to wait a bit before getting roles.
+    act(() => {
+      jest.runAllTimers();
+    });
 
+    const menuItem = getByRole('menuitem');
+    userEvent.click(menuItem);
     expect(testValue).toEqual(itemData);
   });
 
   it('keeps menu open after update if item is still present', () => {
-    const commandBar = mount(
-      <CommandBar
-        items={[
-          {
-            text: 'TestText 1',
-            key: 'TestKey1',
-            subMenuProps: {
-              items: [
-                {
-                  text: 'SubmenuText 1',
-                  key: 'SubmenuKey1',
-                  className: 'SubMenuClass',
-                },
-              ],
+    jest.useFakeTimers();
+
+    const items = [
+      {
+        text: 'TestText 1',
+        key: 'TestKey1',
+        subMenuProps: {
+          items: [
+            {
+              text: 'SubmenuText 1',
+              key: 'SubmenuKey1',
+              className: 'SubMenuClass',
             },
-          },
-        ]}
-      />,
-    );
+          ],
+        },
+      },
+    ];
+    const { getByRole, rerender } = render(<CommandBar items={items} />);
 
-    const menuItem = commandBar.find('button');
+    //Initial rendering of component is "hidden" while measurements are made
+    // therefore we need to wait a bit before getting roles.
+    act(() => {
+      jest.runAllTimers();
+    });
 
-    menuItem.simulate('click');
+    const menuItem = getByRole('menuitem');
+    userEvent.click(menuItem);
 
     // Make sure the menu is open before the re-render
-    expect(document.querySelector('.SubMenuClass')).toBeTruthy();
+    expect(getByRole('menu')).toBeTruthy();
 
     // Update the props, and re-render
-    commandBar.setProps({
-      items: commandBar.props().items.concat([
-        {
-          name: 'Test Key 2',
-          key: 'TestKey2',
-        },
-      ]),
+    items.push({
+      text: 'Test Key 2',
+      key: 'TestKey2',
+      subMenuProps: { items: [{ text: 'SubmenuText 2', key: 'SubmenuKey2', className: 'SubmenuClass' }] },
+    });
+    rerender(<CommandBar items={items} />);
+
+    act(() => {
+      jest.runAllTimers();
     });
 
     // Make sure the menu is still open after the re-render
-    expect(document.querySelector('.SubMenuClass')).toBeTruthy();
+    expect(getByRole('menu')).toBeTruthy();
   });
 
-  it('closes menu after update if item is not longer present', () => {
-    const commandBar = mount(
-      <CommandBar
-        items={[
-          {
-            text: 'TestText 1',
-            key: 'TestKey1',
-            subMenuProps: {
-              items: [
-                {
-                  text: 'SubmenuText 1',
-                  key: 'SubmenuKey1',
-                  className: 'SubMenuClass',
-                },
-              ],
+  it('closes menu after update if item is no longer present', () => {
+    jest.useFakeTimers();
+
+    const items = [
+      {
+        text: 'TestText 1',
+        key: 'TestKey1',
+        subMenuProps: {
+          items: [
+            {
+              text: 'SubmenuText 1',
+              key: 'SubmenuKey1',
+              className: 'SubMenuClass',
             },
-          },
-        ]}
-      />,
-    );
+          ],
+        },
+      },
+    ];
+
+    const { getByRole, queryByRole, rerender } = render(<CommandBar items={items} />);
 
-    const menuItem = commandBar.find('button');
+    //Initial rendering of component is "hidden" while measurements are made
+    // therefore we need to wait a bit before getting roles.
+    act(() => {
+      jest.runAllTimers();
+    });
 
-    menuItem.simulate('click');
+    const menuItem = getByRole('menuitem');
+    userEvent.click(menuItem);
 
     // Make sure the menu is open before the re-render
-    expect(document.querySelector('.SubMenuClass')).toBeTruthy();
+    expect(getByRole('menu')).toBeTruthy();
 
     // Update the props, and re-render
-    commandBar.setProps({
-      items: [],
+    rerender(<CommandBar items={[]} />);
+
+    act(() => {
+      jest.runAllTimers();
     });
 
     // Make sure the menu is still open after the re-render
-    expect(document.querySelector('.SubMenuClass')).toBeFalsy();
+    expect(queryByRole('menu')).toBeNull();
   });
 
   it('passes overflowButton menuProps to the menu, and prepend menuProps.items to top of overflow', () => {
+    jest.useFakeTimers();
+
     const items = [
       {
         name: 'Text1',
@@ -210,7 +224,7 @@ describe('CommandBar', () => {
       },
     ];
 
-    const commandBar = mount(
+    const { getByRole, getAllByRole } = render(
       <CommandBar
         overflowButtonProps={{
           menuProps: {
@@ -223,19 +237,26 @@ describe('CommandBar', () => {
       />,
     );
 
-    const overflowMenuButton = commandBar.find('.ms-CommandBar-overflowButton');
+    //Initial rendering of component is "hidden" while measurements are made
+    // therefore we need to wait a bit before getting roles.
+    act(() => {
+      jest.runAllTimers();
+    });
 
-    overflowMenuButton.hostNodes().simulate('click');
+    const overflowMenuButton = getAllByRole('menuitem')[1];
+    userEvent.click(overflowMenuButton);
 
-    const overfowItems = document.querySelectorAll('.ms-ContextualMenu-item');
+    const overfowItems = within(getByRole('menu')).getAllByRole('menuitem');
 
     expect(overfowItems).toHaveLength(2);
     expect(overfowItems[0].textContent).toEqual('Text3');
     expect(overfowItems[1].textContent).toEqual('Text2');
-    expect(document.querySelectorAll('.customMenuClass')).toHaveLength(1);
+    expect(getByRole('menu').querySelectorAll('.customMenuClass')!.length).toEqual(1);
   });
 
   it('updates menu after update if item is still present', () => {
+    jest.useFakeTimers();
+
     const items = (subMenuItemClassName: string) => [
       {
         name: 'TestText 1',
@@ -252,21 +273,29 @@ describe('CommandBar', () => {
       },
     ];
 
-    const commandBar = mount(<CommandBar items={items('SubMenuClass')} />);
+    const { getByRole, rerender } = render(<CommandBar items={items('SubMenuClass')} />);
+
+    //Initial rendering of component is "hidden" while measurements are made
+    // therefore we need to wait a bit before getting roles.
+    act(() => {
+      jest.runAllTimers();
+    });
 
-    const menuItem = commandBar.find('button');
+    const menuItem = getByRole('menuitem');
 
-    menuItem.simulate('click');
+    userEvent.click(menuItem);
 
     // Make sure the menu is open before the re-render
-    expect(document.querySelector('.SubMenuClass')).toBeTruthy();
+    expect(getByRole('menu')).toBeTruthy();
+
+    // Update the props, and re-render
+    rerender(<CommandBar items={items('SubMenuClassUpdate')} />);
 
-    // Re-render
-    commandBar.setProps({
-      items: items('SubMenuClassUpdate'),
+    act(() => {
+      jest.runAllTimers();
     });
 
     // Make sure the menu is still open after the re-render
-    expect(document.querySelector('.SubMenuClassUpdate')).toBeTruthy();
+    expect(getByRole('menu').querySelector('.SubMenuClassUpdate')).toBeTruthy();
   });
 });
diff --git a/packages/react/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap b/packages/react/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap
index 2ccbed0d58008f..087436112541b3 100644
--- a/packages/react/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap
+++ b/packages/react/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap
@@ -1,350 +1,330 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CommandBar renders commands correctly 1`] = `
-<div
-  className="TestClassName"
->
+<div>
   <div
-    style={
-      Object {
-        "position": "relative",
-      }
-    }
+    class="TestClassName"
   >
     <div
-      data-automation-id="visibleContent"
-      style={
-        Object {
-          "position": "fixed",
-          "visibility": "hidden",
-        }
-      }
+      style="position: relative;"
     >
       <div
-        className=
-            ms-FocusZone
-            ms-CommandBar
-            &:focus {
-              outline: none;
-            }
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              background-color: #ffffff;
-              display: flex;
-              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-              font-size: 14px;
-              font-weight: 400;
-              height: 44px;
-              padding-bottom: 0;
-              padding-left: 24px;
-              padding-right: 14px;
-              padding-top: 0;
-            }
-        data-focuszone-id="FocusZone0"
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onMouseDownCapture={[Function]}
-        role="menubar"
+        data-automation-id="visibleContent"
+        style="position: fixed; visibility: hidden;"
       >
         <div
-          className=
-              ms-OverflowSet
-              ms-CommandBar-primaryCommand
+          class=
+              ms-FocusZone
+              ms-CommandBar
+              &:focus {
+                outline: none;
+              }
               {
-                align-items: stretch;
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                background-color: #ffffff;
                 display: flex;
-                flex-grow: 1;
-                flex-wrap: nowrap;
-                position: relative;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                height: 44px;
+                padding-bottom: 0;
+                padding-left: 24px;
+                padding-right: 14px;
+                padding-top: 0;
               }
-          role="none"
+          data-focuszone-id="FocusZone0"
+          role="menubar"
         >
           <div
-            className=
-                ms-OverflowSet-item
+            class=
+                ms-OverflowSet
+                ms-CommandBar-primaryCommand
                 {
-                  display: inherit;
-                  flex-shrink: 0;
+                  align-items: stretch;
+                  display: flex;
+                  flex-grow: 1;
+                  flex-wrap: nowrap;
+                  position: relative;
                 }
             role="none"
           >
-            <button
-              className=
-                  ms-Button
-                  ms-Button--commandBar
-                  ms-CommandBarItem-link
+            <div
+              class=
+                  ms-OverflowSet-item
                   {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    background-color: #ffffff;
-                    border-radius: 0px;
-                    border: none;
-                    box-sizing: border-box;
-                    color: #323130;
-                    cursor: pointer;
-                    display: inline-block;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 14px;
-                    font-weight: 400;
-                    height: 100%;
-                    min-width: 40px;
-                    outline: transparent;
-                    padding-bottom: 0;
-                    padding-left: 4px;
-                    padding-right: 4px;
-                    padding-top: 0;
-                    position: relative;
-                    text-align: center;
-                    text-decoration: none;
-                    user-select: none;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-                  .ms-Fabric--isFocusVisible &:focus:after {
-                    border: 1px solid transparent;
-                    bottom: 3px;
-                    content: "";
-                    left: 3px;
-                    outline: 1px solid #605e5c;
-                    position: absolute;
-                    right: 3px;
-                    top: 3px;
-                    z-index: 1;
-                  }
-                  @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                    border: none;
-                    bottom: 4px;
-                    left: 4px;
-                    outline-color: ButtonText;
-                    right: 4px;
-                    top: 4px;
-                  }
-                  &:active > * {
-                    left: 0px;
-                    position: relative;
-                    top: 0px;
-                  }
-                  @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
-                    border: none;
-                  }
-                  &:hover {
-                    background-color: #f3f2f1;
-                    color: #201f1e;
+                    display: inherit;
+                    flex-shrink: 0;
                   }
-                  @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover {
-                    color: Highlight;
-                  }
-                  &:hover .ms-Button-icon {
-                    color: #106ebe;
-                  }
-                  &:hover .ms-Button-menuIcon {
-                    color: #323130;
-                  }
-                  &:active {
-                    background-color: #edebe9;
-                    color: #201f1e;
-                  }
-                  &:active .ms-Button-icon {
-                    color: #005a9e;
-                  }
-                  &:active .ms-Button-menuIcon {
-                    color: #323130;
-                  }
-              data-is-focusable={true}
-              onClick={[Function]}
-              onKeyDown={[Function]}
-              onKeyPress={[Function]}
-              onKeyUp={[Function]}
-              onMouseDown={[Function]}
-              onMouseUp={[Function]}
-              role="menuitem"
-              type="button"
+              role="none"
             >
-              <span
-                className=
-                    ms-Button-flexContainer
+              <button
+                class=
+                    ms-Button
+                    ms-Button--commandBar
+                    ms-CommandBarItem-link
                     {
-                      align-items: center;
-                      display: flex;
-                      flex-wrap: nowrap;
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      background-color: #ffffff;
+                      border-radius: 0px;
+                      border: none;
+                      box-sizing: border-box;
+                      color: #323130;
+                      cursor: pointer;
+                      display: inline-block;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 14px;
+                      font-weight: 400;
                       height: 100%;
-                      justify-content: center;
+                      min-width: 40px;
+                      outline: transparent;
+                      padding-bottom: 0;
+                      padding-left: 4px;
+                      padding-right: 4px;
+                      padding-top: 0;
+                      position: relative;
+                      text-align: center;
+                      text-decoration: none;
+                      user-select: none;
+                    }
+                    &::-moz-focus-inner {
+                      border: 0;
                     }
-                data-automationid="splitbuttonprimary"
+                    .ms-Fabric--isFocusVisible &:focus:after {
+                      border: 1px solid transparent;
+                      bottom: 3px;
+                      content: "";
+                      left: 3px;
+                      outline: 1px solid #605e5c;
+                      position: absolute;
+                      right: 3px;
+                      top: 3px;
+                      z-index: 1;
+                    }
+                    @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                      border: none;
+                      bottom: 4px;
+                      left: 4px;
+                      outline-color: ButtonText;
+                      right: 4px;
+                      top: 4px;
+                    }
+                    &:active > * {
+                      left: 0px;
+                      position: relative;
+                      top: 0px;
+                    }
+                    @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
+                      border: none;
+                    }
+                    &:hover {
+                      background-color: #f3f2f1;
+                      color: #201f1e;
+                    }
+                    @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover {
+                      color: Highlight;
+                    }
+                    &:hover .ms-Button-icon {
+                      color: #106ebe;
+                    }
+                    &:hover .ms-Button-menuIcon {
+                      color: #323130;
+                    }
+                    &:active {
+                      background-color: #edebe9;
+                      color: #201f1e;
+                    }
+                    &:active .ms-Button-icon {
+                      color: #005a9e;
+                    }
+                    &:active .ms-Button-menuIcon {
+                      color: #323130;
+                    }
+                data-is-focusable="true"
+                role="menuitem"
+                tabindex="0"
+                type="button"
               >
                 <span
-                  className=
-                      ms-Button-textContainer
+                  class=
+                      ms-Button-flexContainer
                       {
-                        display: block;
-                        flex-grow: 1;
+                        align-items: center;
+                        display: flex;
+                        flex-wrap: nowrap;
+                        height: 100%;
+                        justify-content: center;
                       }
+                  data-automationid="splitbuttonprimary"
                 >
                   <span
-                    className=
-                        ms-Button-label
+                    class=
+                        ms-Button-textContainer
                         {
                           display: block;
-                          font-weight: normal;
-                          line-height: 100%;
-                          margin-bottom: 0;
-                          margin-left: 4px;
-                          margin-right: 4px;
-                          margin-top: 0;
-                          white-space: nowrap;
+                          flex-grow: 1;
                         }
-                    id="id__1"
                   >
-                    asdf
+                    <span
+                      class=
+                          ms-Button-label
+                          {
+                            display: block;
+                            font-weight: normal;
+                            line-height: 100%;
+                            margin-bottom: 0;
+                            margin-left: 4px;
+                            margin-right: 4px;
+                            margin-top: 0;
+                            white-space: nowrap;
+                          }
+                      id="id__1"
+                    >
+                      asdf
+                    </span>
                   </span>
                 </span>
-              </span>
-            </button>
-          </div>
-          <div
-            className=
-                ms-OverflowSet-item
-                {
-                  display: inherit;
-                  flex-shrink: 0;
-                }
-            role="none"
-          >
-            <button
-              className=
-                  ms-Button
-                  ms-Button--commandBar
-                  ms-CommandBarItem-link
+              </button>
+            </div>
+            <div
+              class=
+                  ms-OverflowSet-item
                   {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    background-color: #ffffff;
-                    border-radius: 0px;
-                    border: none;
-                    box-sizing: border-box;
-                    color: #323130;
-                    cursor: pointer;
-                    display: inline-block;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 14px;
-                    font-weight: 400;
-                    height: 100%;
-                    min-width: 40px;
-                    outline: transparent;
-                    padding-bottom: 0;
-                    padding-left: 4px;
-                    padding-right: 4px;
-                    padding-top: 0;
-                    position: relative;
-                    text-align: center;
-                    text-decoration: none;
-                    user-select: none;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-                  .ms-Fabric--isFocusVisible &:focus:after {
-                    border: 1px solid transparent;
-                    bottom: 3px;
-                    content: "";
-                    left: 3px;
-                    outline: 1px solid #605e5c;
-                    position: absolute;
-                    right: 3px;
-                    top: 3px;
-                    z-index: 1;
-                  }
-                  @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                    border: none;
-                    bottom: 4px;
-                    left: 4px;
-                    outline-color: ButtonText;
-                    right: 4px;
-                    top: 4px;
-                  }
-                  &:active > * {
-                    left: 0px;
-                    position: relative;
-                    top: 0px;
-                  }
-                  @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
-                    border: none;
-                  }
-                  &:hover {
-                    background-color: #f3f2f1;
-                    color: #201f1e;
-                  }
-                  @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover {
-                    color: Highlight;
-                  }
-                  &:hover .ms-Button-icon {
-                    color: #106ebe;
-                  }
-                  &:hover .ms-Button-menuIcon {
-                    color: #323130;
-                  }
-                  &:active {
-                    background-color: #edebe9;
-                    color: #201f1e;
-                  }
-                  &:active .ms-Button-icon {
-                    color: #005a9e;
+                    display: inherit;
+                    flex-shrink: 0;
                   }
-                  &:active .ms-Button-menuIcon {
-                    color: #323130;
-                  }
-              data-is-focusable={true}
-              onClick={[Function]}
-              onKeyDown={[Function]}
-              onKeyPress={[Function]}
-              onKeyUp={[Function]}
-              onMouseDown={[Function]}
-              onMouseUp={[Function]}
-              role="menuitem"
-              type="button"
+              role="none"
             >
-              <span
-                className=
-                    ms-Button-flexContainer
+              <button
+                class=
+                    ms-Button
+                    ms-Button--commandBar
+                    ms-CommandBarItem-link
                     {
-                      align-items: center;
-                      display: flex;
-                      flex-wrap: nowrap;
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      background-color: #ffffff;
+                      border-radius: 0px;
+                      border: none;
+                      box-sizing: border-box;
+                      color: #323130;
+                      cursor: pointer;
+                      display: inline-block;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 14px;
+                      font-weight: 400;
                       height: 100%;
-                      justify-content: center;
+                      min-width: 40px;
+                      outline: transparent;
+                      padding-bottom: 0;
+                      padding-left: 4px;
+                      padding-right: 4px;
+                      padding-top: 0;
+                      position: relative;
+                      text-align: center;
+                      text-decoration: none;
+                      user-select: none;
+                    }
+                    &::-moz-focus-inner {
+                      border: 0;
+                    }
+                    .ms-Fabric--isFocusVisible &:focus:after {
+                      border: 1px solid transparent;
+                      bottom: 3px;
+                      content: "";
+                      left: 3px;
+                      outline: 1px solid #605e5c;
+                      position: absolute;
+                      right: 3px;
+                      top: 3px;
+                      z-index: 1;
+                    }
+                    @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                      border: none;
+                      bottom: 4px;
+                      left: 4px;
+                      outline-color: ButtonText;
+                      right: 4px;
+                      top: 4px;
+                    }
+                    &:active > * {
+                      left: 0px;
+                      position: relative;
+                      top: 0px;
+                    }
+                    @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
+                      border: none;
+                    }
+                    &:hover {
+                      background-color: #f3f2f1;
+                      color: #201f1e;
                     }
-                data-automationid="splitbuttonprimary"
+                    @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover {
+                      color: Highlight;
+                    }
+                    &:hover .ms-Button-icon {
+                      color: #106ebe;
+                    }
+                    &:hover .ms-Button-menuIcon {
+                      color: #323130;
+                    }
+                    &:active {
+                      background-color: #edebe9;
+                      color: #201f1e;
+                    }
+                    &:active .ms-Button-icon {
+                      color: #005a9e;
+                    }
+                    &:active .ms-Button-menuIcon {
+                      color: #323130;
+                    }
+                data-is-focusable="true"
+                role="menuitem"
+                tabindex="-1"
+                type="button"
               >
                 <span
-                  className=
-                      ms-Button-textContainer
+                  class=
+                      ms-Button-flexContainer
                       {
-                        display: block;
-                        flex-grow: 1;
+                        align-items: center;
+                        display: flex;
+                        flex-wrap: nowrap;
+                        height: 100%;
+                        justify-content: center;
                       }
+                  data-automationid="splitbuttonprimary"
                 >
                   <span
-                    className=
-                        ms-Button-label
+                    class=
+                        ms-Button-textContainer
                         {
                           display: block;
-                          font-weight: normal;
-                          line-height: 100%;
-                          margin-bottom: 0;
-                          margin-left: 4px;
-                          margin-right: 4px;
-                          margin-top: 0;
-                          white-space: nowrap;
+                          flex-grow: 1;
                         }
-                    id="id__4"
                   >
-                    asdf
+                    <span
+                      class=
+                          ms-Button-label
+                          {
+                            display: block;
+                            font-weight: normal;
+                            line-height: 100%;
+                            margin-bottom: 0;
+                            margin-left: 4px;
+                            margin-right: 4px;
+                            margin-top: 0;
+                            white-space: nowrap;
+                          }
+                      id="id__4"
+                    >
+                      asdf
+                    </span>
                   </span>
                 </span>
-              </span>
-            </button>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -355,347 +335,327 @@ exports[`CommandBar renders commands correctly 1`] = `
 
 exports[`CommandBar renders empty farItems correctly 1`] = `
 <div>
-  <div
-    style={
-      Object {
-        "position": "relative",
-      }
-    }
-  >
+  <div>
     <div
-      data-automation-id="visibleContent"
-      style={
-        Object {
-          "position": "fixed",
-          "visibility": "hidden",
-        }
-      }
+      style="position: relative;"
     >
       <div
-        className=
-            ms-FocusZone
-            ms-CommandBar
-            &:focus {
-              outline: none;
-            }
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              background-color: #ffffff;
-              display: flex;
-              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-              font-size: 14px;
-              font-weight: 400;
-              height: 44px;
-              padding-bottom: 0;
-              padding-left: 24px;
-              padding-right: 14px;
-              padding-top: 0;
-            }
-        data-focuszone-id="FocusZone0"
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onMouseDownCapture={[Function]}
-        role="menubar"
+        data-automation-id="visibleContent"
+        style="position: fixed; visibility: hidden;"
       >
         <div
-          className=
-              ms-OverflowSet
-              ms-CommandBar-primaryCommand
+          class=
+              ms-FocusZone
+              ms-CommandBar
+              &:focus {
+                outline: none;
+              }
               {
-                align-items: stretch;
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                background-color: #ffffff;
                 display: flex;
-                flex-grow: 1;
-                flex-wrap: nowrap;
-                position: relative;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                height: 44px;
+                padding-bottom: 0;
+                padding-left: 24px;
+                padding-right: 14px;
+                padding-top: 0;
               }
-          role="none"
+          data-focuszone-id="FocusZone0"
+          role="menubar"
         >
           <div
-            className=
-                ms-OverflowSet-item
+            class=
+                ms-OverflowSet
+                ms-CommandBar-primaryCommand
                 {
-                  display: inherit;
-                  flex-shrink: 0;
+                  align-items: stretch;
+                  display: flex;
+                  flex-grow: 1;
+                  flex-wrap: nowrap;
+                  position: relative;
                 }
             role="none"
           >
-            <button
-              className=
-                  ms-Button
-                  ms-Button--commandBar
-                  ms-CommandBarItem-link
+            <div
+              class=
+                  ms-OverflowSet-item
                   {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    background-color: #ffffff;
-                    border-radius: 0px;
-                    border: none;
-                    box-sizing: border-box;
-                    color: #323130;
-                    cursor: pointer;
-                    display: inline-block;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 14px;
-                    font-weight: 400;
-                    height: 100%;
-                    min-width: 40px;
-                    outline: transparent;
-                    padding-bottom: 0;
-                    padding-left: 4px;
-                    padding-right: 4px;
-                    padding-top: 0;
-                    position: relative;
-                    text-align: center;
-                    text-decoration: none;
-                    user-select: none;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-                  .ms-Fabric--isFocusVisible &:focus:after {
-                    border: 1px solid transparent;
-                    bottom: 3px;
-                    content: "";
-                    left: 3px;
-                    outline: 1px solid #605e5c;
-                    position: absolute;
-                    right: 3px;
-                    top: 3px;
-                    z-index: 1;
-                  }
-                  @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                    border: none;
-                    bottom: 4px;
-                    left: 4px;
-                    outline-color: ButtonText;
-                    right: 4px;
-                    top: 4px;
-                  }
-                  &:active > * {
-                    left: 0px;
-                    position: relative;
-                    top: 0px;
-                  }
-                  @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
-                    border: none;
-                  }
-                  &:hover {
-                    background-color: #f3f2f1;
-                    color: #201f1e;
-                  }
-                  @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover {
-                    color: Highlight;
-                  }
-                  &:hover .ms-Button-icon {
-                    color: #106ebe;
-                  }
-                  &:hover .ms-Button-menuIcon {
-                    color: #323130;
-                  }
-                  &:active {
-                    background-color: #edebe9;
-                    color: #201f1e;
-                  }
-                  &:active .ms-Button-icon {
-                    color: #005a9e;
-                  }
-                  &:active .ms-Button-menuIcon {
-                    color: #323130;
+                    display: inherit;
+                    flex-shrink: 0;
                   }
-              data-is-focusable={true}
-              onClick={[Function]}
-              onKeyDown={[Function]}
-              onKeyPress={[Function]}
-              onKeyUp={[Function]}
-              onMouseDown={[Function]}
-              onMouseUp={[Function]}
-              role="menuitem"
-              type="button"
+              role="none"
             >
-              <span
-                className=
-                    ms-Button-flexContainer
+              <button
+                class=
+                    ms-Button
+                    ms-Button--commandBar
+                    ms-CommandBarItem-link
                     {
-                      align-items: center;
-                      display: flex;
-                      flex-wrap: nowrap;
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      background-color: #ffffff;
+                      border-radius: 0px;
+                      border: none;
+                      box-sizing: border-box;
+                      color: #323130;
+                      cursor: pointer;
+                      display: inline-block;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 14px;
+                      font-weight: 400;
                       height: 100%;
-                      justify-content: center;
+                      min-width: 40px;
+                      outline: transparent;
+                      padding-bottom: 0;
+                      padding-left: 4px;
+                      padding-right: 4px;
+                      padding-top: 0;
+                      position: relative;
+                      text-align: center;
+                      text-decoration: none;
+                      user-select: none;
                     }
-                data-automationid="splitbuttonprimary"
+                    &::-moz-focus-inner {
+                      border: 0;
+                    }
+                    .ms-Fabric--isFocusVisible &:focus:after {
+                      border: 1px solid transparent;
+                      bottom: 3px;
+                      content: "";
+                      left: 3px;
+                      outline: 1px solid #605e5c;
+                      position: absolute;
+                      right: 3px;
+                      top: 3px;
+                      z-index: 1;
+                    }
+                    @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                      border: none;
+                      bottom: 4px;
+                      left: 4px;
+                      outline-color: ButtonText;
+                      right: 4px;
+                      top: 4px;
+                    }
+                    &:active > * {
+                      left: 0px;
+                      position: relative;
+                      top: 0px;
+                    }
+                    @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
+                      border: none;
+                    }
+                    &:hover {
+                      background-color: #f3f2f1;
+                      color: #201f1e;
+                    }
+                    @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover {
+                      color: Highlight;
+                    }
+                    &:hover .ms-Button-icon {
+                      color: #106ebe;
+                    }
+                    &:hover .ms-Button-menuIcon {
+                      color: #323130;
+                    }
+                    &:active {
+                      background-color: #edebe9;
+                      color: #201f1e;
+                    }
+                    &:active .ms-Button-icon {
+                      color: #005a9e;
+                    }
+                    &:active .ms-Button-menuIcon {
+                      color: #323130;
+                    }
+                data-is-focusable="true"
+                role="menuitem"
+                tabindex="0"
+                type="button"
               >
                 <span
-                  className=
-                      ms-Button-textContainer
+                  class=
+                      ms-Button-flexContainer
                       {
-                        display: block;
-                        flex-grow: 1;
+                        align-items: center;
+                        display: flex;
+                        flex-wrap: nowrap;
+                        height: 100%;
+                        justify-content: center;
                       }
+                  data-automationid="splitbuttonprimary"
                 >
                   <span
-                    className=
-                        ms-Button-label
+                    class=
+                        ms-Button-textContainer
                         {
                           display: block;
-                          font-weight: normal;
-                          line-height: 100%;
-                          margin-bottom: 0;
-                          margin-left: 4px;
-                          margin-right: 4px;
-                          margin-top: 0;
-                          white-space: nowrap;
+                          flex-grow: 1;
                         }
-                    id="id__1"
                   >
-                    asdf
+                    <span
+                      class=
+                          ms-Button-label
+                          {
+                            display: block;
+                            font-weight: normal;
+                            line-height: 100%;
+                            margin-bottom: 0;
+                            margin-left: 4px;
+                            margin-right: 4px;
+                            margin-top: 0;
+                            white-space: nowrap;
+                          }
+                      id="id__1"
+                    >
+                      asdf
+                    </span>
                   </span>
                 </span>
-              </span>
-            </button>
-          </div>
-          <div
-            className=
-                ms-OverflowSet-item
-                {
-                  display: inherit;
-                  flex-shrink: 0;
-                }
-            role="none"
-          >
-            <button
-              className=
-                  ms-Button
-                  ms-Button--commandBar
-                  ms-CommandBarItem-link
+              </button>
+            </div>
+            <div
+              class=
+                  ms-OverflowSet-item
                   {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    background-color: #ffffff;
-                    border-radius: 0px;
-                    border: none;
-                    box-sizing: border-box;
-                    color: #323130;
-                    cursor: pointer;
-                    display: inline-block;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 14px;
-                    font-weight: 400;
-                    height: 100%;
-                    min-width: 40px;
-                    outline: transparent;
-                    padding-bottom: 0;
-                    padding-left: 4px;
-                    padding-right: 4px;
-                    padding-top: 0;
-                    position: relative;
-                    text-align: center;
-                    text-decoration: none;
-                    user-select: none;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-                  .ms-Fabric--isFocusVisible &:focus:after {
-                    border: 1px solid transparent;
-                    bottom: 3px;
-                    content: "";
-                    left: 3px;
-                    outline: 1px solid #605e5c;
-                    position: absolute;
-                    right: 3px;
-                    top: 3px;
-                    z-index: 1;
-                  }
-                  @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                    border: none;
-                    bottom: 4px;
-                    left: 4px;
-                    outline-color: ButtonText;
-                    right: 4px;
-                    top: 4px;
-                  }
-                  &:active > * {
-                    left: 0px;
-                    position: relative;
-                    top: 0px;
-                  }
-                  @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
-                    border: none;
-                  }
-                  &:hover {
-                    background-color: #f3f2f1;
-                    color: #201f1e;
-                  }
-                  @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover {
-                    color: Highlight;
-                  }
-                  &:hover .ms-Button-icon {
-                    color: #106ebe;
-                  }
-                  &:hover .ms-Button-menuIcon {
-                    color: #323130;
-                  }
-                  &:active {
-                    background-color: #edebe9;
-                    color: #201f1e;
+                    display: inherit;
+                    flex-shrink: 0;
                   }
-                  &:active .ms-Button-icon {
-                    color: #005a9e;
-                  }
-                  &:active .ms-Button-menuIcon {
-                    color: #323130;
-                  }
-              data-is-focusable={true}
-              onClick={[Function]}
-              onKeyDown={[Function]}
-              onKeyPress={[Function]}
-              onKeyUp={[Function]}
-              onMouseDown={[Function]}
-              onMouseUp={[Function]}
-              role="menuitem"
-              type="button"
+              role="none"
             >
-              <span
-                className=
-                    ms-Button-flexContainer
+              <button
+                class=
+                    ms-Button
+                    ms-Button--commandBar
+                    ms-CommandBarItem-link
                     {
-                      align-items: center;
-                      display: flex;
-                      flex-wrap: nowrap;
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      background-color: #ffffff;
+                      border-radius: 0px;
+                      border: none;
+                      box-sizing: border-box;
+                      color: #323130;
+                      cursor: pointer;
+                      display: inline-block;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 14px;
+                      font-weight: 400;
                       height: 100%;
-                      justify-content: center;
+                      min-width: 40px;
+                      outline: transparent;
+                      padding-bottom: 0;
+                      padding-left: 4px;
+                      padding-right: 4px;
+                      padding-top: 0;
+                      position: relative;
+                      text-align: center;
+                      text-decoration: none;
+                      user-select: none;
+                    }
+                    &::-moz-focus-inner {
+                      border: 0;
+                    }
+                    .ms-Fabric--isFocusVisible &:focus:after {
+                      border: 1px solid transparent;
+                      bottom: 3px;
+                      content: "";
+                      left: 3px;
+                      outline: 1px solid #605e5c;
+                      position: absolute;
+                      right: 3px;
+                      top: 3px;
+                      z-index: 1;
+                    }
+                    @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                      border: none;
+                      bottom: 4px;
+                      left: 4px;
+                      outline-color: ButtonText;
+                      right: 4px;
+                      top: 4px;
+                    }
+                    &:active > * {
+                      left: 0px;
+                      position: relative;
+                      top: 0px;
+                    }
+                    @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
+                      border: none;
+                    }
+                    &:hover {
+                      background-color: #f3f2f1;
+                      color: #201f1e;
+                    }
+                    @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover {
+                      color: Highlight;
+                    }
+                    &:hover .ms-Button-icon {
+                      color: #106ebe;
+                    }
+                    &:hover .ms-Button-menuIcon {
+                      color: #323130;
+                    }
+                    &:active {
+                      background-color: #edebe9;
+                      color: #201f1e;
+                    }
+                    &:active .ms-Button-icon {
+                      color: #005a9e;
+                    }
+                    &:active .ms-Button-menuIcon {
+                      color: #323130;
                     }
-                data-automationid="splitbuttonprimary"
+                data-is-focusable="true"
+                role="menuitem"
+                tabindex="-1"
+                type="button"
               >
                 <span
-                  className=
-                      ms-Button-textContainer
+                  class=
+                      ms-Button-flexContainer
                       {
-                        display: block;
-                        flex-grow: 1;
+                        align-items: center;
+                        display: flex;
+                        flex-wrap: nowrap;
+                        height: 100%;
+                        justify-content: center;
                       }
+                  data-automationid="splitbuttonprimary"
                 >
                   <span
-                    className=
-                        ms-Button-label
+                    class=
+                        ms-Button-textContainer
                         {
                           display: block;
-                          font-weight: normal;
-                          line-height: 100%;
-                          margin-bottom: 0;
-                          margin-left: 4px;
-                          margin-right: 4px;
-                          margin-top: 0;
-                          white-space: nowrap;
+                          flex-grow: 1;
                         }
-                    id="id__4"
                   >
-                    asdf
+                    <span
+                      class=
+                          ms-Button-label
+                          {
+                            display: block;
+                            font-weight: normal;
+                            line-height: 100%;
+                            margin-bottom: 0;
+                            margin-left: 4px;
+                            margin-right: 4px;
+                            margin-top: 0;
+                            white-space: nowrap;
+                          }
+                      id="id__4"
+                    >
+                      asdf
+                    </span>
                   </span>
                 </span>
-              </span>
-            </button>
+              </button>
+            </div>
           </div>
         </div>
       </div>