Jest snapshot problem with component Fade

[alexiwonder]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When Fade component has in={true}, Jest fails to render it with message TypeError: Cannot set property 'webkitTransition' of undefined

Stack trace:

      at Object.handleEnter [as onEnter] (node_modules/@material-ui/core/Fade/Fade.js:66:33)
      at Transition.performEnter (node_modules/react-transition-group/cjs/Transition.js:282:16)
      at Transition.updateStatus (node_modules/react-transition-group/cjs/Transition.js:253:14)
      at Transition.componentDidMount (node_modules/react-transition-group/cjs/Transition.js:195:10)
      at commitLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12078:22)
      at commitLayoutEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15276:7)
      at HTMLUnknownElement.callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11616:14)
      at Object.invokeGuardedCallbackDev (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11665:16)
      at invokeGuardedCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11718:31)       
      at commitRootImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15012:9)
      at unstable_runWithPriority (node_modules/react-test-renderer/node_modules/scheduler/cjs/scheduler.development.js:815:12)
      at runWithPriority (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2038:10)
      at commitRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14853:3)
      at finishSyncRender (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14346:5)
      at performSyncWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14318:9)        
      at node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2088:24
      at unstable_runWithPriority (node_modules/react-test-renderer/node_modules/scheduler/cjs/scheduler.development.js:815:12)
      at runWithPriority (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2038:10)
      at flushSyncCallbackQueueImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2083:7)    
      at flushSyncCallbackQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2071:3)        
      at scheduleUpdateOnFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13696:9)        
      at scheduleRootUpdate (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16931:3)
      at updateContainerAtExpirationTime (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16959:10)
      at updateContainer (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16979:10)
      at Object.create (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:17722:5)
      at Object.<anonymous>.test (src/components/CircleNumber.test.tsx:14:6)

Expected Behavior 🤔

Test should be able to render a composite component containing <Fade in={true}/>.

Steps to Reproduce 🕹

Steps:

import React from "react";
import renderer from "react-test-renderer";
import { Fade } from "@material-ui/core";

test("Fade should render correctly", () => {
   const tree = renderer
    .create(
        <Fade in={true}>
          <div>some text</div>
        </Fade>)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

Context 🔦

Snapshot testing with Jest as explained here: https://jestjs.io/docs/en/snapshot-testing

Your Environment 🌎

Tech	Version
Material-UI	v4.5.1
React	v16.9.0
Jest	v24.9.0

[oliviertassinari]

Related to #17119. An update of our documentation is welcome.

[alexiwonder]

@oliviertassinari I followed your comment, but still get the same error:

import React from "react";
import renderer from "react-test-renderer";
import { Fade } from "@material-ui/core";

test("Fade should render correctly", () => {
  const tree = renderer
    .create(
      <Fade in={true}>
        <div>some text</div>
      </Fade>,
      {
        createNodeMock: node => document.createElement(node.type as any);
      }
    )
    .toJSON();
  expect(tree).toMatchSnapshot();
});

[oliviertassinari]

@alexiwonder Oh right, sorry, we track this problem in:
https://github.com/mui-org/material-ui/blob/cec2f0caf91f5ea235e1a62a8c6c2493075927ef/packages/material-ui/src/Fade/Fade.test.js#L33-L34

I don't remember what's wrong exactly with react-transition-group. Probably the same thing that holds us back with #13394: the usage of the deprecated findDOMNode() method.