enzyme-adapter-react-17
enzyme-adapter-react-17 copied to clipboard
`TypeError: Cannot read properties of undefined (reading '__reactFiber$bn58ztremuh')` while simulating event on MUI components
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 - https://github.com/wojtekmaj/enzyme-adapter-react-17/issues/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
.
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.
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');
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
We are also now migrating to MUI v5 and have the same issue. Any chance for this to be fixed? 🥺
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')