Hello friends 🙏, today someone came to me with this issue, it was a React v16 project and facing issue while trying to match the snapshots using React Testing Library.
TypeError: parentInstance.children.indexOf is not a function
This error was pointing to .create method of the renderer:
import renderer from 'react-test-renderer';
.
.
.
const component = renderer.create(<MyComponent/>);
expect(component).toMatchSnapshot();So after bit some research 🔍😅, found that error is happening due to some compatibility issues with the react-test-renderer and createPortal of React.
Basically issue is using react-test-renderer to create a snapshot of a component, which contain React createPortal function. ReactDOM.createPortal is not supported inside a React TestRenderer tree.
Another renderer can’t be used in addition to the test renderer.
And in our scenario <MyComponent/> is using React createPortal method and in this case parentInstance.children is an instance of HTMLCollection, but test-renderer expects an array of Instance type.
And after doing some research again 🔍😅, found that as a workaround we can use toJson method from enzyme-to-json to match the snapshot.
import renderer from 'react-test-renderer';
import toJson from 'enzyme-to-json';
.
.
.
const component = toJson(renderer.create(<MyComponent/>));
expect(component).toMatchSnapshot();
Do you know anyother way to resolve this issue, feel free to comment.
Thanks 🙏.