diff --git a/packages/react-is/src/ReactIs.js b/packages/react-is/src/ReactIs.js index 0265055e020de..cee716e0bfffe 100644 --- a/packages/react-is/src/ReactIs.js +++ b/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: diff --git a/packages/react-test-renderer/package.json b/packages/react-test-renderer/package.json index d88931c1117ca..6f20e76312174 100644 --- a/packages/react-test-renderer/package.json +++ b/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/"] } diff --git a/packages/react-test-renderer/src/ReactShallowRenderer.js b/packages/react-test-renderer/src/ReactShallowRenderer.js index 69859ff562711..b08732e0fd369 100644 --- a/packages/react-test-renderer/src/ReactShallowRenderer.js +++ b/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, diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js index 78215ab08ddf0..625c8e94e3972 100644 --- a/packages/react-test-renderer/src/ReactTestRenderer.js +++ b/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: diff --git a/packages/react-test-renderer/src/__tests__/ReactShallowRenderer-test.js b/packages/react-test-renderer/src/__tests__/ReactShallowRenderer-test.js index 318611db64b41..2bf95824c32a9 100644 --- a/packages/react-test-renderer/src/__tests__/ReactShallowRenderer-test.js +++ b/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 ( +