Fix shallow renderer not allowing hooks in forwardRef render functions (#15100)
* test: Add test for shallow + forwardRef + hook * fix(react-test-renderer): shallow forwardRef hooks
Sebastian Silbermann committed
Mar 15, 2019 at 16:28 UTC
52c870c8d9e283283f34b6d113e39e4531ce0b1d
2 files changed
+28
-8
packages/react-test-renderer/src/ReactShallowRenderer.js
+10
-8
@@ -521,9 +521,7 @@ class ReactShallowRenderer {
521
if (this._instance) {
522
this._updateClassComponent(element, this._context);
523
} else {
524
- if (isForwardRef(element)) {
525
- this._rendered = element.type.render(element.props, element.ref);
526
- } else if (shouldConstruct(element.type)) {
524
+ if (shouldConstruct(element.type)) {
525
this._instance = new element.type(
526
element.props,
527
this._context,
@@ -565,11 +563,15 @@ class ReactShallowRenderer {
563
ReactCurrentDispatcher.current = this._dispatcher;
564
this._prepareToUseHooks(element.type);
565
try {
568
- this._rendered = element.type.call(
569
- undefined,
570
- element.props,
571
- this._context,
572
- );
566
+ if (isForwardRef(element)) {
567
+ this._rendered = element.type.render(element.props, element.ref);
568
+ } else {
569
+ this._rendered = element.type.call(
570
+ undefined,
571
+ element.props,
572
+ this._context,
573
+ );
574
+ }
575
} finally {
576
ReactCurrentDispatcher.current = prevDispatcher;
577
}
packages/react-test-renderer/src/__tests__/ReactShallowRendererHooks-test.js
+18
@@ -304,4 +304,22 @@ describe('ReactShallowRenderer with hooks', () => {
304
</div>,
305
);
306
});
307
+
308
+ it('should work with with forwardRef + any hook', () => {
309
+ const SomeComponent = React.forwardRef((props, ref) => {
310
+ const randomNumberRef = React.useRef({number: Math.random()});
311
+
312
+ return (
313
+ <div ref={ref}>
314
+ <p>The random number is: {randomNumberRef.current.number}</p>
315
+ </div>
316
+ );
317
+ });
318
+
319
+ const shallowRenderer = createRenderer();
320
+ let firstResult = shallowRenderer.render(<SomeComponent />);
321
+ let secondResult = shallowRenderer.render(<SomeComponent />);
322
+
323
+ expect(firstResult).toEqual(secondResult);
324
+ });
325
});