[enzyme-adapter-react-{16,16.3}] [fix] forwardRef: respect `.displa…

…yName` on the forwardRef Fixes #1810.
enzymejs · Sep 11, 2018 · dafe529 · dafe529
1 parent ac35c19
commit dafe529
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 0 deletions.
diff --git a/packages/enzyme-adapter-react-16.3/src/ReactSixteenThreeAdapter.js b/packages/enzyme-adapter-react-16.3/src/ReactSixteenThreeAdapter.js
@@ -461,6 +461,9 @@ class ReactSixteenThreeAdapter extends EnzymeAdapter {
       case ContextConsumer || NaN: return 'ContextConsumer';
       case ContextProvider || NaN: return 'ContextProvider';
       case ForwardRef || NaN: {
+        if (type.displayName) {
+          return type.displayName;
+        }
         const name = type.render.displayName || functionName(type.render);
         return name ? `ForwardRef(${name})` : 'ForwardRef';
       }

diff --git a/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js b/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js
@@ -463,6 +463,9 @@ class ReactSixteenAdapter extends EnzymeAdapter {
       case ContextConsumer || NaN: return 'ContextConsumer';
       case ContextProvider || NaN: return 'ContextProvider';
       case ForwardRef || NaN: {
+        if (type.displayName) {
+          return type.displayName;
+        }
         const name = type.render.displayName || functionName(type.render);
         return name ? `ForwardRef(${name})` : 'ForwardRef';
       }

diff --git a/packages/enzyme-test-suite/test/Debug-spec.jsx b/packages/enzyme-test-suite/test/Debug-spec.jsx
@@ -849,14 +849,20 @@ describe('debug', () => {
 
   describeIf(is('>= 16.3'), 'forwarded ref Components', () => {
     let Parent;
+    let ParentOfNamed;
     let SomeComponent;
+    let NamedComponent;
     beforeEach(() => {
       SomeComponent = forwardRef((props, ref) => (
         <div ref={ref}>
           <span className="child1" />
         </div>
       ));
       Parent = () => <span><SomeComponent foo="hello" /></span>;
+
+      NamedComponent = forwardRef((props, ref) => (<div />));
+      NamedComponent.displayName = 'a named forward ref!';
+      ParentOfNamed = () => <NamedComponent />;
     });
 
     it('works with a `mount` wrapper', () => {
@@ -885,5 +891,23 @@ describe('debug', () => {
 </ForwardRef>`
       ));
     });
+
+    it('works with a displayName with shallow', () => {
+      const wrapper = shallow(<ParentOfNamed />);
+      expect(wrapper.debug()).to.equal((
+        `<${NamedComponent.displayName} />`
+      ));
+    });
+
+    it('works with a displayName with mount', () => {
+      const wrapper = mount(<ParentOfNamed />);
+      expect(wrapper.debug()).to.equal((
+        `<ParentOfNamed>
+  <${NamedComponent.displayName}>
+    <div />
+  </${NamedComponent.displayName}>
+</ParentOfNamed>`
+      ));
+    });
   });
 });