[test] Make all tests runnable with React 17

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

@@ -332,15 +332,15 @@ describe('<Modal />', () => {
 
     it('does not include the children in the a11y tree', () => {
       const modalRef = React.createRef();
-      const wrapper = mount(
+      const { setProps } = render(
         <Modal keepMounted open={false} ref={modalRef}>
           <div>ModalContent</div>
         </Modal>,
       );
       const modalNode = modalRef.current;
       expect(modalNode).toBeAriaHidden();
 
-      wrapper.setProps({ open: true });
+      setProps({ open: true });
       expect(modalNode).not.toBeAriaHidden();
     });
 

scripts/react-next.diff

@@ -64,19 +64,6 @@ index 197b2f77a3..f1ead08079 100644
      });
    });
  });
-diff --git a/packages/material-ui-styles/src/makeStyles/makeStyles.test.js b/packages/material-ui-styles/src/makeStyles/makeStyles.test.js
-index 3805828fee..be114e409d 100644
---- a/packages/material-ui-styles/src/makeStyles/makeStyles.test.js
-+++ b/packages/material-ui-styles/src/makeStyles/makeStyles.test.js
-@@ -213,7 +213,7 @@ describe('makeStyles', () => {
-       expect(sheetsRegistry.registry[0].classes).to.deep.equal({ root: 'makeStyles-root-2' });
-
-       wrapper.unmount();
--      expect(sheetsRegistry.registry.length).to.equal(0);
-+      expect(sheetsRegistry.registry.length).to.equal(1);
-     });
-
-     it('should work when depending on a theme', () => {
 diff --git a/packages/material-ui-styles/src/useThemeVariants/useThemeVariants.test.js b/packages/material-ui-styles/src/useThemeVariants/useThemeVariants.test.js
 index 9c99a49a1f..5d9db342e9 100644
 --- a/packages/material-ui-styles/src/useThemeVariants/useThemeVariants.test.js
@@ -119,42 +106,6 @@ index d78203151f..72ac37571b 100644
      });
    });
 
-diff --git a/packages/material-ui/src/Modal/Modal.test.js b/packages/material-ui/src/Modal/Modal.test.js
-index 2a41490811..137b02a5fc 100644
---- a/packages/material-ui/src/Modal/Modal.test.js
-+++ b/packages/material-ui/src/Modal/Modal.test.js
-@@ -22,7 +22,12 @@ describe('<Modal />', () => {
-   const render = createClientRender();
-   let savedBodyStyle;
-
--  before(() => {
-+  before(function beforeEachHook() {
-+    if (/jsdom/.test(window.navigator.userAgent)) {
-+      // otherwise test:unit never finishes
-+      this.skip();
-+    }
-+
-     savedBodyStyle = document.body.style;
-   });
-
-diff --git a/packages/material-ui/src/Popover/Popover.test.js b/packages/material-ui/src/Popover/Popover.test.js
-index 08a1ed4b80..a28903c454 100644
---- a/packages/material-ui/src/Popover/Popover.test.js
-+++ b/packages/material-ui/src/Popover/Popover.test.js
-@@ -55,7 +55,12 @@ describe('<Popover />', () => {
-     anchorEl: () => document.createElement('svg'),
-   };
-
--  before(() => {
-+  before(function beforeEachHook() {
-+    if (/jsdom/.test(window.navigator.userAgent)) {
-+      // otherwise test:unit never finishes
-+      this.skip();
-+    }
-+
-     classes = getClasses(
-       <Popover {...defaultProps}>
-         <div />
 diff --git a/packages/material-ui/src/Tabs/Tabs.test.js b/packages/material-ui/src/Tabs/Tabs.test.js
 index 9c004c515b..648559f279 100644
 --- a/packages/material-ui/src/Tabs/Tabs.test.js

test/utils/createClientRender.js

@@ -147,10 +147,12 @@ export function createClientRender(globalOptions = {}) {
       error.stack = createClientRenderStack;
       throw error;
     }
-    // If this issues an act() warning you probably didn't
-    // wait for an async event in your test (or didn't wrap it in act() at all).
-    // please wait for every update in your test and make appropriate assertions
-    await cleanup();
+
+    // act to flush effect cleanup functions
+    // state updates during this phase are safe
+    await act(async () => {
+      await cleanup();
+    });
   });
 
   return function configuredClientRender(element, options = {}) {

test/utils/createMount.js

@@ -1,6 +1,7 @@
 /* eslint-env mocha */
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import * as ReactDOMTestUtils from 'react-dom/test-utils';
 import * as PropTypes from 'prop-types';
 import { mount as enzymeMount } from 'enzyme';
 
@@ -63,7 +64,9 @@ export default function createMount(options = {}) {
   });
 
   afterEach(() => {
-    ReactDOM.unmountComponentAtNode(container);
+    ReactDOMTestUtils.act(() => {
+      ReactDOM.unmountComponentAtNode(container);
+    });
     container.parentElement.removeChild(container);
     container = null;
   });
@@ -76,15 +79,29 @@ export default function createMount(options = {}) {
         `Tried to mount without setup. Mounting inside before() is not allowed. Try mounting in beforeEach or better: in each test`,
       );
     }
-    ReactDOM.unmountComponentAtNode(container);
+    ReactDOMTestUtils.act(() => {
+      ReactDOM.unmountComponentAtNode(container);
+    });
 
     // some tests require that no other components are in the tree
     // e.g. when doing .instance(), .state() etc.
-    return mount(strict == null ? node : <Mode __element={node} __strict={Boolean(strict)} />, {
-      attachTo: container,
-      ...globalEnzymeOptions,
-      ...localEnzymeOptions,
-    });
+    const wrapper = mount(
+      strict == null ? node : <Mode __element={node} __strict={Boolean(strict)} />,
+      {
+        attachTo: container,
+        ...globalEnzymeOptions,
+        ...localEnzymeOptions,
+      },
+    );
+    const originalUnmount = wrapper.unmount;
+    wrapper.unmount = () => {
+      // flush effect cleanup functions
+      ReactDOMTestUtils.act(() => {
+        originalUnmount.call(wrapper);
+      });
+    };
+
+    return wrapper;
   };
 
   return mountWithContext;