diff --git a/packages/react/src/components/Dropdown/Dropdown.test.tsx b/packages/react/src/components/Dropdown/Dropdown.test.tsx
index dd316af8cfce9..a1f5b171fa02f 100644
--- a/packages/react/src/components/Dropdown/Dropdown.test.tsx
+++ b/packages/react/src/components/Dropdown/Dropdown.test.tsx
@@ -1,16 +1,11 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import * as ReactTestUtils from 'react-dom/test-utils';
-import { create } from '@fluentui/utilities/lib/test';
-import { mount, ReactWrapper } from 'enzyme';
-import * as renderer from 'react-test-renderer';
+import { fireEvent, render, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { KeyCodes, resetIds } from '../../Utilities';
 import { Dropdown } from './Dropdown';
 import { DropdownMenuItemType } from './Dropdown.types';
 import { isConformant } from '../../common/isConformant';
-import { safeCreate } from '@fluentui/test-utilities';
-import type { ReactTestRenderer } from 'react-test-renderer';
 import type { IDropdownOption, IDropdown } from './Dropdown.types';
 
 const DEFAULT_OPTIONS: IDropdownOption[] = [
@@ -33,27 +28,14 @@ const RENDER_OPTIONS: IDropdownOption[] = [
 ];
 
 describe('Dropdown', () => {
-  let component: ReactTestRenderer | undefined;
-  let wrapper: ReactWrapper | undefined;
-
   beforeEach(() => {
     resetIds();
   });
 
   afterEach(() => {
-    if (component) {
-      component.unmount();
-      component = undefined;
-    }
-    if (wrapper) {
-      wrapper.unmount();
-      wrapper = undefined;
-    }
     if ((setTimeout as any).mock) {
       jest.useRealTimers();
     }
-
-    document.body.innerHTML = '';
   });
 
   isConformant({
@@ -63,31 +45,28 @@ describe('Dropdown', () => {
 
   describe('single-select', () => {
     it('Renders correctly', () => {
-      component = create(<Dropdown options={DEFAULT_OPTIONS} />);
-      const tree = component.toJSON();
-      expect(tree).toMatchSnapshot();
+      const { container } = render(<Dropdown options={DEFAULT_OPTIONS} />);
+      expect(container).toMatchSnapshot();
     });
 
     it('Renders correctly when open', () => {
-      // Mock createPortal so that the options list ends up inside the wrapper for snapshotting
-      spyOn(ReactDOM, 'createPortal').and.callFake(node => node);
       // There's intermittent variation (maybe measurement-related) on different computers,
       // so use fake timers to make it more predictable even though we never advance the timers.
       jest.useFakeTimers();
 
-      const ref = React.createRef<IDropdown>();
       // Specify dropdownWidth to prevent inconsistent calculated widths from getting into the snapshot
-      wrapper = mount(<Dropdown options={RENDER_OPTIONS} componentRef={ref} dropdownWidth={200} />);
-      ref.current!.focus(true);
-      wrapper.update();
-      expect(wrapper.getDOMNode()).toMatchSnapshot();
+      const { getByRole } = render(<Dropdown options={RENDER_OPTIONS} dropdownWidth={200} />);
+      userEvent.click(getByRole('combobox'));
+      // snapshot the whole body to capture both the field and the options list
+      expect(document.body).toMatchSnapshot();
     });
 
     it('Renders groups based on header start and divider end', () => {
-      wrapper = mount(<Dropdown options={DEFAULT_OPTIONS} />);
+      const { getByRole, getAllByRole } = render(<Dropdown options={DEFAULT_OPTIONS} />);
+
+      userEvent.click(getByRole('combobox'));
 
-      wrapper.find('.ms-Dropdown').simulate('click');
-      const groups = document.querySelectorAll('[role="group"]');
+      const groups = getAllByRole('group');
       // Expect 2 groups with role=group
       expect(groups.length).toEqual(2);
       // Expect first group to have 5 elements
@@ -105,29 +84,28 @@ describe('Dropdown', () => {
     });
 
     it('Can flip between enabled and disabled.', () => {
-      wrapper = mount(<Dropdown label="testgroup" options={DEFAULT_OPTIONS} />);
-      const dropdownRoot = wrapper.getDOMNode().querySelector('.ms-Dropdown') as HTMLElement;
+      const { getByRole, rerender } = render(<Dropdown options={DEFAULT_OPTIONS} />);
+      const dropdownRoot = getByRole('combobox');
 
       expect(dropdownRoot.className).not.toEqual(expect.stringMatching('is-disabled'));
       expect(dropdownRoot.getAttribute('data-is-focusable')).toEqual('true');
 
-      wrapper.setProps({ disabled: true });
+      rerender(<Dropdown options={DEFAULT_OPTIONS} disabled />);
 
       expect(dropdownRoot.className).toEqual(expect.stringMatching('is-disabled'));
       expect(dropdownRoot.getAttribute('data-is-focusable')).toEqual('false');
     });
 
     it('Renders no selected item in default case', () => {
-      wrapper = mount(<Dropdown label="testgroup" options={DEFAULT_OPTIONS} />);
-      const titleElement = wrapper.find('.ms-Dropdown-title');
+      const { getByRole } = render(<Dropdown options={DEFAULT_OPTIONS} />);
 
-      expect(titleElement.text()).toEqual('');
+      // title element is empty (relying on current DOM structure since text query for empty string wouldn't work)
+      expect(getByRole('combobox').querySelector('.ms-Dropdown-title')?.textContent).toBe('');
     });
 
     it('Renders a selected item if option specifies selected', () => {
-      wrapper = mount(
+      const { getByRole } = render(
         <Dropdown
-          label="testgroup"
           options={[
             { key: '1', text: '1', selected: true },
             { key: '2', text: '2' },
@@ -135,95 +113,82 @@ describe('Dropdown', () => {
         />,
       );
 
-      const titleElement = wrapper.find('.ms-Dropdown-title');
-
-      expect(titleElement.text()).toEqual('1');
+      const titleElement = within(getByRole('combobox')).queryByText('1');
+      expect(titleElement).toBeTruthy();
     });
 
     it('Renders a selected item in uncontrolled case', () => {
-      wrapper = mount(<Dropdown label="testgroup" defaultSelectedKey="1" options={DEFAULT_OPTIONS} />);
-      const titleElement = wrapper.find('.ms-Dropdown-title');
+      const { getByRole } = render(<Dropdown defaultSelectedKey="1" options={DEFAULT_OPTIONS} />);
 
-      expect(titleElement.text()).toEqual('1');
+      const titleElement = within(getByRole('combobox')).queryByText('1');
+      expect(titleElement).toBeTruthy();
     });
 
     it('Renders live region attributes only when focused', () => {
-      wrapper = mount(<Dropdown label="testgroup" options={DEFAULT_OPTIONS} />);
-      let titleElement = wrapper.find('.ms-Dropdown-title');
+      const { getByRole } = render(<Dropdown defaultSelectedKey="1" options={DEFAULT_OPTIONS} />);
 
-      expect(titleElement.props()['aria-live']).toBeUndefined();
+      const titleElement = within(getByRole('combobox')).getByText('1');
+      expect(titleElement.getAttribute('aria-live')).toBeNull();
 
-      wrapper.find('.ms-Dropdown').simulate('focus');
-      titleElement = wrapper.find('.ms-Dropdown-title');
-
-      expect(titleElement.props()['aria-live']).toEqual('polite');
+      userEvent.tab(); // focus dropdown
+      expect(titleElement.getAttribute('aria-live')).toEqual('polite');
     });
 
     it('does not change the selected item in when defaultSelectedKey changes', () => {
-      wrapper = mount(<Dropdown label="testgroup" defaultSelectedKey="1" options={DEFAULT_OPTIONS} />);
-      const titleElement = wrapper.find('.ms-Dropdown-title');
+      const { getByRole, rerender } = render(<Dropdown defaultSelectedKey="1" options={DEFAULT_OPTIONS} />);
 
-      expect(titleElement.text()).toEqual('1');
+      const titleElement = within(getByRole('combobox')).getByText('1');
 
-      wrapper.setProps({ defaultSelectedKey: '2' });
-      expect(titleElement.text()).toEqual('1');
+      rerender(<Dropdown defaultSelectedKey="2" options={DEFAULT_OPTIONS} />);
+      expect(titleElement.textContent).toEqual('1');
     });
 
     it('Renders a selected item in controlled case', () => {
-      wrapper = mount(<Dropdown label="testgroup" selectedKey="1" options={DEFAULT_OPTIONS} />);
-      const titleElement = wrapper.find('.ms-Dropdown-title');
-
-      expect(titleElement.text()).toEqual('1');
+      const { getByRole } = render(<Dropdown selectedKey="1" options={DEFAULT_OPTIONS} />);
+      const titleElement = within(getByRole('combobox')).queryByText('1');
+      expect(titleElement).toBeTruthy();
     });
 
     it('changes the selected item in when selectedKey changes', () => {
-      wrapper = mount(<Dropdown label="testgroup" selectedKey="1" options={DEFAULT_OPTIONS} />);
-      const titleElement = wrapper.find('.ms-Dropdown-title');
-
-      expect(titleElement.text()).toEqual('1');
+      const { getByRole, rerender } = render(<Dropdown selectedKey="1" options={DEFAULT_OPTIONS} />);
+      const titleElement = within(getByRole('combobox')).getByText('1');
 
-      wrapper.setProps({ selectedKey: '2' });
-      expect(titleElement.text()).toEqual('2');
+      rerender(<Dropdown selectedKey="2" options={DEFAULT_OPTIONS} />);
+      expect(titleElement.textContent).toEqual('2');
     });
 
     it('clears when the selectedKey is null', () => {
-      safeCreate(<Dropdown selectedKey="1" options={DEFAULT_OPTIONS} />, container => {
-        const dropdownOptionText = container.root.find(node => {
-          return node.props.className?.includes?.('ms-Dropdown-title');
-        });
-        expect(dropdownOptionText.children?.[0]).toBe('1');
+      const { getByRole, rerender } = render(<Dropdown selectedKey="1" options={DEFAULT_OPTIONS} />);
+      const titleElement = within(getByRole('combobox')).getByText('1');
 
-        renderer.act(() => {
-          container.update(<Dropdown selectedKey={null} options={DEFAULT_OPTIONS} />);
-        });
-        expect(dropdownOptionText.children?.[0]).toBe(undefined);
-      });
+      rerender(<Dropdown selectedKey={null} options={DEFAULT_OPTIONS} />);
+      expect(titleElement.textContent).toBe('');
     });
 
     it('Can change items in uncontrolled case', () => {
-      wrapper = mount(<Dropdown label="testgroup" defaultSelectedKey="1" options={DEFAULT_OPTIONS} />);
+      const { getByRole, getAllByRole } = render(<Dropdown defaultSelectedKey="1" options={DEFAULT_OPTIONS} />);
 
-      wrapper.find('.ms-Dropdown').simulate('click');
+      userEvent.click(getByRole('combobox'));
 
-      const secondItemElement = document.querySelector('.ms-Dropdown-item[data-index="2"]') as HTMLElement;
+      const secondItemElement = getAllByRole('option')[1];
+      expect(secondItemElement?.getAttribute('title')).toEqual('test');
 
-      expect(secondItemElement.getAttribute('title')).toEqual('test');
-
-      ReactTestUtils.Simulate.click(secondItemElement);
-      expect(wrapper.find('.ms-Dropdown-title').text()).toEqual('2');
+      fireEvent.click(secondItemElement);
+      const titleElement = within(getByRole('combobox')).queryByText('2');
+      expect(titleElement).toBeTruthy();
     });
 
     it('calls onChange when the selected item is different', () => {
       const onChangeSpy = jest.fn();
 
-      wrapper = mount(
-        <Dropdown id="foo" label="testgroup" defaultSelectedKey="1" onChange={onChangeSpy} options={DEFAULT_OPTIONS} />,
+      const { getByRole, getAllByRole } = render(
+        <Dropdown id="foo" defaultSelectedKey="1" onChange={onChangeSpy} options={DEFAULT_OPTIONS} />,
       );
 
-      wrapper.find('.ms-Dropdown').simulate('click');
+      userEvent.click(getByRole('combobox'));
 
-      const secondItemElement = document.querySelector('.ms-Dropdown-item[data-index="2"]') as HTMLElement;
-      ReactTestUtils.Simulate.click(secondItemElement);
+      const secondItemElement = getAllByRole('option')[1];
+      fireEvent.click(secondItemElement);
 
       expect(onChangeSpy).toHaveBeenCalledWith(expect.anything(), DEFAULT_OPTIONS[2], 2);
       expect(onChangeSpy.mock.calls[0][0].target.id).toEqual('foo');
@@ -232,20 +197,14 @@ describe('Dropdown', () => {
     it('calls onChange when the selected item is the same if notifyOnReselect is true', () => {
       const onChangeSpy = jest.fn();
 
-      wrapper = mount(
-        <Dropdown
-          label="testgroup"
-          defaultSelectedKey="3"
-          onChange={onChangeSpy}
-          options={DEFAULT_OPTIONS}
-          notifyOnReselect={true}
-        />,
+      const { getByRole, getAllByRole } = render(
+        <Dropdown defaultSelectedKey="3" onChange={onChangeSpy} options={DEFAULT_OPTIONS} notifyOnReselect={true} />,
       );
 
-      wrapper.find('.ms-Dropdown').simulate('click');
+      userEvent.click(getByRole('combobox'));
 
-      const secondItemElement = document.querySelector('.ms-Dropdown-item[data-index="3"]') as HTMLElement;
-      ReactTestUtils.Simulate.click(secondItemElement);
+      const thirdItemElement = getAllByRole('option')[2];
+      fireEvent.click(thirdItemElement);
 
       expect(onChangeSpy).toHaveBeenCalledWith(expect.anything(), DEFAULT_OPTIONS[3], 3);
     });
@@ -253,14 +212,12 @@ describe('Dropdown', () => {
     it('calls onDismiss when dismissing options callout', () => {
       const onDismissSpy = jest.fn();
 
-      wrapper = mount(
-        <Dropdown label="testgroup" defaultSelectedKey="1" onDismiss={onDismissSpy} options={DEFAULT_OPTIONS} />,
-      );
+      const { getByRole, getAllByRole } = render(<Dropdown onDismiss={onDismissSpy} options={DEFAULT_OPTIONS} />);
 
-      wrapper.find('.ms-Dropdown').simulate('click');
+      userEvent.click(getByRole('combobox'));
 
-      const secondItemElement = document.querySelector('.ms-Dropdown-item[data-index="2"]') as HTMLElement;
-      ReactTestUtils.Simulate.click(secondItemElement);
+      const secondItemElement = getAllByRole('option')[1];
+      fireEvent.click(secondItemElement);
 
       expect(onDismissSpy).toHaveBeenCalledTimes(1);
     });
@@ -271,17 +228,13 @@ describe('Dropdown', () => {
         { key: 1, text: 'item2' },
       ];
 
-      safeCreate(<Dropdown options={options} />, container => {
-        const dropdownOptionText = container.root.find(node => {
-          return node.props.className?.includes?.('ms-Dropdown-title');
-        });
-        expect(dropdownOptionText.children?.[0]).toBe(undefined);
+      const { getByRole, rerender } = render(<Dropdown options={options} />);
+      const titleElement = getByRole('combobox').querySelector('.ms-Dropdown-title');
+      expect(titleElement?.textContent).toBe('');
+
+      rerender(<Dropdown selectedKey={0} options={options} />);
 
-        renderer.act(() => {
-          container.update(<Dropdown selectedKey={0} options={options} />);
-        });
-        expect(dropdownOptionText.children?.[0]).toBe('item1');
-      });
+      expect(titleElement?.textContent).toBe('item1');
     });
 
     it('selectedIndices should not contains -1 even when selectedKey is not in options', () => {
@@ -290,29 +243,23 @@ describe('Dropdown', () => {
         { key: 1, text: 'item2' },
       ];
 
-      safeCreate(<Dropdown selectedKey={0} options={options} />, container => {
-        const dropdownOptionText = container.root.find(node => {
-          return node.props.className?.includes?.('ms-Dropdown-title');
-        });
-        expect(dropdownOptionText.children?.[0]).toBe('item1');
+      const { getByRole, rerender } = render(<Dropdown selectedKey={0} options={options} />);
+      const titleElement = within(getByRole('combobox')).getByText('item1');
 
-        renderer.act(() => {
-          container.update(<Dropdown selectedKey={-1} options={options} />);
-        });
-        expect(dropdownOptionText.children?.[0]).toBe(undefined);
-      });
+      rerender(<Dropdown selectedKey={-1} options={options} />);
+      expect(titleElement.textContent).toBe('');
     });
 
     it('does not call onChange when the selected item is not different', () => {
       const onChangeSpy = jest.fn();
-      wrapper = mount(
-        <Dropdown label="testgroup" defaultSelectedKey="1" onChange={onChangeSpy} options={DEFAULT_OPTIONS} />,
+      const { getByRole, getAllByRole } = render(
+        <Dropdown defaultSelectedKey="1" onChange={onChangeSpy} options={DEFAULT_OPTIONS} />,
       );
 
-      wrapper.find('.ms-Dropdown').simulate('click');
+      userEvent.click(getByRole('combobox'));
 
-      const secondItemElement = document.querySelector('.ms-Dropdown-item[data-index="1"]') as HTMLElement;
-      ReactTestUtils.Simulate.click(secondItemElement);
+      const firstItemElement = getAllByRole('option')[0];
+      fireEvent.click(firstItemElement);
 
       expect(onChangeSpy).not.toHaveBeenCalled();
     });
@@ -320,232 +267,213 @@ describe('Dropdown', () => {
     it('Keypresses on a disabled dropdown has no effect.', () => {
       const options = [...DEFAULT_OPTIONS];
       options[3] = { key: 3, text: '3', selected: true };
-      wrapper = mount(<Dropdown label="testgroup" disabled options={options} />);
-      const dropdownRoot = wrapper.find('.ms-Dropdown');
+      const { getByRole } = render(<Dropdown disabled options={options} />);
 
-      const titleElement = dropdownRoot.find('.ms-Dropdown-title');
-      expect(titleElement.text()).toEqual('3');
-      dropdownRoot.simulate('keydown', { which: KeyCodes.down });
-      expect(titleElement.text()).toEqual('3');
-      dropdownRoot.simulate('keydown', { which: KeyCodes.up });
-      expect(titleElement.text()).toEqual('3');
+      const dropdownRoot = getByRole('combobox');
+      const titleElement = within(dropdownRoot).getByText('3');
+
+      userEvent.type(dropdownRoot, '{arrowdown}', { skipClick: true });
+      expect(titleElement.textContent).toEqual('3');
+      userEvent.type(dropdownRoot, '{arrowup}', { skipClick: true });
+      expect(titleElement.textContent).toEqual('3');
     });
 
     it('Keypresses on a normal dropdown selects the right, valid items.', () => {
       const options = [...DEFAULT_OPTIONS];
       options[3] = { key: 3, text: '3', selected: true };
-      wrapper = mount(<Dropdown label="testgroup" options={options} />);
-      const dropdownRoot = wrapper.find('.ms-Dropdown');
+      const { getByRole } = render(<Dropdown options={options} />);
+
+      userEvent.tab();
+      const dropdownRoot = getByRole('combobox');
+      const titleElement = within(dropdownRoot).getByText('3');
 
-      const titleElement = dropdownRoot.find('.ms-Dropdown-title');
-      expect(titleElement.text()).toEqual('3');
-      dropdownRoot.simulate('keydown', { which: KeyCodes.down });
-      expect(titleElement.text()).toEqual('4');
-      dropdownRoot.simulate('keydown', { which: KeyCodes.up });
-      expect(titleElement.text()).toEqual('3');
-      dropdownRoot.simulate('keydown', { which: KeyCodes.up });
-      expect(titleElement.text()).toEqual('2');
+      userEvent.type(dropdownRoot, '{arrowdown}', { skipClick: true });
+      expect(titleElement.textContent).toEqual('4');
+      userEvent.type(dropdownRoot, '{arrowup}', { skipClick: true });
+      expect(titleElement.textContent).toEqual('3');
+      userEvent.type(dropdownRoot, '{arrowup}', { skipClick: true });
+      expect(titleElement.textContent).toEqual('2');
     });
 
     it('does not select any item on focus', () => {
-      wrapper = mount(<Dropdown label="testgroup" options={DEFAULT_OPTIONS} />);
+      const { getByRole } = render(<Dropdown options={DEFAULT_OPTIONS} />);
 
-      wrapper.find('.ms-Dropdown').simulate('focus');
+      userEvent.tab();
 
-      const titleElement = wrapper.find('.ms-Dropdown-title');
-      expect(titleElement.text()).toEqual('');
+      const dropdownRoot = getByRole('combobox');
+      expect(document.activeElement).toBe(dropdownRoot);
+      expect(dropdownRoot.querySelector('.ms-Dropdown-title')?.textContent).toBe('');
     });
 
     it('can be programmatically focused when tabIndex=-1, and will not automatically select an item', () => {
       const dropdown = React.createRef<IDropdown>();
 
-      const container = document.createElement('div');
-      document.body.appendChild(container);
-
-      // in enzyme, when we call the programmatic focus(), it does not trigger the onFocus callback of the div
-      // being focused. Utilize JSDOM instead.
-      ReactDOM.render(
-        <Dropdown componentRef={dropdown} label="testgroup" tabIndex={-1} options={DEFAULT_OPTIONS} />,
-        container,
-      );
+      const { getByRole } = render(<Dropdown componentRef={dropdown} tabIndex={-1} options={DEFAULT_OPTIONS} />);
 
       dropdown.current!.focus(false);
 
-      const titleElement = container.querySelector('.ms-Dropdown-title') as HTMLElement;
-      // for some reason, JSDOM does not return innerText of 1 so we have to use innerHTML instead.
-      expect(titleElement.innerHTML).toEqual('');
+      const dropdownRoot = getByRole('combobox');
+      expect(document.activeElement).toBe(dropdownRoot);
+      expect(dropdownRoot.querySelector('.ms-Dropdown-title')?.textContent).toBe('');
     });
 
     it('opens and does not automatically select an item when focus(true) is called', () => {
       const dropdown = React.createRef<IDropdown>();
 
-      const container = document.createElement('div');
-      document.body.appendChild(container);
-
-      ReactTestUtils.act(() => {
-        ReactDOM.render(<Dropdown componentRef={dropdown} label="testgroup" options={DEFAULT_OPTIONS} />, container);
-      });
+      const { getByRole } = render(<Dropdown componentRef={dropdown} options={DEFAULT_OPTIONS} />);
 
-      expect(document.body.querySelector('.ms-Dropdown-item')).toBeNull();
+      const dropdownRoot = getByRole('combobox');
+      const titleElement = dropdownRoot.querySelector('.ms-Dropdown-title');
+      expect(titleElement?.textContent).toBe('');
 
-      ReactTestUtils.act(() => {
-        dropdown.current!.focus(true);
-      });
-      const titleElement = container.querySelector('.ms-Dropdown-title') as HTMLElement;
-      expect(titleElement.innerHTML).toEqual('');
+      dropdown.current!.focus(true);
+      expect(document.activeElement).toBe(dropdownRoot);
+      expect(titleElement?.textContent).toBe('');
     });
 
     it('selects the first valid item on Home keypress', () => {
-      wrapper = mount(<Dropdown label="testgroup" options={DEFAULT_OPTIONS} />);
+      const { getByRole } = render(<Dropdown options={DEFAULT_OPTIONS} />);
 
-      wrapper.find('.ms-Dropdown').simulate('keydown', { which: KeyCodes.home });
+      const dropdownRoot = getByRole('combobox');
+      userEvent.type(dropdownRoot, '{home}');
 
-      const titleElement = wrapper.find('.ms-Dropdown-title');
-      expect(titleElement.text()).toEqual('1');
+      const titleElement = within(dropdownRoot).queryByText('1');
+      expect(titleElement).toBeTruthy();
     });
 
     it('selects the last valid item on End keypress', () => {
-      wrapper = mount(<Dropdown label="testgroup" options={DEFAULT_OPTIONS} />);
-      wrapper.find('.ms-Dropdown').simulate('keydown', { which: KeyCodes.end });
+      const { getByRole } = render(<Dropdown options={DEFAULT_OPTIONS} />);
 
-      const titleElement = wrapper.find('.ms-Dropdown-title');
-      expect(titleElement.text()).toEqual('6');
+      const dropdownRoot = getByRole('combobox');
+      userEvent.type(dropdownRoot, '{end}');
+
+      const titleElement = within(dropdownRoot).queryByText('6');
+      expect(titleElement).toBeTruthy();
     });
 
     it('skips over headers and separators on keypress', () => {
-      wrapper = mount(<Dropdown label="testgroup" options={DEFAULT_OPTIONS} />);
-      const dropdownRoot = wrapper.find('.ms-Dropdown');
+      const { getByRole } = render(<Dropdown options={DEFAULT_OPTIONS} />);
+      const dropdownRoot = getByRole('combobox');
 
-      dropdownRoot.simulate('keydown', { which: KeyCodes.down });
-      const titleElement = wrapper.find('.ms-Dropdown-title');
-      expect(titleElement.text()).toEqual('1');
+      userEvent.type(dropdownRoot, '{arrowdown}');
+      const titleElement = within(dropdownRoot).getByText('1');
 
-      dropdownRoot.simulate('keydown', { which: KeyCodes.down });
-      dropdownRoot.simulate('keydown', { which: KeyCodes.down });
-      dropdownRoot.simulate('keydown', { which: KeyCodes.down });
-      expect(titleElement.text()).toEqual('4');
+      userEvent.type(dropdownRoot, '{arrowdown}');
+      userEvent.type(dropdownRoot, '{arrowdown}');
+      userEvent.type(dropdownRoot, '{arrowdown}');
+      expect(titleElement.textContent).toEqual('4');
     });
 
     it('Shows correct tooltip only if title prop is specified', () => {
-      wrapper = mount(<Dropdown label="testgroup" options={DEFAULT_OPTIONS} />);
-
-      wrapper.find('.ms-Dropdown').simulate('click');
+      const { getByRole, getAllByRole } = render(<Dropdown options={DEFAULT_OPTIONS} />);
 
-      const firstItemElement = document.querySelector('.ms-Dropdown-item[data-index="1"]') as HTMLElement;
-      expect(firstItemElement.getAttribute('title')).toBeFalsy();
+      userEvent.click(getByRole('combobox'));
 
-      const secondItemElement = document.querySelector('.ms-Dropdown-item[data-index="2"]') as HTMLElement;
-      expect(secondItemElement.getAttribute('title')).toEqual('test');
+      const options = getAllByRole('option');
+      expect(options).toHaveLength(6);
 
-      const thirdItemElement = document.querySelector('.ms-Dropdown-item[data-index="3"]') as HTMLElement;
-      expect(thirdItemElement.getAttribute('title')).toBeFalsy();
+      expect(options[0].getAttribute('title')).toBeFalsy();
+      expect(options[1].getAttribute('title')).toEqual('test');
+      expect(options[2].getAttribute('title')).toBeFalsy();
     });
 
     it('opens on focus if openOnKeyboardFocus is true', () => {
-      wrapper = mount(<Dropdown openOnKeyboardFocus label="testgroup" options={DEFAULT_OPTIONS} />);
+      const { queryByRole } = render(<Dropdown openOnKeyboardFocus options={DEFAULT_OPTIONS} />);
 
-      wrapper.find('.ms-Dropdown').simulate('focus');
+      userEvent.tab();
 
-      const secondItemElement = document.querySelector('.ms-Dropdown-item[data-index="2"]') as HTMLElement;
-      expect(secondItemElement).toBeTruthy();
+      expect(queryByRole('listbox')).toBeTruthy();
     });
 
     it('opens on click if openOnKeyboardFocus is true', () => {
-      wrapper = mount(<Dropdown openOnKeyboardFocus label="testgroup" options={DEFAULT_OPTIONS} />);
+      const { getByRole, queryByRole } = render(<Dropdown openOnKeyboardFocus options={DEFAULT_OPTIONS} />);
 
-      wrapper.find('.ms-Dropdown').simulate('mousedown');
-      wrapper.find('.ms-Dropdown').simulate('click');
+      userEvent.click(getByRole('combobox'));
 
-      const secondItemElement = document.querySelector('.ms-Dropdown-item[data-index="2"]') as HTMLElement;
-      expect(secondItemElement).toBeTruthy();
+      expect(queryByRole('listbox')).toBeTruthy();
     });
 
     it('closes on blur when openOnKeyboardFocus is true', () => {
-      wrapper = mount(<Dropdown openOnKeyboardFocus label="testgroup" options={DEFAULT_OPTIONS} />);
+      const { getByRole, queryByRole } = render(<Dropdown openOnKeyboardFocus options={DEFAULT_OPTIONS} />);
 
-      wrapper.find('.ms-Dropdown').simulate('focus');
+      userEvent.tab();
 
-      let dropdownElement = document.querySelector('.ms-Dropdown-items') as HTMLElement;
-      expect(dropdownElement).toBeTruthy();
+      expect(queryByRole('listbox')).toBeTruthy();
 
       // blur, force the dropdown to close, then focus again
       // the second focus is simulating the behavior of the Callout when closed
-      wrapper.find('.ms-Dropdown').simulate('blur');
-      wrapper.find('.ms-Dropdown').simulate('keydown', { which: KeyCodes.escape });
-      wrapper.find('.ms-Dropdown').simulate('focus');
+      const dropdownRoot = getByRole('combobox');
+      fireEvent.blur(dropdownRoot);
+      fireEvent.keyDown(dropdownRoot, { which: KeyCodes.escape });
+      fireEvent.focus(dropdownRoot);
 
-      dropdownElement = document.querySelector('.ms-Dropdown-items') as HTMLElement;
-      expect(dropdownElement).toBeFalsy();
+      expect(queryByRole('listbox')).toBeFalsy();
     });
 
     it('uses item title attribute if provided', () => {
       const options: IDropdownOption[] = [{ key: 'a', text: 'a', title: 'b' }];
-      wrapper = mount(<Dropdown options={options} />);
+      const { getByRole } = render(<Dropdown options={options} />);
 
-      wrapper.find('.ms-Dropdown').simulate('click');
+      userEvent.click(getByRole('combobox'));
 
-      const item = wrapper.find('.ms-Dropdown-item');
-      expect(item.getElements()[0].props.title).toBe('b');
+      const item = getByRole('option');
+      expect(item.title).toBe('b');
     });
 
     // This is a way to effectively disable setting a title
     it('uses empty string if provided for title', () => {
       const options: IDropdownOption[] = [{ key: 'a', text: 'a', title: '' }];
-      wrapper = mount(<Dropdown options={options} />);
+      const { getByRole } = render(<Dropdown options={options} />);
 
-      wrapper.find('.ms-Dropdown').simulate('click');
+      userEvent.click(getByRole('combobox'));
 
-      const item = wrapper.find('.ms-Dropdown-item');
-      expect(item.getElements()[0].props.title).toBe('');
+      const item = getByRole('option');
+      expect(item.title).toBe('');
     });
   });
 
   describe('multi-select', () => {
     it('Renders correctly', () => {
-      component = create(<Dropdown options={DEFAULT_OPTIONS} multiSelect />);
-      const tree = component.toJSON();
-      expect(tree).toMatchSnapshot();
+      const { container } = render(<Dropdown options={DEFAULT_OPTIONS} multiSelect />);
+      expect(container).toMatchSnapshot();
     });
 
     it('Renders correctly when open', () => {
-      // Mock createPortal so that the options list ends up inside the wrapper for snapshotting
-      spyOn(ReactDOM, 'createPortal').and.callFake(node => node);
       // There's intermittent variation (maybe measurement-related) on different computers,
       // so use fake timers to make it more predictable even though we never advance the timers.
       jest.useFakeTimers();
 
-      const ref = React.createRef<IDropdown>();
       // Specify dropdownWidth to prevent inconsistent calculated widths from getting into the snapshot
-      wrapper = mount(<Dropdown multiSelect options={RENDER_OPTIONS} componentRef={ref} dropdownWidth={200} />);
-      ref.current!.focus(true);
-      wrapper.update();
-      expect(wrapper.getDOMNode()).toMatchSnapshot();
+      const { getByRole } = render(<Dropdown multiSelect options={RENDER_OPTIONS} dropdownWidth={200} />);
+      userEvent.click(getByRole('combobox'));
+      // snapshot the whole body to capture both the field and the options list
+      expect(document.body).toMatchSnapshot();
     });
 
     it('Renders correctly when options change', () => {
-      wrapper = mount(<Dropdown options={DEFAULT_OPTIONS} multiSelect defaultSelectedKeys={['1', '4']} />);
-      const titleElement = wrapper.find('.ms-Dropdown-title');
+      const { getByRole, getAllByRole, queryByText, rerender } = render(
+        <Dropdown options={DEFAULT_OPTIONS} multiSelect defaultSelectedKeys={['1', '4']} />,
+      );
+
+      expect(queryByText('1, 4')).toBeTruthy(); // expected initial title text
 
-      expect(titleElement.text()).toEqual('1, 4');
+      rerender(<Dropdown options={DEFAULT_OPTIONS.slice(2)} multiSelect defaultSelectedKeys={['1', '4']} />);
 
-      wrapper.setProps({ options: DEFAULT_OPTIONS.slice(2) });
+      userEvent.click(getByRole('combobox'));
 
-      wrapper.find('.ms-Dropdown').simulate('click');
-      const options = document.querySelectorAll('.ms-Dropdown-item');
-      expect(options.length).toEqual(5);
+      const options = getAllByRole('option');
+      expect(options).toHaveLength(5);
     });
 
     it('Renders no selected item in default case', () => {
-      wrapper = mount(<Dropdown label="testgroup" options={DEFAULT_OPTIONS} multiSelect />);
+      const { getByRole } = render(<Dropdown options={DEFAULT_OPTIONS} multiSelect />);
 
-      const titleElement = wrapper.find('.ms-Dropdown-title');
-      expect(titleElement.text()).toEqual('');
+      expect(getByRole('combobox').querySelector('.ms-Dropdown-title')?.textContent).toBe('');
     });
 
     it('Renders a selected item if option specifies selected', () => {
-      wrapper = mount(
+      const { getByRole } = render(
         <Dropdown
-          label="testgroup"
           options={[
             { key: '1', text: '1', selected: true },
             { key: '2', text: '2' },
@@ -554,8 +482,8 @@ describe('Dropdown', () => {
         />,
       );
 
-      const titleElement = wrapper.find('.ms-Dropdown-title');
-      expect(titleElement.text()).toEqual('1');
+      const titleElement = within(getByRole('combobox')).queryByText('1');
+      expect(titleElement).toBeTruthy();
     });
 
     it('sets the selected items even when key is number 0', () => {
@@ -564,17 +492,13 @@ describe('Dropdown', () => {
         { key: 1, text: 'item2' },
       ];
 
-      safeCreate(<Dropdown multiSelect options={options} />, container => {
-        const dropdownOptionText = container.root.find(node => {
-          return node.props.className?.includes?.('ms-Dropdown-title');
-        });
-        expect(dropdownOptionText.children?.[0]).toBe(undefined);
+      const { getByRole, rerender } = render(<Dropdown options={options} multiSelect />);
+      const titleElement = getByRole('combobox').querySelector('.ms-Dropdown-title');
+      expect(titleElement?.textContent).toBe('');
+
+      rerender(<Dropdown selectedKeys={[0]} options={options} multiSelect />);
 
-        renderer.act(() => {
-          container.update(<Dropdown multiSelect options={options} selectedKeys={[0, 1]} />);
-        });
-        expect(dropdownOptionText.children?.[0]).toBe('item1, item2');
-      });
+      expect(titleElement?.textContent).toBe('item1');
     });
 
     it('selectedIndices should not contains -1 even when selectedKeys item is not in options', () => {
@@ -582,25 +506,16 @@ describe('Dropdown', () => {
         { key: 0, text: 'item1' },
         { key: 1, text: 'item2' },
       ];
-      const selectedKeys = [0];
+      const { getByRole, rerender } = render(<Dropdown selectedKeys={[0]} options={options} multiSelect />);
+      const titleElement = within(getByRole('combobox')).getByText('item1');
 
-      safeCreate(<Dropdown multiSelect options={options} selectedKeys={selectedKeys} />, container => {
-        const dropdownOptionText = container.root.find(node => {
-          return node.props.className?.includes?.('ms-Dropdown-title');
-        });
-        expect(dropdownOptionText.children?.[0]).toBe('item1');
-
-        renderer.act(() => {
-          container.update(<Dropdown multiSelect options={options} selectedKeys={[-1]} />);
-        });
-        expect(dropdownOptionText.children?.[0]).toBe(undefined);
-      });
+      rerender(<Dropdown selectedKey={-1} options={options} />);
+      expect(titleElement.textContent).toBe('');
     });
 
     it('Renders multiple selected items if multiple options specify selected', () => {
-      wrapper = mount(
+      const { getByRole } = render(
         <Dropdown
-          label="testgroup"
           options={[
             { key: '1', text: '1', selected: true },
             { key: '2', text: '2', selected: true },
@@ -609,89 +524,87 @@ describe('Dropdown', () => {
         />,
       );
 
-      const titleElement = wrapper.find('.ms-Dropdown-title');
-      expect(titleElement.text()).toEqual('1, 2');
+      const titleElement = within(getByRole('combobox')).queryByText('1, 2');
+      expect(titleElement).toBeTruthy();
     });
 
     it('Renders a selected item in uncontrolled case', () => {
-      wrapper = mount(
-        <Dropdown label="testgroup" defaultSelectedKeys={['1', '2']} multiSelect options={DEFAULT_OPTIONS} />,
-      );
+      const { getByRole } = render(<Dropdown defaultSelectedKeys={['1', '2']} multiSelect options={DEFAULT_OPTIONS} />);
 
-      const titleElement = wrapper.find('.ms-Dropdown-title');
-      expect(titleElement.text()).toEqual('1, 2');
+      const titleElement = within(getByRole('combobox')).queryByText('1, 2');
+      expect(titleElement).toBeTruthy();
     });
 
     it('does not change the selected items when defaultSelectedKeys changes', () => {
-      wrapper = mount(
-        <Dropdown label="testgroup" defaultSelectedKeys={['1', '2']} multiSelect options={DEFAULT_OPTIONS} />,
+      const { getByRole, rerender } = render(
+        <Dropdown defaultSelectedKeys={['1', '2']} multiSelect options={DEFAULT_OPTIONS} />,
       );
 
-      const titleElement = wrapper.find('.ms-Dropdown-title');
-      expect(titleElement.text()).toEqual('1, 2');
+      const titleElement = within(getByRole('combobox')).getByText('1, 2');
 
-      wrapper.setProps({ defaultSelectedKeys: ['3', '4'] });
+      rerender(<Dropdown defaultSelectedKeys={['3', '4']} multiSelect options={DEFAULT_OPTIONS} />);
 
-      expect(titleElement.text()).toEqual('1, 2');
+      expect(titleElement.textContent).toEqual('1, 2');
     });
 
     it('Renders selected items in controlled case', () => {
-      wrapper = mount(<Dropdown label="testgroup" selectedKeys={['1', '3']} multiSelect options={DEFAULT_OPTIONS} />);
+      const { getByRole } = render(<Dropdown selectedKeys={['1', '3']} multiSelect options={DEFAULT_OPTIONS} />);
 
-      const titleElement = wrapper.find('.ms-Dropdown-title');
-      expect(titleElement.text()).toEqual('1, 3');
+      const titleElement = within(getByRole('combobox')).queryByText('1, 3');
+      expect(titleElement).toBeTruthy();
     });
 
     it('changes selected items in controlled case', () => {
-      wrapper = mount(<Dropdown label="testgroup" selectedKeys={['1', '3']} multiSelect options={DEFAULT_OPTIONS} />);
+      const { getByRole, rerender } = render(
+        <Dropdown selectedKeys={['1', '3']} multiSelect options={DEFAULT_OPTIONS} />,
+      );
 
-      const titleElement = wrapper.find('.ms-Dropdown-title');
-      expect(titleElement.text()).toEqual('1, 3');
+      const titleElement = within(getByRole('combobox')).getByText('1, 3');
 
-      wrapper.setProps({ selectedKeys: ['2', '4'] });
-      expect(titleElement.text()).toEqual('2, 4');
+      rerender(<Dropdown selectedKeys={['2', '4']} multiSelect options={DEFAULT_OPTIONS} />);
+      expect(titleElement.textContent).toEqual('2, 4');
     });
 
     it("Preserves selected items in controlled case if they don't change", () => {
-      wrapper = mount(<Dropdown label="testgroup" selectedKey={'1'} options={DEFAULT_OPTIONS} />);
-      const titleElement = wrapper.find('.ms-Dropdown-title');
-      expect(titleElement.text()).toEqual('1');
+      const { getByRole, getAllByRole, queryByRole } = render(<Dropdown selectedKey={'1'} options={DEFAULT_OPTIONS} />);
+      const dropdownRoot = getByRole('combobox');
+      const titleElement = within(dropdownRoot).getByText('1');
 
-      wrapper.find('.ms-Dropdown').simulate('click');
+      userEvent.click(dropdownRoot);
 
-      const secondItemElement = document.querySelectorAll('.ms-Dropdown-item')[2] as HTMLElement;
-      ReactTestUtils.Simulate.click(secondItemElement);
+      const secondItemElement = getAllByRole('option')[1];
+      fireEvent.click(secondItemElement);
 
-      expect(titleElement.text()).toEqual('1');
+      expect(queryByRole('listbox')).toBeFalsy(); // verify menu closed
+      expect(titleElement.textContent).toEqual('1');
     });
 
     it('Can change items in uncontrolled case', () => {
-      wrapper = mount(
-        <Dropdown label="testgroup" defaultSelectedKeys={['1']} multiSelect id="test" options={DEFAULT_OPTIONS} />,
+      const { getByRole, getAllByRole } = render(
+        <Dropdown defaultSelectedKeys={['1']} multiSelect id="test" options={DEFAULT_OPTIONS} />,
       );
 
-      wrapper.find('.ms-Dropdown').simulate('click');
+      const dropdownRoot = getByRole('combobox');
+      userEvent.click(dropdownRoot);
 
-      const secondItemElement = document.querySelectorAll(
-        '.ms-Dropdown-item > input[type="checkbox"]',
-      )[1] as HTMLElement;
-      ReactTestUtils.Simulate.change(secondItemElement);
+      const secondItemElement = getAllByRole('option')[1];
+      fireEvent.click(secondItemElement);
 
-      expect(wrapper.find('.ms-Dropdown-title').text()).toEqual('1, 2');
+      const titleElement = within(dropdownRoot).queryByText('1, 2');
+      expect(titleElement).toBeTruthy();
     });
 
     it('calls onChange when selecting an item', () => {
       const onChangeSpy = jest.fn();
-      wrapper = mount(
+      const { getByRole, getAllByRole } = render(
         <Dropdown defaultSelectedKeys={['1']} multiSelect onChange={onChangeSpy} options={DEFAULT_OPTIONS} />,
       );
 
-      wrapper.find('.ms-Dropdown').simulate('click');
+      const dropdownRoot = getByRole('combobox');
+      userEvent.click(dropdownRoot);
 
-      const secondItemElement = document.querySelectorAll(
-        '.ms-Dropdown-item > input[type="checkbox"]',
-      )[1] as HTMLElement;
-      ReactTestUtils.Simulate.change(secondItemElement);
+      const secondItemElement = getAllByRole('option')[1];
+      fireEvent.click(secondItemElement);
 
       expect(onChangeSpy).toHaveBeenCalled();
       // mock.calls is the arguments for each call.
@@ -701,64 +614,45 @@ describe('Dropdown', () => {
 
     it('calls onChange when unselecting an item', () => {
       const onChangeSpy = jest.fn();
-      wrapper = mount(
+      const { getByRole, getAllByRole } = render(
         <Dropdown defaultSelectedKeys={['1']} multiSelect onChange={onChangeSpy} options={DEFAULT_OPTIONS} />,
       );
 
-      wrapper.find('.ms-Dropdown').simulate('click');
+      const dropdownRoot = getByRole('combobox');
+      userEvent.click(dropdownRoot);
 
-      const firstItemElement = document.querySelectorAll(
-        '.ms-Dropdown-item > input[type="checkbox"]',
-      )[0] as HTMLElement;
-      ReactTestUtils.Simulate.change(firstItemElement);
+      const firstItemElement = getAllByRole('option')[0];
+      fireEvent.click(firstItemElement);
 
       expect(onChangeSpy).toHaveBeenCalled();
       expect(onChangeSpy.mock.calls[0].slice(1)).toEqual([{ ...DEFAULT_OPTIONS[1], selected: false }, 1]);
     });
 
     it('Will not select the first valid item on keypress', () => {
-      wrapper = mount(<Dropdown label="testgroup" options={DEFAULT_OPTIONS} multiSelect />);
+      const { getByRole } = render(<Dropdown options={DEFAULT_OPTIONS} multiSelect />);
 
-      wrapper.find('.ms-Dropdown').simulate('keydown', { which: KeyCodes.down });
+      const dropdownRoot = getByRole('combobox');
+      userEvent.type(dropdownRoot, '{arrowdown}');
 
-      const titleElement = wrapper.find('.ms-Dropdown-title');
-      expect(titleElement.text()).toEqual('');
+      expect(dropdownRoot.querySelector('.ms-Dropdown-title')?.textContent).toBe('');
     });
 
     it('Will not select the first valid item on Home keypress', () => {
-      wrapper = mount(<Dropdown label="testgroup" options={DEFAULT_OPTIONS} multiSelect />);
+      const { getByRole } = render(<Dropdown options={DEFAULT_OPTIONS} multiSelect />);
 
-      wrapper.find('.ms-Dropdown').simulate('keydown', { which: KeyCodes.home });
+      const dropdownRoot = getByRole('combobox');
+      userEvent.type(dropdownRoot, '{home}');
 
-      const titleElement = wrapper.find('.ms-Dropdown-title');
-      expect(titleElement.text()).toEqual('');
+      expect(dropdownRoot.querySelector('.ms-Dropdown-title')?.textContent).toBe('');
     });
 
     it('Will not select the last valid item on End keypress', () => {
-      wrapper = mount(<Dropdown label="testgroup" options={DEFAULT_OPTIONS} multiSelect />);
-
-      wrapper.find('.ms-Dropdown').simulate('keydown', { which: KeyCodes.end });
-
-      const titleElement = wrapper.find('.ms-Dropdown-title');
-      expect(titleElement.text()).toEqual('');
-    });
-
-    it('Will skip disabled items on keydown', () => {
-      const options = [
-        { key: 0, text: '1' },
-        { key: 1, text: '2', disabled: true },
-        { key: 2, text: '3' },
-      ];
+      const { getByRole } = render(<Dropdown options={DEFAULT_OPTIONS} multiSelect />);
 
-      wrapper = mount(<Dropdown label="testgroup" options={options} />);
-      const dropdownRoot = wrapper.find('.ms-Dropdown');
-      const titleElement = wrapper.find('.ms-Dropdown-title');
+      const dropdownRoot = getByRole('combobox');
+      userEvent.type(dropdownRoot, '{end}');
 
-      dropdownRoot.simulate('keydown', { which: KeyCodes.down });
-      expect(titleElement.text()).toEqual('1');
-
-      dropdownRoot.simulate('keydown', { which: KeyCodes.down });
-      expect(titleElement.text()).toEqual('3');
+      expect(dropdownRoot.querySelector('.ms-Dropdown-title')?.textContent).toBe('');
     });
   });
 
@@ -770,10 +664,10 @@ describe('Dropdown', () => {
         { key: 2, text: '3' },
       ];
 
-      wrapper = mount(<Dropdown options={options} />);
-      const dropdownRoot = wrapper.getDOMNode().querySelector('.ms-Dropdown') as HTMLElement;
+      const { getByRole } = render(<Dropdown options={options} />);
+      const dropdownRoot = getByRole('combobox');
 
-      expect(dropdownRoot.attributes.getNamedItem('aria-labelledby')).toBeNull();
+      expect(dropdownRoot.getAttribute('aria-labelledby')).toBeNull();
     });
 
     it('does not apply aria-labelledby if an empty label is provided', () => {
@@ -783,10 +677,10 @@ describe('Dropdown', () => {
         { key: 2, text: '3' },
       ];
 
-      wrapper = mount(<Dropdown label="" options={options} />);
-      const dropdownRoot = wrapper.getDOMNode().querySelector('.ms-Dropdown') as HTMLElement;
+      const { getByRole } = render(<Dropdown label="" options={options} />);
+      const dropdownRoot = getByRole('combobox');
 
-      expect(dropdownRoot.attributes.getNamedItem('aria-labelledby')).toBeNull();
+      expect(dropdownRoot.getAttribute('aria-labelledby')).toBeNull();
     });
 
     it('applies aria-labelledby if a non-empty label is provided', () => {
@@ -796,78 +690,56 @@ describe('Dropdown', () => {
         { key: 2, text: '3' },
       ];
 
-      wrapper = mount(<Dropdown label="Test label" options={options} />);
-      const dropdownRoot = wrapper.getDOMNode().querySelector('.ms-Dropdown') as HTMLElement;
+      const { getByRole } = render(<Dropdown label="Test label" options={options} />);
+      const dropdownRoot = getByRole('combobox');
 
-      expect(dropdownRoot.attributes.getNamedItem('aria-labelledby')).not.toBeNull();
+      expect(dropdownRoot.getAttribute('aria-labelledby')).not.toBeNull();
     });
 
     it('sets role=error on included error message', () => {
-      wrapper = mount(
+      const { getByRole } = render(
         <Dropdown label="Test label" options={[]} id="sample-dropdown" errorMessage="This is an example error." />,
       );
-      const errorMessage = wrapper.getDOMNode().querySelector('#sample-dropdown-errorMessage') as HTMLElement;
-      expect(errorMessage.getAttribute('role')).toEqual('alert');
+      const alert = getByRole('alert');
+      expect(alert.textContent).toBe('This is an example error.');
     });
   });
 
   describe('with simulated async loaded options', () => {
     /** See https://github.com/microsoft/fluentui/issues/7315 */
-    class DropdownWithChangingProps extends React.Component<{ multi: boolean }, { options?: IDropdownOption[] }> {
-      public state = {
-        options: undefined,
-      };
-
-      public componentDidMount() {
-        this.loadOptions();
-      }
-
-      public render() {
-        return (
-          <div className="docs-DropdownExample">
-            {this.props.multi ? (
-              <Dropdown
-                label="Basic uncontrolled example:"
-                defaultSelectedKeys={['B', 'D']}
-                options={this.state.options!}
-                multiSelect
-              />
-            ) : (
-              <Dropdown label="Basic uncontrolled example:" defaultSelectedKey={'B'} options={this.state.options!} />
-            )}
-          </div>
-        );
-      }
-
-      public loadOptions() {
-        this.setState({
-          options: [
-            { key: 'A', text: 'Option a', title: 'I am option a.' },
-            { key: 'B', text: 'Option b' },
-            { key: 'C', text: 'Option c', disabled: true },
-            { key: 'D', text: 'Option d' },
-            { key: 'E', text: 'Option e' },
-          ],
-        });
-      }
-    }
+    const DropdownWithChangingProps = (props: { multi: boolean }) => {
+      const [options, setOptions] = React.useState<IDropdownOption[]>([]);
+      React.useEffect(() => {
+        setOptions([
+          { key: 'A', text: 'Option a', title: 'I am option a.' },
+          { key: 'B', text: 'Option b' },
+          { key: 'C', text: 'Option c', disabled: true },
+          { key: 'D', text: 'Option d' },
+          { key: 'E', text: 'Option e' },
+        ]);
+      }, []);
+
+      return (
+        <div className="docs-DropdownExample">
+          {props.multi ? (
+            <Dropdown defaultSelectedKeys={['B', 'D']} options={options} multiSelect />
+          ) : (
+            <Dropdown defaultSelectedKey={'B'} options={options} />
+          )}
+        </div>
+      );
+    };
+
+    it('respects defaultSelectedKey if options change (single-select)', () => {
+      const { getByRole } = render(<DropdownWithChangingProps multi={false} />);
+      const titleElement = within(getByRole('combobox')).queryByText('Option b');
+      expect(titleElement).toBeTruthy();
+    });
 
-    it('defaultSelectedKey value is respected if Dropdown options change for single-select Dropdown.', () => {
-      safeCreate(<DropdownWithChangingProps multi={false} />, container => {
-        const dropdownOptionText = container.root.find(node => {
-          return node.props.className?.includes?.('ms-Dropdown-title');
-        });
-        expect(dropdownOptionText.children?.[0]).toBe('Option b');
-      });
-    });
-
-    it('defaultSelectedKeys value is respected if Dropdown options change for multi-select Dropdown.', () => {
-      safeCreate(<DropdownWithChangingProps multi={true} />, container => {
-        const dropdownOptionText = container.root.find(node => {
-          return node.props.className?.includes?.('ms-Dropdown-title');
-        });
-        expect(dropdownOptionText.children?.[0]).toBe('Option b, Option d');
-      });
+    it('respects defaultSelectedKeys if options change (multi-select)', () => {
+      const { getByRole } = render(<DropdownWithChangingProps multi={true} />);
+      const titleElement = within(getByRole('combobox')).queryByText('Option b, Option d');
+      expect(titleElement).toBeTruthy();
     });
   });
 });
diff --git a/packages/react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/packages/react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
index fe0aa4f410433..28a21c3963198 100644
--- a/packages/react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
+++ b/packages/react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
@@ -1,354 +1,378 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Dropdown multi-select Renders correctly 1`] = `
-<div
-  className="ms-Dropdown-container"
->
+<div>
   <div
-    aria-expanded="false"
-    aria-haspopup="listbox"
-    className=
-        ms-Dropdown
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          border-color: #605e5c;
-          box-shadow: none;
-          box-sizing: border-box;
-          color: #323130;
-          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;
-          margin-bottom: 0px;
-          margin-left: 0px;
-          margin-right: 0px;
-          margin-top: 0px;
-          outline: 0px;
-          padding-bottom: 0px;
-          padding-left: 0px;
-          padding-right: 0px;
-          padding-top: 0px;
-          position: relative;
-          user-select: none;
-        }
-        &:hover .ms-Dropdown-title {
-          border-color: #323130;
-          color: #201f1e;
-        }
-        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover .ms-Dropdown-title {
-          border-color: Highlight;
-        }
-        &:focus .ms-Dropdown-title {
-          color: #201f1e;
-        }
-        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:focus .ms-Dropdown-title {
-          color: Highlight;
-        }
-        &:focus:after {
-          border-radius: 2px;
-          border: 2px solid #0078d4;
-          box-sizing: border-box;
-          content: '';
-          height: 100%;
-          left: 0px;
-          pointer-events: none;
-          position: absolute;
-          top: 0px;
-          width: 100%;
-        }
-        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:focus:after {
-          color: Highlight;
-        }
-        &:active .ms-Dropdown-title {
-          border-color: #0078d4;
-          color: #201f1e;
-        }
-        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:active .ms-Dropdown-title {
-          border-color: Highlight;
-        }
-        &:hover .ms-Dropdown-caretDown {
-          color: #323130;
-        }
-        &:focus .ms-Dropdown-caretDown {
-          color: #323130;
-        }
-        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:focus .ms-Dropdown-caretDown {
-          color: Highlight;
-        }
-        &:active .ms-Dropdown-caretDown {
-          color: #323130;
-        }
-        &:hover .ms-Dropdown-titleIsPlaceHolder {
-          color: #323130;
-        }
-        &:focus .ms-Dropdown-titleIsPlaceHolder {
-          color: #323130;
-        }
-        &:active .ms-Dropdown-titleIsPlaceHolder {
-          color: #323130;
-        }
-        &:hover .ms-Dropdown-title--hasError {
-          border-color: #a4262c;
-        }
-        &:active .ms-Dropdown-title--hasError {
-          border-color: #a4262c;
-        }
-    data-is-focusable={true}
-    data-ktp-target={true}
-    id="Dropdown0"
-    onBlur={[Function]}
-    onClick={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onMouseDown={[Function]}
-    role="combobox"
-    tabIndex={0}
+    class="ms-Dropdown-container"
   >
-    <span
-      aria-invalid={false}
-      className=
-          ms-Dropdown-title
-          ms-Dropdown-titleIsPlaceHolder
+    <div
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      class=
+          ms-Dropdown
           {
-            background-color: #ffffff;
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
             border-color: #605e5c;
-            border-radius: 2px;
-            border-style: solid;
-            border-width: 1px;
             box-shadow: none;
             box-sizing: border-box;
-            color: #605e5c;
-            cursor: pointer;
-            display: block;
-            height: 32px;
-            line-height: 30px;
+            color: #323130;
+            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;
             margin-bottom: 0px;
             margin-left: 0px;
             margin-right: 0px;
             margin-top: 0px;
-            overflow: hidden;
-            padding-bottom: 0;
-            padding-left: 8px;
-            padding-right: 28px;
-            padding-top: 0;
+            outline: 0px;
+            padding-bottom: 0px;
+            padding-left: 0px;
+            padding-right: 0px;
+            padding-top: 0px;
             position: relative;
-            text-overflow: ellipsis;
-            white-space: nowrap;
+            user-select: none;
           }
-      id="Dropdown0-option"
-    />
-    <span
-      className=
-          ms-Dropdown-caretDownWrapper
-          {
-            cursor: pointer;
-            height: 32px;
-            line-height: 30px;
-            padding-top: 1px;
+          &:hover .ms-Dropdown-title {
+            border-color: #323130;
+            color: #201f1e;
+          }
+          @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover .ms-Dropdown-title {
+            border-color: Highlight;
+          }
+          &:focus .ms-Dropdown-title {
+            color: #201f1e;
+          }
+          @media screen and (-ms-high-contrast: active), (forced-colors: active){&:focus .ms-Dropdown-title {
+            color: Highlight;
+          }
+          &:focus:after {
+            border-radius: 2px;
+            border: 2px solid #0078d4;
+            box-sizing: border-box;
+            content: '';
+            height: 100%;
+            left: 0px;
+            pointer-events: none;
             position: absolute;
-            right: 8px;
             top: 0px;
+            width: 100%;
           }
+          @media screen and (-ms-high-contrast: active), (forced-colors: active){&:focus:after {
+            color: Highlight;
+          }
+          &:active .ms-Dropdown-title {
+            border-color: #0078d4;
+            color: #201f1e;
+          }
+          @media screen and (-ms-high-contrast: active), (forced-colors: active){&:active .ms-Dropdown-title {
+            border-color: Highlight;
+          }
+          &:hover .ms-Dropdown-caretDown {
+            color: #323130;
+          }
+          &:focus .ms-Dropdown-caretDown {
+            color: #323130;
+          }
+          @media screen and (-ms-high-contrast: active), (forced-colors: active){&:focus .ms-Dropdown-caretDown {
+            color: Highlight;
+          }
+          &:active .ms-Dropdown-caretDown {
+            color: #323130;
+          }
+          &:hover .ms-Dropdown-titleIsPlaceHolder {
+            color: #323130;
+          }
+          &:focus .ms-Dropdown-titleIsPlaceHolder {
+            color: #323130;
+          }
+          &:active .ms-Dropdown-titleIsPlaceHolder {
+            color: #323130;
+          }
+          &:hover .ms-Dropdown-title--hasError {
+            border-color: #a4262c;
+          }
+          &:active .ms-Dropdown-title--hasError {
+            border-color: #a4262c;
+          }
+      data-is-focusable="true"
+      data-ktp-target="true"
+      id="Dropdown0"
+      role="combobox"
+      tabindex="0"
     >
-      <i
-        aria-hidden={true}
-        className=
-            ms-Dropdown-caretDown
+      <span
+        aria-invalid="false"
+        class=
+            ms-Dropdown-title
+            ms-Dropdown-titleIsPlaceHolder
             {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
+              background-color: #ffffff;
+              border-color: #605e5c;
+              border-radius: 2px;
+              border-style: solid;
+              border-width: 1px;
+              box-shadow: none;
+              box-sizing: border-box;
               color: #605e5c;
-              display: inline-block;
-              font-family: "FabricMDL2Icons";
-              font-size: 12px;
-              font-style: normal;
-              font-weight: normal;
-              pointer-events: none;
-              speak: none;
+              cursor: pointer;
+              display: block;
+              height: 32px;
+              line-height: 30px;
+              margin-bottom: 0px;
+              margin-left: 0px;
+              margin-right: 0px;
+              margin-top: 0px;
+              overflow: hidden;
+              padding-bottom: 0;
+              padding-left: 8px;
+              padding-right: 28px;
+              padding-top: 0;
+              position: relative;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+        id="Dropdown0-option"
+      />
+      <span
+        class=
+            ms-Dropdown-caretDownWrapper
+            {
+              cursor: pointer;
+              height: 32px;
+              line-height: 30px;
+              padding-top: 1px;
+              position: absolute;
+              right: 8px;
+              top: 0px;
             }
-        data-icon-name="ChevronDown"
       >
-        
-      </i>
-    </span>
+        <i
+          aria-hidden="true"
+          class=
+              ms-Dropdown-caretDown
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                color: #605e5c;
+                display: inline-block;
+                font-family: "FabricMDL2Icons";
+                font-size: 12px;
+                font-style: normal;
+                font-weight: normal;
+                pointer-events: none;
+                speak: none;
+              }
+          data-icon-name="ChevronDown"
+        >
+          
+        </i>
+      </span>
+    </div>
   </div>
 </div>
 `;
 
 exports[`Dropdown multi-select Renders correctly when open 1`] = `
-<div
-  aria-owns="Dropdown0-list"
-  class="ms-Dropdown-container"
+<body
+  class="ms-Fabric--isFocusHidden"
 >
+  <div>
+    <div
+      aria-owns="Dropdown0-list"
+      class="ms-Dropdown-container"
+    >
+      <div
+        aria-activedescendant="Dropdown0-list1"
+        aria-controls="Dropdown0-list"
+        aria-expanded="true"
+        aria-haspopup="listbox"
+        class=
+            ms-Dropdown
+            is-open
+            {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              border-color: #605e5c;
+              box-shadow: none;
+              box-sizing: border-box;
+              color: #323130;
+              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;
+              margin-bottom: 0px;
+              margin-left: 0px;
+              margin-right: 0px;
+              margin-top: 0px;
+              outline: 0px;
+              padding-bottom: 0px;
+              padding-left: 0px;
+              padding-right: 0px;
+              padding-top: 0px;
+              position: relative;
+              user-select: none;
+            }
+            &:hover .ms-Dropdown-title {
+              border-color: #605e5c;
+              color: #201f1e;
+            }
+            @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover .ms-Dropdown-title {
+              border-color: Highlight;
+            }
+            &:focus .ms-Dropdown-title {
+              color: #201f1e;
+            }
+            @media screen and (-ms-high-contrast: active), (forced-colors: active){&:focus .ms-Dropdown-title {
+              color: Highlight;
+            }
+            &:focus:after {
+              border-radius: 2px;
+              border: 2px solid #0078d4;
+              box-sizing: border-box;
+              content: '';
+              height: 100%;
+              left: 0px;
+              pointer-events: none;
+              position: absolute;
+              top: 0px;
+              width: 100%;
+            }
+            @media screen and (-ms-high-contrast: active), (forced-colors: active){&:focus:after {
+              color: Highlight;
+            }
+            &:active .ms-Dropdown-title {
+              border-color: #0078d4;
+              color: #201f1e;
+            }
+            @media screen and (-ms-high-contrast: active), (forced-colors: active){&:active .ms-Dropdown-title {
+              border-color: Highlight;
+            }
+            &:hover .ms-Dropdown-caretDown {
+              color: #323130;
+            }
+            &:focus .ms-Dropdown-caretDown {
+              color: #323130;
+            }
+            @media screen and (-ms-high-contrast: active), (forced-colors: active){&:focus .ms-Dropdown-caretDown {
+              color: Highlight;
+            }
+            &:active .ms-Dropdown-caretDown {
+              color: #323130;
+            }
+            &:hover .ms-Dropdown-titleIsPlaceHolder {
+              color: #323130;
+            }
+            &:focus .ms-Dropdown-titleIsPlaceHolder {
+              color: #323130;
+            }
+            &:active .ms-Dropdown-titleIsPlaceHolder {
+              color: #323130;
+            }
+            &:hover .ms-Dropdown-title--hasError {
+              border-color: #a4262c;
+            }
+            &:active .ms-Dropdown-title--hasError {
+              border-color: #a4262c;
+            }
+        data-is-focusable="true"
+        data-ktp-target="true"
+        id="Dropdown0"
+        role="combobox"
+        tabindex="0"
+      >
+        <span
+          aria-atomic="true"
+          aria-invalid="false"
+          aria-live="polite"
+          class=
+              ms-Dropdown-title
+              {
+                background-color: #ffffff;
+                border-color: #605e5c;
+                border-radius: 0 0 2px 2px;
+                border-style: solid;
+                border-width: 1px;
+                box-shadow: none;
+                box-sizing: border-box;
+                cursor: pointer;
+                display: block;
+                height: 32px;
+                line-height: 30px;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                overflow: hidden;
+                padding-bottom: 0;
+                padding-left: 8px;
+                padding-right: 28px;
+                padding-top: 0;
+                position: relative;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+          id="Dropdown0-option"
+        >
+          1
+        </span>
+        <span
+          class=
+              ms-Dropdown-caretDownWrapper
+              {
+                cursor: pointer;
+                height: 32px;
+                line-height: 30px;
+                padding-top: 1px;
+                position: absolute;
+                right: 8px;
+                top: 0px;
+              }
+        >
+          <i
+            aria-hidden="true"
+            class=
+                ms-Dropdown-caretDown
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  color: #605e5c;
+                  display: inline-block;
+                  font-family: "FabricMDL2Icons";
+                  font-size: 12px;
+                  font-style: normal;
+                  font-weight: normal;
+                  pointer-events: none;
+                  speak: none;
+                }
+            data-icon-name="ChevronDown"
+          >
+            
+          </i>
+        </span>
+      </div>
+      <span
+        class="ms-layer"
+      />
+    </div>
+  </div>
   <div
-    aria-activedescendant="Dropdown0-list1"
-    aria-controls="Dropdown0-list"
-    aria-expanded="true"
-    aria-haspopup="listbox"
     class=
-        ms-Dropdown
-        is-open
+        ms-Layer
+        ms-Layer--fixed
         {
           -moz-osx-font-smoothing: grayscale;
           -webkit-font-smoothing: antialiased;
-          border-color: #605e5c;
-          box-shadow: none;
-          box-sizing: border-box;
-          color: #323130;
+          bottom: 0px;
           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;
-          margin-bottom: 0px;
-          margin-left: 0px;
-          margin-right: 0px;
-          margin-top: 0px;
-          outline: 0px;
-          padding-bottom: 0px;
-          padding-left: 0px;
-          padding-right: 0px;
-          padding-top: 0px;
-          position: relative;
-          user-select: none;
-        }
-        &:hover .ms-Dropdown-title {
-          border-color: #605e5c;
-          color: #201f1e;
-        }
-        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover .ms-Dropdown-title {
-          border-color: Highlight;
-        }
-        &:focus .ms-Dropdown-title {
-          color: #201f1e;
-        }
-        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:focus .ms-Dropdown-title {
-          color: Highlight;
-        }
-        &:focus:after {
-          border-radius: 2px;
-          border: 2px solid #0078d4;
-          box-sizing: border-box;
-          content: '';
-          height: 100%;
           left: 0px;
-          pointer-events: none;
-          position: absolute;
+          position: fixed;
+          right: 0px;
           top: 0px;
-          width: 100%;
-        }
-        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:focus:after {
-          color: Highlight;
+          visibility: hidden;
+          z-index: 1000000;
         }
-        &:active .ms-Dropdown-title {
-          border-color: #0078d4;
-          color: #201f1e;
-        }
-        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:active .ms-Dropdown-title {
-          border-color: Highlight;
-        }
-        &:hover .ms-Dropdown-caretDown {
-          color: #323130;
-        }
-        &:focus .ms-Dropdown-caretDown {
-          color: #323130;
-        }
-        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:focus .ms-Dropdown-caretDown {
-          color: Highlight;
-        }
-        &:active .ms-Dropdown-caretDown {
-          color: #323130;
-        }
-        &:hover .ms-Dropdown-titleIsPlaceHolder {
-          color: #323130;
-        }
-        &:focus .ms-Dropdown-titleIsPlaceHolder {
-          color: #323130;
-        }
-        &:active .ms-Dropdown-titleIsPlaceHolder {
-          color: #323130;
-        }
-        &:hover .ms-Dropdown-title--hasError {
-          border-color: #a4262c;
-        }
-        &:active .ms-Dropdown-title--hasError {
-          border-color: #a4262c;
-        }
-    data-is-focusable="true"
-    data-ktp-target="true"
-    id="Dropdown0"
-    role="combobox"
-    tabindex="0"
-  >
-    <span
-      aria-invalid="false"
-      class=
-          ms-Dropdown-title
-          {
-            background-color: #ffffff;
-            border-color: #605e5c;
-            border-radius: 0 0 2px 2px;
-            border-style: solid;
-            border-width: 1px;
-            box-shadow: none;
-            box-sizing: border-box;
-            cursor: pointer;
-            display: block;
-            height: 32px;
-            line-height: 30px;
-            margin-bottom: 0px;
-            margin-left: 0px;
-            margin-right: 0px;
-            margin-top: 0px;
-            overflow: hidden;
-            padding-bottom: 0;
-            padding-left: 8px;
-            padding-right: 28px;
-            padding-top: 0;
-            position: relative;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-      id="Dropdown0-option"
-    >
-      1
-    </span>
-    <span
-      class=
-          ms-Dropdown-caretDownWrapper
-          {
-            cursor: pointer;
-            height: 32px;
-            line-height: 30px;
-            padding-top: 1px;
-            position: absolute;
-            right: 8px;
-            top: 0px;
-          }
-    >
-      <i
-        aria-hidden="true"
-        class=
-            ms-Dropdown-caretDown
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              color: #605e5c;
-              display: inline-block;
-              font-family: "FabricMDL2Icons";
-              font-size: 12px;
-              font-style: normal;
-              font-weight: normal;
-              pointer-events: none;
-              speak: none;
-            }
-        data-icon-name="ChevronDown"
-      >
-        
-      </i>
-    </span>
-  </div>
-  <span
-    class="ms-layer"
+    data-portal-element="true"
   >
     <div
       class=
@@ -1013,359 +1037,381 @@ exports[`Dropdown multi-select Renders correctly when open 1`] = `
         </div>
       </div>
     </div>
-  </span>
-</div>
+  </div>
+</body>
 `;
 
 exports[`Dropdown single-select Renders correctly 1`] = `
-<div
-  className="ms-Dropdown-container"
->
+<div>
   <div
-    aria-expanded="false"
-    aria-haspopup="listbox"
-    className=
-        ms-Dropdown
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          border-color: #605e5c;
-          box-shadow: none;
-          box-sizing: border-box;
-          color: #323130;
-          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;
-          margin-bottom: 0px;
-          margin-left: 0px;
-          margin-right: 0px;
-          margin-top: 0px;
-          outline: 0px;
-          padding-bottom: 0px;
-          padding-left: 0px;
-          padding-right: 0px;
-          padding-top: 0px;
-          position: relative;
-          user-select: none;
-        }
-        &:hover .ms-Dropdown-title {
-          border-color: #323130;
-          color: #201f1e;
-        }
-        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover .ms-Dropdown-title {
-          border-color: Highlight;
-        }
-        &:focus .ms-Dropdown-title {
-          color: #201f1e;
-        }
-        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:focus .ms-Dropdown-title {
-          color: Highlight;
-        }
-        &:focus:after {
-          border-radius: 2px;
-          border: 2px solid #0078d4;
-          box-sizing: border-box;
-          content: '';
-          height: 100%;
-          left: 0px;
-          pointer-events: none;
-          position: absolute;
-          top: 0px;
-          width: 100%;
-        }
-        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:focus:after {
-          color: Highlight;
-        }
-        &:active .ms-Dropdown-title {
-          border-color: #0078d4;
-          color: #201f1e;
-        }
-        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:active .ms-Dropdown-title {
-          border-color: Highlight;
-        }
-        &:hover .ms-Dropdown-caretDown {
-          color: #323130;
-        }
-        &:focus .ms-Dropdown-caretDown {
-          color: #323130;
-        }
-        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:focus .ms-Dropdown-caretDown {
-          color: Highlight;
-        }
-        &:active .ms-Dropdown-caretDown {
-          color: #323130;
-        }
-        &:hover .ms-Dropdown-titleIsPlaceHolder {
-          color: #323130;
-        }
-        &:focus .ms-Dropdown-titleIsPlaceHolder {
-          color: #323130;
-        }
-        &:active .ms-Dropdown-titleIsPlaceHolder {
-          color: #323130;
-        }
-        &:hover .ms-Dropdown-title--hasError {
-          border-color: #a4262c;
-        }
-        &:active .ms-Dropdown-title--hasError {
-          border-color: #a4262c;
-        }
-    data-is-focusable={true}
-    data-ktp-target={true}
-    id="Dropdown0"
-    onBlur={[Function]}
-    onClick={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onMouseDown={[Function]}
-    role="combobox"
-    tabIndex={0}
+    class="ms-Dropdown-container"
   >
-    <span
-      aria-invalid={false}
-      className=
-          ms-Dropdown-title
-          ms-Dropdown-titleIsPlaceHolder
+    <div
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      class=
+          ms-Dropdown
           {
-            background-color: #ffffff;
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
             border-color: #605e5c;
-            border-radius: 2px;
-            border-style: solid;
-            border-width: 1px;
             box-shadow: none;
             box-sizing: border-box;
-            color: #605e5c;
-            cursor: pointer;
-            display: block;
-            height: 32px;
-            line-height: 30px;
+            color: #323130;
+            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;
             margin-bottom: 0px;
             margin-left: 0px;
             margin-right: 0px;
             margin-top: 0px;
-            overflow: hidden;
-            padding-bottom: 0;
-            padding-left: 8px;
-            padding-right: 28px;
-            padding-top: 0;
+            outline: 0px;
+            padding-bottom: 0px;
+            padding-left: 0px;
+            padding-right: 0px;
+            padding-top: 0px;
             position: relative;
-            text-overflow: ellipsis;
-            white-space: nowrap;
+            user-select: none;
           }
-      id="Dropdown0-option"
-    />
-    <span
-      className=
-          ms-Dropdown-caretDownWrapper
-          {
-            cursor: pointer;
-            height: 32px;
-            line-height: 30px;
-            padding-top: 1px;
+          &:hover .ms-Dropdown-title {
+            border-color: #323130;
+            color: #201f1e;
+          }
+          @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover .ms-Dropdown-title {
+            border-color: Highlight;
+          }
+          &:focus .ms-Dropdown-title {
+            color: #201f1e;
+          }
+          @media screen and (-ms-high-contrast: active), (forced-colors: active){&:focus .ms-Dropdown-title {
+            color: Highlight;
+          }
+          &:focus:after {
+            border-radius: 2px;
+            border: 2px solid #0078d4;
+            box-sizing: border-box;
+            content: '';
+            height: 100%;
+            left: 0px;
+            pointer-events: none;
             position: absolute;
-            right: 8px;
             top: 0px;
+            width: 100%;
+          }
+          @media screen and (-ms-high-contrast: active), (forced-colors: active){&:focus:after {
+            color: Highlight;
           }
+          &:active .ms-Dropdown-title {
+            border-color: #0078d4;
+            color: #201f1e;
+          }
+          @media screen and (-ms-high-contrast: active), (forced-colors: active){&:active .ms-Dropdown-title {
+            border-color: Highlight;
+          }
+          &:hover .ms-Dropdown-caretDown {
+            color: #323130;
+          }
+          &:focus .ms-Dropdown-caretDown {
+            color: #323130;
+          }
+          @media screen and (-ms-high-contrast: active), (forced-colors: active){&:focus .ms-Dropdown-caretDown {
+            color: Highlight;
+          }
+          &:active .ms-Dropdown-caretDown {
+            color: #323130;
+          }
+          &:hover .ms-Dropdown-titleIsPlaceHolder {
+            color: #323130;
+          }
+          &:focus .ms-Dropdown-titleIsPlaceHolder {
+            color: #323130;
+          }
+          &:active .ms-Dropdown-titleIsPlaceHolder {
+            color: #323130;
+          }
+          &:hover .ms-Dropdown-title--hasError {
+            border-color: #a4262c;
+          }
+          &:active .ms-Dropdown-title--hasError {
+            border-color: #a4262c;
+          }
+      data-is-focusable="true"
+      data-ktp-target="true"
+      id="Dropdown0"
+      role="combobox"
+      tabindex="0"
     >
-      <i
-        aria-hidden={true}
-        className=
-            ms-Dropdown-caretDown
+      <span
+        aria-invalid="false"
+        class=
+            ms-Dropdown-title
+            ms-Dropdown-titleIsPlaceHolder
             {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
+              background-color: #ffffff;
+              border-color: #605e5c;
+              border-radius: 2px;
+              border-style: solid;
+              border-width: 1px;
+              box-shadow: none;
+              box-sizing: border-box;
               color: #605e5c;
-              display: inline-block;
-              font-family: "FabricMDL2Icons";
-              font-size: 12px;
-              font-style: normal;
-              font-weight: normal;
-              pointer-events: none;
-              speak: none;
+              cursor: pointer;
+              display: block;
+              height: 32px;
+              line-height: 30px;
+              margin-bottom: 0px;
+              margin-left: 0px;
+              margin-right: 0px;
+              margin-top: 0px;
+              overflow: hidden;
+              padding-bottom: 0;
+              padding-left: 8px;
+              padding-right: 28px;
+              padding-top: 0;
+              position: relative;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+        id="Dropdown0-option"
+      />
+      <span
+        class=
+            ms-Dropdown-caretDownWrapper
+            {
+              cursor: pointer;
+              height: 32px;
+              line-height: 30px;
+              padding-top: 1px;
+              position: absolute;
+              right: 8px;
+              top: 0px;
             }
-        data-icon-name="ChevronDown"
       >
-        
-      </i>
-    </span>
+        <i
+          aria-hidden="true"
+          class=
+              ms-Dropdown-caretDown
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                color: #605e5c;
+                display: inline-block;
+                font-family: "FabricMDL2Icons";
+                font-size: 12px;
+                font-style: normal;
+                font-weight: normal;
+                pointer-events: none;
+                speak: none;
+              }
+          data-icon-name="ChevronDown"
+        >
+          
+        </i>
+      </span>
+    </div>
   </div>
 </div>
 `;
 
 exports[`Dropdown single-select Renders correctly when open 1`] = `
-<div
-  aria-owns="Dropdown0-list"
-  class="ms-Dropdown-container"
->
+<body>
+  <div>
+    <div
+      aria-owns="Dropdown0-list"
+      class="ms-Dropdown-container"
+    >
+      <div
+        aria-activedescendant="Dropdown0-list1"
+        aria-controls="Dropdown0-list"
+        aria-expanded="true"
+        aria-haspopup="listbox"
+        class=
+            ms-Dropdown
+            is-open
+            {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              border-color: #605e5c;
+              box-shadow: none;
+              box-sizing: border-box;
+              color: #323130;
+              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;
+              margin-bottom: 0px;
+              margin-left: 0px;
+              margin-right: 0px;
+              margin-top: 0px;
+              outline: 0px;
+              padding-bottom: 0px;
+              padding-left: 0px;
+              padding-right: 0px;
+              padding-top: 0px;
+              position: relative;
+              user-select: none;
+            }
+            &:hover .ms-Dropdown-title {
+              border-color: #605e5c;
+              color: #201f1e;
+            }
+            @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover .ms-Dropdown-title {
+              border-color: Highlight;
+            }
+            &:focus .ms-Dropdown-title {
+              color: #201f1e;
+            }
+            @media screen and (-ms-high-contrast: active), (forced-colors: active){&:focus .ms-Dropdown-title {
+              color: Highlight;
+            }
+            &:focus:after {
+              border-radius: 2px;
+              border: 2px solid #0078d4;
+              box-sizing: border-box;
+              content: '';
+              height: 100%;
+              left: 0px;
+              pointer-events: none;
+              position: absolute;
+              top: 0px;
+              width: 100%;
+            }
+            @media screen and (-ms-high-contrast: active), (forced-colors: active){&:focus:after {
+              color: Highlight;
+            }
+            &:active .ms-Dropdown-title {
+              border-color: #0078d4;
+              color: #201f1e;
+            }
+            @media screen and (-ms-high-contrast: active), (forced-colors: active){&:active .ms-Dropdown-title {
+              border-color: Highlight;
+            }
+            &:hover .ms-Dropdown-caretDown {
+              color: #323130;
+            }
+            &:focus .ms-Dropdown-caretDown {
+              color: #323130;
+            }
+            @media screen and (-ms-high-contrast: active), (forced-colors: active){&:focus .ms-Dropdown-caretDown {
+              color: Highlight;
+            }
+            &:active .ms-Dropdown-caretDown {
+              color: #323130;
+            }
+            &:hover .ms-Dropdown-titleIsPlaceHolder {
+              color: #323130;
+            }
+            &:focus .ms-Dropdown-titleIsPlaceHolder {
+              color: #323130;
+            }
+            &:active .ms-Dropdown-titleIsPlaceHolder {
+              color: #323130;
+            }
+            &:hover .ms-Dropdown-title--hasError {
+              border-color: #a4262c;
+            }
+            &:active .ms-Dropdown-title--hasError {
+              border-color: #a4262c;
+            }
+        data-is-focusable="true"
+        data-ktp-target="true"
+        id="Dropdown0"
+        role="combobox"
+        tabindex="0"
+      >
+        <span
+          aria-atomic="true"
+          aria-invalid="false"
+          aria-live="polite"
+          class=
+              ms-Dropdown-title
+              {
+                background-color: #ffffff;
+                border-color: #605e5c;
+                border-radius: 0 0 2px 2px;
+                border-style: solid;
+                border-width: 1px;
+                box-shadow: none;
+                box-sizing: border-box;
+                cursor: pointer;
+                display: block;
+                height: 32px;
+                line-height: 30px;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                overflow: hidden;
+                padding-bottom: 0;
+                padding-left: 8px;
+                padding-right: 28px;
+                padding-top: 0;
+                position: relative;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+          id="Dropdown0-option"
+        >
+          1
+        </span>
+        <span
+          class=
+              ms-Dropdown-caretDownWrapper
+              {
+                cursor: pointer;
+                height: 32px;
+                line-height: 30px;
+                padding-top: 1px;
+                position: absolute;
+                right: 8px;
+                top: 0px;
+              }
+        >
+          <i
+            aria-hidden="true"
+            class=
+                ms-Dropdown-caretDown
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  color: #605e5c;
+                  display: inline-block;
+                  font-family: "FabricMDL2Icons";
+                  font-size: 12px;
+                  font-style: normal;
+                  font-weight: normal;
+                  pointer-events: none;
+                  speak: none;
+                }
+            data-icon-name="ChevronDown"
+          >
+            
+          </i>
+        </span>
+      </div>
+      <span
+        class="ms-layer"
+      />
+    </div>
+  </div>
   <div
-    aria-activedescendant="Dropdown0-list1"
-    aria-controls="Dropdown0-list"
-    aria-expanded="true"
-    aria-haspopup="listbox"
     class=
-        ms-Dropdown
-        is-open
+        ms-Layer
+        ms-Layer--fixed
         {
           -moz-osx-font-smoothing: grayscale;
           -webkit-font-smoothing: antialiased;
-          border-color: #605e5c;
-          box-shadow: none;
-          box-sizing: border-box;
-          color: #323130;
+          bottom: 0px;
           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;
-          margin-bottom: 0px;
-          margin-left: 0px;
-          margin-right: 0px;
-          margin-top: 0px;
-          outline: 0px;
-          padding-bottom: 0px;
-          padding-left: 0px;
-          padding-right: 0px;
-          padding-top: 0px;
-          position: relative;
-          user-select: none;
-        }
-        &:hover .ms-Dropdown-title {
-          border-color: #605e5c;
-          color: #201f1e;
-        }
-        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover .ms-Dropdown-title {
-          border-color: Highlight;
-        }
-        &:focus .ms-Dropdown-title {
-          color: #201f1e;
-        }
-        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:focus .ms-Dropdown-title {
-          color: Highlight;
-        }
-        &:focus:after {
-          border-radius: 2px;
-          border: 2px solid #0078d4;
-          box-sizing: border-box;
-          content: '';
-          height: 100%;
           left: 0px;
-          pointer-events: none;
-          position: absolute;
+          position: fixed;
+          right: 0px;
           top: 0px;
-          width: 100%;
+          visibility: hidden;
+          z-index: 1000000;
         }
-        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:focus:after {
-          color: Highlight;
-        }
-        &:active .ms-Dropdown-title {
-          border-color: #0078d4;
-          color: #201f1e;
-        }
-        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:active .ms-Dropdown-title {
-          border-color: Highlight;
-        }
-        &:hover .ms-Dropdown-caretDown {
-          color: #323130;
-        }
-        &:focus .ms-Dropdown-caretDown {
-          color: #323130;
-        }
-        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:focus .ms-Dropdown-caretDown {
-          color: Highlight;
-        }
-        &:active .ms-Dropdown-caretDown {
-          color: #323130;
-        }
-        &:hover .ms-Dropdown-titleIsPlaceHolder {
-          color: #323130;
-        }
-        &:focus .ms-Dropdown-titleIsPlaceHolder {
-          color: #323130;
-        }
-        &:active .ms-Dropdown-titleIsPlaceHolder {
-          color: #323130;
-        }
-        &:hover .ms-Dropdown-title--hasError {
-          border-color: #a4262c;
-        }
-        &:active .ms-Dropdown-title--hasError {
-          border-color: #a4262c;
-        }
-    data-is-focusable="true"
-    data-ktp-target="true"
-    id="Dropdown0"
-    role="combobox"
-    tabindex="0"
-  >
-    <span
-      aria-invalid="false"
-      class=
-          ms-Dropdown-title
-          {
-            background-color: #ffffff;
-            border-color: #605e5c;
-            border-radius: 0 0 2px 2px;
-            border-style: solid;
-            border-width: 1px;
-            box-shadow: none;
-            box-sizing: border-box;
-            cursor: pointer;
-            display: block;
-            height: 32px;
-            line-height: 30px;
-            margin-bottom: 0px;
-            margin-left: 0px;
-            margin-right: 0px;
-            margin-top: 0px;
-            overflow: hidden;
-            padding-bottom: 0;
-            padding-left: 8px;
-            padding-right: 28px;
-            padding-top: 0;
-            position: relative;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-      id="Dropdown0-option"
-    >
-      1
-    </span>
-    <span
-      class=
-          ms-Dropdown-caretDownWrapper
-          {
-            cursor: pointer;
-            height: 32px;
-            line-height: 30px;
-            padding-top: 1px;
-            position: absolute;
-            right: 8px;
-            top: 0px;
-          }
-    >
-      <i
-        aria-hidden="true"
-        class=
-            ms-Dropdown-caretDown
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              color: #605e5c;
-              display: inline-block;
-              font-family: "FabricMDL2Icons";
-              font-size: 12px;
-              font-style: normal;
-              font-weight: normal;
-              pointer-events: none;
-              speak: none;
-            }
-        data-icon-name="ChevronDown"
-      >
-        
-      </i>
-    </span>
-  </div>
-  <span
-    class="ms-layer"
+    data-portal-element="true"
   >
     <div
       class=
@@ -1865,6 +1911,6 @@ exports[`Dropdown single-select Renders correctly when open 1`] = `
         </div>
       </div>
     </div>
-  </span>
-</div>
+  </div>
+</body>
 `;
diff --git a/packages/react/src/components/Panel/Panel.test.tsx b/packages/react/src/components/Panel/Panel.test.tsx
index 7b6413e90d3b7..cd435e901c59a 100644
--- a/packages/react/src/components/Panel/Panel.test.tsx
+++ b/packages/react/src/components/Panel/Panel.test.tsx
@@ -1,19 +1,17 @@
 import * as React from 'react';
-import * as renderer from 'react-test-renderer';
-import { mount } from 'enzyme';
+import * as ReactDOM from 'react-dom';
+import { render, screen } from '@testing-library/react';
 
 import { Panel } from './Panel';
 import { PanelBase } from './Panel.base';
 import * as path from 'path';
 import { isConformant } from '../../common/isConformant';
 import { resetIds } from '../../Utilities';
-import type { IPanel } from './Panel.types';
-
-let div: HTMLElement;
-
-const ReactDOM = require('react-dom');
+import type { IPanel, IPanelProps } from './Panel.types';
 
 describe('Panel', () => {
+  let div: HTMLElement | undefined;
+
   beforeEach(() => {
     resetIds();
   });
@@ -27,15 +25,9 @@ describe('Panel', () => {
   });
 
   it('renders Panel correctly', () => {
-    // Mock createPortal to capture its component hierarchy in snapshot output.
-    const originalCreatePortal = ReactDOM.createPortal;
-    ReactDOM.createPortal = jest.fn(element => {
-      return element;
-    });
-
-    const component = renderer.create(
+    render(
       <Panel
-        isOpen={true}
+        isOpen
         headerText="Test Panel"
         headerTextProps={{
           className: 'panel_class',
@@ -45,76 +37,58 @@ describe('Panel', () => {
         <span>Content goes here</span>
       </Panel>,
     );
-
-    expect(component.toJSON()).toMatchSnapshot();
-
-    ReactDOM.createPortal = originalCreatePortal;
+    expect(screen.getByRole('dialog')).toMatchSnapshot();
   });
 
   describe('open', () => {
-    beforeEach(() => {
-      div = document.createElement('div');
-    });
-
     afterEach(() => {
-      ReactDOM.unmountComponentAtNode(div);
+      if (div) {
+        ReactDOM.unmountComponentAtNode(div);
+        div = undefined;
+      }
     });
 
     it('fires the correct events on imperative scenarios', () => {
-      let openedCalled = false;
-      let openCalled = false;
-      let dismissedCalled = false;
-      let dismissCalled = false;
-      let dismissCount = 0;
-
-      const setOpenTrue = (): void => {
-        openCalled = true;
-      };
-      const setOpenedTrue = (): void => {
-        openedCalled = true;
-      };
-      const setDismissTrue = (): void => {
-        dismissCalled = true;
-        dismissCount++;
-      };
-      const setDismissedTrue = (): void => {
-        dismissedCalled = true;
-      };
+      const panel = React.createRef<IPanel>();
+      const onOpen = jest.fn();
+      const onOpened = jest.fn();
+      const onDismiss = jest.fn();
+      const onDimissed = jest.fn();
+
       jest.useFakeTimers();
 
-      const panel: PanelBase = ReactDOM.render(
+      render(
         <PanelBase
-          onOpen={setOpenTrue}
-          onOpened={setOpenedTrue}
-          onDismiss={setDismissTrue}
-          onDismissed={setDismissedTrue}
+          componentRef={panel}
+          onOpen={onOpen}
+          onOpened={onOpened}
+          onDismiss={onDismiss}
+          onDismissed={onDimissed}
         />,
-        div,
-      ) as any;
+      );
 
-      panel.open();
+      expect(panel.current).toBeDefined();
+      panel.current!.open();
 
-      expect(openCalled).toEqual(true);
-      expect(openedCalled).toEqual(false);
+      expect(onOpen).toHaveBeenCalledTimes(1);
+      expect(onOpened).toHaveBeenCalledTimes(0);
 
       jest.runOnlyPendingTimers();
 
-      expect(openedCalled).toEqual(true);
-
-      expect(dismissCalled).toEqual(false);
-      expect(dismissedCalled).toEqual(false);
+      expect(onOpened).toHaveBeenCalledTimes(1);
 
-      panel.dismiss();
+      expect(onDismiss).toHaveBeenCalledTimes(0);
+      expect(onDimissed).toHaveBeenCalledTimes(0);
 
-      expect(dismissCalled).toEqual(true);
-      expect(dismissedCalled).toEqual(false);
+      panel.current!.dismiss();
 
       // Dismiss should only be called once per dismiss.
-      expect(dismissCount).toEqual(1);
+      expect(onDismiss).toHaveBeenCalledTimes(1);
+      expect(onDimissed).toHaveBeenCalledTimes(0);
 
       jest.runOnlyPendingTimers();
 
-      expect(dismissedCalled).toEqual(true);
+      expect(onDimissed).toHaveBeenCalledTimes(1);
     });
 
     it('fires the correct events on non-imperative scenarios', () => {
@@ -126,20 +100,12 @@ describe('Panel', () => {
       const onDismissed = jest.fn();
       jest.useFakeTimers();
 
-      const wrapper = mount(
-        <Panel
-          isOpen={false}
-          onOpen={onOpen}
-          onOpened={onOpened}
-          onDismiss={onDismiss}
-          onDismissed={onDismissed}
-          componentRef={panel}
-        />,
-      );
+      const props: IPanelProps = { onOpen, onOpened, onDismiss, onDismissed, componentRef: panel };
+      const { rerender } = render(<Panel isOpen={false} {...props} />);
 
       expect(onOpen).toHaveBeenCalledTimes(0);
 
-      wrapper.setProps({ isOpen: true });
+      rerender(<Panel isOpen {...props} />);
 
       expect(onOpen).toHaveBeenCalledTimes(1);
       expect(onOpened).toHaveBeenCalledTimes(0);
@@ -149,7 +115,7 @@ describe('Panel', () => {
       expect(onOpened).toHaveBeenCalledTimes(1);
       expect(onDismiss).toHaveBeenCalledTimes(0);
 
-      wrapper.setProps({ isOpen: false });
+      rerender(<Panel isOpen={false} {...props} />);
 
       expect(onDismissed).toHaveBeenCalledTimes(0);
 
@@ -160,15 +126,9 @@ describe('Panel', () => {
   });
 
   it('allows the consumer to pass through popup props', () => {
-    // Mock createPortal to capture its component hierarchy in snapshot output.
-    const originalCreatePortal = ReactDOM.createPortal;
-    ReactDOM.createPortal = jest.fn(element => {
-      return element;
-    });
-
-    const component = renderer.create(
+    render(
       <Panel
-        isOpen={true}
+        isOpen
         headerText="Test Panel"
         headerTextProps={{
           className: 'panel_class',
@@ -180,9 +140,9 @@ describe('Panel', () => {
       </Panel>,
     );
 
-    expect(component.toJSON()).toMatchSnapshot();
-
-    ReactDOM.createPortal = originalCreatePortal;
+    const popup = screen.getByRole('dialog');
+    expect(popup.getAttribute('aria-label')).toBe('I am an aria label');
+    expect(popup.getAttribute('aria-labelledby')).toBe('');
   });
 
   isConformant({
@@ -193,13 +153,4 @@ describe('Panel', () => {
     // Solution: Ensure ref is passed correctly to the root element.
     disabledTests: ['component-has-root-ref', 'component-handles-ref', 'component-handles-classname'],
   });
-
-  describe('onClose', () => {
-    beforeEach(() => {
-      div = document.createElement('div');
-    });
-    afterEach(() => {
-      ReactDOM.unmountComponentAtNode(div);
-    });
-  });
 });
diff --git a/packages/react/src/components/Panel/__snapshots__/Panel.test.tsx.snap b/packages/react/src/components/Panel/__snapshots__/Panel.test.tsx.snap
index 05c1d3ee39549..64397e71af5c4 100644
--- a/packages/react/src/components/Panel/__snapshots__/Panel.test.tsx.snap
+++ b/packages/react/src/components/Panel/__snapshots__/Panel.test.tsx.snap
@@ -1,812 +1,319 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Panel allows the consumer to pass through popup props 1`] = `
-<span
-  className="ms-layer"
+exports[`Panel renders Panel correctly 1`] = `
+<div
+  aria-labelledby="Panel0-headerText"
+  aria-modal="true"
+  class=""
+  role="dialog"
+  style="outline: none;"
 >
   <div
-    className=
-        ms-Fabric
-        ms-Layer-content
+    aria-hidden="false"
+    class=
+        ms-Panel
+        is-open
+        ms-Panel--hasCloseButton
         {
           -moz-osx-font-smoothing: grayscale;
           -webkit-font-smoothing: antialiased;
-          color: #323130;
+          bottom: 0px;
           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;
-          visibility: visible;
-        }
-        & button {
-          font-family: inherit;
-        }
-        & input {
-          font-family: inherit;
+          left: 0px;
+          pointer-events: none;
+          position: absolute;
+          right: 0px;
+          top: 0px;
         }
-        & textarea {
-          font-family: inherit;
-        }
-    onBlur={[Function]}
-    onChange={[Function]}
-    onClick={[Function]}
-    onContextMenu={[Function]}
-    onDoubleClick={[Function]}
-    onDrag={[Function]}
-    onDragEnd={[Function]}
-    onDragEnter={[Function]}
-    onDragExit={[Function]}
-    onDragLeave={[Function]}
-    onDragOver={[Function]}
-    onDragStart={[Function]}
-    onDrop={[Function]}
-    onFocus={[Function]}
-    onInput={[Function]}
-    onKeyDown={[Function]}
-    onKeyPress={[Function]}
-    onKeyUp={[Function]}
-    onMouseDown={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onMouseMove={[Function]}
-    onMouseOut={[Function]}
-    onMouseOver={[Function]}
-    onMouseUp={[Function]}
-    onSubmit={[Function]}
-    onTouchCancel={[Function]}
-    onTouchEnd={[Function]}
-    onTouchMove={[Function]}
-    onTouchStart={[Function]}
   >
     <div
-      aria-label="I am an aria label"
-      aria-labelledby=""
-      aria-modal="true"
-      className=""
-      onKeyDown={[Function]}
-      role="dialog"
-      style={
-        Object {
-          "outline": "none",
-          "overflowY": undefined,
-        }
-      }
+      class=
+          ms-Overlay
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            animation-duration: 0.167s;
+            animation-fill-mode: both;
+            animation-name: keyframes from{opacity:0;}to{opacity:1;};
+            animation-timing-function: cubic-bezier(.1,.25,.75,.9);
+            background-color: rgba(255,255,255,.4);
+            bottom: 0px;
+            cursor: pointer;
+            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;
+            left: 0px;
+            pointer-events: auto;
+            position: absolute;
+            right: 0px;
+            top: 0px;
+          }
+          @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
+            border: 1px solid WindowText;
+            opacity: 0;
+          }
+    />
+    <div
+      class=
+          ms-Panel-main
+          {
+            -webkit-overflow-scrolling: touch;
+            animation-duration: 0.367s;
+            animation-fill-mode: both;
+            animation-name: keyframes from{opacity:0;}to{opacity:1;} keyframes from{transform:translate3d(40px,0,0);pointer-events:none;}to{transform:translate3d(0,0,0);pointer-events:auto;};
+            animation-timing-function: cubic-bezier(.1,.9,.2,1);
+            background-color: #ffffff;
+            bottom: 0px;
+            box-shadow: 0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18);
+            display: flex;
+            flex-direction: column;
+            left: auto;
+            overflow-x: hidden;
+            overflow-y: auto;
+            pointer-events: auto;
+            position: absolute;
+            right: 0px;
+            top: 0px;
+            width: 100%;
+          }
+          @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
+            border-left: 3px solid #edebe9;
+            border-right: 3px solid #edebe9;
+          }
+          @media (min-width: 480px){& {
+            width: 340px;
+          }
     >
       <div
-        aria-hidden={false}
-        className=
-            ms-Panel
-            is-open
-            ms-Panel--hasCloseButton
+        aria-hidden="true"
+        data-is-focus-trap-zone-bumper="true"
+        data-is-visible="true"
+        style="pointer-events: none; position: fixed;"
+        tabindex="0"
+      />
+      <div
+        class=
+            ms-Panel-contentInner
             {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              bottom: 0px;
-              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;
-              left: 0px;
-              pointer-events: none;
-              position: absolute;
-              right: 0px;
-              top: 0px;
+              background: inherit;
+              display: flex;
+              flex-direction: column;
+              flex-grow: 1;
+              overflow-y: hidden;
             }
       >
         <div
-          className=
-              ms-Overlay
-              {
-                -moz-osx-font-smoothing: grayscale;
-                -webkit-font-smoothing: antialiased;
-                animation-duration: 0.167s;
-                animation-fill-mode: both;
-                animation-name: keyframes from{opacity:0;}to{opacity:1;};
-                animation-timing-function: cubic-bezier(.1,.25,.75,.9);
-                background-color: rgba(255,255,255,.4);
-                bottom: 0px;
-                cursor: pointer;
-                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;
-                left: 0px;
-                pointer-events: auto;
-                position: absolute;
-                right: 0px;
-                top: 0px;
-              }
-              @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
-                border: 1px solid WindowText;
-                opacity: 0;
-              }
-        />
-        <div
-          className=
-              ms-Panel-main
+          class=
+              ms-Panel-scrollableContent
               {
-                -webkit-overflow-scrolling: touch;
-                animation-duration: 0.367s;
-                animation-fill-mode: both;
-                animation-name: keyframes from{opacity:0;}to{opacity:1;} keyframes from{transform:translate3d(40px,0,0);pointer-events:none;}to{transform:translate3d(0,0,0);pointer-events:auto;};
-                animation-timing-function: cubic-bezier(.1,.9,.2,1);
-                background-color: #ffffff;
-                bottom: 0px;
-                box-shadow: 0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18);
-                display: flex;
-                flex-direction: column;
-                left: auto;
-                overflow-x: hidden;
+                background: inherit;
                 overflow-y: auto;
-                pointer-events: auto;
-                position: absolute;
-                right: 0px;
-                top: 0px;
-                width: 100%;
-              }
-              @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
-                border-left: 3px solid #edebe9;
-                border-right: 3px solid #edebe9;
               }
-              @media (min-width: 480px){& {
-                width: 340px;
-              }
-          onBlurCapture={[Function]}
-          onFocusCapture={[Function]}
-          style={Object {}}
+          data-is-scrollable="true"
         >
           <div
-            aria-hidden={true}
-            data-is-focus-trap-zone-bumper={true}
-            data-is-visible={true}
-            style={
-              Object {
-                "pointerEvents": "none",
-                "position": "fixed",
-              }
-            }
-            tabIndex={0}
-          />
-          <div
-            className=
-                ms-Panel-contentInner
+            class=
+                ms-Panel-commands
                 {
                   background: inherit;
-                  display: flex;
-                  flex-direction: column;
-                  flex-grow: 1;
-                  overflow-y: hidden;
+                  margin-top: 18px;
                 }
+                @media (min-height: 480px){& {
+                  position: sticky;
+                  top: 0px;
+                  z-index: 1;
+                }
+            data-is-visible="true"
           >
             <div
-              className=
-                  ms-Panel-scrollableContent
+              class=
+                  ms-Panel-navigation
                   {
-                    background: inherit;
-                    overflow-y: auto;
+                    display: flex;
+                    justify-content: flex-end;
                   }
-              data-is-scrollable={true}
             >
               <div
-                className=
-                    ms-Panel-commands
+                class=
+                    ms-Panel-header
                     {
-                      background: inherit;
-                      margin-top: 18px;
-                    }
-                    @media (min-height: 480px){& {
-                      position: sticky;
-                      top: 0px;
-                      z-index: 1;
+                      align-self: flex-start;
+                      flex-grow: 1;
+                      padding-left: 24px;
+                      padding-right: 24px;
                     }
-                data-is-visible={true}
               >
                 <div
-                  className=
-                      ms-Panel-navigation
+                  aria-level="3"
+                  class=
+                      ms-Panel-headerText
+                      panel_class
                       {
-                        display: flex;
-                        justify-content: flex-end;
+                        -moz-osx-font-smoothing: grayscale;
+                        -webkit-font-smoothing: antialiased;
+                        color: #323130;
+                        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                        font-size: 20px;
+                        font-weight: 600;
+                        hyphens: auto;
+                        line-height: 27px;
+                        overflow-wrap: break-word;
+                        word-break: break-word;
+                        word-wrap: break-word;
                       }
+                  id="Panel0-headerText"
+                  role="heading"
                 >
-                  <div
-                    className=
-                        ms-Panel-header
-                        {
-                          align-self: flex-start;
-                          flex-grow: 1;
-                          padding-left: 24px;
-                          padding-right: 24px;
-                        }
-                  >
-                    <div
-                      aria-level={3}
-                      className=
-                          ms-Panel-headerText
-                          panel_class
-                          {
-                            -moz-osx-font-smoothing: grayscale;
-                            -webkit-font-smoothing: antialiased;
-                            color: #323130;
-                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                            font-size: 20px;
-                            font-weight: 600;
-                            hyphens: auto;
-                            line-height: 27px;
-                            overflow-wrap: break-word;
-                            word-break: break-word;
-                            word-wrap: break-word;
-                          }
-                      id="Panel0-headerText"
-                      role="heading"
-                    >
-                      Test Panel
-                    </div>
-                  </div>
-                  <button
-                    className=
-                        ms-Button
-                        ms-Panel-closeButton
-                        ms-PanelAction-close
-                        ms-Button--icon
-                        {
-                          -moz-osx-font-smoothing: grayscale;
-                          -webkit-font-smoothing: antialiased;
-                          background-color: transparent;
-                          border-radius: 2px;
-                          border: none;
-                          box-sizing: border-box;
-                          color: #605e5c;
-                          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: 20px;
-                          font-weight: 400;
-                          height: 32px;
-                          margin-right: 14px;
-                          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;
-                          width: 32px;
-                        }
-                        &::-moz-focus-inner {
-                          border: 0;
-                        }
-                        .ms-Fabric--isFocusVisible &:focus:after {
-                          border: 1px solid transparent;
-                          bottom: 2px;
-                          content: "";
-                          left: 2px;
-                          outline: 1px solid #605e5c;
-                          position: absolute;
-                          right: 2px;
-                          top: 2px;
-                          z-index: 1;
-                        }
-                        @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                          bottom: -2px;
-                          left: -2px;
-                          outline-color: ButtonText;
-                          right: -2px;
-                          top: -2px;
-                        }
-                        &:active > * {
-                          left: 0px;
-                          position: relative;
-                          top: 0px;
-                        }
-                        &:hover {
-                          background-color: #f3f2f1;
-                          color: #323130;
-                        }
-                        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover {
-                          border-color: Highlight;
-                          color: Highlight;
-                        }
-                        &:active {
-                          background-color: #edebe9;
-                          color: #005a9e;
-                        }
-                    data-is-focusable={true}
-                    data-is-visible={true}
-                    onClick={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyPress={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseUp={[Function]}
-                    type="button"
-                  >
-                    <span
-                      className=
-                          ms-Button-flexContainer
-                          {
-                            align-items: center;
-                            display: flex;
-                            flex-wrap: nowrap;
-                            height: 100%;
-                            justify-content: center;
-                          }
-                      data-automationid="splitbuttonprimary"
-                    >
-                      <i
-                        aria-hidden={true}
-                        className=
-                            ms-Icon
-                            ms-Button-icon
-                            {
-                              display: inline-block;
-                            }
-                            {
-                              -moz-osx-font-smoothing: grayscale;
-                              -webkit-font-smoothing: antialiased;
-                              font-family: "FabricMDL2Icons";
-                              font-style: normal;
-                              font-weight: normal;
-                              speak: none;
-                            }
-                            {
-                              flex-shrink: 0;
-                              font-size: 16px;
-                              height: 16px;
-                              line-height: 16px;
-                              margin-bottom: 0;
-                              margin-left: 4px;
-                              margin-right: 4px;
-                              margin-top: 0;
-                              text-align: center;
-                            }
-                        data-icon-name="Cancel"
-                        style={
-                          Object {
-                            "fontFamily": "\\"FabricMDL2Icons\\"",
-                          }
-                        }
-                      >
-                        
-                      </i>
-                    </span>
-                  </button>
+                  Test Panel
                 </div>
               </div>
-              <div
-                className=
-                    ms-Panel-content
+              <button
+                class=
+                    ms-Button
+                    ms-Panel-closeButton
+                    ms-PanelAction-close
+                    ms-Button--icon
                     {
-                      padding-bottom: 20px;
-                      padding-left: 24px;
-                      padding-right: 24px;
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      background-color: transparent;
+                      border-radius: 2px;
+                      border: none;
+                      box-sizing: border-box;
+                      color: #605e5c;
+                      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: 20px;
+                      font-weight: 400;
+                      height: 32px;
+                      margin-right: 14px;
+                      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;
+                      width: 32px;
                     }
-              >
-                <span>
-                  Content goes here
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-hidden={true}
-            data-is-focus-trap-zone-bumper={true}
-            data-is-visible={true}
-            style={
-              Object {
-                "pointerEvents": "none",
-                "position": "fixed",
-              }
-            }
-            tabIndex={0}
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</span>
-`;
-
-exports[`Panel renders Panel correctly 1`] = `
-<span
-  className="ms-layer"
->
-  <div
-    className=
-        ms-Fabric
-        ms-Layer-content
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          color: #323130;
-          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;
-          visibility: visible;
-        }
-        & button {
-          font-family: inherit;
-        }
-        & input {
-          font-family: inherit;
-        }
-        & textarea {
-          font-family: inherit;
-        }
-    onBlur={[Function]}
-    onChange={[Function]}
-    onClick={[Function]}
-    onContextMenu={[Function]}
-    onDoubleClick={[Function]}
-    onDrag={[Function]}
-    onDragEnd={[Function]}
-    onDragEnter={[Function]}
-    onDragExit={[Function]}
-    onDragLeave={[Function]}
-    onDragOver={[Function]}
-    onDragStart={[Function]}
-    onDrop={[Function]}
-    onFocus={[Function]}
-    onInput={[Function]}
-    onKeyDown={[Function]}
-    onKeyPress={[Function]}
-    onKeyUp={[Function]}
-    onMouseDown={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onMouseMove={[Function]}
-    onMouseOut={[Function]}
-    onMouseOver={[Function]}
-    onMouseUp={[Function]}
-    onSubmit={[Function]}
-    onTouchCancel={[Function]}
-    onTouchEnd={[Function]}
-    onTouchMove={[Function]}
-    onTouchStart={[Function]}
-  >
-    <div
-      aria-labelledby="Panel0-headerText"
-      aria-modal="true"
-      className=""
-      onKeyDown={[Function]}
-      role="dialog"
-      style={
-        Object {
-          "outline": "none",
-          "overflowY": undefined,
-        }
-      }
-    >
-      <div
-        aria-hidden={false}
-        className=
-            ms-Panel
-            is-open
-            ms-Panel--hasCloseButton
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              bottom: 0px;
-              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;
-              left: 0px;
-              pointer-events: none;
-              position: absolute;
-              right: 0px;
-              top: 0px;
-            }
-      >
-        <div
-          className=
-              ms-Overlay
-              {
-                -moz-osx-font-smoothing: grayscale;
-                -webkit-font-smoothing: antialiased;
-                animation-duration: 0.167s;
-                animation-fill-mode: both;
-                animation-name: keyframes from{opacity:0;}to{opacity:1;};
-                animation-timing-function: cubic-bezier(.1,.25,.75,.9);
-                background-color: rgba(255,255,255,.4);
-                bottom: 0px;
-                cursor: pointer;
-                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;
-                left: 0px;
-                pointer-events: auto;
-                position: absolute;
-                right: 0px;
-                top: 0px;
-              }
-              @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
-                border: 1px solid WindowText;
-                opacity: 0;
-              }
-        />
-        <div
-          className=
-              ms-Panel-main
-              {
-                -webkit-overflow-scrolling: touch;
-                animation-duration: 0.367s;
-                animation-fill-mode: both;
-                animation-name: keyframes from{opacity:0;}to{opacity:1;} keyframes from{transform:translate3d(40px,0,0);pointer-events:none;}to{transform:translate3d(0,0,0);pointer-events:auto;};
-                animation-timing-function: cubic-bezier(.1,.9,.2,1);
-                background-color: #ffffff;
-                bottom: 0px;
-                box-shadow: 0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18);
-                display: flex;
-                flex-direction: column;
-                left: auto;
-                overflow-x: hidden;
-                overflow-y: auto;
-                pointer-events: auto;
-                position: absolute;
-                right: 0px;
-                top: 0px;
-                width: 100%;
-              }
-              @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
-                border-left: 3px solid #edebe9;
-                border-right: 3px solid #edebe9;
-              }
-              @media (min-width: 480px){& {
-                width: 340px;
-              }
-          onBlurCapture={[Function]}
-          onFocusCapture={[Function]}
-          style={Object {}}
-        >
-          <div
-            aria-hidden={true}
-            data-is-focus-trap-zone-bumper={true}
-            data-is-visible={true}
-            style={
-              Object {
-                "pointerEvents": "none",
-                "position": "fixed",
-              }
-            }
-            tabIndex={0}
-          />
-          <div
-            className=
-                ms-Panel-contentInner
-                {
-                  background: inherit;
-                  display: flex;
-                  flex-direction: column;
-                  flex-grow: 1;
-                  overflow-y: hidden;
-                }
-          >
-            <div
-              className=
-                  ms-Panel-scrollableContent
-                  {
-                    background: inherit;
-                    overflow-y: auto;
-                  }
-              data-is-scrollable={true}
-            >
-              <div
-                className=
-                    ms-Panel-commands
-                    {
-                      background: inherit;
-                      margin-top: 18px;
+                    &::-moz-focus-inner {
+                      border: 0;
                     }
-                    @media (min-height: 480px){& {
-                      position: sticky;
-                      top: 0px;
+                    .ms-Fabric--isFocusVisible &:focus:after {
+                      border: 1px solid transparent;
+                      bottom: 2px;
+                      content: "";
+                      left: 2px;
+                      outline: 1px solid #605e5c;
+                      position: absolute;
+                      right: 2px;
+                      top: 2px;
                       z-index: 1;
                     }
-                data-is-visible={true}
+                    @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                      bottom: -2px;
+                      left: -2px;
+                      outline-color: ButtonText;
+                      right: -2px;
+                      top: -2px;
+                    }
+                    &:active > * {
+                      left: 0px;
+                      position: relative;
+                      top: 0px;
+                    }
+                    &:hover {
+                      background-color: #f3f2f1;
+                      color: #323130;
+                    }
+                    @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover {
+                      border-color: Highlight;
+                      color: Highlight;
+                    }
+                    &:active {
+                      background-color: #edebe9;
+                      color: #005a9e;
+                    }
+                data-is-focusable="true"
+                data-is-visible="true"
+                type="button"
               >
-                <div
-                  className=
-                      ms-Panel-navigation
+                <span
+                  class=
+                      ms-Button-flexContainer
                       {
+                        align-items: center;
                         display: flex;
-                        justify-content: flex-end;
+                        flex-wrap: nowrap;
+                        height: 100%;
+                        justify-content: center;
                       }
+                  data-automationid="splitbuttonprimary"
                 >
-                  <div
-                    className=
-                        ms-Panel-header
+                  <i
+                    aria-hidden="true"
+                    class=
+                        ms-Icon
+                        ms-Button-icon
                         {
-                          align-self: flex-start;
-                          flex-grow: 1;
-                          padding-left: 24px;
-                          padding-right: 24px;
+                          display: inline-block;
                         }
-                  >
-                    <div
-                      aria-level={3}
-                      className=
-                          ms-Panel-headerText
-                          panel_class
-                          {
-                            -moz-osx-font-smoothing: grayscale;
-                            -webkit-font-smoothing: antialiased;
-                            color: #323130;
-                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                            font-size: 20px;
-                            font-weight: 600;
-                            hyphens: auto;
-                            line-height: 27px;
-                            overflow-wrap: break-word;
-                            word-break: break-word;
-                            word-wrap: break-word;
-                          }
-                      id="Panel0-headerText"
-                      role="heading"
-                    >
-                      Test Panel
-                    </div>
-                  </div>
-                  <button
-                    className=
-                        ms-Button
-                        ms-Panel-closeButton
-                        ms-PanelAction-close
-                        ms-Button--icon
                         {
                           -moz-osx-font-smoothing: grayscale;
                           -webkit-font-smoothing: antialiased;
-                          background-color: transparent;
-                          border-radius: 2px;
-                          border: none;
-                          box-sizing: border-box;
-                          color: #605e5c;
-                          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: 20px;
-                          font-weight: 400;
-                          height: 32px;
-                          margin-right: 14px;
-                          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;
-                          width: 32px;
-                        }
-                        &::-moz-focus-inner {
-                          border: 0;
-                        }
-                        .ms-Fabric--isFocusVisible &:focus:after {
-                          border: 1px solid transparent;
-                          bottom: 2px;
-                          content: "";
-                          left: 2px;
-                          outline: 1px solid #605e5c;
-                          position: absolute;
-                          right: 2px;
-                          top: 2px;
-                          z-index: 1;
-                        }
-                        @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                          bottom: -2px;
-                          left: -2px;
-                          outline-color: ButtonText;
-                          right: -2px;
-                          top: -2px;
-                        }
-                        &:active > * {
-                          left: 0px;
-                          position: relative;
-                          top: 0px;
+                          font-family: "FabricMDL2Icons";
+                          font-style: normal;
+                          font-weight: normal;
+                          speak: none;
                         }
-                        &:hover {
-                          background-color: #f3f2f1;
-                          color: #323130;
-                        }
-                        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover {
-                          border-color: Highlight;
-                          color: Highlight;
-                        }
-                        &:active {
-                          background-color: #edebe9;
-                          color: #005a9e;
+                        {
+                          flex-shrink: 0;
+                          font-size: 16px;
+                          height: 16px;
+                          line-height: 16px;
+                          margin-bottom: 0;
+                          margin-left: 4px;
+                          margin-right: 4px;
+                          margin-top: 0;
+                          text-align: center;
                         }
-                    data-is-focusable={true}
-                    data-is-visible={true}
-                    onClick={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyPress={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseUp={[Function]}
-                    type="button"
+                    data-icon-name="Cancel"
+                    style="font-family: \\"FabricMDL2Icons\\";"
                   >
-                    <span
-                      className=
-                          ms-Button-flexContainer
-                          {
-                            align-items: center;
-                            display: flex;
-                            flex-wrap: nowrap;
-                            height: 100%;
-                            justify-content: center;
-                          }
-                      data-automationid="splitbuttonprimary"
-                    >
-                      <i
-                        aria-hidden={true}
-                        className=
-                            ms-Icon
-                            ms-Button-icon
-                            {
-                              display: inline-block;
-                            }
-                            {
-                              -moz-osx-font-smoothing: grayscale;
-                              -webkit-font-smoothing: antialiased;
-                              font-family: "FabricMDL2Icons";
-                              font-style: normal;
-                              font-weight: normal;
-                              speak: none;
-                            }
-                            {
-                              flex-shrink: 0;
-                              font-size: 16px;
-                              height: 16px;
-                              line-height: 16px;
-                              margin-bottom: 0;
-                              margin-left: 4px;
-                              margin-right: 4px;
-                              margin-top: 0;
-                              text-align: center;
-                            }
-                        data-icon-name="Cancel"
-                        style={
-                          Object {
-                            "fontFamily": "\\"FabricMDL2Icons\\"",
-                          }
-                        }
-                      >
-                        
-                      </i>
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <div
-                className=
-                    ms-Panel-content
-                    {
-                      padding-bottom: 20px;
-                      padding-left: 24px;
-                      padding-right: 24px;
-                    }
-              >
-                <span>
-                  Content goes here
+                    
+                  </i>
                 </span>
-              </div>
+              </button>
             </div>
           </div>
           <div
-            aria-hidden={true}
-            data-is-focus-trap-zone-bumper={true}
-            data-is-visible={true}
-            style={
-              Object {
-                "pointerEvents": "none",
-                "position": "fixed",
-              }
-            }
-            tabIndex={0}
-          />
+            class=
+                ms-Panel-content
+                {
+                  padding-bottom: 20px;
+                  padding-left: 24px;
+                  padding-right: 24px;
+                }
+          >
+            <span>
+              Content goes here
+            </span>
+          </div>
         </div>
       </div>
+      <div
+        aria-hidden="true"
+        data-is-focus-trap-zone-bumper="true"
+        data-is-visible="true"
+        style="pointer-events: none; position: fixed;"
+        tabindex="0"
+      />
     </div>
   </div>
-</span>
+</div>
 `;