[FEC-138] React default props codemod tests

packages/codemod/package.json

@@ -34,9 +34,12 @@
   "devDependencies": {
     "@commercetools-frontend/application-components": "workspace:*",
     "@emotion/react": "^11.11.4",
+    "@jest/globals": "29.7.0",
     "@tsconfig/node16": "^16.1.1",
     "@types/glob": "8.1.0",
     "@types/jscodeshift": "0.11.11",
+    "@types/prop-types": "^15.7.5",
+    "prop-types": "15.8.1",
     "rimraf": "5.0.7",
     "typescript": "5.0.4"
   },

packages/codemod/src/transforms/react-default-props-migration.ts

@@ -309,7 +309,10 @@ function extractDefaultPropsFromNode(
   defaultPropsNode: ObjectExpression
 ): TDefaultPropsMap {
   return defaultPropsNode.properties.reduce((acc, prop) => {
-    if (prop.type === 'ObjectProperty' && prop.key.type === 'Identifier') {
+    if (
+      (prop.type === 'ObjectProperty' || prop.type === 'Property') &&
+      prop.key.type === 'Identifier'
+    ) {
       return {
         ...acc,
         [prop.key.name as string]:

packages/codemod/test/__snapshots__/transforms.spec.ts.snap

@@ -1,6 +1,141 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`testing transform "remove-deprecated-modal-level-props" transforms correctly 1`] = `
+exports[`testing transform "react-default-props-migration" transforms correctly: react-default-props/simple-arrow-function.jsx 1`] = `
+"import * as PropTypes from 'prop-types';
+
+const MyComponent = ({ foo = 'bar', ...props }) => {
+  return <div>{foo}</div>;
+};
+MyComponent.propTypes = {
+  foo: PropTypes.string,
+};"
+`;
+
+exports[`testing transform "react-default-props-migration" transforms correctly: react-default-props/simple-arrow-function.tsx 1`] = `
+"type TMyComponentProps = {
+  foo?: string;
+};
+
+const MyComponent = ({ foo = 'bar', ...props }: TMyComponentProps) => {
+  return <div>{foo}</div>;
+};"
+`;
+
+exports[`testing transform "react-default-props-migration" transforms correctly: react-default-props/simple-classic-function.jsx 1`] = `
+"import * as PropTypes from 'prop-types';
+
+function MyComponent({ foo = 'bar', ...props }) {
+  return <div>{foo}</div>;
+}
+MyComponent.propTypes = {
+  foo: PropTypes.string,
+};"
+`;
+
+exports[`testing transform "react-default-props-migration" transforms correctly: react-default-props/simple-classic-function.tsx 1`] = `
+"type TMyComponentProps = {
+  foo?: string;
+};
+
+function MyComponent({ foo = 'bar', ...props }: TMyComponentProps) {
+  return <div>{foo}</div>;
+}"
+`;
+
+exports[`testing transform "react-default-props-migration" transforms correctly: react-default-props/with-already-destructured-props.jsx 1`] = `
+"import * as PropTypes from 'prop-types';
+
+const MyComponent = ({ foo = 'bar', baz, ...props }) => {
+  return (
+    <ul>
+      <li>{foo}</li>
+      <li>{props.bar}</li>
+      <li>{baz}</li>
+    </ul>
+  );
+};
+MyComponent.propTypes = {
+  foo: PropTypes.string,
+  bar: PropTypes.string,
+  baz: PropTypes.string,
+};"
+`;
+
+exports[`testing transform "react-default-props-migration" transforms correctly: react-default-props/with-already-destructured-props.tsx 1`] = `
+"type TMyComponentProps = {
+  foo?: string;
+  bar: string;
+  baz: string;
+};
+
+const MyComponent = ({ foo = 'bar', baz, ...props }: TMyComponentProps) => {
+  return (
+    <ul>
+      <li>{foo}</li>
+      <li>{props.bar}</li>
+      <li>{baz}</li>
+    </ul>
+  );
+};"
+`;
+
+exports[`testing transform "react-default-props-migration" transforms correctly: react-default-props/with-subcomponent.jsx 1`] = `
+"import * as PropTypes from 'prop-types';
+
+function MySubcomponent(props) {
+  return (
+    <ul>
+      <li>{props.foo}</li>
+      <li>{props.bar}</li>
+    </ul>
+  );
+}
+MySubcomponent.propTypes = {
+  foo: PropTypes.string,
+  bar: PropTypes.string,
+};
+
+function MyComponent({ foo = 'bar', ...props }) {
+  return (
+    <div>
+      <MySubcomponent foo={foo} {...props} />
+    </div>
+  );
+}
+MyComponent.propTypes = {
+  foo: PropTypes.string,
+  bar: PropTypes.string,
+};"
+`;
+
+exports[`testing transform "react-default-props-migration" transforms correctly: react-default-props/with-subcomponent.tsx 1`] = `
+"type MySubcomponentProps = {
+  foo: string;
+  bar: string;
+};
+function MySubcomponent(props: MySubcomponentProps) {
+  return (
+    <ul>
+      <li>{props.foo}</li>
+      <li>{props.bar}</li>
+    </ul>
+  );
+}
+
+type TMyComponentProps = {
+  foo?: string;
+  bar: string;
+};
+function MyComponent({ foo = 'bar', ...props }: TMyComponentProps) {
+  return (
+    <div>
+      <MySubcomponent foo={foo} {...props} />
+    </div>
+  );
+}"
+`;
+
+exports[`testing transform "remove-deprecated-modal-level-props" transforms correctly: remove-deprecated-modal-level-props.tsx 1`] = `
 "import {
   InfoModalPage,
   FormModalPage,
@@ -43,9 +178,9 @@ function Modal() {
 export default Modal;"
 `;
 
-exports[`testing transform "rename-js-to-jsx" transforms correctly 1`] = `""`;
+exports[`testing transform "rename-js-to-jsx" transforms correctly: rename-js-to-jsx.js 1`] = `""`;
 
-exports[`testing transform "rename-mod-css-to-module-css" transforms correctly 1`] = `
+exports[`testing transform "rename-mod-css-to-module-css" transforms correctly: rename-mod-css-to-module-css.jsx 1`] = `
 "// eslint-disable-next-line import/extensions, import/no-unresolved, no-unused-vars
 import styles from './styles.module.css';"
 `;

packages/codemod/test/fixtures/react-default-props/simple-arrow-function.jsx

@@ -0,0 +1,11 @@
+import * as PropTypes from 'prop-types';
+
+const MyComponent = (props) => {
+  return <div>{props.foo}</div>;
+};
+MyComponent.defaultProps = {
+  foo: 'bar',
+};
+MyComponent.propTypes = {
+  foo: PropTypes.string,
+};

packages/codemod/test/fixtures/react-default-props/simple-arrow-function.tsx

@@ -0,0 +1,11 @@
+type TMyComponentProps = {
+  foo: string;
+};
+
+const MyComponent = (props: TMyComponentProps) => {
+  return <div>{props.foo}</div>;
+};
+
+MyComponent.defaultProps = {
+  foo: 'bar',
+};

packages/codemod/test/fixtures/react-default-props/simple-classic-function.jsx

@@ -0,0 +1,11 @@
+import * as PropTypes from 'prop-types';
+
+function MyComponent(props) {
+  return <div>{props.foo}</div>;
+}
+MyComponent.defaultProps = {
+  foo: 'bar',
+};
+MyComponent.propTypes = {
+  foo: PropTypes.string,
+};

packages/codemod/test/fixtures/react-default-props/simple-classic-function.tsx

@@ -0,0 +1,11 @@
+type TMyComponentProps = {
+  foo: string;
+};
+
+function MyComponent(props: TMyComponentProps) {
+  return <div>{props.foo}</div>;
+}
+
+MyComponent.defaultProps = {
+  foo: 'bar',
+};

packages/codemod/test/fixtures/react-default-props/with-already-destructured-props.jsx

@@ -0,0 +1,19 @@
+import * as PropTypes from 'prop-types';
+
+const MyComponent = ({ baz, ...props }) => {
+  return (
+    <ul>
+      <li>{props.foo}</li>
+      <li>{props.bar}</li>
+      <li>{baz}</li>
+    </ul>
+  );
+};
+MyComponent.propTypes = {
+  foo: PropTypes.string,
+  bar: PropTypes.string,
+  baz: PropTypes.string,
+};
+MyComponent.defaultProps = {
+  foo: 'bar',
+};

packages/codemod/test/fixtures/react-default-props/with-already-destructured-props.tsx

@@ -0,0 +1,19 @@
+type TMyComponentProps = {
+  foo: string;
+  bar: string;
+  baz: string;
+};
+
+const MyComponent = ({ baz, ...props }: TMyComponentProps) => {
+  return (
+    <ul>
+      <li>{props.foo}</li>
+      <li>{props.bar}</li>
+      <li>{baz}</li>
+    </ul>
+  );
+};
+
+MyComponent.defaultProps = {
+  foo: 'bar',
+};

packages/codemod/test/fixtures/react-default-props/with-subcomponent.jsx

@@ -0,0 +1,29 @@
+import * as PropTypes from 'prop-types';
+
+function MySubcomponent(props) {
+  return (
+    <ul>
+      <li>{props.foo}</li>
+      <li>{props.bar}</li>
+    </ul>
+  );
+}
+MySubcomponent.propTypes = {
+  foo: PropTypes.string,
+  bar: PropTypes.string,
+};
+
+function MyComponent(props) {
+  return (
+    <div>
+      <MySubcomponent {...props} />
+    </div>
+  );
+}
+MyComponent.propTypes = {
+  foo: PropTypes.string,
+  bar: PropTypes.string,
+};
+MyComponent.defaultProps = {
+  foo: 'bar',
+};

packages/codemod/test/fixtures/react-default-props/with-subcomponent.tsx

@@ -0,0 +1,27 @@
+type MySubcomponentProps = {
+  foo: string;
+  bar: string;
+};
+function MySubcomponent(props: MySubcomponentProps) {
+  return (
+    <ul>
+      <li>{props.foo}</li>
+      <li>{props.bar}</li>
+    </ul>
+  );
+}
+
+type TMyComponentProps = {
+  foo: string;
+  bar: string;
+};
+function MyComponent(props: TMyComponentProps) {
+  return (
+    <div>
+      <MySubcomponent {...props} />
+    </div>
+  );
+}
+MyComponent.defaultProps = {
+  foo: 'bar',
+};