Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeError: parentInstance.children.indexOf is not a function #553

Closed
vietnogi opened this issue Nov 3, 2017 · 14 comments
Closed

TypeError: parentInstance.children.indexOf is not a function #553

vietnogi opened this issue Nov 3, 2017 · 14 comments
Labels

Comments

@vietnogi
Copy link

vietnogi commented Nov 3, 2017

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:

enzymejs/enzyme#1150

Additional notes:

@diasbruno
Copy link
Collaborator

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

@RWOverdijk
Copy link

RWOverdijk commented Nov 20, 2017

@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
Copy link
Collaborator

@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
Copy link
Collaborator

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

@diasbruno diasbruno reopened this Nov 20, 2017
@RWOverdijk
Copy link

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

@kuroshio
Copy link

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();
});

@reyronald
Copy link

reyronald commented Mar 7, 2018

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
Copy link

kylemh commented Sep 3, 2018

Wanted to reference some sweet news I saw in another similar issue:
Semantic-Org/Semantic-UI-React#3100 (comment)

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

@bxt
Copy link

bxt commented Sep 3, 2018

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

@devrelm
Copy link
Contributor

devrelm commented Oct 15, 2018

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.

devrelm pushed a commit to devrelm/react-modal that referenced this issue Oct 15, 2018
diasbruno pushed a commit that referenced this issue Oct 27, 2018
Fixes #553 - PR  #701

* Allow ReactDOM.createPortal to be mocked in tests (9cd0891)
* add testability tests (6a67946)
* linting (f29e7b0)
* more linting (5992f97)
programmer4web pushed a commit to programmer4web/react-modal that referenced this issue Oct 5, 2020
Fixes reactjs#553 - PR  reactjs#701

* Allow ReactDOM.createPortal to be mocked in tests (9cd0891)
* add testability tests (6a67946)
* linting (f29e7b0)
* more linting (5992f97)
@q-kirill
Copy link

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!

@Pacheco95
Copy link

I'm facing the same problem. Here I'm using snapshot tests with react-test-renderer

import renderer from 'react-test-renderer';

it('should match snapshot', () => {
    const tree = renderer
      .create(<ChangeTitleModal visible oldTitle="Old title" onChange={jest.fn()} onCancel={jest.fn()} />)
      .toJSON();
    expect(tree).toMatchSnapshot();
});

Does anyone can solve this?

@Pacheco95
Copy link

Found the solution
https://medium.com/@amanverma.dev/mocking-create-portal-to-utilize-react-test-renderer-in-writing-snapshot-uts-c49773c88acd
facebook/react#11565 (comment)

@trainoasis
Copy link

I'm set up simply like this:

import initStoryshots from "@storybook/addon-storyshots";
initStoryshots();

and things break with @headlessui/react 1.6.2 whereas 1.6.1 seems to work.
Only breaks for 2 components, where only 1 of these uses Headlessui. Not sure what's going on tbh.

yyc-git added a commit to Meta3D-Technology/Meta3D that referenced this issue Sep 7, 2022
add useState to service;

note:
test Modal snapshot error: parentInstance.children.indexOf is not a function

refer to:
reactjs/react-modal#553
https://medium.com/@amanverma.dev/mocking-create-portal-to-utilize-react-test-renderer-in-writing-snapshot-uts-c49773c88acd

this is react-test-renderer's bug that the Modal use createPortal and cause the error!
so not test Modal snapshot!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests