Portal.js + Fade.js snapshot testing issues

Cannot use Dialog in a storybook because ReactDOM.createPortal fails and after I mock ReactDOM.createPortal, Fade.js throws errors

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

Expected Behavior

Should be able to snapshot test the Dialog

Current Behavior

I have an npm library where I am using @material-ui/core/Dialog. This library has storybooks enabled.

First issue: realized that I have to mock ReactDOM.createPortal:

ReactDom.createPortal = (node) => node;

Second issue: Then struggled for a few hours to understand what is the problem in Fade.js and got stuck at:

Error: TypeError: Cannot set property 'webkitTransition' of undefined

at:

handleExit = node => {
   .....
    node.style.webkitTransition = theme.transitions.create('opacity', transitionProps);
    node.style.transition = theme.transitions.create('opacity', transitionProps);

I just cannot pass over this issue anymore and I don’t think I will be the only one having it.

Thanks

[aloukianova-godaddy]

I’m on v4.7.1 and I was getting this error after migrating from v0 (I know, sorry.). If you’re still having trouble with this, this is what fixed it for me:

ReactDOM.createPortal = jest.fn((element, node) => {
  if (!element.style) {
    return React.cloneElement(element, { style: { webkitTransition: '' } });
  }
  return element;
});
jest.mock('@material-ui/core/Fade');

Jest tests worked fine, but storybook snapshots would error out. I put this instorybook.test.js file, before initStoryshots. I assume you can put this wherever you setupTests.

[miguelangeltorresfp]

This solutions doesn’t work for me:

This is the transition:

export const ZoomTransition = React.forwardRef(function Transition(
  props: TransitionProps & { children?: React.ReactElement<any, any> },
  ref: React.Ref<unknown>
) {
  return <Zoom ref={ref} {...props} />;
});

The modal:

<Dialog
      open={open}
      TransitionComponent={ZoomTransition}
      keepMounted
      classes={{ paper: classes.popupPaper }}
      onClose={handleClose}
      aria-labelledby="simple-dialog-title"
      aria-describedby="simple-dialog-description"
    >
      <DialogTitle id="simple-dialog-title">
        {title}
        <IconButton onClick={handleClose} className={classes.closeBtn}>
          <CloseIcon className={classes.closeIcon} />
        </IconButton>
      </DialogTitle>
      <DialogContent>{children}</DialogContent>
    </Dialog>

I tried with this mock in the storybook.test.ts

import initStoryshots from '@storybook/addon-storyshots';

jest.mock('@material-ui/core/Zoom');

initStoryshots();

But I got this error in the console:

● Storyshots › molecules/dialogs/video/ModalYoutubeBtn › Default

    ForwardRef(Zoom)(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

      at reconcileChildFibers (../../node_modules/react-test-renderer/cjs/react-test-rendererd 
evelopment.js:5475:23)
[...]

I’m new to jest and I don’t know how to mock this properly. Thank you.