Preserve ref/key props on getElement

enzymejs · Sep 21, 2017 · 8e48512 · 8e48512
1 parent 3596fd1
commit 8e48512
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 6 deletions.
diff --git a/packages/enzyme-adapter-react-13/src/ReactThirteenAdapter.js b/packages/enzyme-adapter-react-13/src/ReactThirteenAdapter.js
@@ -11,6 +11,7 @@ import {
   assertDomAvailable,
   createRenderWrapper,
   createMountWrapper,
+  propsWithKeysAndRef,
 } from 'enzyme-adapter-utils';
 import mapNativeEventNames from './ReactThirteenMapNativeEventNames';
 import elementToTree from './ReactThirteenElementToTree';
@@ -225,7 +226,7 @@ class ReactThirteenAdapter extends EnzymeAdapter {
   // eslint-disable-next-line class-methods-use-this, no-unused-vars
   nodeToElement(node) {
     if (!node || typeof node !== 'object') return null;
-    return React.createElement(node.type, node.props);
+    return React.createElement(node.type, propsWithKeysAndRef(node));
   }
 
   elementToNode(element) {

diff --git a/packages/enzyme-adapter-react-14/src/ReactFourteenAdapter.js b/packages/enzyme-adapter-react-14/src/ReactFourteenAdapter.js
@@ -14,6 +14,7 @@ import {
   assertDomAvailable,
   createRenderWrapper,
   createMountWrapper,
+  propsWithKeysAndRef,
 } from 'enzyme-adapter-utils';
 
 function typeToNodeType(type) {
@@ -196,7 +197,7 @@ class ReactFifteenAdapter extends EnzymeAdapter {
   // eslint-disable-next-line class-methods-use-this, no-unused-vars
   nodeToElement(node) {
     if (!node || typeof node !== 'object') return null;
-    return React.createElement(node.type, node.props);
+    return React.createElement(node.type, propsWithKeysAndRef(node));
   }
 
   elementToNode(element) {

diff --git a/packages/enzyme-adapter-react-15.4/src/ReactFifteenFourAdapter.js b/packages/enzyme-adapter-react-15.4/src/ReactFifteenFourAdapter.js
@@ -14,6 +14,7 @@ import {
   assertDomAvailable,
   createRenderWrapper,
   createMountWrapper,
+  propsWithKeysAndRef,
 } from 'enzyme-adapter-utils';
 
 function compositeTypeToNodeType(type) {
@@ -226,7 +227,7 @@ class ReactFifteenFourAdapter extends EnzymeAdapter {
   // eslint-disable-next-line class-methods-use-this, no-unused-vars
   nodeToElement(node) {
     if (!node || typeof node !== 'object') return null;
-    return React.createElement(node.type, node.props);
+    return React.createElement(node.type, propsWithKeysAndRef(node));
   }
 
   elementToNode(element) {

diff --git a/packages/enzyme-adapter-react-15/src/ReactFifteenAdapter.js b/packages/enzyme-adapter-react-15/src/ReactFifteenAdapter.js
@@ -15,6 +15,7 @@ import {
   assertDomAvailable,
   createRenderWrapper,
   createMountWrapper,
+  propsWithKeysAndRef,
 } from 'enzyme-adapter-utils';
 
 function compositeTypeToNodeType(type) {
@@ -226,7 +227,7 @@ class ReactFifteenAdapter extends EnzymeAdapter {
   // eslint-disable-next-line class-methods-use-this, no-unused-vars
   nodeToElement(node) {
     if (!node || typeof node !== 'object') return null;
-    return React.createElement(node.type, node.props);
+    return React.createElement(node.type, propsWithKeysAndRef(node));
   }
 
   elementToNode(element) {

diff --git a/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js b/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js
@@ -17,6 +17,7 @@ import {
   withSetStateAllowed,
   createRenderWrapper,
   createMountWrapper,
+  propsWithKeysAndRef,
 } from 'enzyme-adapter-utils';
 
 const HostRoot = 3;
@@ -276,7 +277,7 @@ class ReactSixteenAdapter extends EnzymeAdapter {
   // eslint-disable-next-line class-methods-use-this, no-unused-vars
   nodeToElement(node) {
     if (!node || typeof node !== 'object') return null;
-    return React.createElement(node.type, node.props);
+    return React.createElement(node.type, propsWithKeysAndRef(node));
   }
 
   elementToNode(element) {

diff --git a/packages/enzyme-adapter-utils/src/Utils.js b/packages/enzyme-adapter-utils/src/Utils.js
@@ -117,3 +117,14 @@ export function elementToTree(el) {
     rendered,
   };
 }
+
+export function propsWithKeysAndRef(node) {
+  if (node.ref !== null || node.key !== null) {
+    return {
+      ...node.props,
+      key: node.key,
+      ref: node.ref,
+    };
+  }
+  return node.props;
+}
diff --git a/packages/enzyme-test-suite/package.json b/packages/enzyme-test-suite/package.json
@@ -40,4 +40,4 @@
     "react": "^15.5.0",
     "react-dom": "^15.5.0"
   }
-}
+}
diff --git a/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx b/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx
@@ -2756,6 +2756,32 @@ describe('shallow', () => {
     });
   });
 
+  describe('.getElement()', () => {
+    it('returns nodes with refs as well as well', () => {
+      class Foo extends React.Component {
+        constructor(props) {
+          super(props);
+          this.setRef = this.setRef.bind(this);
+          this.node = null;
+        }
+        setRef(node) {
+          this.node = node;
+        }
+        render() {
+          return (
+            <div>
+              <div ref={this.setRef} className="foo" />
+            </div>
+          );
+        }
+      }
+      const wrapper = shallow(<Foo />);
+      const mockNode = { mock: true };
+      wrapper.find('.foo').getElement().ref(mockNode);
+      expect(wrapper.instance().node).to.equal(mockNode);
+    });
+  });
+
   describe('.debug()', () => {
     it('should pass through to the debugNodes function', () => {
       expect(shallow(<div />).debug()).to.equal('<div />');