React-modal: TypeError: parentInstance.children.indexOf is not a function

[vietnogi]

Summary:

Getting TypeError: parentInstance.children.indexOf is not a function error when using react-test-renderer to write tests.

Steps to reproduce:

1. Use react-test-renderer to create a react-modal
2. Use jest to run test
3. Get error

Expected behavior:

No error

Link to example of issue:

https://github.com/airbnb/enzyme/issues/1150

Additional notes:

[diasbruno]

@vietnogi I'm marking this as duplicated since we already have some issues related to testing...Thank you!

[RWOverdijk]

@diasbruno Awesome to see you managing issues! But ehm... could you perhaps include the duplicates in this ticket? 😅

Update: This issue is #1 in the google search results, that's why.

[diasbruno]

@RWOverdijk gee, sorry. I'm trying to keep everything organized, respond issue and stuff, but, you know, time is the problem. Thanks for the heads up and everyone is welcome to contribute to this repo either fixing bugs or helping with management. 👍

[diasbruno]

...also, this is not an duplicated issue. Perhaps I've overlooked. I'll reopen this.

[RWOverdijk]

@diasbruno No problem. I know how time consuming it is. Thanks for reopening!

[kuroshio]

I had the exact same issue, got it working by using enzyme-to-json instead of react-test-renderer

````
import EnzymeToJson from 'enzyme-to-json';
import { mount } from 'enzyme';

test("renders correctly", () => {
const subject = mount();
expect(EnzymeToJson(subject)).toMatchSnapshot();
});
````

[reyronald]

Something else that works is mocking the Portal in the top of the test file like this:

jest.mock('rc-util/lib/Portal')

Obviously you'll need to install the rc-util package

[kylemh]

Wanted to reference some sweet news I saw in another similar issue:
https://github.com/Semantic-Org/Semantic-UI-React/issues/3100#issuecomment-415000769

Sounds like the next React release will have a fix for this 🎉

[bxt]

This is caused by facebook/react#11565. There is a workaround, which is mocking/overwriting ReactDOM.createPortal.

[devrelm]

Mocking/overwriting ReactDOM.createportal won't always work -- it ends up being dependent on the ordering of the imports. This is because the Modal.js module selects the createPortal method and saves it to a separate variable when the module inits. Once the method is put in a variable, it can't be changed by mocking/overwriting ReactDOM.createPortal.

I'm going to open a PR to put that logic into a method.

[q-kirill]

I had the exact same issue, got it working by using enzyme-to-json instead of react-test-renderer

import EnzymeToJson from 'enzyme-to-json';
import { mount } from 'enzyme';

test("renders correctly", () => {
    const subject = mount(<YourComponent>);
    expect(EnzymeToJson(subject)).toMatchSnapshot();
});

thanks, that works!