TypeError: Cannot read properties of undefined (reading '__reactFiber$bn58ztremuh') while simulating event on MUI components

[OmkarRajam]

While using React 17, MUI 5, and latest version of @wojtekmaj/enzyme-adapter-react-17 (which is 0.6.7), when we try to simulate an event (like click or mouseenter) on MUI components like Button, IconButton or Tab, we get an error like TypeError: Cannot read property '__reactFiber$g9li6s00347' of undefined

Here is a CodeSandbox reproducing the error - https://codesandbox.io/s/react17-enzyme-simulate-click-49y6pb?file=/src/components/BasicButton.test.js

I also created a CodeSandbox to see if there is such an error while using enzyme-adapter-react-16 with React 16 and MUI 4. But I didn't find such an error in it. Here is that CodeSandbox - https://codesandbox.io/s/react16-enzyme-simulate-click-67w2pj?file=/src/components/BasicButton.test.js

I think this issue is similar to the issue - #42. In that issue, return value of _nodeToHostNode in ReactSeventeenAdapter was some null values followed by non-null value. In this case though, all values returned from _nodeToHostNode are null.

[OmkarRajam]

In https://codesandbox.io/s/react17-enzyme-simulate-click-49y6pb?file=/src/components/BasicButton.js, if you render Button from MUI 4 instead of MUI 5 (by uncommenting line no.2 and commenting line no.3), the test passes. So, Button from MUI 4 is working fine with @wojtekmaj/enzyme-adapter-react-17. I think that in MUI 5, maybe the rendering structure of Button was changed in such a way that the enzyme adapter is not able to find the button's node correctly.

[OmkarRajam]

One way I found to make the tests work is this. Instead of simulating the event on the wrapper or on the MUI component, find the HTML element within the wrapper on which you want the event to be simulated using a CSS selector like find('button'), and then simulate event on that HTML element. Then the test will pass.

For example, in test files, instead of doing

    const wrapper = mount(<BasicButton handleClick={handleClick} />);
    wrapper.simulate('click');

do

    const wrapper = mount(<BasicButton handleClick={handleClick} />);
    const button = wrapper.find('button');
    button.simulate('click');

[wojtekmaj]

I narrowed the problem down to invoking .simulate('click') on elements created using Emotion's styled().

I also know it's not a problem with styled-components.

https://codesandbox.io/s/enzyme-adapter-react-17-wrapper-click-0brpnx

[eudinnou]

We are also now migrating to MUI v5 and have the same issue. Any chance for this to be fixed? 🥺

[MatetlotDev]

I had the same issue with some IconButton from mui v5 to simulate('click'). And it worked well this way -> IconButton.find('button').simulate('click');

I had the same issue with the component TableSortLabel and Checkbox, where I had to search for find('span') and find('input')