chore(dependencies): remove prop-types (algolia#4801)

* refactor(ts): migrate geo components * update snapshots * chore(deps): move prop-types to devDep * chore(test): cast preact-friendly enzyme in one spot * chore(deps): remove prop-types completely
7Mat7 · Jun 30, 2021 · 2f5af95 · 2f5af95
1 parent d6b6634
commit 2f5af95
Show file tree

Hide file tree

Showing 17 changed files with 147 additions and 211 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -27,13 +27,6 @@ module.exports = api => {
   const buildPlugins = clean([
     '@babel/plugin-proposal-class-properties',
     '@babel/plugin-transform-react-constant-elements',
-    [
-      'babel-plugin-transform-react-remove-prop-types',
-      {
-        mode: 'remove',
-        removeImport: true,
-      },
-    ],
     'babel-plugin-transform-react-pure-class-to-function',
     wrapWarningWithDevCheck,
     (isCJS || isES) && [

diff --git a/package.json b/package.json
@@ -59,7 +59,6 @@
     "events": "^1.1.0",
     "hogan.js": "^3.0.2",
     "preact": "^10.0.0",
-    "prop-types": "^15.5.10",
     "qs": "^6.5.1"
   },
   "devDependencies": {
@@ -102,7 +101,6 @@
     "babel-plugin-inline-replace-variables": "1.3.1",
     "babel-plugin-polyfill-es-shims": "0.0.7",
     "babel-plugin-transform-react-pure-class-to-function": "1.0.1",
-    "babel-plugin-transform-react-remove-prop-types": "0.4.24",
     "bundlesize": "0.18.0",
     "conventional-changelog-cli": "2.0.31",
     "doctoc": "1.4.0",

diff --git a/src/components/ClearRefinements/__tests__/ClearRefinements-test.tsx b/src/components/ClearRefinements/__tests__/ClearRefinements-test.tsx
@@ -2,8 +2,7 @@
 
 import { h } from 'preact';
 import ClearRefinements from '../ClearRefinements';
-import { mount } from 'enzyme';
-import { ReactElementLike } from 'prop-types';
+import { mount } from '../../../../test/utils/enzyme';
 
 describe('ClearRefinements', () => {
   const defaultProps = {
@@ -23,18 +22,14 @@ describe('ClearRefinements', () => {
   };
 
   it('should render <ClearRefinements />', () => {
-    const wrapper = mount(
-      (<ClearRefinements {...defaultProps} />) as ReactElementLike
-    );
+    const wrapper = mount(<ClearRefinements {...defaultProps} />);
 
     expect(wrapper).toMatchSnapshot();
   });
 
   it('should render <ClearRefinements /> with a specific class when no refinements', () => {
     const wrapper = mount(
-      (
-        <ClearRefinements {...defaultProps} hasRefinements={false} />
-      ) as ReactElementLike
+      <ClearRefinements {...defaultProps} hasRefinements={false} />
     );
 
     expect(wrapper).toMatchSnapshot();

diff --git a/src/components/GeoSearchControls/__tests__/GeoSearchButton-test.tsx b/src/components/GeoSearchControls/__tests__/GeoSearchButton-test.tsx
@@ -1,9 +1,8 @@
 /** @jsx h */
 
 import { h } from 'preact';
-import { shallow } from 'enzyme';
+import { shallow } from '../../../../test/utils/enzyme';
 import GeoSearchButton from '../GeoSearchButton';
-import { ReactElementLike } from 'prop-types';
 
 describe('GeoSearchButton', () => {
   const defaultProps = {
@@ -17,11 +16,9 @@ describe('GeoSearchButton', () => {
     };
 
     const wrapper = shallow(
-      (
-        <GeoSearchButton {...props}>
-          Clear the current map refinement
-        </GeoSearchButton>
-      ) as ReactElementLike
+      <GeoSearchButton {...props}>
+        Clear the current map refinement
+      </GeoSearchButton>
     );
 
     expect(wrapper).toMatchSnapshot();
@@ -34,11 +31,9 @@ describe('GeoSearchButton', () => {
     };
 
     const wrapper = shallow(
-      (
-        <GeoSearchButton {...props}>
-          Clear the current map refinement
-        </GeoSearchButton>
-      ) as ReactElementLike
+      <GeoSearchButton {...props}>
+        Clear the current map refinement
+      </GeoSearchButton>
     );
 
     expect(wrapper).toMatchSnapshot();
@@ -51,11 +46,9 @@ describe('GeoSearchButton', () => {
     };
 
     const wrapper = shallow(
-      (
-        <GeoSearchButton {...props}>
-          Clear the current map refinement
-        </GeoSearchButton>
-      ) as ReactElementLike
+      <GeoSearchButton {...props}>
+        Clear the current map refinement
+      </GeoSearchButton>
     );
 
     expect(props.onClick).not.toHaveBeenCalled();

diff --git a/src/components/GeoSearchControls/__tests__/GeoSearchToggle-test.tsx b/src/components/GeoSearchControls/__tests__/GeoSearchToggle-test.tsx
@@ -1,9 +1,8 @@
 /** @jsx h */
 
 import { h } from 'preact';
-import { shallow } from 'enzyme';
+import { shallow } from '../../../../test/utils/enzyme';
 import GeoSearchToggle from '../GeoSearchToggle';
-import { ReactElementLike } from 'prop-types';
 
 describe('GeoSearchToggle', () => {
   const defaultProps = {
@@ -19,11 +18,9 @@ describe('GeoSearchToggle', () => {
     };
 
     const wrapper = shallow(
-      (
-        <GeoSearchToggle {...props}>
-          Clear the current map refinement
-        </GeoSearchToggle>
-      ) as ReactElementLike
+      <GeoSearchToggle {...props}>
+        Clear the current map refinement
+      </GeoSearchToggle>
     );
 
     expect(wrapper).toMatchSnapshot();
@@ -36,11 +33,9 @@ describe('GeoSearchToggle', () => {
     };
 
     const wrapper = shallow(
-      (
-        <GeoSearchToggle {...props}>
-          Clear the current map refinement
-        </GeoSearchToggle>
-      ) as ReactElementLike
+      <GeoSearchToggle {...props}>
+        Clear the current map refinement
+      </GeoSearchToggle>
     );
 
     expect(wrapper).toMatchSnapshot();
@@ -53,11 +48,9 @@ describe('GeoSearchToggle', () => {
     };
 
     const wrapper = shallow(
-      (
-        <GeoSearchToggle {...props}>
-          Clear the current map refinement
-        </GeoSearchToggle>
-      ) as ReactElementLike
+      <GeoSearchToggle {...props}>
+        Clear the current map refinement
+      </GeoSearchToggle>
     );
 
     expect(props.onToggle).not.toHaveBeenCalled();

diff --git a/src/components/Hits/__tests__/Hits-test.tsx b/src/components/Hits/__tests__/Hits-test.tsx
@@ -1,12 +1,11 @@
 /** @jsx h */
 
 import { h } from 'preact';
-import { shallow, mount } from 'enzyme';
+import { shallow, mount } from '../../../../test/utils/enzyme';
 import { highlight } from '../../../helpers';
 import { TAG_REPLACEMENT } from '../../../lib/utils';
 import Template from '../../Template/Template';
 import Hits, { HitsProps } from '../Hits';
-import { ReactElementLike } from 'prop-types';
 import { createSingleSearchResponse } from '../../../../test/mock/createAPIResponse';
 import { SearchParameters, SearchResults } from 'algoliasearch-helper';
 
@@ -25,7 +24,7 @@ describe('Hits', () => {
       ...extraProps,
     };
 
-    return shallow((<Hits {...props} />) as ReactElementLike);
+    return shallow(<Hits {...props} />);
   }
 
   describe('no results', () => {
@@ -250,7 +249,7 @@ describe('Hits', () => {
         cssClasses,
       };
 
-      const wrapper = mount((<Hits {...props} />) as ReactElementLike);
+      const wrapper = mount(<Hits {...props} />);
 
       expect(wrapper).toMatchSnapshot();
     });
@@ -301,7 +300,7 @@ describe('Hits', () => {
         cssClasses,
       };
 
-      const wrapper = mount((<Hits {...props} />) as ReactElementLike);
+      const wrapper = mount(<Hits {...props} />);
 
       expect(wrapper).toMatchSnapshot();
     });

diff --git a/src/components/MenuSelect/__tests__/MenuSelect-test.tsx b/src/components/MenuSelect/__tests__/MenuSelect-test.tsx
@@ -2,9 +2,8 @@
 
 import { h } from 'preact';
 import MenuSelect from '../MenuSelect';
-import { mount } from 'enzyme';
+import { mount } from '../../../../test/utils/enzyme';
 import defaultTemplates from '../../../widgets/menu-select/defaultTemplates';
-import { ReactElementLike } from 'prop-types';
 
 describe('MenuSelect', () => {
   const cssClasses = {
@@ -25,7 +24,7 @@ describe('MenuSelect', () => {
       cssClasses,
     };
 
-    const wrapper = mount((<MenuSelect {...props} />) as ReactElementLike);
+    const wrapper = mount(<MenuSelect {...props} />);
 
     expect(wrapper).toMatchSnapshot();
   });
@@ -38,7 +37,7 @@ describe('MenuSelect', () => {
       cssClasses,
     };
 
-    const wrapper = mount((<MenuSelect {...props} />) as ReactElementLike);
+    const wrapper = mount(<MenuSelect {...props} />);
 
     expect(wrapper).toMatchSnapshot();
   });
@@ -59,7 +58,7 @@ describe('MenuSelect', () => {
       cssClasses,
     };
 
-    const wrapper = mount((<MenuSelect {...props} />) as ReactElementLike);
+    const wrapper = mount(<MenuSelect {...props} />);
 
     expect(wrapper).toMatchSnapshot();
   });

diff --git a/src/components/Pagination/__tests__/Pagination-test.tsx b/src/components/Pagination/__tests__/Pagination-test.tsx
@@ -1,10 +1,9 @@
 /** @jsx h */
 
 import { h } from 'preact';
-import { mount } from 'enzyme';
+import { mount } from '../../../../test/utils/enzyme';
 import Pagination, { PaginationProps } from '../Pagination';
 import Paginator from '../../../connectors/pagination/Paginator';
-import { ReactElementLike } from 'prop-types';
 
 describe('Pagination', () => {
   const pager = new Paginator({
@@ -38,47 +37,39 @@ describe('Pagination', () => {
   };
 
   it('should render five elements', () => {
-    const wrapper = mount(
-      (<Pagination {...defaultProps} />) as ReactElementLike
-    );
+    const wrapper = mount(<Pagination {...defaultProps} />);
 
     expect(wrapper).toMatchSnapshot();
   });
 
   it('should display the first/last link', () => {
-    const wrapper = mount(
-      (<Pagination {...defaultProps} showFirst showLast />) as ReactElementLike
-    );
+    const wrapper = mount(<Pagination {...defaultProps} showFirst showLast />);
 
     expect(wrapper.find('.firstPageItem')).toHaveLength(1);
     expect(wrapper.find('.lastPageItem')).toHaveLength(1);
     expect(wrapper).toMatchSnapshot();
   });
 
   it('should add the noRefinement CSS class with a single page', () => {
-    const wrapper = mount(
-      (<Pagination {...defaultProps} nbPages={1} />) as ReactElementLike
-    );
+    const wrapper = mount(<Pagination {...defaultProps} nbPages={1} />);
 
     expect(wrapper.find('.noRefinementRoot')).toHaveLength(1);
     expect(wrapper).toMatchSnapshot();
   });
 
   it('should disable last page if already on it', () => {
     const wrapper = mount(
-      (
-        <Pagination
-          {...defaultProps}
-          showFirst
-          showLast
-          showPrevious
-          showNext
-          pages={[13, 14, 15, 16, 17, 18, 19]}
-          currentPage={19}
-          isFirstPage={false}
-          isLastPage={true}
-        />
-      ) as ReactElementLike
+      <Pagination
+        {...defaultProps}
+        showFirst
+        showLast
+        showPrevious
+        showNext
+        pages={[13, 14, 15, 16, 17, 18, 19]}
+        currentPage={19}
+        isFirstPage={false}
+        isLastPage={true}
+      />
     );
 
     expect(wrapper.find('.lastPageItem').hasClass('disabledItem')).toBe(true);
@@ -114,20 +105,18 @@ describe('Pagination', () => {
       padding: 3,
     });
     const wrapper = mount(
-      (
-        <Pagination
-          {...defaultProps}
-          showFirst
-          showLast
-          showPrevious
-          showNext
-          currentPage={0}
-          nbPages={0}
-          pages={localPager.pages()}
-          isFirstPage={localPager.isFirstPage()}
-          isLastPage={localPager.isLastPage()}
-        />
-      ) as ReactElementLike
+      <Pagination
+        {...defaultProps}
+        showFirst
+        showLast
+        showPrevious
+        showNext
+        currentPage={0}
+        nbPages={0}
+        pages={localPager.pages()}
+        isFirstPage={localPager.isFirstPage()}
+        isLastPage={localPager.isLastPage()}
+      />
     );
 
     expect(wrapper).toMatchSnapshot();

diff --git a/src/components/RangeInput/__tests__/RangeInput-test.tsx b/src/components/RangeInput/__tests__/RangeInput-test.tsx
@@ -1,10 +1,9 @@
 /** @jsx h */
 
 import { h } from 'preact';
-import { shallow } from 'enzyme';
+import { shallow } from '../../../../test/utils/enzyme';
 import { render, fireEvent } from '@testing-library/preact';
 import RangeInput, { RangeInputProps } from '../RangeInput';
-import { ReactElementLike } from 'prop-types';
 
 describe('RangeInput', () => {
   const defaultProps: RangeInputProps = {
@@ -33,7 +32,7 @@ describe('RangeInput', () => {
   };
 
   const shallowRender = (props?: Partial<RangeInputProps>) =>
-    shallow((<RangeInput {...defaultProps} {...props} />) as ReactElementLike);
+    shallow(<RangeInput {...defaultProps} {...props} />);
 
   it('expect to render', () => {
     const component = shallowRender();