[enzyme-adapter-utils, enzyme-adapter-react-*] Add support for forwar…

…dRef
enzymejs · Mar 23, 2018 · 006bc35 · 006bc35
1 parent be1f272
commit 006bc35
Show file tree

Hide file tree

Showing 5 changed files with 121 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
@@ -47,6 +47,7 @@ const HostText = 6;
 const Mode = 11;
 const ContextConsumerType = 12;
 const ContextProviderType = 13;
+const ForwardRefType = 14;
 
 function nodeAndSiblingsArray(nodeWithSibling) {
   const array = [];
@@ -133,6 +134,17 @@ function toTree(vnode) {
     case ContextProviderType: // 13
     case ContextConsumerType: // 12
       return childrenToTree(node.child);
+    case ForwardRefType: {
+      return {
+        nodeType: 'function',
+        type: node.type,
+        props: { ...node.memoizedProps },
+        key: ensureKeyOrUndefined(node.key),
+        ref: node.ref,
+        instance: null,
+        rendered: childrenToTree(node.child),
+      };
+    }
     default:
       throw new Error(`Enzyme Internal Error: unknown node with tag ${node.tag}`);
   }

diff --git a/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js b/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js
@@ -47,6 +47,7 @@ const HostText = 6;
 const Mode = 11;
 const ContextConsumerType = 12;
 const ContextProviderType = 13;
+const ForwardRefType = 14;
 
 function nodeAndSiblingsArray(nodeWithSibling) {
   const array = [];
@@ -111,6 +112,7 @@ function toTree(vnode) {
         instance: null,
         rendered: childrenToTree(node.child),
       };
+
     case HostComponent: { // 5
       let renderedNodes = flatten(nodeAndSiblingsArray(node.child).map(toTree));
       if (renderedNodes.length === 0) {
@@ -133,6 +135,17 @@ function toTree(vnode) {
     case ContextProviderType: // 13
     case ContextConsumerType: // 12
       return childrenToTree(node.child);
+    case ForwardRefType: {
+      return {
+        nodeType: 'function',
+        type: node.type,
+        props: { ...node.memoizedProps },
+        key: ensureKeyOrUndefined(node.key),
+        ref: node.ref,
+        instance: null,
+        rendered: childrenToTree(node.child),
+      };
+    }
     default:
       throw new Error(`Enzyme Internal Error: unknown node with tag ${node.tag}`);
   }

diff --git a/packages/enzyme-test-suite/test/Debug-spec.jsx b/packages/enzyme-test-suite/test/Debug-spec.jsx
@@ -14,6 +14,9 @@ import {
 } from 'enzyme/build/Debug';
 
 import './_helpers/setupAdapters';
+import {
+  forwardRef,
+} from './_helpers/react-compat';
 import {
   describeWithDOM,
   describeIf,
@@ -837,4 +840,44 @@ describe('debug', () => {
       ));
     });
   });
+
+  describeIf(is('>= 16.3'), 'forwarded ref Components', () => {
+    let Parent;
+    let SomeComponent;
+    beforeEach(() => {
+      SomeComponent = forwardRef((props, ref) => (
+        <div ref={ref}>
+          <span className="child1" />
+        </div>
+      ));
+      Parent = () => <span><SomeComponent foo="hello" /></span>;
+    });
+
+    it('works with a `mount` wrapper', () => {
+      const wrapper = mount(<Parent foo="hello" />);
+      expect(wrapper.debug()).to.equal((
+        `<Parent foo="hello">
+  <span>
+    <ForwardRef foo="hello">
+      <div>
+        <span className="child1" />
+      </div>
+    </ForwardRef>
+  </span>
+</Parent>`
+      ));
+    });
+
+    it('works with a `mount` `.find` wrapper', () => {
+      const wrapper = mount(<Parent foo="hello" />);
+      const results = wrapper.find(SomeComponent);
+      expect(results.debug()).to.equal((
+        `<ForwardRef foo="hello">
+  <div>
+    <span className="child1" />
+  </div>
+</ForwardRef>`
+      ));
+    });
+  });
 });
diff --git a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx
@@ -23,6 +23,7 @@ import {
   createPortal,
   createRef,
   Fragment,
+  forwardRef,
 } from './_helpers/react-compat';
 import {
   describeWithDOM,
@@ -210,6 +211,45 @@ describeWithDOM('mount', () => {
       expect(wrapper.find('span').text()).to.equal('foo');
     });
 
+    describeIf(is('>= 16.3'), 'forwarded ref Components', () => {
+      wrap().withConsoleThrows().it('should mount without complaint', () => {
+        const SomeComponent = forwardRef((props, ref) => (
+          <div {...props} ref={ref} />
+        ));
+
+        expect(() => mount(<SomeComponent />)).not.to.throw();
+      });
+
+      it('should find elements through forwardedRef elements', () => {
+        const testRef = () => {};
+        const SomeComponent = forwardRef((props, ref) => (
+          <div ref={ref}>
+            <span className="child1" />
+            <span className="child2" />
+          </div>
+        ));
+
+        const wrapper = mount(<div><SomeComponent ref={testRef} /></div>);
+
+        expect(wrapper.find('.child2')).to.have.lengthOf(1);
+      });
+
+      it('should find forwardRef element', () => {
+        const SomeComponent = forwardRef((props, ref) => (
+          <div ref={ref}>
+            <span className="child1" />
+          </div>
+        ));
+        const Parent = () => <span><SomeComponent foo="hello" /></span>;
+
+        const wrapper = mount(<Parent foo="hello" />);
+        const results = wrapper.find(SomeComponent);
+
+        expect(results).to.have.lengthOf(1);
+        expect(results.props()).to.eql({ foo: 'hello' });
+      });
+    });
+
     describeIf(is('> 0.13'), 'stateless function components (SFCs)', () => {
       it('can pass in context', () => {
         const SimpleComponent = (props, context) => (

diff --git a/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx b/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx
@@ -22,6 +22,7 @@ import {
   createContext,
   createRef,
   Fragment,
+  forwardRef,
 } from './_helpers/react-compat';
 import {
   describeIf,
@@ -145,7 +146,19 @@ describe('shallow', () => {
 
       expect(shallow(<Consumes />).find('span')).to.have.lengthOf(1);
       expect(shallow(<Provides />).find(Consumes)).to.have.lengthOf(1);
+    });
+
+    itIf(is('>= 16.3'), 'should find elements through forwarded refs elements', () => {
+      const SomeComponent = forwardRef((props, ref) => (
+        <div ref={ref}>
+          <span className="child1" />
+          <span className="child2" />
+        </div>
+      ));
+
+      const wrapper = shallow(<SomeComponent />);
 
+      expect(wrapper.find('.child2')).to.have.length(1);
     });
 
     describeIf(is('> 0.13'), 'stateless function components', () => {