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

mui · Apr 8, 2020 · 69f7046 · 69f7046
1 parent c776d34
commit 69f7046
Show file tree

Hide file tree

Showing 21 changed files with 137 additions and 93 deletions.
diff --git 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
@@ -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],

diff --git a/packages/material-ui-styles/src/withStyles/withStyles.test.js b/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', () => {

diff --git a/packages/material-ui-styles/src/withTheme/withTheme.test.js b/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(

diff --git 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-utils/src/elementAcceptingRef.test.js b/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', () => {

diff --git a/packages/material-ui-utils/src/elementTypeAcceptingRef.test.js b/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', () => {

diff --git a/packages/material-ui/src/ButtonBase/ButtonBase.test.js b/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',
       );
     });
 

diff --git a/packages/material-ui/src/CardMedia/CardMedia.test.js b/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(

diff --git a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.test.js b/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],

diff --git a/packages/material-ui/src/GridList/GridList.test.js b/packages/material-ui/src/GridList/GridList.test.js
@@ -4,7 +4,6 @@ import { createMount, createShallow, getClasses } from '@material-ui/core/test-u
 import describeConformance from '../test-utils/describeConformance';
 import GridList from './GridList';
 import consoleErrorMock from 'test/utils/consoleErrorMock';
-import PropTypes from 'prop-types';
 
 const tilesData = [
   {
@@ -181,7 +180,6 @@ describe('<GridList />', () => {
 
     after(() => {
       consoleErrorMock.reset();
-      PropTypes.resetWarningCache();
     });
 
     it('warns a Fragment is passed as a child', () => {

diff --git a/packages/material-ui/src/IconButton/IconButton.test.js b/packages/material-ui/src/IconButton/IconButton.test.js
@@ -128,19 +128,21 @@ describe('<IconButton />', () => {
   describe('Firefox onClick', () => {
     beforeEach(() => {
       consoleErrorMock.spy();
+      PropTypes.resetWarningCache();
     });
 
     afterEach(() => {
       consoleErrorMock.reset();
-      PropTypes.resetWarningCache();
     });
 
     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
@@ -142,19 +142,25 @@ describe('<ListItem />', () => {
     describe('warnings', () => {
       beforeEach(() => {
         consoleErrorMock.spy();
+        PropTypes.resetWarningCache();
       });
 
       afterEach(() => {
         consoleErrorMock.reset();
-        PropTypes.resetWarningCache();
       });
 
       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/Menu/Menu.test.js b/packages/material-ui/src/Menu/Menu.test.js
@@ -7,7 +7,6 @@ import Popover from '../Popover';
 import Menu from './Menu';
 import MenuList from '../MenuList';
 import consoleErrorMock from 'test/utils/consoleErrorMock';
-import PropTypes from 'prop-types';
 
 const MENU_LIST_HEIGHT = 100;
 
@@ -233,7 +232,6 @@ describe('<Menu />', () => {
 
     after(() => {
       consoleErrorMock.reset();
-      PropTypes.resetWarningCache();
     });
 
     it('warns a Fragment is passed as a child', () => {

diff --git a/packages/material-ui/src/Popover/Popover.test.js b/packages/material-ui/src/Popover/Popover.test.js
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { assert, expect } from 'chai';
 import { spy, stub, useFakeTimers } from 'sinon';
-import PropTypes from 'prop-types';
 import { createMount, findOutermostIntrinsic, getClasses } from '@material-ui/core/test-utils';
 import describeConformance from '../test-utils/describeConformance';
 import consoleErrorMock from 'test/utils/consoleErrorMock';
@@ -461,7 +460,6 @@ describe('<Popover />', () => {
   describe('warnings', () => {
     beforeEach(() => {
       consoleErrorMock.spy();
-      PropTypes.resetWarningCache();
     });
 
     afterEach(() => {

diff --git 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
@@ -489,22 +489,36 @@ describe('<Slider />', () => {
   describe('warnings', () => {
     beforeEach(() => {
       consoleErrorMock.spy();
+      PropTypes.resetWarningCache();
     });
 
     afterEach(() => {
       consoleErrorMock.reset();
-      PropTypes.resetWarningCache();
     });
 
     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',
       );