[test] Use .checkPropTypes instead of render + propTypes (#20451)

Author: eps1lon

.eslintrc.js

@@ -129,7 +129,10 @@ module.exports = {
         // test to `beforeEach`.
         // `beforeEach`+`afterEach` also means that the `beforeEach`
         // is cleaned up in `afterEach` if the test causes a crash
-        'mocha/no-hooks-for-single-case': 'off'
+        'mocha/no-hooks-for-single-case': 'off',
+
+        // They are accessed to test custom validator implementation with PropTypes.checkPropTypes
+        'react/forbid-foreign-prop-types': 'off',
       },
     },
     {

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

@@ -93,19 +93,21 @@ describe('styled', () => {
   describe('warnings', () => {
     beforeEach(() => {
       consoleErrorMock.spy();
+      PropTypes.resetWarningCache();
     });
 
     afterEach(() => {
       consoleErrorMock.reset();
-      PropTypes.resetWarningCache();
     });
 
     it('warns if it cant detect the secondary action properly', () => {
-      mount(
-        <StyledButton clone component="div">
-          <div>Styled Components</div>
-        </StyledButton>,
+      PropTypes.checkPropTypes(
+        StyledButton.propTypes,
+        { clone: true, component: 'div' },
+        'prop',
+        'StyledButton',
       );
+
       assert.strictEqual(consoleErrorMock.callCount(), 1);
       assert.include(
         consoleErrorMock.messages()[0],

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

@@ -73,11 +73,11 @@ describe('withStyles', () => {
     // describe('innerRef', () => {
     //   beforeEach(() => {
     //     consoleErrorMock.spy();
+    //     PropTypes.resetWarningCache();
     //   });
 
     //   afterEach(() => {
     //     consoleErrorMock.reset();
-    //     PropTypes.resetWarningCache();
     //   });
 
     //   it('is deprecated', () => {

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

@@ -85,17 +85,21 @@ describe('withTheme', () => {
     describe('innerRef', () => {
       beforeEach(() => {
         consoleErrorMock.spy();
+        PropTypes.resetWarningCache();
       });
 
       afterEach(() => {
         consoleErrorMock.reset();
-        PropTypes.resetWarningCache();
       });
 
       it('is deprecated', () => {
         const ThemedDiv = withTheme('div');
-
-        mount(<ThemedDiv innerRef={React.createRef()} />);
+        PropTypes.checkPropTypes(
+          ThemedDiv.propTypes,
+          { innerRef: React.createRef() },
+          'prop',
+          'ThemedDiv',
+        );
 
         assert.strictEqual(consoleErrorMock.callCount(), 1);
         assert.include(

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

@@ -11,6 +11,7 @@ describe('chainPropTypes', () => {
 
   beforeEach(() => {
     consoleErrorMock.spy();
+    PropTypes.resetWarningCache();
   });
 
   afterEach(() => {

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

@@ -29,11 +29,11 @@ describe('elementAcceptingRef', () => {
 
   beforeEach(() => {
     consoleErrorMock.spy();
+    PropTypes.resetWarningCache();
   });
 
   afterEach(() => {
     consoleErrorMock.reset();
-    PropTypes.resetWarningCache();
   });
 
   describe('acceptance when not required', () => {

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

@@ -29,11 +29,11 @@ describe('elementTypeAcceptingRef', () => {
 
   beforeEach(() => {
     consoleErrorMock.spy();
+    PropTypes.resetWarningCache();
   });
 
   afterEach(() => {
     consoleErrorMock.reset();
-    PropTypes.resetWarningCache();
   });
 
   describe('acceptance', () => {

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

@@ -908,11 +908,11 @@ describe('<ButtonBase />', () => {
   describe('warnings', () => {
     beforeEach(() => {
       consoleErrorMock.spy();
+      PropTypes.resetWarningCache();
     });
 
     afterEach(() => {
       consoleErrorMock.reset();
-      PropTypes.resetWarningCache();
     });
 
     it('warns on invalid `component` prop: ref forward', () => {
@@ -929,11 +929,16 @@ describe('<ButtonBase />', () => {
         return <button type="button" {...props} />;
       }
 
-      // cant match the error message here because flakiness with mocha watchmode
-      render(<ButtonBase component={Component} />);
+      PropTypes.checkPropTypes(
+        // @ts-ignore `Naked` is internal
+        ButtonBase.Naked.propTypes,
+        { classes: {}, component: Component },
+        'prop',
+        'MockedName',
+      );
 
       expect(consoleErrorMock.messages()[0]).to.include(
-        'Invalid prop `component` supplied to `ForwardRef(ButtonBase)`. Expected an element type that can hold a ref',
+        'Invalid prop `component` supplied to `MockedName`. Expected an element type that can hold a ref',
       );
     });
 

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

@@ -84,15 +84,15 @@ describe('<CardMedia />', () => {
   describe('warnings', () => {
     before(() => {
       consoleErrorMock.spy();
+      PropTypes.resetWarningCache();
     });
 
     after(() => {
       consoleErrorMock.reset();
-      PropTypes.resetWarningCache();
     });
 
     it('warns when neither `children`, nor `image`, nor `src`, nor `component` are provided', () => {
-      mount(<CardMedia />);
+      PropTypes.checkPropTypes(CardMedia.Naked.propTypes, { classes: {} }, 'prop', 'MockedName');
 
       assert.strictEqual(consoleErrorMock.callCount(), 1);
       assert.include(

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

@@ -137,31 +137,33 @@ describe('<ExpansionPanel />', () => {
     describe('first child', () => {
       beforeEach(() => {
         consoleErrorMock.spy();
+        PropTypes.resetWarningCache();
       });
 
       afterEach(() => {
         consoleErrorMock.reset();
-        PropTypes.resetWarningCache();
       });
 
       it('requires at least one child', () => {
-        if (!/jsdom/.test(window.navigator.userAgent)) {
-          // errors during mount are not caught by try-catch in the browser
-          // can't use skip since this causes multiple errors related to cleanup of the console mock
-          return;
-        }
-
-        assert.throws(() => mount(<ExpansionPanel>{[]}</ExpansionPanel>));
-        assert.strictEqual(consoleErrorMock.callCount(), 3);
+        PropTypes.checkPropTypes(
+          ExpansionPanel.Naked.propTypes,
+          { classes: {}, children: [] },
+          'prop',
+          'MockedName',
+        );
+
+        assert.strictEqual(consoleErrorMock.callCount(), 1);
         assert.include(consoleErrorMock.messages()[0], 'Material-UI: expected the first child');
       });
 
       it('needs a valid element as the first child', () => {
-        mount(
-          <ExpansionPanel>
-            <React.Fragment />
-          </ExpansionPanel>,
+        PropTypes.checkPropTypes(
+          ExpansionPanel.Naked.propTypes,
+          { classes: {}, children: <React.Fragment /> },
+          'prop',
+          'MockedName',
         );
+
         assert.strictEqual(consoleErrorMock.callCount(), 1);
         assert.include(
           consoleErrorMock.messages()[0],