From 9265f8c78eb7e9e0bc799c63589dfcdfe5fb8272 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue, 7 Apr 2020 09:57:29 +0200
Subject: [PATCH] chore: Use .checkPropTypes instead of render + propTypes

---
 .eslintrc.js                                  |  5 ++-
 .../src/styled/styled.test.js                 | 10 +++--
 .../src/withTheme/withTheme.test.js           |  8 +++-
 .../src/chainPropTypes.test.js                |  1 +
 .../src/ButtonBase/ButtonBase.test.js         | 11 +++--
 .../src/CardMedia/CardMedia.test.js           |  2 +-
 .../src/ExpansionPanel/ExpansionPanel.test.js | 26 ++++++------
 .../src/IconButton/IconButton.test.js         | 10 +++--
 .../material-ui/src/ListItem/ListItem.test.js | 16 +++++---
 .../material-ui/src/Popper/Popper.test.js     | 18 +++++----
 .../material-ui/src/Slider/Slider.test.js     | 18 ++++++++-
 .../SwipeableDrawer/SwipeableDrawer.test.js   | 40 +++++++++++--------
 .../TablePagination/TablePagination.test.js   | 26 ++++++------
 .../src/utils/deprecatedPropType.test.js      |  3 +-
 14 files changed, 121 insertions(+), 73 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index c8d140df0e113f..dcc9bc7410611c 100644
--- a/.eslintrc.js
+++ b/.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',
       },
     },
     {
diff --git a/packages/material-ui-styles/src/styled/styled.test.js b/packages/material-ui-styles/src/styled/styled.test.js
index 8bb780ca86143f..e1203ea88bfe82 100644
--- a/packages/material-ui-styles/src/styled/styled.test.js
+++ b/packages/material-ui-styles/src/styled/styled.test.js
@@ -101,11 +101,13 @@ describe('styled', () => {
     });
 
     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],
diff --git a/packages/material-ui-styles/src/withTheme/withTheme.test.js b/packages/material-ui-styles/src/withTheme/withTheme.test.js
index 3db049a30ebd79..511a55a9e0dc70 100644
--- a/packages/material-ui-styles/src/withTheme/withTheme.test.js
+++ b/packages/material-ui-styles/src/withTheme/withTheme.test.js
@@ -94,8 +94,12 @@ describe('withTheme', () => {
 
       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(
diff --git a/packages/material-ui-utils/src/chainPropTypes.test.js b/packages/material-ui-utils/src/chainPropTypes.test.js
index 2820394e2e6ca1..aa95bf371b3550 100644
--- a/packages/material-ui-utils/src/chainPropTypes.test.js
+++ b/packages/material-ui-utils/src/chainPropTypes.test.js
@@ -11,6 +11,7 @@ describe('chainPropTypes', () => {
 
   beforeEach(() => {
     consoleErrorMock.spy();
+    PropTypes.resetWarningCache();
   });
 
   afterEach(() => {
diff --git a/packages/material-ui/src/ButtonBase/ButtonBase.test.js b/packages/material-ui/src/ButtonBase/ButtonBase.test.js
index 268a5ebbf45cc1..08d6f2bd7c4a80 100644
--- a/packages/material-ui/src/ButtonBase/ButtonBase.test.js
+++ b/packages/material-ui/src/ButtonBase/ButtonBase.test.js
@@ -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',
       );
     });
 
diff --git a/packages/material-ui/src/CardMedia/CardMedia.test.js b/packages/material-ui/src/CardMedia/CardMedia.test.js
index 910653f5ae06d6..e1e3690b4da92c 100644
--- a/packages/material-ui/src/CardMedia/CardMedia.test.js
+++ b/packages/material-ui/src/CardMedia/CardMedia.test.js
@@ -92,7 +92,7 @@ describe('<CardMedia />', () => {
     });
 
     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(
diff --git a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.test.js b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.test.js
index 9e48b9eec0530b..8baf58b7a277e2 100644
--- a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.test.js
+++ b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.test.js
@@ -145,23 +145,25 @@ describe('<ExpansionPanel />', () => {
       });
 
       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],
diff --git a/packages/material-ui/src/IconButton/IconButton.test.js b/packages/material-ui/src/IconButton/IconButton.test.js
index abc8fe411c2758..9f57c73be1ba99 100644
--- a/packages/material-ui/src/IconButton/IconButton.test.js
+++ b/packages/material-ui/src/IconButton/IconButton.test.js
@@ -136,11 +136,13 @@ describe('<IconButton />', () => {
     });
 
     it('should raise a warning', () => {
-      render(
-        <IconButton>
-          <svg onClick={() => {}} />
-        </IconButton>,
+      PropTypes.checkPropTypes(
+        IconButton.Naked.propTypes,
+        { classes: {}, children: <svg onClick={() => {}} /> },
+        'prop',
+        'MockedName',
       );
+
       expect(consoleErrorMock.callCount()).to.equal(1);
       expect(consoleErrorMock.messages()[0]).to.include(
         'you are providing an onClick event listener',
diff --git a/packages/material-ui/src/ListItem/ListItem.test.js b/packages/material-ui/src/ListItem/ListItem.test.js
index 56a7629c0f9cac..85ed0d0213b078 100644
--- a/packages/material-ui/src/ListItem/ListItem.test.js
+++ b/packages/material-ui/src/ListItem/ListItem.test.js
@@ -150,11 +150,17 @@ describe('<ListItem />', () => {
       });
 
       it('warns if it cant detect the secondary action properly', () => {
-        render(
-          <ListItem>
-            <ListItemSecondaryAction>I should have come last :(</ListItemSecondaryAction>
-            <ListItemText>My position doesn not matter.</ListItemText>
-          </ListItem>,
+        PropTypes.checkPropTypes(
+          ListItem.Naked.propTypes,
+          {
+            classes: {},
+            children: [
+              <ListItemSecondaryAction>I should have come last :(</ListItemSecondaryAction>,
+              <ListItemText>My position doesn not matter.</ListItemText>,
+            ],
+          },
+          'prop',
+          'MockedName',
         );
 
         expect(consoleErrorMock.callCount()).to.equal(1);
diff --git a/packages/material-ui/src/Popper/Popper.test.js b/packages/material-ui/src/Popper/Popper.test.js
index d78d906c201b5d..45c86d3080bd83 100644
--- a/packages/material-ui/src/Popper/Popper.test.js
+++ b/packages/material-ui/src/Popper/Popper.test.js
@@ -284,15 +284,19 @@ describe('<Popper />', () => {
     });
 
     it('should warn if anchorEl is not valid', () => {
-      mount(<Popper {...defaultProps} open anchorEl={null} />);
+      PropTypes.checkPropTypes(
+        Popper.propTypes,
+        {
+          ...defaultProps,
+          open: true,
+          anchorEl: null,
+        },
+        'prop',
+        'MockedPopper',
+      );
+
       assert.strictEqual(consoleErrorMock.callCount(), 1);
       assert.include(consoleErrorMock.messages()[0], 'It should be an HTML Element instance');
     });
-
-    // it('should warn if anchorEl is not visible', () => {
-    //   mount(<Popper {...defaultProps} open anchorEl={document.createElement('div')} />);
-    //   assert.strictEqual(consoleErrorMock.callCount(), 1);
-    //   assert.include(consoleErrorMock.messages()[0], 'The node element should be visible');
-    // });
   });
 });
diff --git a/packages/material-ui/src/Slider/Slider.test.js b/packages/material-ui/src/Slider/Slider.test.js
index 166932bcce3305..0fdc523e5d4ecf 100644
--- a/packages/material-ui/src/Slider/Slider.test.js
+++ b/packages/material-ui/src/Slider/Slider.test.js
@@ -497,14 +497,28 @@ describe('<Slider />', () => {
     });
 
     it('should warn if aria-valuetext is provided', () => {
-      render(<Slider value={[20, 50]} aria-valuetext="hot" />);
+      PropTypes.checkPropTypes(
+        Slider.Naked.propTypes,
+        { classes: {}, value: [20, 50], 'aria-valuetext': 'hot' },
+        'prop',
+        'MockedSlider',
+      );
+
+      expect(consoleErrorMock.callCount()).to.equal(1);
       expect(consoleErrorMock.messages()[0]).to.include(
         'you need to use the `getAriaValueText` prop instead of',
       );
     });
 
     it('should warn if aria-label is provided', () => {
-      render(<Slider value={[20, 50]} aria-label="hot" />);
+      PropTypes.checkPropTypes(
+        Slider.Naked.propTypes,
+        { classes: {}, value: [20, 50], 'aria-label': 'hot' },
+        'prop',
+        'MockedSlider',
+      );
+
+      expect(consoleErrorMock.callCount()).to.equal(1);
       expect(consoleErrorMock.messages()[0]).to.include(
         'you need to use the `getAriaLabel` prop instead of',
       );
diff --git a/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.test.js b/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.test.js
index 3f0ce98dd308a0..e420d49264d3a9 100644
--- a/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.test.js
+++ b/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.test.js
@@ -3,7 +3,7 @@ import { assert } from 'chai';
 import { spy } from 'sinon';
 import { createMount } from '@material-ui/core/test-utils';
 import describeConformance from '@material-ui/core/test-utils/describeConformance';
-import PropTypes from 'prop-types';
+import PropTypes, { checkPropTypes } from 'prop-types';
 import consoleErrorMock from 'test/utils/consoleErrorMock';
 import Drawer from '../Drawer';
 import SwipeableDrawer, { reset } from './SwipeableDrawer';
@@ -525,36 +525,42 @@ describe('<SwipeableDrawer />', () => {
     });
 
     it('warns if a component for the Paper is used that cant hold a ref', () => {
-      mount(
-        <SwipeableDrawer
-          onOpen={() => {}}
-          onClose={() => {}}
-          open={false}
-          PaperProps={{ component: () => <div />, elevation: 4 }}
-        />,
+      checkPropTypes(
+        SwipeableDrawer.propTypes,
+        {
+          onOpen: () => {},
+          onClose: () => {},
+          open: false,
+          PaperProps: { component: () => <div />, elevation: 4 },
+        },
+        'prop',
+        'MockedSwipeableDrawer',
       );
 
       assert.strictEqual(consoleErrorMock.callCount(), 1);
       assert.include(
         consoleErrorMock.messages()[0],
-        'Warning: Failed prop type: Invalid prop `PaperProps.component` supplied to `ForwardRef(SwipeableDrawer)`. Expected an element type that can hold a ref.',
+        'Warning: Failed prop type: Invalid prop `PaperProps.component` supplied to `MockedSwipeableDrawer`. Expected an element type that can hold a ref.',
       );
     });
 
     it('warns if a component for the Backdrop is used that cant hold a ref', () => {
-      mount(
-        <SwipeableDrawer
-          onOpen={() => {}}
-          onClose={() => {}}
-          open={false}
-          ModalProps={{ BackdropProps: { component: () => <div />, 'data-backdrop': true } }}
-        />,
+      checkPropTypes(
+        SwipeableDrawer.propTypes,
+        {
+          onOpen: () => {},
+          onClose: () => {},
+          open: false,
+          ModalProps: { BackdropProps: { component: () => <div />, 'data-backdrop': true } },
+        },
+        'prop',
+        'MockedSwipeableDrawer',
       );
 
       assert.strictEqual(consoleErrorMock.callCount(), 1);
       assert.include(
         consoleErrorMock.messages()[0],
-        'Warning: Failed prop type: Invalid prop `ModalProps.BackdropProps.component` supplied to `ForwardRef(SwipeableDrawer)`. Expected an element type that can hold a ref.',
+        'Warning: Failed prop type: Invalid prop `ModalProps.BackdropProps.component` supplied to `MockedSwipeableDrawer`. Expected an element type that can hold a ref.',
       );
     });
   });
diff --git a/packages/material-ui/src/TablePagination/TablePagination.test.js b/packages/material-ui/src/TablePagination/TablePagination.test.js
index 53aea58e1cf07e..1bf463d9d3c69c 100644
--- a/packages/material-ui/src/TablePagination/TablePagination.test.js
+++ b/packages/material-ui/src/TablePagination/TablePagination.test.js
@@ -288,20 +288,18 @@ describe('<TablePagination />', () => {
     });
 
     it('should raise a warning if the page prop is out of range', () => {
-      mount(
-        <table>
-          <TableFooter>
-            <TableRow>
-              <TablePagination
-                page={2}
-                count={20}
-                rowsPerPage={10}
-                onChangePage={noop}
-                onChangeRowsPerPage={noop}
-              />
-            </TableRow>
-          </TableFooter>
-        </table>,
+      PropTypes.checkPropTypes(
+        TablePagination.Naked.propTypes,
+        {
+          classes: {},
+          page: 2,
+          count: 20,
+          rowsPerPage: 10,
+          onChangePage: noop,
+          onChangeRowsPerPage: noop,
+        },
+        'prop',
+        'MockedTablePagination',
       );
 
       assert.strictEqual(consoleErrorMock.callCount(), 1);
diff --git a/packages/material-ui/src/utils/deprecatedPropType.test.js b/packages/material-ui/src/utils/deprecatedPropType.test.js
index 7921f4c6617a43..b6c1e3b8f58b6c 100644
--- a/packages/material-ui/src/utils/deprecatedPropType.test.js
+++ b/packages/material-ui/src/utils/deprecatedPropType.test.js
@@ -9,6 +9,7 @@ describe('deprecatedPropType', () => {
 
   beforeEach(() => {
     consoleErrorMock.spy();
+    PropTypes.resetWarningCache();
   });
 
   afterEach(() => {
@@ -30,7 +31,7 @@ describe('deprecatedPropType', () => {
   });
 
   it('should warn once', () => {
-    const propName = `children${new Date()}`;
+    const propName = `children`;
     const props = {
       [propName]: 'yolo',
     };