[core] Add strict option to createMount (#15317)

* [test] Test with strict mode where possible

* [chore] Use #StrictMode

Makes code search easier

* [InputBase] Fix onFilled/onEmpty being called too often

* [test] Don't memoize mode

- Interfers with other tests
- also polishes createMount

* [test] Fix failing tests

styles were still applied. maybe an issue with ReactDOM?

* [test] Revert test fix

The actual issue is makeStyles

* [test] Polish Mode docs

* [useMediaQuery] Use proper effect hooks

* [useMediaQuery] Use proper act instead of setTimeout

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

Co-Authored-By: eps1lon <[email protected]>

* no dedup

Author: eps1lon

packages/material-ui-lab/src/Slider/Slider.js

@@ -423,7 +423,7 @@ class Slider extends React.Component {
   handleRef = ref => {
     setRef(this.props.innerRef, ref);
 
-    // StrictMode ready
+    // #StrictMode ready
     const nextContainer = ReactDOM.findDOMNode(ref);
     const prevContainer = this.container;
 

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

@@ -20,7 +20,8 @@ describe('<Slider />', () => {
 
   before(() => {
     classes = getClasses(<Slider value={0} />);
-    mount = createMount();
+    // StrictMode violation: uses ButtonBase
+    mount = createMount({ strict: false });
   });
 
   after(() => {

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

@@ -32,7 +32,8 @@ describe('<SpeedDial />', () => {
   }
 
   before(() => {
-    mount = createMount();
+    // StrictModeViolation: uses ButtonBase
+    mount = createMount({ strict: false });
     shallow = createShallow({ dive: true });
     classes = getClasses(
       <SpeedDial {...defaultProps} icon={icon}>
@@ -296,7 +297,7 @@ describe('<SpeedDial />', () => {
 
     it('displays the actions on focus gain', () => {
       resetDialToOpen();
-      assert.strictEqual(wrapper.props().open, true);
+      assert.strictEqual(wrapper.find('SpeedDial').props().open, true);
     });
 
     describe('first item selection', () => {

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

@@ -17,7 +17,8 @@ describe('<SpeedDialAction />', () => {
   };
 
   before(() => {
-    mount = createMount();
+    // StrictModeViolation: uses ButtonBase
+    mount = createMount({ strict: false });
     classes = getClasses(<SpeedDialAction {...defaultProps} />);
   });
 

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

@@ -13,7 +13,7 @@ describe('<SpeedDialIcon />', () => {
 
   before(() => {
     shallow = createShallow({ dive: true });
-    mount = createMount();
+    mount = createMount({ strict: true });
     classes = getClasses(<SpeedDialIcon />);
   });
 

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

@@ -17,7 +17,8 @@ describe('<ToggleButton />', () => {
   let classes;
 
   before(() => {
-    mount = createMount();
+    // StrictModeViolation: uses ButtonBase
+    mount = createMount({ strict: false });
     render = createRender();
     classes = getClasses(<ToggleButton value="classes">Hello World</ToggleButton>);
   });

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

@@ -15,7 +15,8 @@ describe('<ToggleButtonGroup />', () => {
   let classes;
 
   before(() => {
-    mount = createMount();
+    // StrictModeViolation: uses ButtonBase
+    mount = createMount({ strict: false });
     classes = getClasses(
       <ToggleButtonGroup>
         <ToggleButton value="hello" />

packages/material-ui-styles/src/StylesProvider/StylesProvider.test.js

@@ -21,7 +21,7 @@ describe('StylesProvider', () => {
   let generateClassName;
 
   before(() => {
-    mount = createMount();
+    mount = createMount({ strict: true });
   });
 
   beforeEach(() => {

packages/material-ui-styles/src/ThemeProvider/ThemeProvider.test.js

@@ -9,59 +9,65 @@ describe('ThemeProvider', () => {
   let mount;
 
   before(() => {
-    mount = createMount();
+    mount = createMount({ strict: true });
   });
 
   after(() => {
     mount.cleanUp();
   });
 
   it('should provide the theme', () => {
+    const ref = React.createRef();
+    const text = () => ref.current.textContent;
     function Test() {
       const theme = useTheme();
 
-      return <span>{theme.foo}</span>;
+      return <span ref={ref}>{theme.foo}</span>;
     }
 
-    const wrapper = mount(
+    mount(
       <ThemeProvider theme={{ foo: 'foo' }}>
         <Test />
       </ThemeProvider>,
     );
-    assert.strictEqual(wrapper.text(), 'foo');
+    assert.strictEqual(text(), 'foo');
   });
 
   it('should merge the themes', () => {
+    const ref = React.createRef();
+    const text = () => ref.current.textContent;
     function Test() {
       const theme = useTheme();
 
       return (
-        <span>
+        <span ref={ref}>
           {theme.foo}
           {theme.bar}
         </span>
       );
     }
 
-    const wrapper = mount(
+    mount(
       <ThemeProvider theme={{ bar: 'bar' }}>
         <ThemeProvider theme={{ foo: 'foo' }}>
           <Test />
         </ThemeProvider>
       </ThemeProvider>,
     );
-    assert.strictEqual(wrapper.text(), 'foobar');
+    assert.strictEqual(text(), 'foobar');
   });
 
   it('should memoize the merged output', () => {
     const themes = [];
 
+    const ref = React.createRef();
+    const text = () => ref.current.textContent;
     function Test() {
       const theme = useTheme();
       themes.push(theme);
 
       return (
-        <span>
+        <span ref={ref}>
           {theme.foo}
           {theme.bar}
         </span>
@@ -83,9 +89,9 @@ describe('ThemeProvider', () => {
     }
 
     const wrapper = mount(<Container />);
-    assert.strictEqual(wrapper.text(), 'foobar');
+    assert.strictEqual(text(), 'foobar');
     wrapper.setProps({});
-    assert.strictEqual(wrapper.text(), 'foobar');
+    assert.strictEqual(text(), 'foobar');
     assert.strictEqual(themes.length, 1);
   });
 
@@ -104,7 +110,7 @@ describe('ThemeProvider', () => {
           <div />
         </ThemeProvider>,
       );
-      assert.strictEqual(consoleErrorMock.callCount(), 1);
+      assert.strictEqual(consoleErrorMock.callCount(), 2); // twice in strict mode
       assert.include(consoleErrorMock.args()[0][0], 'However, no outer theme is present.');
     });
 
@@ -117,7 +123,7 @@ describe('ThemeProvider', () => {
           ,
         </ThemeProvider>,
       );
-      assert.strictEqual(consoleErrorMock.callCount(), 1);
+      assert.strictEqual(consoleErrorMock.callCount(), 2);
       assert.include(
         consoleErrorMock.args()[0][0],
         'you should return an object from your theme function',

packages/material-ui-styles/src/makeStyles/makeStyles.test.js

@@ -39,7 +39,7 @@ describe('makeStyles', () => {
   let generateClassName;
 
   before(() => {
-    mount = createMount();
+    mount = createMount({ strict: undefined });
   });
 
   beforeEach(() => {