Remove JSX propTypes checks

facebook · Feb 20, 2024 · bdea370 · bdea370
1 parent a515d75
commit bdea370
Show file tree

Hide file tree

Showing 10 changed files with 12 additions and 588 deletions.
diff --git a/packages/react-art/npm/Circle.js b/packages/react-art/npm/Circle.js
@@ -18,7 +18,6 @@
 'use strict';
 
 var assign = Object.assign;
-var PropTypes = require('prop-types');
 var React = require('react');
 var ReactART = require('react-art');
 
@@ -34,10 +33,6 @@ var Shape = ReactART.Shape;
 var Circle = createReactClass({
   displayName: 'Circle',
 
-  propTypes: {
-    radius: PropTypes.number.isRequired,
-  },
-
   render: function render() {
     var radius = this.props.radius;
 

diff --git a/packages/react-art/npm/Rectangle.js b/packages/react-art/npm/Rectangle.js
@@ -25,7 +25,6 @@
 'use strict';
 
 var assign = Object.assign;
-var PropTypes = require('prop-types');
 var React = require('react');
 var ReactART = require('react-art');
 
@@ -41,16 +40,6 @@ var Path = ReactART.Path;
 var Rectangle = createReactClass({
   displayName: 'Rectangle',
 
-  propTypes: {
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired,
-    radius: PropTypes.number,
-    radiusTopLeft: PropTypes.number,
-    radiusTopRight: PropTypes.number,
-    radiusBottomRight: PropTypes.number,
-    radiusBottomLeft: PropTypes.number,
-  },
-
   render: function render() {
     var width = this.props.width;
     var height = this.props.height;

diff --git a/packages/react-art/npm/Wedge.js b/packages/react-art/npm/Wedge.js
@@ -21,7 +21,6 @@
 'use strict';
 
 var assign = Object.assign;
-var PropTypes = require('prop-types');
 var React = require('react');
 var ReactART = require('react-art');
 
@@ -37,13 +36,6 @@ var Path = ReactART.Path;
 var Wedge = createReactClass({
   displayName: 'Wedge',
 
-  propTypes: {
-    outerRadius: PropTypes.number.isRequired,
-    startAngle: PropTypes.number.isRequired,
-    endAngle: PropTypes.number.isRequired,
-    innerRadius: PropTypes.number,
-  },
-
   circleRadians: Math.PI * 2,
 
   radiansPerDegree: Math.PI / 180,

diff --git a/packages/react-art/src/__tests__/ReactART-test.js b/packages/react-art/src/__tests__/ReactART-test.js
@@ -456,18 +456,6 @@ describe('ReactARTComponents', () => {
     expect(circle.toJSON()).toMatchSnapshot();
   });
 
-  it('should warn if radius is missing on a Circle component', () => {
-    expect(() =>
-      ReactTestRenderer.create(
-        <Circle stroke="green" strokeWidth={3} fill="blue" />,
-      ),
-    ).toErrorDev(
-      'Warning: Failed prop type: The prop `radius` is marked as required in `Circle`, ' +
-        'but its value is `undefined`.' +
-        '\n    in Circle (at **)',
-    );
-  });
-
   it('should generate a <Shape> with props for drawing the Rectangle', () => {
     const rectangle = ReactTestRenderer.create(
       <Rectangle width={50} height={50} stroke="green" fill="blue" />,
@@ -529,19 +517,6 @@ describe('ReactARTComponents', () => {
     expect(rectangle.toJSON()).toMatchSnapshot();
   });
 
-  it('should warn if width/height is missing on a Rectangle component', () => {
-    expect(() =>
-      ReactTestRenderer.create(<Rectangle stroke="green" fill="blue" />),
-    ).toErrorDev([
-      'Warning: Failed prop type: The prop `width` is marked as required in `Rectangle`, ' +
-        'but its value is `undefined`.' +
-        '\n    in Rectangle (at **)',
-      'Warning: Failed prop type: The prop `height` is marked as required in `Rectangle`, ' +
-        'but its value is `undefined`.' +
-        '\n    in Rectangle (at **)',
-    ]);
-  });
-
   it('should generate a <Shape> with props for drawing the Wedge', () => {
     const wedge = ReactTestRenderer.create(
       <Wedge outerRadius={50} startAngle={0} endAngle={360} fill="blue" />,
@@ -555,18 +530,4 @@ describe('ReactARTComponents', () => {
     );
     expect(wedge.toJSON()).toBeNull();
   });
-
-  it('should warn if outerRadius/startAngle/endAngle is missing on a Wedge component', () => {
-    expect(() => ReactTestRenderer.create(<Wedge fill="blue" />)).toErrorDev([
-      'Warning: Failed prop type: The prop `outerRadius` is marked as required in `Wedge`, ' +
-        'but its value is `undefined`.' +
-        '\n    in Wedge (at **)',
-      'Warning: Failed prop type: The prop `startAngle` is marked as required in `Wedge`, ' +
-        'but its value is `undefined`.' +
-        '\n    in Wedge (at **)',
-      'Warning: Failed prop type: The prop `endAngle` is marked as required in `Wedge`, ' +
-        'but its value is `undefined`.' +
-        '\n    in Wedge (at **)',
-    ]);
-  });
 });
diff --git a/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js b/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js
@@ -429,14 +429,11 @@ describe('ReactFunctionComponent', () => {
     );
   });
 
-  // TODO: change this test after we deprecate default props support
-  // for function components
-  it('should support default props and prop types', async () => {
+  it('should support default props', async () => {
     function Child(props) {
       return <div>{props.test}</div>;
     }
     Child.defaultProps = {test: 2};
-    Child.propTypes = {test: PropTypes.string};
 
     await expect(async () => {
       const container = document.createElement('div');
@@ -447,9 +444,6 @@ describe('ReactFunctionComponent', () => {
       });
     }).toErrorDev([
       'Warning: Child: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.',
-      'Warning: Failed prop type: Invalid prop `test` of type `number` ' +
-        'supplied to `Child`, expected `string`.\n' +
-        '    in Child (at **)',
     ]);
   });
 

diff --git a/packages/react/src/__tests__/ReactElementClone-test.js b/packages/react/src/__tests__/ReactElementClone-test.js
@@ -10,7 +10,6 @@
 'use strict';
 
 let act;
-let PropTypes;
 let React;
 let ReactDOMClient;
 
@@ -20,7 +19,6 @@ describe('ReactElementClone', () => {
   beforeEach(() => {
     act = require('internal-test-utils').act;
 
-    PropTypes = require('prop-types');
     React = require('react');
     ReactDOMClient = require('react-dom/client');
 
@@ -329,41 +327,6 @@ describe('ReactElementClone', () => {
     React.cloneElement(<div />, null, [{}, {}]);
   });
 
-  it('should check declared prop types after clone', async () => {
-    class Component extends React.Component {
-      static propTypes = {
-        color: PropTypes.string.isRequired,
-      };
-      render() {
-        return React.createElement('div', null, 'My color is ' + this.color);
-      }
-    }
-    class Parent extends React.Component {
-      render() {
-        return React.cloneElement(this.props.child, {color: 123});
-      }
-    }
-    class GrandParent extends React.Component {
-      render() {
-        return React.createElement(Parent, {
-          child: React.createElement(Component, {color: 'red'}),
-        });
-      }
-    }
-    const root = ReactDOMClient.createRoot(document.createElement('div'));
-    await expect(
-      async () =>
-        await act(() => root.render(React.createElement(GrandParent))),
-    ).toErrorDev(
-      'Warning: Failed prop type: ' +
-        'Invalid prop `color` of type `number` supplied to `Component`, ' +
-        'expected `string`.\n' +
-        '    in Component (at **)\n' +
-        '    in Parent (at **)\n' +
-        '    in GrandParent',
-    );
-  });
-
   it('should ignore key and ref warning getters', () => {
     const elementA = React.createElement('div');
     const elementB = React.cloneElement(elementA, elementA.props);

diff --git a/packages/react/src/__tests__/ReactElementValidator-test.internal.js b/packages/react/src/__tests__/ReactElementValidator-test.internal.js
@@ -15,7 +15,6 @@
 // that do use JSX syntax. We should port them to React.createElement, and also
 // confirm there's a corresponding test that uses JSX syntax.
 
-let PropTypes;
 let React;
 let ReactDOMClient;
 let act;
@@ -28,7 +27,6 @@ describe('ReactElementValidator', () => {
   beforeEach(() => {
     jest.resetModules();
 
-    PropTypes = require('prop-types');
     ReactFeatureFlags = require('shared/ReactFeatureFlags');
     ReactFeatureFlags.replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
     React = require('react');
@@ -221,26 +219,19 @@ describe('ReactElementValidator', () => {
     React.createElement(ComponentClass, null, [{}, {}]);
   });
 
-  it('should give context for PropType errors in nested components.', async () => {
-    // In this test, we're making sure that if a proptype error is found in a
-    // component, we give a small hint as to which parent instantiated that
-    // component as per warnings about key usage in ReactElementValidator.
-    function MyComp(props) {
-      return React.createElement('div', null, 'My color is ' + props.color);
+  it('should give context for errors in nested components.', async () => {
+    function MyComp() {
+      return [React.createElement('div')];
     }
-    MyComp.propTypes = {
-      color: PropTypes.string,
-    };
     function ParentComp() {
-      return React.createElement(MyComp, {color: 123});
+      return React.createElement(MyComp);
     }
     await expect(async () => {
       const root = ReactDOMClient.createRoot(document.createElement('div'));
       await act(() => root.render(React.createElement(ParentComp)));
     }).toErrorDev(
-      'Warning: Failed prop type: ' +
-        'Invalid prop `color` of type `number` supplied to `MyComp`, ' +
-        'expected `string`.\n' +
+      'Each child in a list should have a unique "key" prop. ' +
+        'See https://reactjs.org/link/warning-keys for more information.\n' +
         '    in MyComp (at **)\n' +
         '    in ParentComp (at **)',
     );
@@ -328,125 +319,6 @@ describe('ReactElementValidator', () => {
     ]);
   });
 
-  it('should check default prop values', async () => {
-    class Component extends React.Component {
-      static propTypes = {prop: PropTypes.string.isRequired};
-      static defaultProps = {prop: null};
-      render() {
-        return React.createElement('span', null, this.props.prop);
-      }
-    }
-
-    await expect(async () => {
-      const root = ReactDOMClient.createRoot(document.createElement('div'));
-      await act(() => root.render(React.createElement(Component)));
-    }).toErrorDev(
-      'Warning: Failed prop type: The prop `prop` is marked as required in ' +
-        '`Component`, but its value is `null`.\n' +
-        '    in Component',
-    );
-  });
-
-  it('should not check the default for explicit null', async () => {
-    class Component extends React.Component {
-      static propTypes = {prop: PropTypes.string.isRequired};
-      static defaultProps = {prop: 'text'};
-      render() {
-        return React.createElement('span', null, this.props.prop);
-      }
-    }
-
-    await expect(async () => {
-      const root = ReactDOMClient.createRoot(document.createElement('div'));
-      await act(() =>
-        root.render(React.createElement(Component, {prop: null})),
-      );
-    }).toErrorDev(
-      'Warning: Failed prop type: The prop `prop` is marked as required in ' +
-        '`Component`, but its value is `null`.\n' +
-        '    in Component',
-    );
-  });
-
-  it('should check declared prop types', async () => {
-    class Component extends React.Component {
-      static propTypes = {
-        prop: PropTypes.string.isRequired,
-      };
-      render() {
-        return React.createElement('span', null, this.props.prop);
-      }
-    }
-
-    const root = ReactDOMClient.createRoot(document.createElement('div'));
-    await expect(async () => {
-      await act(() => root.render(React.createElement(Component)));
-      await act(() => root.render(React.createElement(Component, {prop: 42})));
-    }).toErrorDev([
-      'Warning: Failed prop type: ' +
-        'The prop `prop` is marked as required in `Component`, but its value ' +
-        'is `undefined`.\n' +
-        '    in Component',
-      'Warning: Failed prop type: ' +
-        'Invalid prop `prop` of type `number` supplied to ' +
-        '`Component`, expected `string`.\n' +
-        '    in Component',
-    ]);
-
-    // Should not error for strings
-    await act(() =>
-      root.render(React.createElement(Component, {prop: 'string'})),
-    );
-  });
-
-  it('should warn if a PropType creator is used as a PropType', async () => {
-    class Component extends React.Component {
-      static propTypes = {
-        myProp: PropTypes.shape,
-      };
-      render() {
-        return React.createElement('span', null, this.props.myProp.value);
-      }
-    }
-
-    await expect(async () => {
-      const root = ReactDOMClient.createRoot(document.createElement('div'));
-      await act(() =>
-        root.render(React.createElement(Component, {myProp: {value: 'hi'}})),
-      );
-    }).toErrorDev(
-      'Warning: Component: type specification of prop `myProp` is invalid; ' +
-        'the type checker function must return `null` or an `Error` but ' +
-        'returned a function. You may have forgotten to pass an argument to ' +
-        'the type checker creator (arrayOf, instanceOf, objectOf, oneOf, ' +
-        'oneOfType, and shape all require an argument).',
-    );
-  });
-
-  it('should warn if component declares PropTypes instead of propTypes', async () => {
-    class MisspelledPropTypesComponent extends React.Component {
-      static PropTypes = {
-        prop: PropTypes.string,
-      };
-      render() {
-        return React.createElement('span', null, this.props.prop);
-      }
-    }
-
-    await expect(async () => {
-      const root = ReactDOMClient.createRoot(document.createElement('div'));
-      await act(() =>
-        root.render(
-          React.createElement(MisspelledPropTypesComponent, {prop: 'Hi'}),
-        ),
-      );
-    }).toErrorDev(
-      'Warning: Component MisspelledPropTypesComponent declared `PropTypes` ' +
-        'instead of `propTypes`. Did you misspell the property assignment?',
-      {withoutStack: true},
-    );
-  });
-
   it('warns for fragments with illegal attributes', async () => {
     class Foo extends React.Component {
       render() {