[test] Modal snapshot test fail "TypeError: parentInstance.children.indexOf is not a function"

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I expect the tests to run without a problem.

Current Behavior

I get an error:

TypeError: parentInstance.children.indexOf is not a function

I think this is due to portals not working properly in combination with jest snapshots.

Steps to Reproduce (for bugs)

import React from 'react';
import { storiesOf } from '@storybook/react';
import AlertDialog from './AlertDialog';

storiesOf('AlertDialog', module)
  .add('basic', () => <AlertDialog bodyKey="test" onClick={() => {}} titleKey="test" open />);

Where <AlertDialog /> is a boring wrapper around <Dialog />.

I’m sorry for not including a code snippet. I don’t know how to set up the tests to illustrate the issue, but I tried my best to provide as much relevant information as possible.

Context

I’m using storybooks with storysnaps (jest snapshots), and our tests are failing. I’m pretty sure it has something to do with https://github.com/airbnb/enzyme/issues/1150 and potentially https://github.com/reactjs/react-modal/issues/553 could benefit from a solution as well.

Your Environment

Tech	Version
Material-UI	1.0.0-beta.21
React	16.0.0
browser	N/A

Additional

I have a feeling this is something that could be caught in storyshots but I’m not experienced enough with the material at hand. Any pointers, or better yet solutions would be greatly appreciated.

I’m not against fixing it and contributing either (if I get the right pointers to help me out).

[rpk-red]

Came across the same issue… Environment

• react 16.1.0
• material-ui 1.0.0-beta.20
• jest 21.2.1

Component

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Button from 'material-ui/Button';
import Dialog, {
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
} from 'material-ui/Dialog';


const styles = () => ({
  div: {
    display: 'block',
    textAlign: 'center'
  }
});
class Error extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: true

    };
  }

  handleRequestClose = () => {
    this.setState({ open: false });
  }

  render() {
    const { classes, errorMsg } = this.props;
    return (
      <div className={classes.div}>
        <Dialog ignoreBackdropClick ignoreEscapeKeyUp open={this.state.open} onRequestClose={this.handleRequestClose}>
          <DialogTitle>{"You got an error!"}</DialogTitle>
          <DialogContent>
            <DialogContentText>
              Error: {errorMsg}
            </DialogContentText>
          </DialogContent>
          <DialogActions>
            <Button onClick={this.handleRequestClose} color="accent" autoFocus>
              Dismiss
            </Button>
          </DialogActions>
        </Dialog>
      </div>
    );
  }
}

Error.propTypes = {
  classes: PropTypes.object.isRequired,
  errorMsg: PropTypes.string
};

export default withStyles(styles)(Error);

Test

import React from 'react';
import Error from '../shared/Error';
import renderer from 'react-test-renderer';

describe('Error component', () => {
  it('should render', () => {
    const tree = renderer.create(
      <Error />
    ).toJSON();
    expect(tree).toMatchSnapshot();
  });
});

Error message ● Error component › should render

    TypeError: parentInstance.children.indexOf is not a function

      at appendChild (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7146:39)
      at commitPlacement (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4893:13)
      at commitAllHostEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5651:13)
      at HTMLUnknownElement.callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1584:14)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:219:27)
      at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:126:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:87:17)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:36:27)
      at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:61:35)
      at Object.invokeGuardedCallbackDev (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1623:16)
      at invokeGuardedCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1480:29)
      at commitRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5771:9)
      at performWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6730:42)
      at performWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6680:7)
      at requestWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6596:7)
      at scheduleWorkImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6479:11)
      at scheduleWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6441:12)
      at scheduleTopLevelUpdate (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6904:5)
      at Object.updateContainer (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6942:7)
      at Object.create (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7562:18)
      at Object.<anonymous> (src/components/pages/shared/Error.spec.js:7:44)

[ahummel25]

I still have this issue using material-ui and react-test-renderer 16.13.0.

Is the solution here to use createMount from material-ui/test-utils?

I would like to continue to use react-test-renderer.

const tree = renderer.create(<MyComp />);