Modify test to check for shadowRoot behaviour and functionality befor…

…e simulating it

packages/material-ui/src/ButtonBase/ButtonBase.test.js

@@ -268,29 +268,44 @@ describe('<ButtonBase />', () => {
     let instance;
     let button;
     let clock;
+    let rootElement;
 
     beforeEach(() => {
       clock = useFakeTimers();
-      const rootElement = document.createElement('div');
+      rootElement = document.createElement('div');
       rootElement.tabIndex = 0;
-      rootElement.attachShadow({ mode: 'open' });
+
+      let renderTarget = rootElement;
+
+      if (rootElement.attachShadow) {
+        rootElement.attachShadow({ mode: 'open' });
+        renderTarget = rootElement.shadowRoot;
+      }
+
+      document.body.appendChild(rootElement);
       wrapper = mount(
         <ButtonBaseNaked theme={{}} classes={{}} id="test-button">
           Hello
         </ButtonBaseNaked>,
+        {
+          attachTo: renderTarget,
+        },
       );
       instance = wrapper.instance();
-      button = document.getElementById('test-button');
+      button = renderTarget.querySelector('#test-button');
       if (!button) {
         throw new Error('missing button');
       }
 
-      wrapper.simulate('focus');
-      rootElement.focus();
+      button.focus();
 
-      // Mock activeElement value in shadow root due to lack of support in [email protected]
-      // https://github.com/jsdom/jsdom/issues/2343
-      rootElement.shadowRoot.activeElement = button;
+      if (document.activeElement !== rootElement) {
+        // Mock activeElement value and simulate host-retargeting in shadow root for
+        // browsers without shadowRoot or ShadowRoot.activeElement support
+        renderTarget.activeElement = button;
+        rootElement.focus();
+        wrapper.simulate('focus');
+      }
 
       const event = new window.Event('keyup');
       event.which = keycode('tab');
@@ -299,6 +314,7 @@ describe('<ButtonBase />', () => {
 
     afterEach(() => {
       clock.restore();
+      document.body.removeChild(rootElement);
     });
 
     it('should set focus state for shadowRoot children', () => {