From 27027bc8a345d08b1520926db331e91017f1fe9d Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Thu, 24 Jun 2021 15:23:31 +0200
Subject: [PATCH] [test] Make remaining testing-library tests StrictMode
 compatible (#26924)

---
 .../material-ui/src/Select/Select.test.js     | 61 ++++++++++---------
 .../src/SpeedDial/SpeedDial.test.js           | 13 ++--
 .../test/integration/Select.test.js           |  2 -
 3 files changed, 39 insertions(+), 37 deletions(-)

diff --git a/packages/material-ui/src/Select/Select.test.js b/packages/material-ui/src/Select/Select.test.js
index 5d8725ce7b1606..467d8a14969ec1 100644
--- a/packages/material-ui/src/Select/Select.test.js
+++ b/packages/material-ui/src/Select/Select.test.js
@@ -20,9 +20,18 @@ import Divider from '@material-ui/core/Divider';
 import classes from './selectClasses';
 
 describe('<Select />', () => {
+  /**
+   * @type {ReturnType<typeof useFakeTimers>}
+   */
+  let clock;
+  beforeEach(() => {
+    clock = useFakeTimers();
+  });
+  afterEach(() => {
+    clock.restore();
+  });
   const mount = createMount();
-  // StrictModeViolation: triggers "not wrapped in act()" warnings from timers.
-  const render = createClientRender({ strict: false });
+  const render = createClientRender();
 
   describeConformanceV5(<Select value="" />, () => ({
     classes,
@@ -150,7 +159,9 @@ describe('<Select />', () => {
         </Select>,
       );
       const trigger = screen.getByRole('button');
-      trigger.focus();
+      act(() => {
+        trigger.focus();
+      });
 
       fireEvent.keyDown(trigger, { key });
       expect(screen.getByRole('listbox', { hidden: false })).not.to.equal(null);
@@ -168,9 +179,13 @@ describe('<Select />', () => {
       </Select>,
     );
     const button = getByRole('button');
-    button.focus();
+    act(() => {
+      button.focus();
+    });
 
-    button.blur();
+    act(() => {
+      button.blur();
+    });
 
     expect(handleBlur.callCount).to.equal(1);
     expect(handleBlur.firstCall.returnValue).to.equal('blur-testing');
@@ -245,7 +260,9 @@ describe('<Select />', () => {
         </Select>,
       );
       fireEvent.mouseDown(getByRole('button'));
-      getAllByRole('option')[1].click();
+      act(() => {
+        getAllByRole('option')[1].click();
+      });
 
       expect(onChangeHandler.calledOnce).to.equal(true);
       const selected = onChangeHandler.args[0][1];
@@ -264,7 +281,9 @@ describe('<Select />', () => {
       );
 
       fireEvent.mouseDown(getByRole('button'));
-      getAllByRole('option')[1].click();
+      act(() => {
+        getAllByRole('option')[1].click();
+      });
 
       expect(eventLog).to.deep.equal(['CHANGE_EVENT', 'CLOSE_EVENT']);
     });
@@ -279,7 +298,9 @@ describe('<Select />', () => {
         </Select>,
       );
       fireEvent.mouseDown(getByRole('button'));
-      getAllByRole('option')[1].click();
+      act(() => {
+        getAllByRole('option')[1].click();
+      });
 
       expect(onChangeHandler.callCount).to.equal(0);
     });
@@ -562,7 +583,9 @@ describe('<Select />', () => {
         { baseElement: document.body },
       );
       const trigger = screen.getByRole('button');
-      trigger.focus();
+      act(() => {
+        trigger.focus();
+      });
 
       fireEvent.keyDown(trigger, { key: 'ArrowDown' });
       expect(screen.queryByRole('listbox')).to.equal(null);
@@ -573,16 +596,6 @@ describe('<Select />', () => {
   });
 
   describe('prop: MenuProps', () => {
-    let clock;
-
-    beforeEach(() => {
-      clock = useFakeTimers();
-    });
-
-    afterEach(() => {
-      clock.restore();
-    });
-
     it('should apply additional props to the Menu component', () => {
       const onEntered = spy();
       const { getByRole } = render(
@@ -661,16 +674,6 @@ describe('<Select />', () => {
   });
 
   describe('prop: open (controlled)', () => {
-    let clock;
-
-    beforeEach(() => {
-      clock = useFakeTimers();
-    });
-
-    afterEach(() => {
-      clock.restore();
-    });
-
     it('should not focus on close controlled select', () => {
       function ControlledWrapper() {
         const [open, setOpen] = React.useState(false);
diff --git a/packages/material-ui/src/SpeedDial/SpeedDial.test.js b/packages/material-ui/src/SpeedDial/SpeedDial.test.js
index 02fa771a5d9bae..7e6f0b735716c7 100644
--- a/packages/material-ui/src/SpeedDial/SpeedDial.test.js
+++ b/packages/material-ui/src/SpeedDial/SpeedDial.test.js
@@ -26,9 +26,8 @@ describe('<SpeedDial />', () => {
     clock.restore();
   });
 
-  // StrictModeViolation: not using act(), prefer test/utils/createClientRender
-  const mount = createMount({ strict: false });
-  const render = createClientRender({ strict: false });
+  const mount = createMount();
+  const render = createClientRender();
 
   const icon = <Icon>font_icon</Icon>;
   const FakeAction = () => <div />;
@@ -203,8 +202,8 @@ describe('<SpeedDial />', () => {
         </SpeedDial>,
       );
       const fab = getByRole('button');
-      fab.focus();
       act(() => {
+        fab.focus();
         clock.tick();
       });
       expect(handleOpen.callCount).to.equal(1);
@@ -226,8 +225,8 @@ describe('<SpeedDial />', () => {
       const fab = getByRole('button');
       const actions = getAllByRole('menuitem');
 
-      fab.focus();
       act(() => {
+        fab.focus();
         clock.runAll();
       });
 
@@ -301,7 +300,9 @@ describe('<SpeedDial />', () => {
           ))}
         </SpeedDial>,
       );
-      fabButton.focus();
+      act(() => {
+        fabButton.focus();
+      });
     };
 
     /**
diff --git a/packages/material-ui/test/integration/Select.test.js b/packages/material-ui/test/integration/Select.test.js
index e396e81914eaa0..0114d721c8577f 100644
--- a/packages/material-ui/test/integration/Select.test.js
+++ b/packages/material-ui/test/integration/Select.test.js
@@ -130,8 +130,6 @@ describe('<Select> integration', () => {
             <MenuItem value={10}>Ten</MenuItem>
           </Select>
         </FormControl>,
-        // StrictModeViolation: Requires fake timers + act
-        { strict: false },
       );
 
       act(() => {