[enzyme-adapter-react-16] [fix] ensure the correct displayName for `m…

…emo` components. Expected results verified with the React Dev Tools.
Kharya1337 · May 25, 2019 · acc6528 · acc6528
1 parent 3ab8035
commit acc6528
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 10 deletions.
diff --git a/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js b/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js
@@ -803,7 +803,10 @@ class ReactSixteenAdapter extends EnzymeAdapter {
     switch ($$typeofType) {
       case ContextConsumer || NaN: return 'ContextConsumer';
       case ContextProvider || NaN: return 'ContextProvider';
-      case Memo || NaN: return displayNameOfNode(type);
+      case Memo || NaN: {
+        const nodeName = displayNameOfNode(node);
+        return typeof nodeName === 'string' ? nodeName : `Memo(${displayNameOfNode(type)})`;
+      }
       case ForwardRef || NaN: {
         if (type.displayName) {
           return type.displayName;

diff --git a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx
@@ -685,7 +685,7 @@ describeWithDOM('mount', () => {
         const Foo = memo(InnerFoo);
 
         const wrapper = mount(<Foo foo="qux" />);
-        expect(wrapper.debug()).to.equal(`<InnerFoo foo="qux">
+        expect(wrapper.debug()).to.equal(`<Memo(InnerFoo) foo="qux">
   <div>
     <InnerComp>
       <div>
@@ -701,7 +701,7 @@ describeWithDOM('mount', () => {
       qux
     </div>
   </div>
-</InnerFoo>`);
+</Memo(InnerFoo)>`);
         expect(wrapper.find('InnerComp')).to.have.lengthOf(1);
         expect(wrapper.find('.bar')).to.have.lengthOf(1);
         expect(wrapper.find('.qoo').text()).to.equal('qux');

diff --git a/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx b/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx
@@ -1664,7 +1664,7 @@ describe('shallow', () => {
 
       it('works with memoizing', () => {
         const wrapper = shallow(<RendersAppMemoized />);
-        expect(wrapper.debug()).to.equal('<App />');
+        expect(wrapper.debug()).to.equal('<AppMemoized />');
         expect(wrapper.dive().debug()).to.equal(`<div>
   Guest
 </div>`);

diff --git a/packages/enzyme-test-suite/test/shared/methods/debug.jsx b/packages/enzyme-test-suite/test/shared/methods/debug.jsx
@@ -71,6 +71,43 @@ export default function describeDebug({
     });
 
     describeIf(is('>= 16.6'), 'React.memo', () => {
+      describe('display names', () => {
+        function SFC() { return null; }
+        function SFCwithDisplayName() { return null; }
+        SFCwithDisplayName.displayName = 'SFC!';
+
+        const SFCMemo = memo && memo(SFC);
+        const SFCwithDisplayNameMemo = memo && memo(SFCwithDisplayName);
+
+        const SFCMemoWithDisplayName = memo && Object.assign(memo(SFC), {
+          displayName: 'SFCMemoWithDisplayName!',
+        });
+        const SFCMemoWitDoubleDisplayName = memo && Object.assign(memo(SFCwithDisplayName), {
+          displayName: 'SFCMemoWitDoubleDisplayName!',
+        });
+
+        it('displays the expected display names', () => {
+          const wrapper = Wrap((
+            <div>
+              <SFC />
+              <SFCwithDisplayName />
+              <SFCMemo />
+              <SFCwithDisplayNameMemo />
+              <SFCMemoWithDisplayName />
+              <SFCMemoWitDoubleDisplayName />
+            </div>
+          ));
+          expect(wrapper.debug()).to.equal(`<div>
+  <SFC />
+  <SFC! />
+  <Memo(SFC) />
+  <Memo(SFC!) />
+  <SFCMemoWithDisplayName! />
+  <SFCMemoWitDoubleDisplayName! />
+</div>`);
+        });
+      });
+
       describe('defaultProps', () => {
         function Add({ a, b, c }) {
           return <div>{String(a)}|{String(b)}|{String(c)}</div>;

diff --git a/packages/enzyme-test-suite/test/shared/methods/find.jsx b/packages/enzyme-test-suite/test/shared/methods/find.jsx
@@ -876,15 +876,15 @@ export default function describeFind({
         const expectedDebug = isShallow
           ? `<div>
   <InnerComp message="Hello" />
-  <InnerComp message="find me?" />
+  <Memo(InnerComp) message="find me?" />
   <div className="bar">
     bar
   </div>
   <div className="qoo">
     qux
   </div>
 </div>`
-          : `<InnerFoo foo="qux">
+          : `<Memo(InnerFoo) foo="qux">
   <div>
     <InnerComp message="Hello">
       <div>
@@ -893,23 +893,24 @@ export default function describeFind({
         </span>
       </div>
     </InnerComp>
-    <InnerComp message="find me?">
+    <Memo(InnerComp) message="find me?">
       <div>
         <span>
           find me?
         </span>
       </div>
-    </InnerComp>
+    </Memo(InnerComp)>
     <div className="bar">
       bar
     </div>
     <div className="qoo">
       qux
     </div>
   </div>
-</InnerFoo>`;
+</Memo(InnerFoo)>`;
         expect(wrapper.debug()).to.equal(expectedDebug);
-        expect(wrapper.find('InnerComp')).to.have.lengthOf(2);
+        expect(wrapper.find('InnerComp')).to.have.lengthOf(1);
+        expect(wrapper.find('Memo(InnerComp)')).to.have.lengthOf(1);
         expect(wrapper.find('.bar')).to.have.lengthOf(1);
         expect(wrapper.find('.qoo').text()).to.equal('qux');
         expect(wrapper.find(InnerMemo)).to.have.lengthOf(1);