[test] Make remaining testing-library tests StrictMode compatible (#2…

…6924)
mui · Jun 24, 2021 · 27027bc · 27027bc
1 parent 4196d99
commit 27027bc
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 37 deletions.
diff --git 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
@@ -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
@@ -130,8 +130,6 @@ describe('<Select> integration', () => {
             <MenuItem value={10}>Ten</MenuItem>
           </Select>
         </FormControl>,
-        // StrictModeViolation: Requires fake timers + act
-        { strict: false },
       );
 
       act(() => {