[test] Restore clock between each test

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

@@ -11,25 +11,25 @@ import SpeedDialAction from './SpeedDialAction';
 import describeConformance from '@material-ui/core/test-utils/describeConformance';
 
 describe('<SpeedDialAction />', () => {
+  let clock;
+  beforeEach(() => {
+    clock = useFakeTimers();
+  });
+
+  afterEach(() => {
+    clock.restore();
+  });
+
   // StrictModeViolation: uses Tooltip
   const mount = createMount({ strict: false });
   const render = createClientRender({ strict: false });
   let classes;
   const fabClasses = getClasses(<Fab>Fab</Fab>);
-  let clock;
 
   before(() => {
     classes = getClasses(<SpeedDialAction icon={<Icon>add</Icon>} tooltipTitle="placeholder" />);
   });
 
-  beforeEach(() => {
-    clock = useFakeTimers();
-  });
-
-  afterEach(() => {
-    clock.restore();
-  });
-
   describeConformance(
     <SpeedDialAction icon={<Icon>add</Icon>} tooltipTitle="placeholder" />,
     () => ({

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

@@ -157,11 +157,11 @@ describe('<TouchRipple />', () => {
      */
     let clock;
 
-    before(() => {
+    beforeEach(() => {
       clock = useFakeTimers();
     });
 
-    after(() => {
+    afterEach(() => {
       clock.restore();
     });
 

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

@@ -143,11 +143,11 @@ describe('<Collapse />', () => {
   describe('prop: timeout', () => {
     let clock;
 
-    before(() => {
+    beforeEach(() => {
       clock = useFakeTimers();
     });
 
-    after(() => {
+    afterEach(() => {
       clock.restore();
     });
 

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

@@ -34,6 +34,14 @@ function clickBackdrop(container) {
 
 describe('<Dialog />', () => {
   let clock;
+  beforeEach(() => {
+    clock = useFakeTimers();
+  });
+
+  afterEach(() => {
+    clock.restore();
+  });
+
   // StrictModeViolation: uses Fade
   const mount = createMount({ strict: false });
   let classes;
@@ -43,14 +51,6 @@ describe('<Dialog />', () => {
     classes = getClasses(<Dialog>foo</Dialog>);
   });
 
-  beforeEach(() => {
-    clock = useFakeTimers();
-  });
-
-  afterEach(() => {
-    clock.restore();
-  });
-
   describeConformance(<Dialog open>foo</Dialog>, () => ({
     classes,
     inheritComponent: Modal,

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

@@ -201,17 +201,17 @@ describe('<Popper />', () => {
 
   describe('prop: transition', () => {
     let clock;
-    const looseRender = createClientRender({ strict: false });
-
-    before(() => {
+    beforeEach(() => {
       clock = useFakeTimers();
       // StrictModeViolation: uses Grow
     });
 
-    after(() => {
+    afterEach(() => {
       clock.restore();
     });
 
+    const looseRender = createClientRender({ strict: false });
+
     it('should work', () => {
       const { queryByRole, getByRole, setProps } = looseRender(
         <Popper {...defaultProps} transition>

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

@@ -617,11 +617,11 @@ describe('<Select />', () => {
   describe('prop: open (controlled)', () => {
     let clock;
 
-    before(() => {
+    beforeEach(() => {
       clock = useFakeTimers();
     });
 
-    after(() => {
+    afterEach(() => {
       clock.restore();
     });
 

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

@@ -45,11 +45,11 @@ describe('<Snackbar />', () => {
   describe('Consecutive messages', () => {
     let clock;
 
-    before(() => {
+    beforeEach(() => {
       clock = useFakeTimers();
     });
 
-    after(() => {
+    afterEach(() => {
       clock.restore();
     });
 
@@ -100,11 +100,11 @@ describe('<Snackbar />', () => {
   describe('prop: autoHideDuration', () => {
     let clock;
 
-    before(() => {
+    beforeEach(() => {
       clock = useFakeTimers();
     });
 
-    after(() => {
+    afterEach(() => {
       clock.restore();
     });
 
@@ -242,11 +242,11 @@ describe('<Snackbar />', () => {
   describe('prop: resumeHideDuration', () => {
     let clock;
 
-    before(() => {
+    beforeEach(() => {
       clock = useFakeTimers();
     });
 
-    after(() => {
+    afterEach(() => {
       clock.restore();
     });
 
@@ -324,11 +324,11 @@ describe('<Snackbar />', () => {
   describe('prop: disableWindowBlurListener', () => {
     let clock;
 
-    before(() => {
+    beforeEach(() => {
       clock = useFakeTimers();
     });
 
-    after(() => {
+    afterEach(() => {
       clock.restore();
     });
 

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

@@ -8,10 +8,9 @@ import { act, createClientRender, fireEvent } from 'test/utils/createClientRende
 import Tab from './Tab';
 import ButtonBase from '../ButtonBase';
 
-const render = createClientRender();
-
 describe('<Tab />', () => {
   const mount = createMount();
+  const render = createClientRender();
   let classes;
 
   before(() => {

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

@@ -5,17 +5,18 @@ import ScrollbarSize from './ScrollbarSize';
 import { createClientRender } from 'test/utils/createClientRender';
 
 describe('<ScrollbarSize />', () => {
-  const render = createClientRender();
   let clock;
 
-  before(() => {
+  beforeEach(() => {
     clock = useFakeTimers();
   });
 
-  after(() => {
+  afterEach(() => {
     clock.restore();
   });
 
+  const render = createClientRender();
+
   describe('mount', () => {
     it('should call on initial load', () => {
       const onChange = spy();

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

@@ -332,11 +332,11 @@ describe('<Tabs />', () => {
       </Tabs>
     );
 
-    before(() => {
+    beforeEach(() => {
       clock = useFakeTimers();
     });
 
-    after(() => {
+    afterEach(() => {
       clock.restore();
     });
 
@@ -409,11 +409,11 @@ describe('<Tabs />', () => {
   describe('prop: scrollButtons', () => {
     let clock;
 
-    before(() => {
+    beforeEach(() => {
       clock = useFakeTimers();
     });
 
-    after(() => {
+    afterEach(() => {
       clock.restore();
     });
 
@@ -543,11 +543,11 @@ describe('<Tabs />', () => {
   describe('scroll button behavior', () => {
     let clock;
 
-    before(() => {
+    beforeEach(() => {
       clock = useFakeTimers();
     });
 
-    after(() => {
+    afterEach(() => {
       clock.restore();
     });
 
@@ -584,11 +584,11 @@ describe('<Tabs />', () => {
   describe('scroll into view behavior', () => {
     let clock;
 
-    before(() => {
+    beforeEach(() => {
       clock = useFakeTimers();
     });
 
-    after(() => {
+    afterEach(() => {
       clock.restore();
     });
 

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

@@ -52,11 +52,11 @@ describe('<TextareaAutosize />', () => {
     describe('resize', () => {
       let clock;
 
-      before(() => {
+      beforeEach(() => {
         clock = useFakeTimers();
       });
 
-      after(() => {
+      afterEach(() => {
         clock.restore();
       });
 

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

@@ -24,11 +24,21 @@ function simulatePointerDevice() {
 }
 
 describe('<Tooltip />', () => {
+  let clock;
+  beforeEach(() => {
+    testReset();
+    clock = useFakeTimers();
+  });
+
+  afterEach(() => {
+    clock.tick(800); // cleanup the hystersis timer
+    clock.restore();
+  });
+
   // StrictModeViolation: uses Grow and tests a lot of impl details
   const mount = createMount({ strict: null });
   let classes;
   const render = createClientRender({ strict: false });
-  let clock;
 
   before(() => {
     classes = getClasses(
@@ -38,16 +48,6 @@ describe('<Tooltip />', () => {
     );
   });
 
-  beforeEach(() => {
-    testReset();
-    clock = useFakeTimers();
-  });
-
-  afterEach(() => {
-    clock.tick(800); // cleanup the hystersis timer
-    clock.restore();
-  });
-
   describeConformance(
     <Tooltip title="Hello World">
       <button type="submit">Hello World</button>

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

@@ -34,11 +34,11 @@ describe('<Zoom />', () => {
   describe('transition lifecycle', () => {
     let clock;
 
-    before(() => {
+    beforeEach(() => {
       clock = useFakeTimers();
     });
 
-    after(() => {
+    afterEach(() => {
       clock.restore();
     });
 

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

@@ -5,11 +5,11 @@ import debounce from './debounce';
 describe('debounce', () => {
   let clock;
 
-  before(() => {
+  beforeEach(() => {
     clock = useFakeTimers();
   });
 
-  after(() => {
+  afterEach(() => {
     clock.restore();
   });
 

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

@@ -73,9 +73,6 @@ describe('<Menu /> integration', () => {
    * @type {ReturnType<useFakeTimers>}
    */
   let clock;
-  // StrictModeViolation: uses Popover
-  const render = createClientRender({ strict: false });
-
   beforeEach(() => {
     clock = useFakeTimers();
   });
@@ -84,6 +81,9 @@ describe('<Menu /> integration', () => {
     clock.restore();
   });
 
+  // StrictModeViolation: uses Popover
+  const render = createClientRender({ strict: false });
+
   it('is part of the DOM by default but hidden', () => {
     const { getByRole } = render(<ButtonMenu />);
 

test/utils/createClientRender.js

@@ -97,7 +97,20 @@ function clientRender(element, options = {}) {
 export function createClientRender(globalOptions = {}) {
   const { strict: globalStrict } = globalOptions;
 
+  // save stack to re-use in async afterEach
+  const { stack: createClientRenderStack } = new Error();
   afterEach(async () => {
+    if (setTimeout.hasOwnProperty('clock')) {
+      const error = Error(
+        "Can't cleanup before fake timers are restored.\n" +
+          'Be sure to:\n' +
+          '  1. Restore the clock in `afterEach` instead of `after`.\n' +
+          '  2. Move the test hook to restore the clock before the call to `createClientRender()`.',
+      );
+      // Use saved stack otherwise the stack trace will not include the test location.
+      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