TypeError: Cannot read property 'current' of undefined

[coclauso]

Current behavior

mount() fails with TypeError: Cannot read property 'current' of undefined. Note that this is similar to #2004 , but no causes described there seem to apply.

In this case, it seems to be triggered by a specific combination of lazy component and useState:

describe('describe', () => {
    it('test', () => {
        const wrapper = mount(
        <React.Suspense fallback={<div>loading</div>}>
            <Component />
        </React.Suspense>
        );
    });
});

function Component() {
    const [alreadyRun, setAlreadyRun] = React.useState(false);

    React.useEffect(() => {
        setAlreadyRun(true);
    }, []);

    const Component2 = React.lazy(() => {
        return Promise.resolve({ default: () => <div></div> });
    });

    if (!alreadyRun) {
        return null;
    }

    return <Component2 />;
}

Zipfile with fully working repro project is attached: repro-enzyme-issue.zip

Expected behavior

Test doesn't fail with this error.

Your environment

nodejs v14.17.3

API

• [ ] shallow
• [X] mount
• [ ] render

Version

library	version
enzyme	3.11.0
react	16.14.0
react-dom	16.14.0
react-test-renderer	16.14.0
adapter (below)	1.15.6

Adapter

• [X] enzyme-adapter-react-16
• [ ] enzyme-adapter-react-16.3
• [ ] enzyme-adapter-react-16.2
• [ ] enzyme-adapter-react-16.1
• [ ] enzyme-adapter-react-15
• [ ] enzyme-adapter-react-15.4
• [ ] enzyme-adapter-react-14
• [ ] enzyme-adapter-react-13
• [ ] enzyme-adapter-react-helper
• [ ] others ( )

[ljharb]

@coclauso i'm very confused - you should never define one component inside another. What happens if you hoist Component2 outside of Component?

[ljharb]

nvm, that's a red herring (but seriously, hoist that component out) - i've reproduced the problem.