Skip to content

Commit 52c870c

Browse files
eps1longaearon
authored andcommitted
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
1 parent f1ff434 commit 52c870c

File tree

2 files changed

+28
-8
lines changed

2 files changed

+28
-8
lines changed

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

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -521,9 +521,7 @@ class ReactShallowRenderer {
521521
if (this._instance) {
522522
this._updateClassComponent(element, this._context);
523523
} 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)) {
527525
this._instance = new element.type(
528526
element.props,
529527
this._context,
@@ -565,11 +563,15 @@ class ReactShallowRenderer {
565563
ReactCurrentDispatcher.current = this._dispatcher;
566564
this._prepareToUseHooks(element.type);
567565
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+
}
573575
} finally {
574576
ReactCurrentDispatcher.current = prevDispatcher;
575577
}

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -304,4 +304,22 @@ describe('ReactShallowRenderer with hooks', () => {
304304
</div>,
305305
);
306306
});
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+
});
307325
});

0 commit comments

Comments
 (0)