useImperativeHandle callback never called (when rendering w/ enzyme)

[rally25rs]

Do you want to request a feature or report a bug?
bug

What is the current behavior?

I have the code:

function Form(props, ref) {

  React.useImperativeHandle(ref, () => {
    debugger;
    return {
      setErrors: () => {},
    };
  });
}

export default React.forwardRef(Form);

When I use the component, the callback passed to useImperativeHandle is never called. (The debugger statement is never hit).

The code that I have using the component is:

import {mount} from 'enzyme';

describe('Form component', () => {
  test('exposes a ref', async () => {
    let formRef;
    mount(<Form ref={ref => (formRef = ref)}>{() => <span>test</span>}</Form>);
    await pause(500); // this is just a setTimeout to give time for the hooks to run.
    expect(formRef.setErrors).toBeDefined();
  });

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

https://codesandbox.io/s/v8rqy75mn5

What is the expected behavior?

Callback should be called and returned value should be used as the ref.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

    "react": "16.8.0-alpha.1",
    "react-dom": "16.8.0-alpha.1",
    "enzyme": "3.8.0",
    "enzyme-adapter-react-16": "1.8.0",

[gaearon]

You want:

const Form = React.forwardRef((props, ref) => {
  React.useImperativeHandle(ref, () => {
    debugger;
    return {
      setErrors: () => {},
    };
  });
})

Don't miss React.forwardRef.

In the future might make this unnecessary but we can't yet because that would have been a breaking change.

[rally25rs]

@gaearon that is there, just on a separate line

function Form(props, ref) {
    ...
}

export default React.forwardRef(Form);

or in the linked codesanbox example

const Form = React.forwardRef(FormImpl);

I'm also thinking this might just be an enzyme issue, but not quite sure. Maybe something that enzyme is doing is causing react to not run that callback function?

[rally25rs]

I noticed that when executed through enzyme.mount my component's function Form(props, ref) is called with null as the ref parameter

It looks like this comes from react's

function updateForwardRef(current$$1, workInProgress, Component, nextProps, renderExpirationTime) {

  ...

  var ref = workInProgress.ref;

workInProgress is a FiberNode and workInProgress.ref is null

---

The initial react-dom.render is called with a WrapperComponent that has a ref set to my inline function in the code, but it seems to get dropped somewhere between there and the actual call to my component.

I suspect this may have something to do with how enzyme is wrapping components, but debugging react-dom isn't real fun 😄

---

useImperativeHandle is also listed in enzyme's hooks support checklist enzymejs/enzyme#2011 so linking that here. I guess support just isn't there yet. 🤷‍♂️

[gaearon]

Oops, missed that.

[gaearon]

If this only happens with Enzyme you'll want to file it with Enzyme. If it turns out that it's due to React I'd be happy to look into it.

[rally25rs]

☝️ opened an issue on Enzyme too

[threepointone]

Followed the chain and it looks like workarounds/fix existed on the enzyme side, and it's not to do with React. Closing this issue.