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
This commit is contained in:
Sebastian Silbermann 2019-03-15 16:28:34 +01:00 committed by Dan Abramov
parent f1ff4348c1
commit 52c870c8d9
2 changed files with 28 additions and 8 deletions

View File

@ -521,9 +521,7 @@ class ReactShallowRenderer {
if (this._instance) {
this._updateClassComponent(element, this._context);
} else {
if (isForwardRef(element)) {
this._rendered = element.type.render(element.props, element.ref);
} else if (shouldConstruct(element.type)) {
if (shouldConstruct(element.type)) {
this._instance = new element.type(
element.props,
this._context,
@ -565,11 +563,15 @@ class ReactShallowRenderer {
ReactCurrentDispatcher.current = this._dispatcher;
this._prepareToUseHooks(element.type);
try {
this._rendered = element.type.call(
undefined,
element.props,
this._context,
);
if (isForwardRef(element)) {
this._rendered = element.type.render(element.props, element.ref);
} else {
this._rendered = element.type.call(
undefined,
element.props,
this._context,
);
}
} finally {
ReactCurrentDispatcher.current = prevDispatcher;
}

View File

@ -304,4 +304,22 @@ describe('ReactShallowRenderer with hooks', () => {
</div>,
);
});
it('should work with with forwardRef + any hook', () => {
const SomeComponent = React.forwardRef((props, ref) => {
const randomNumberRef = React.useRef({number: Math.random()});
return (
<div ref={ref}>
<p>The random number is: {randomNumberRef.current.number}</p>
</div>
);
});
const shallowRenderer = createRenderer();
let firstResult = shallowRenderer.render(<SomeComponent />);
let secondResult = shallowRenderer.render(<SomeComponent />);
expect(firstResult).toEqual(secondResult);
});
});