Check if WrapperComponent supports forwardedRef prop

eps1lon · ljharb · commit d167e28f7f55 · 2019-09-28T14:11:02.000-07:00
diff --git a/packages/enzyme-adapter-react-13/src/ReactThirteenAdapter.js b/packages/enzyme-adapter-react-13/src/ReactThirteenAdapter.js
@@ -125,13 +125,16 @@ class ReactThirteenAdapter extends EnzymeAdapter {
       render(el, context, callback) {
         if (instance === null) {
           const { ref, type, props } = el;
+          const ReactWrapperComponent = createMountWrapper(el, { ...options, adapter });
+          const refProp = ReactWrapperComponent.supportsForwardedRef === true
+            ? 'forwardedRef'
+            : 'ref';
           const wrapperProps = {
             Component: type,
             props,
             context,
-            ...(ref && { forwardedRef: ref }),
+            ...(ref && { [refProp]: ref }),
           };
-          const ReactWrapperComponent = createMountWrapper(el, { ...options, adapter });
           const wrappedEl = React.createElement(ReactWrapperComponent, wrapperProps);
           instance = React.render(wrappedEl, domNode);
           if (typeof callback === 'function') {
diff --git a/packages/enzyme-adapter-react-14/src/ReactFourteenAdapter.js b/packages/enzyme-adapter-react-14/src/ReactFourteenAdapter.js
@@ -105,14 +105,17 @@ class ReactFourteenAdapter extends EnzymeAdapter {
       render(el, context, callback) {
         if (instance === null) {
           const { type, props, ref } = el;
+          const ReactWrapperComponent = createMountWrapper(el, { ...options, adapter });
+          const refProp = ReactWrapperComponent.supportsForwardedRef === true
+            ? 'forwardedRef'
+            : 'ref';
           const wrapperProps = {
             Component: type,
             wrappingComponentProps: options.wrappingComponentProps,
             props,
             context,
-            ...(ref && { forwardedRef: ref }),
+            ...(ref && { [refProp]: ref }),
           };
-          const ReactWrapperComponent = createMountWrapper(el, { ...options, adapter });
           const wrappedEl = React.createElement(ReactWrapperComponent, wrapperProps);
           instance = ReactDOM.render(wrappedEl, domNode);
           if (typeof callback === 'function') {
diff --git a/packages/enzyme-adapter-react-15.4/src/ReactFifteenFourAdapter.js b/packages/enzyme-adapter-react-15.4/src/ReactFifteenFourAdapter.js
@@ -140,14 +140,17 @@ class ReactFifteenFourAdapter extends EnzymeAdapter {
       render(el, context, callback) {
         if (instance === null) {
           const { type, props, ref } = el;
+          const ReactWrapperComponent = createMountWrapper(el, { ...options, adapter });
+          const refProp = ReactWrapperComponent.supportsForwardedRef === true
+            ? 'forwardedRef'
+            : 'ref';
           const wrapperProps = {
             Component: type,
             wrappingComponentProps: options.wrappingComponentProps,
             props,
             context,
-            ...(ref && { forwardedRef: ref }),
+            ...(ref && { [refProp]: ref }),
           };
-          const ReactWrapperComponent = createMountWrapper(el, { ...options, adapter });
           const wrappedEl = React.createElement(ReactWrapperComponent, wrapperProps);
           instance = ReactDOM.render(wrappedEl, domNode);
           if (typeof callback === 'function') {
diff --git a/packages/enzyme-adapter-react-15/src/ReactFifteenAdapter.js b/packages/enzyme-adapter-react-15/src/ReactFifteenAdapter.js
@@ -140,14 +140,17 @@ class ReactFifteenAdapter extends EnzymeAdapter {
       render(el, context, callback) {
         if (instance === null) {
           const { type, props, ref } = el;
+          const ReactWrapperComponent = createMountWrapper(el, { ...options, adapter });
+          const refProp = ReactWrapperComponent.supportsForwardedRef === true
+            ? 'forwardedRef'
+            : 'ref';
           const wrapperProps = {
             Component: type,
             wrappingComponentProps: options.wrappingComponentProps,
             props,
             context,
-            ...(ref && { forwardedRef: ref }),
+            ...(ref && { [refProp]: ref }),
           };
-          const ReactWrapperComponent = createMountWrapper(el, { ...options, adapter });
           const wrappedEl = React.createElement(ReactWrapperComponent, wrapperProps);
           instance = ReactDOM.render(wrappedEl, domNode);
           if (typeof callback === 'function') {
diff --git a/packages/enzyme-adapter-react-16.1/src/ReactSixteenOneAdapter.js b/packages/enzyme-adapter-react-16.1/src/ReactSixteenOneAdapter.js
@@ -273,14 +273,17 @@ class ReactSixteenOneAdapter extends EnzymeAdapter {
       render(el, context, callback) {
         if (instance === null) {
           const { type, props, ref } = el;
+          const ReactWrapperComponent = createMountWrapper(el, { ...options, adapter });
+          const refProp = ReactWrapperComponent.supportsForwardedRef === true
+            ? 'forwardedRef'
+            : 'ref';
           const wrapperProps = {
             Component: type,
             props,
             wrappingComponentProps,
             context,
-            ...(ref && { forwardedRef: ref }),
+            ...(ref && { [refProp]: ref }),
           };
-          const ReactWrapperComponent = createMountWrapper(el, { ...options, adapter });
           const wrappedEl = React.createElement(ReactWrapperComponent, wrapperProps);
           instance = hydrateIn
             ? ReactDOM.hydrate(wrappedEl, domNode)
diff --git a/packages/enzyme-adapter-react-16.2/src/ReactSixteenTwoAdapter.js b/packages/enzyme-adapter-react-16.2/src/ReactSixteenTwoAdapter.js
@@ -275,14 +275,17 @@ class ReactSixteenTwoAdapter extends EnzymeAdapter {
       render(el, context, callback) {
         if (instance === null) {
           const { type, props, ref } = el;
+          const ReactWrapperComponent = createMountWrapper(el, { ...options, adapter });
+          const refProp = ReactWrapperComponent.supportsForwardedRef === true
+            ? 'forwardedRef'
+            : 'ref';
           const wrapperProps = {
             Component: type,
             props,
             wrappingComponentProps,
             context,
-            ...(ref && { forwardedRef: ref }),
+            ...(ref && { [refProp]: ref }),
           };
-          const ReactWrapperComponent = createMountWrapper(el, { ...options, adapter });
           const wrappedEl = React.createElement(ReactWrapperComponent, wrapperProps);
           instance = hydrateIn
             ? ReactDOM.hydrate(wrappedEl, domNode)
diff --git a/packages/enzyme-adapter-react-16.3/src/ReactSixteenThreeAdapter.js b/packages/enzyme-adapter-react-16.3/src/ReactSixteenThreeAdapter.js
@@ -294,14 +294,17 @@ class ReactSixteenThreeAdapter extends EnzymeAdapter {
       render(el, context, callback) {
         if (instance === null) {
           const { type, props, ref } = el;
+          const ReactWrapperComponent = createMountWrapper(el, { ...options, adapter });
+          const refProp = ReactWrapperComponent.supportsForwardedRef === true
+            ? 'forwardedRef'
+            : 'ref';
           const wrapperProps = {
             Component: type,
             props,
             wrappingComponentProps,
             context,
-            ...(ref && { forwardedRef: ref }),
+            ...(ref && { [refProp]: ref }),
           };
-          const ReactWrapperComponent = createMountWrapper(el, { ...options, adapter });
           const wrappedEl = React.createElement(ReactWrapperComponent, wrapperProps);
           instance = hydrateIn
             ? ReactDOM.hydrate(wrappedEl, domNode)
diff --git a/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js b/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js
@@ -416,14 +416,17 @@ class ReactSixteenAdapter extends EnzymeAdapter {
         return wrapAct(() => {
           if (instance === null) {
             const { type, props, ref } = el;
+            const ReactWrapperComponent = createMountWrapper(el, { ...options, adapter });
+            const refProp = ReactWrapperComponent.supportsForwardedRef === true
+              ? 'forwardedRef'
+              : 'ref';
             const wrapperProps = {
               Component: type,
               props,
               wrappingComponentProps,
               context,
-              ...(ref && { forwardedRef: ref }),
+              ...(ref && { [refProp]: ref }),
             };
-            const ReactWrapperComponent = createMountWrapper(el, { ...options, adapter });
             const wrappedEl = React.createElement(ReactWrapperComponent, wrapperProps);
             instance = hydrateIn
               ? ReactDOM.hydrate(wrappedEl, domNode)
diff --git a/packages/enzyme-adapter-utils/src/createMountWrapper.jsx b/packages/enzyme-adapter-utils/src/createMountWrapper.jsx
@@ -85,6 +85,7 @@ export default function createMountWrapper(node, options = {}) {
       return component;
     }
   }
+  WrapperComponent.supportsForwardedRef = true;
   WrapperComponent.propTypes = {
     Component: makeValidElementType(adapter).isRequired,
     props: PropTypes.object.isRequired,

Original file line number	Diff line number	Diff line change
`@@ -85,6 +85,7 @@ export default function createMountWrapper(node, options = {}) {`
`85`	`85`	`return component;`
`86`	`86`	`}`
`87`	`87`	`}`
	`88`	`+ WrapperComponent.supportsForwardedRef = true;`
`88`	`89`	`WrapperComponent.propTypes = {`
`89`	`90`	`Component: makeValidElementType(adapter).isRequired,`
`90`	`91`	`props: PropTypes.object.isRequired,`