[test] Fix tests failing on subsequent runs in watchmode

packages/material-ui-lab/src/ToggleButton/ToggleButton.test.js

@@ -2,20 +2,19 @@ import React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { createClientRender } from 'test/utils/createClientRender';
-import { createRender, createMount, getClasses } from '@material-ui/core/test-utils';
+import createServerRender from 'test/utils/createServerRender';
+import { createMount, getClasses } from '@material-ui/core/test-utils';
 import describeConformance from '@material-ui/core/test-utils/describeConformance';
 import ButtonBase from '@material-ui/core/ButtonBase';
 import ToggleButton from './ToggleButton';
 
 describe('<ToggleButton />', () => {
   let mount;
-  let serverRender;
   let classes;
   const render = createClientRender({ strict: true });
 
   before(() => {
     mount = createMount({ strict: true });
-    serverRender = createRender();
     classes = getClasses(<ToggleButton value="classes">Hello World</ToggleButton>);
   });
 
@@ -122,6 +121,8 @@ describe('<ToggleButton />', () => {
       return;
     }
 
+    const serverRender = createServerRender({ expectUseLayoutEffectWarning: true });
+
     it('should server-side render', () => {
       const markup = serverRender(<ToggleButton value="hello">Hello World</ToggleButton>);
       expect(markup.text()).to.equal('Hello World');

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

@@ -1,8 +1,9 @@
 import React from 'react';
-import { assert, expect } from 'chai';
-import { createMount, createRender, getClasses } from '@material-ui/core/test-utils';
+import { expect } from 'chai';
+import { createMount, getClasses } from '@material-ui/core/test-utils';
 import describeConformance from '../test-utils/describeConformance';
 import { act, createClientRender, fireEvent } from 'test/utils/createClientRender';
+import createServerRender from 'test/utils/createServerRender';
 import Button from './Button';
 import ButtonBase from '../ButtonBase';
 
@@ -344,19 +345,16 @@ describe('<Button />', () => {
   });
 
   describe('server-side', () => {
-    let serverRender;
     // Only run the test on node.
     if (!/jsdom/.test(window.navigator.userAgent)) {
       return;
     }
 
-    before(() => {
-      serverRender = createRender();
-    });
+    const serverRender = createServerRender({ expectUseLayoutEffectWarning: true });
 
     it('should server-side render', () => {
       const markup = serverRender(<Button>Hello World</Button>);
-      assert.strictEqual(markup.text(), 'Hello World');
+      expect(markup.text()).to.equal('Hello World');
     });
   });
 });

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

@@ -1,8 +1,9 @@
 import React from 'react';
 import { expect } from 'chai';
-import { createMount, createRender, getClasses } from '../test-utils';
+import { createMount, getClasses } from '../test-utils';
 import describeConformance from '../test-utils/describeConformance';
 import { createClientRender } from 'test/utils/createClientRender';
+import createServerRender from 'test/utils/createServerRender';
 import Fab from './Fab';
 import ButtonBase from '../ButtonBase';
 import Icon from '../Icon';
@@ -126,11 +127,7 @@ describe('<Fab />', () => {
     if (!/jsdom/.test(window.navigator.userAgent)) {
       return;
     }
-
-    let serverRender;
-    before(() => {
-      serverRender = createRender();
-    });
+    const serverRender = createServerRender({ expectUseLayoutEffectWarning: true });
 
     it('should server-side render', () => {
       const markup = serverRender(<Fab>Fab</Fab>);

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

@@ -3,8 +3,9 @@ import { expect, assert } from 'chai';
 import { spy, useFakeTimers } from 'sinon';
 import * as PropTypes from 'prop-types';
 import consoleErrorMock from 'test/utils/consoleErrorMock';
-import { createMount, createRender, getClasses } from '@material-ui/core/test-utils';
+import { createMount, getClasses } from '@material-ui/core/test-utils';
 import { createClientRender, fireEvent } from 'test/utils/createClientRender';
+import createServerRender from 'test/utils/createServerRender';
 import describeConformance from '../test-utils/describeConformance';
 import Tab from '../Tab';
 import Tabs from './Tabs';
@@ -36,12 +37,10 @@ describe('<Tabs />', () => {
   let mount;
   let classes;
   const render = createClientRender({ strict: true });
-  let serverRender;
 
   before(() => {
     classes = getClasses(<Tabs value={0} />);
     mount = createMount({ strict: true });
-    serverRender = createRender();
   });
 
   describeConformance(<Tabs value={0} />, () => ({
@@ -161,17 +160,6 @@ describe('<Tabs />', () => {
         expect(container.querySelector(`.${classes.indicator}`).style.width).to.equal('0px');
       });
 
-      it('should let the selected <Tab /> render the indicator server-side', () => {
-        const markup = serverRender(
-          <Tabs value={1}>
-            <Tab />
-            <Tab />
-          </Tabs>,
-        );
-        const indicator = markup.find(`button > .${classes.indicator}`);
-        expect(indicator).to.have.lengthOf(1);
-      });
-
       it('should render the indicator', () => {
         const { container, getAllByRole } = render(
           <Tabs value={1}>
@@ -648,4 +636,19 @@ describe('<Tabs />', () => {
       expect(style.height).to.equal('50px');
     });
   });
+
+  describe('server-side render', () => {
+    const serverRender = createServerRender({ expectUseLayoutEffectWarning: true });
+
+    it('should let the selected <Tab /> render the indicator server-side', () => {
+      const markup = serverRender(
+        <Tabs value={1}>
+          <Tab />
+          <Tab />
+        </Tabs>,
+      );
+      const indicator = markup.find(`button > .${classes.indicator}`);
+      expect(indicator).to.have.lengthOf(1);
+    });
+  });
 });

packages/material-ui/src/test-utils/createRender.js

@@ -2,7 +2,10 @@ import { render as enzymeRender } from 'enzyme';
 import React from 'react';
 import { RenderContext } from './RenderMode';
 
-// Generate a render to string function.
+/**
+ * Generate a render to string function.
+ * @deprecated
+ */
 export default function createRender(options1 = {}) {
   const { render = enzymeRender, ...other1 } = options1;
 

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

@@ -6,7 +6,7 @@ import { act, createClientRender } from 'test/utils/createClientRender';
 import { createRender } from '@material-ui/core/test-utils';
 import mediaQuery from 'css-mediaquery';
 import { expect } from 'chai';
-import { spy } from 'sinon';
+import { spy, stub } from 'sinon';
 import useMediaQuery, { testReset } from './useMediaQuery';
 
 function createMatchMedia(width, ref) {
@@ -69,7 +69,21 @@ describe('useMediaQuery', () => {
 
     beforeEach(() => {
       matchMediaInstances = [];
-      window.matchMedia = createMatchMedia(1200, matchMediaInstances);
+      const fakeMatchMedia = createMatchMedia(1200, matchMediaInstances);
+      // can't stub non-existent properties with sinon
+      // jsdom does not implement window.matchMedia
+      if (window.matchMedia === undefined) {
+        window.matchMedia = fakeMatchMedia;
+        window.matchMedia.restore = () => {
+          delete window.matchMedia;
+        };
+      } else {
+        stub(window, 'matchMedia').callsFake(fakeMatchMedia);
+      }
+    });
+
+    afterEach(() => {
+      window.matchMedia.restore();
     });
 
     describe('option: defaultMatches', () => {

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { assert } from 'chai';
+import { stub } from 'sinon';
 import { createMount, createShallow } from '@material-ui/core/test-utils';
 import mediaQuery from 'css-mediaquery';
 import withWidth, { isWidthDown, isWidthUp } from './withWidth';
@@ -48,7 +49,21 @@ describe('withWidth', () => {
   beforeEach(() => {
     matchMediaInstances = [];
     testReset();
-    window.matchMedia = createMatchMedia(1200, matchMediaInstances);
+    const fakeMatchMedia = createMatchMedia(1200, matchMediaInstances);
+    // can't stub non-existent properties with sinon
+    // jsdom does not implement window.matchMedia
+    if (window.matchMedia === undefined) {
+      window.matchMedia = fakeMatchMedia;
+      window.matchMedia.restore = () => {
+        delete window.matchMedia;
+      };
+    } else {
+      stub(window, 'matchMedia').callsFake(fakeMatchMedia);
+    }
+  });
+
+  afterEach(() => {
+    window.matchMedia.restore();
   });
 
   after(() => {

packages/material-ui/test/integration/Select.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { expect } from 'chai';
-import { createClientRender, fireEvent, wait } from 'test/utils/createClientRender';
+import { useFakeTimers } from 'sinon';
+import { createClientRender, fireEvent } from 'test/utils/createClientRender';
 import MenuItem from '@material-ui/core/MenuItem';
 import Select from '@material-ui/core/Select';
 import Dialog from '@material-ui/core/Dialog';
@@ -39,40 +40,60 @@ describe('<Select> integration', () => {
       );
     }
 
-    it('should focus the selected item', async () => {
+    /**
+     * @type {ReturnType<typeof useFakeTimers>}
+     */
+    let clock;
+    beforeEach(() => {
+      clock = useFakeTimers();
+    });
+
+    afterEach(() => {
+      clock.restore();
+    });
+
+    it('should focus the selected item', () => {
       const { getByTestId, getAllByRole, getByRole, queryByRole } = render(<SelectAndDialog />);
 
+      const trigger = getByRole('button');
       // Let's open the select component
       // in the browser user click also focuses
-      getByRole('button').focus();
-      getByRole('button').click();
+      trigger.focus();
+      trigger.click();
 
-      expect(getAllByRole('option')[1]).to.be.focused;
+      const options = getAllByRole('option');
+      expect(options[1]).to.be.focused;
 
       // Now, let's close the select component
       getByTestId('select-backdrop').click();
+      clock.tick(0);
 
-      await wait(() => expect(queryByRole('listbox')).to.be.null);
-      expect(getByRole('button')).to.focused;
+      expect(queryByRole('listbox')).to.be.null;
+      expect(trigger).to.focused;
     });
 
-    it('should be able to change the selected item', async () => {
+    it('should be able to change the selected item', () => {
       const { getAllByRole, getByRole, queryByRole } = render(<SelectAndDialog />);
-      expect(getByRole('button')).to.have.text('Ten');
 
+      const trigger = getByRole('button');
+      // basically this is a combined query getByRole('button', { name: 'Ten' })
+      // but we arent' there yet
+      expect(trigger).to.have.text('Ten');
       // Let's open the select component
       // in the browser user click also focuses
-      getByRole('button').focus();
-      getByRole('button').click();
+      trigger.focus();
+      trigger.click();
 
-      expect(getAllByRole('option')[1]).to.be.focused;
+      const options = getAllByRole('option');
+      expect(options[1]).to.be.focused;
 
       // Now, let's close the select component
-      getAllByRole('option')[2].click();
+      options[2].click();
+      clock.tick(0);
 
-      await wait(() => expect(queryByRole('listbox')).to.be.null);
-      expect(getByRole('button')).to.focused;
-      expect(getByRole('button')).to.have.text('Twenty');
+      expect(queryByRole('listbox')).to.be.null;
+      expect(trigger).to.focused;
+      expect(trigger).to.have.text('Twenty');
     });
   });
 

test/utils/createServerRender.js

@@ -0,0 +1,35 @@
+/* eslint-env mocha */
+import { render as enzymeRender } from 'enzyme';
+import { stub } from 'sinon';
+
+/**
+ *
+ * @param {object} [options]
+ * @param {boolean} [options.expectUseLayoutEffectWarning]
+ */
+export default function createServerRender(options = {}) {
+  const { expectUseLayoutEffectWarning } = options;
+
+  beforeEach(() => {
+    stub(console, 'error').callsFake((message, ...args) => {
+      const isUseLayoutEffectWarning = /Warning: useLayoutEffect does nothing on the server/.test(
+        message,
+      );
+
+      if (!expectUseLayoutEffectWarning || !isUseLayoutEffectWarning) {
+        // callThrough
+        // eslint-disable-next-line no-console
+        console.info(message, ...args);
+        throw new Error(message, ...args);
+      }
+    });
+  });
+
+  afterEach(() => {
+    console.error.restore();
+  });
+
+  return function render(node) {
+    return enzymeRender(node);
+  };
+}

test/utils/init.js

@@ -1,27 +1,8 @@
-import React from 'react';
 import enzyme from 'enzyme/build/index';
 import Adapter from 'enzyme-adapter-react-16';
 import consoleError from './consoleError';
-import { useIsSsr } from '@material-ui/core/test-utils/RenderMode';
 import './initMatchers';
 
 consoleError();
 
-const useActualLayoutEffect = React.useLayoutEffect;
-
-/* eslint-disable react-hooks/rules-of-hooks */
-/**
- * during tests we are in a jsdom environment but will also call ReactDOM.renderToString
- * which triggers useLayoutEffect server warnings. On an actual server there's
- * no jsdom
- */
-// eslint-disable-next-line camelcase
-React.useLayoutEffect = function unstable_useIsomorphicLayoutEffect(fn, deps) {
-  const isSsr = useIsSsr();
-  // RulesOfHooks violation but this the context needs to be invariant anyway
-  const useEffect = isSsr ? React.useEffect : useActualLayoutEffect;
-  return useEffect(fn, deps);
-};
-/* eslint-enable react-hooks/rules-of-hooks */
-
 enzyme.configure({ adapter: new Adapter() });