[enzyme-adapter-react-16] [fix] shallow renderer for memo does not …

…respect `defaultProps` Workaround for facebook/react#15556. Fixes #2115.
enzymejs · May 2, 2019 · aa9828a · aa9828a
1 parent 3db6013
commit aa9828a
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 7 deletions.
diff --git a/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js b/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js
@@ -501,6 +501,17 @@ class ReactSixteenAdapter extends EnzymeAdapter {
     // Wrap functional components on versions prior to 16.5,
     // to avoid inadvertently pass a `this` instance to it.
     const wrapFunctionalComponent = (Component) => {
+      if (is166 && has(Component, 'defaultProps')) {
+        if (lastComponent !== Component) {
+          wrappedComponent = Object.assign(
+            // eslint-disable-next-line new-cap
+            (props, ...args) => Component({ ...Component.defaultProps, ...props }, ...args),
+            Component,
+          );
+          lastComponent = Component;
+        }
+        return wrappedComponent;
+      }
       if (is165) {
         return Component;
       }

diff --git a/packages/enzyme-test-suite/package.json b/packages/enzyme-test-suite/package.json
@@ -42,9 +42,9 @@
     "object.assign": "^4.1.0",
     "prop-types": "^15.7.2",
     "react-is": "^16.8.6",
-    "semver": "^6.0.0",
-    "sinon-sandbox": "^2.0.0",
-    "sinon": "^5.1.1"
+    "semver": "^5.7.0",
+    "sinon": "^5.1.1",
+    "sinon-sandbox": "^2.0.0"
   },
   "peerDependencies": {
     "react": "^15.5.0",

diff --git a/packages/enzyme-test-suite/test/_helpers/index.jsx b/packages/enzyme-test-suite/test/_helpers/index.jsx
@@ -14,7 +14,7 @@ export function describeIf(test, a, b) {
   if (test) {
     describe(a, b);
   } else {
-    describe.skip(a, b);
+    describe.skip(a);
   }
 }
 
@@ -26,7 +26,9 @@ describeIf.only = (test, a, b) => {
   if (test) {
     describe.only(a, b);
   } else {
-    describe.skip(a, b);
+    describe.only('only:', () => {
+      describe.skip(a);
+    });
   }
 };
 

diff --git a/packages/enzyme-test-suite/test/shared/methods/debug.jsx b/packages/enzyme-test-suite/test/shared/methods/debug.jsx
@@ -4,16 +4,19 @@ import { expect } from 'chai';
 import { debugNodes } from 'enzyme/build/Debug';
 
 import {
+  describeIf,
   itIf,
 } from '../../_helpers';
 import { is } from '../../_helpers/version';
 
 import {
   createClass,
+  memo,
 } from '../../_helpers/react-compat';
 
 export default function describeDebug({
   Wrap,
+  WrapRendered,
   isShallow,
 }) {
   describe('.debug()', () => {
@@ -65,5 +68,49 @@ export default function describeDebug({
         expect(wrapper.debug()).to.equal(debugNodes(wrapper.getNodesInternal()));
       });
     });
+
+    describeIf(is('>= 16.6'), 'React.memo', () => {
+      function Add({ a, b, c }) {
+        return <div>{String(a)}|{String(b)}|{String(c)}</div>;
+      }
+      Add.defaultProps = {
+        b: 2,
+        c: 3,
+      };
+      const MemoAdd = memo(Add);
+
+      it('applies defaultProps to the component', () => {
+        const wrapper = WrapRendered(<Add />);
+        expect(wrapper.debug()).to.equal(`<div>
+  undefined
+  |
+  2
+  |
+  3
+</div>`);
+      });
+
+      it('applies defaultProps to the memoized component', () => {
+        const wrapper = WrapRendered(<MemoAdd />);
+        expect(wrapper.debug()).to.equal(`<div>
+  undefined
+  |
+  2
+  |
+  3
+</div>`);
+      });
+
+      it('applies defaultProps to the memoized component and does not override real props', () => {
+        const wrapper = WrapRendered(<MemoAdd a={10} b={20} />);
+        expect(wrapper.debug()).to.equal(`<div>
+  10
+  |
+  20
+  |
+  3
+</div>`);
+      });
+    });
   });
 }
diff --git a/packages/enzyme-test-suite/test/shared/methods/find.jsx b/packages/enzyme-test-suite/test/shared/methods/find.jsx
@@ -861,7 +861,7 @@ export default function describeFind({
         function InnerComp({ message }) {
           return <div><span>{message}</span></div>;
         }
-        const InnerMemo = React.memo(InnerComp);
+        const InnerMemo = memo(InnerComp);
         const InnerFoo = ({ foo }) => (
           <div>
             <InnerComp message="Hello" />

diff --git a/packages/enzyme-test-suite/test/shared/methods/simulate.jsx b/packages/enzyme-test-suite/test/shared/methods/simulate.jsx
@@ -11,6 +11,10 @@ import {
   REACT16,
 } from '../../_helpers/version';
 
+import {
+  memo,
+} from '../../_helpers/react-compat';
+
 export default function describeSimulate({
   Wrap,
   WrapperName,
@@ -293,7 +297,7 @@ export default function describeSimulate({
         function Child({ onClick }) {
           return <button onClick={onClick} type="button" />;
         }
-        const MemoizedChild = React.memo(Child);
+        const MemoizedChild = memo(Child);
 
         function Parent(props) {
           const { onClick } = props;