Support ForwardRef type of work in TestRenderer (#12392)

* Support ForwardRef type of work in TestRenderer and ShallowRenderer.
* Release script now updates inter-package dependencies too (e.g. react-test-renderer depends on react-is).

Author: jquense

packages/react-is/src/ReactIs.js

@@ -34,7 +34,7 @@ export function typeOf(object: any) {
           case REACT_STRICT_MODE_TYPE:
             return type;
           default:
-            const $$typeofType = type.$$typeof;
+            const $$typeofType = type && type.$$typeof;
 
             switch ($$typeofType) {
               case REACT_CONTEXT_TYPE:

packages/react-test-renderer/package.json

@@ -4,11 +4,7 @@
   "description": "React package for snapshot testing.",
   "main": "index.js",
   "repository": "facebook/react",
-  "keywords": [
-    "react",
-    "react-native",
-    "react-testing"
-  ],
+  "keywords": ["react", "react-native", "react-testing"],
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/facebook/react/issues"
@@ -17,16 +13,11 @@
   "dependencies": {
     "fbjs": "^0.8.16",
     "object-assign": "^4.1.1",
-    "prop-types": "^15.6.0"
+    "prop-types": "^15.6.0",
+    "react-is": "^16.3.0-alpha.2"
   },
   "peerDependencies": {
     "react": "^16.0.0 || 16.3.0-alpha.2"
   },
-  "files": [
-    "LICENSE",
-    "README.md",
-    "index.js",
-    "shallow.js",
-    "cjs/"
-  ]
+  "files": ["LICENSE", "README.md", "index.js", "shallow.js", "cjs/"]
 }

packages/react-test-renderer/src/ReactShallowRenderer.js

@@ -7,6 +7,7 @@
  */
 
 import React from 'react';
+import {isForwardRef} from 'react-is';
 import {warnAboutDeprecatedLifecycles} from 'shared/ReactFeatureFlags';
 import describeComponentFrame from 'shared/describeComponentFrame';
 import getComponentName from 'shared/getComponentName';
@@ -77,7 +78,7 @@ class ReactShallowRenderer {
       element.type,
     );
     invariant(
-      typeof element.type === 'function',
+      isForwardRef(element) || typeof element.type === 'function',
       'ReactShallowRenderer render(): Shallow rendering works only with custom ' +
         'components, but the provided element type was `%s`.',
       Array.isArray(element.type)
@@ -96,7 +97,9 @@ class ReactShallowRenderer {
     if (this._instance) {
       this._updateClassComponent(element, this._context);
     } else {
-      if (shouldConstruct(element.type)) {
+      if (isForwardRef(element)) {
+        this._rendered = element.type.render(element.props, element.ref);
+      } else if (shouldConstruct(element.type)) {
         this._instance = new element.type(
           element.props,
           this._context,

packages/react-test-renderer/src/ReactTestRenderer.js

@@ -25,6 +25,7 @@ import {
   ContextConsumer,
   ContextProvider,
   Mode,
+  ForwardRef,
 } from 'shared/ReactTypeOfWork';
 import invariant from 'fbjs/lib/invariant';
 
@@ -372,6 +373,7 @@ function toTree(node: ?Fiber) {
     case ContextProvider:
     case ContextConsumer:
     case Mode:
+    case ForwardRef:
       return childrenToTree(node.child);
     default:
       invariant(
@@ -472,6 +474,7 @@ class ReactTestInstance {
         case ContextProvider:
         case ContextConsumer:
         case Mode:
+        case ForwardRef:
           descend = true;
           break;
         default:

packages/react-test-renderer/src/__tests__/ReactShallowRenderer-test.js

@@ -168,6 +168,28 @@ describe('ReactShallowRenderer', () => {
     ]);
   });
 
+  it('should handle ForwardRef', () => {
+    const testRef = React.createRef();
+    const SomeComponent = React.forwardRef((props, ref) => {
+      expect(ref).toEqual(testRef);
+      return (
+        <div>
+          <span className="child1" />
+          <span className="child2" />
+        </div>
+      );
+    });
+
+    const shallowRenderer = createRenderer();
+    const result = shallowRenderer.render(<SomeComponent ref={testRef} />);
+
+    expect(result.type).toBe('div');
+    expect(result.props.children).toEqual([
+      <span className="child1" />,
+      <span className="child2" />,
+    ]);
+  });
+
   it('should enable shouldComponentUpdate to prevent a re-render', () => {
     let renderCounter = 0;
     class SimpleComponent extends React.Component {

packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.internal.js

@@ -404,6 +404,7 @@ describe('ReactTestRenderer', () => {
         log.push('Angry render');
         throw new Error('Please, do not render me.');
       }
+
       componentDidMount() {
         log.push('Angry componentDidMount');
       }
@@ -957,4 +958,46 @@ describe('ReactTestRenderer', () => {
       }),
     );
   });
+
+  it('supports forwardRef', () => {
+    const InnerRefed = React.forwardRef((props, ref) => (
+      <div>
+        <span ref={ref} />
+      </div>
+    ));
+
+    class App extends React.Component {
+      render() {
+        return <InnerRefed ref={r => (this.ref = r)} />;
+      }
+    }
+
+    const renderer = ReactTestRenderer.create(<App />);
+    const tree = renderer.toTree();
+    cleanNodeOrArray(tree);
+
+    expect(prettyFormat(tree)).toEqual(
+      prettyFormat({
+        instance: null,
+        nodeType: 'component',
+        props: {},
+        rendered: {
+          instance: null,
+          nodeType: 'host',
+          props: {},
+          rendered: [
+            {
+              instance: null,
+              nodeType: 'host',
+              props: {},
+              rendered: [],
+              type: 'span',
+            },
+          ],
+          type: 'div',
+        },
+        type: App,
+      }),
+    );
+  });
 });

scripts/release/build-commands/update-package-versions.js

@@ -78,6 +78,16 @@ const update = async ({cwd, dry, packages, version}) => {
         if (prerelease) {
           json.peerDependencies.react += ` || ${version}`;
         }
+
+        // Update inter-package dependencies as well.
+        // e.g. react-test-renderer depends on react-is
+        if (json.dependencies) {
+          Object.keys(json.dependencies).forEach(dependency => {
+            if (packages.indexOf(dependency) >= 0) {
+              json.dependencies[dependency] = `^${version}`;
+            }
+          });
+        }
       }
 
       await writeJson(path, json, {spaces: 2});