A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/enzymejs/enzyme/issues/2039 below:

useImperativeHandle callback never called (when rendering w/ enzyme) · Issue #2039 · enzymejs/enzyme · GitHub

( Cross posting this from facebook/react#15054 )

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();
  });

Repro Example:

https://codesandbox.io/s/v8rqy75mn5

If you check the console tab, it only logs the message form the callabck once, but the component is rendered twice (or if you comment out the normal react render then it is no longer console.logged)

Environment API Version
    "react": "16.8.0-alpha.1",
    "react-dom": "16.8.0-alpha.1",
    "enzyme": "3.8.0",
    "enzyme-adapter-react-16": "1.8.0",
Adapter

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 #2011 so linking that here. I guess support just isn't there yet? 🤷‍♂️


RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4