Portal.js + Fade.js snapshot testing issues

[liviuignat]

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

[support]

👋 Thanks for using Material-UI!

We use the issue tracker exclusively for bug reports and feature requests, however,
this issue appears to be a support request or question. Please ask on StackOverflow where the
community will do their best to help. There is a "material-ui" tag that you can use to tag your
question.

If you would like to link from here to your question on SO, it will help others find it.
If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.

[oliviertassinari]

@liviuignat I doubt we can do much about it. Let's use the issue tracker for issues :).

[serhiiminin]

The same problem. It happened after updating from 4.1.1 to 4.1.2

[dcjones1]

Same problem here as well moving from 4.1.1 to 4.1.2. Oddly enough, it works just fine for one component, but not for another.

[oliviertassinari]

What's the error?

[dcjones1]

I'm getting this: TypeError: Cannot set property 'webkitTransition' of undefined.

[oliviertassinari]

Your tested code probably doesn't forward the ref correctly. We have reverted some changes in #16348. We will release v4.1.3 with the fix. You can revert to v4.1.1 in the meantime.

[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.

[tsturtz]

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.

If anyone's running into this still, it's only necessary to mock transition components (don't need to use createPortal) like so in storybook.test.js. If you do it in your setupTests file, it will affect other tests other than just your snapshots.

[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.

[ahummel25]

@miguelangeltorresfp I get this same exact error. Did you ever find a fix?

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

[ahummel25]

@oliviertassinari I see you added test label. Were you able to reproduce? Should this be reopened?