[test] react-test-renderer coverage

packages/material-ui/src/Backdrop/Backdrop.test.js

@@ -25,7 +25,11 @@ describe('<Backdrop />', () => {
     inheritComponent: 'div',
     mount,
     refInstanceof: window.HTMLDivElement,
-    skip: ['componentProp'],
+    skip: [
+      'componentProp',
+      // react-transition-group issue
+      'reactTestRenderer',
+    ],
   }));
 
   it('should render a backdrop div', () => {

packages/material-ui/src/Dialog/Dialog.test.js

@@ -44,7 +44,11 @@ describe('<Dialog />', () => {
       inheritComponent: Modal,
       mount,
       refInstanceof: window.HTMLDivElement,
-      skip: ['componentProp'],
+      skip: [
+        'componentProp',
+        // react-transition-group issue
+        'reactTestRenderer',
+      ],
     }),
   );
 

packages/material-ui/src/Drawer/Drawer.test.js

@@ -35,7 +35,11 @@ describe('<Drawer />', () => {
       inheritComponent: 'div',
       mount,
       refInstanceof: window.HTMLDivElement,
-      skip: ['componentProp'],
+      skip: [
+        'componentProp',
+        // react-transition-group issue
+        'reactTestRenderer',
+      ],
     }),
   );
 

packages/material-ui/src/Fade/Fade.test.js

@@ -28,7 +28,11 @@ describe('<Fade />', () => {
     inheritComponent: Transition,
     mount,
     refInstanceof: window.HTMLDivElement,
-    skip: ['componentProp'],
+    skip: [
+      'componentProp',
+      // react-transition-group issue
+      'reactTestRenderer',
+    ],
   }));
 
   describe('transition lifecycle', () => {

packages/material-ui/src/Grow/Grow.test.js

@@ -34,7 +34,11 @@ describe('<Grow />', () => {
       inheritComponent: Transition,
       mount,
       refInstanceof: window.HTMLDivElement,
-      skip: ['componentProp'],
+      skip: [
+        'componentProp',
+        // react-transition-group issue
+        'reactTestRenderer',
+      ],
     }),
   );
 

packages/material-ui/src/Menu/Menu.test.js

@@ -32,7 +32,11 @@ describe('<Menu />', () => {
     inheritComponent: Popover,
     mount,
     refInstanceof: window.HTMLDivElement,
-    skip: ['componentProp'],
+    skip: [
+      'componentProp',
+      // react-transition-group issue
+      'reactTestRenderer',
+    ],
   }));
 
   describe('event callbacks', () => {

packages/material-ui/src/Modal/Modal.test.js

@@ -35,7 +35,12 @@ describe('<Modal />', () => {
       inheritComponent: 'div',
       mount,
       refInstanceof: window.HTMLDivElement,
-      skip: ['rootClass', 'componentProp'],
+      skip: [
+        'rootClass',
+        'componentProp',
+        // https://github.com/facebook/react/issues/11565
+        'reactTestRenderer',
+      ],
     }),
   );
 

packages/material-ui/src/Popover/Popover.test.js

@@ -75,7 +75,11 @@ describe('<Popover />', () => {
     inheritComponent: Modal,
     mount,
     refInstanceof: window.HTMLDivElement,
-    skip: ['componentProp'],
+    skip: [
+      'componentProp',
+      // react-transition-group issue
+      'reactTestRenderer',
+    ],
   }));
 
   describe('root node', () => {

packages/material-ui/src/Popper/Popper.test.js

@@ -30,7 +30,11 @@ describe('<Popper />', () => {
     inheritComponent: 'div',
     mount,
     refInstanceof: window.HTMLDivElement,
-    skip: ['componentProp'],
+    skip: [
+      'componentProp',
+      // https://github.com/facebook/react/issues/11565
+      'reactTestRenderer',
+    ],
   }));
 
   describe('prop: placement', () => {

packages/material-ui/src/Slide/Slide.test.js

@@ -33,7 +33,11 @@ describe('<Slide />', () => {
       inheritComponent: Transition,
       mount,
       refInstanceof: window.HTMLDivElement,
-      skip: ['componentProp'],
+      skip: [
+        'componentProp',
+        // react-transition-group issue
+        'reactTestRenderer',
+      ],
     }),
   );
 

packages/material-ui/src/Snackbar/Snackbar.test.js

@@ -25,7 +25,11 @@ describe('<Snackbar />', () => {
     inheritComponent: 'div',
     mount,
     refInstanceof: window.HTMLDivElement,
-    skip: ['componentProp'],
+    skip: [
+      'componentProp',
+      // react-transition-group issue
+      'reactTestRenderer',
+    ],
   }));
 
   describe('prop: onClose', () => {

packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.test.js

@@ -96,7 +96,11 @@ describe('<SwipeableDrawer />', () => {
     inheritComponent: Drawer,
     mount,
     refInstanceof: window.HTMLDivElement,
-    skip: ['componentProp'],
+    skip: [
+      'componentProp',
+      // https://github.com/facebook/react/issues/11565
+      'reactTestRenderer',
+    ],
   }));
 
   it('should render a Drawer and a SwipeArea', () => {

packages/material-ui/src/Tabs/Tabs.js

@@ -20,6 +20,7 @@ export const styles = theme => ({
     overflow: 'hidden',
     minHeight: 48,
     WebkitOverflowScrolling: 'touch', // Add iOS momentum scrolling.
+    display: 'flex',
   },
   /* Styles applied to the flex container element. */
   flexContainer: {
@@ -102,6 +103,7 @@ const Tabs = React.forwardRef(function Tabs(props, ref) {
   });
   const valueToIndex = new Map();
   const tabsRef = React.useRef(null);
+  const childrenWrapperRef = React.useRef(null);
 
   const getTabsMeta = () => {
     const tabsNode = tabsRef.current;
@@ -121,7 +123,7 @@ const Tabs = React.forwardRef(function Tabs(props, ref) {
 
     let tabMeta;
     if (tabsNode && value !== false) {
-      const children = tabsNode.children[0].children;
+      const children = childrenWrapperRef.current.children;
 
       if (children.length > 0) {
         const tab = children[valueToIndex.get(value)];
@@ -360,30 +362,29 @@ const Tabs = React.forwardRef(function Tabs(props, ref) {
 
   return (
     <Component className={clsx(classes.root, className)} ref={ref} {...other}>
-      <div className={classes.flexContainer}>
-        {conditionalElements.scrollButtonLeft}
-        {conditionalElements.scrollbarSizeListener}
+      {conditionalElements.scrollButtonLeft}
+      {conditionalElements.scrollbarSizeListener}
+      <div
+        className={clsx(classes.scroller, {
+          [classes.fixed]: !scrollable,
+          [classes.scrollable]: scrollable,
+        })}
+        style={scrollerStyle}
+        ref={tabsRef}
+        role="tablist"
+        onScroll={handleTabsScroll}
+      >
         <div
-          className={clsx(classes.scroller, {
-            [classes.fixed]: !scrollable,
-            [classes.scrollable]: scrollable,
+          className={clsx(classes.flexContainer, {
+            [classes.centered]: centered && !scrollable,
           })}
-          style={scrollerStyle}
-          ref={tabsRef}
-          role="tablist"
-          onScroll={handleTabsScroll}
+          ref={childrenWrapperRef}
         >
-          <div
-            className={clsx(classes.flexContainer, {
-              [classes.centered]: centered && !scrollable,
-            })}
-          >
-            {children}
-          </div>
-          {mounted && indicator}
+          {children}
         </div>
-        {conditionalElements.scrollButtonRight}
+        {mounted && indicator}
       </div>
+      {conditionalElements.scrollButtonRight}
     </Component>
   );
 });

packages/material-ui/src/Zoom/Zoom.test.js

@@ -27,7 +27,11 @@ describe('<Zoom />', () => {
       inheritComponent: Transition,
       mount,
       refInstanceof: window.HTMLDivElement,
-      skip: ['componentProp'],
+      skip: [
+        'componentProp',
+        // react-transition-group issue
+        'reactTestRenderer',
+      ],
     }),
   );
 

packages/material-ui/src/test-utils/describeConformance.js

@@ -1,6 +1,7 @@
 import { assert } from 'chai';
 import React from 'react';
 import findOutermostIntrinsic from './findOutermostIntrinsic';
+import ReactTestRenderer from 'react-test-renderer';
 import testRef from './testRef';
 
 /**
@@ -146,12 +147,31 @@ function testRootClass(element, getOptions) {
   });
 }
 
+/**
+ * Tests that the component can be rendered with react-test-renderer.
+ * This is important for snapshot testing with Jest (even if we don't encourage it).
+ *
+ * @param {React.ReactElement} element
+ */
+function testReactTestRenderer(element) {
+  it('should render without errors in ReactTestRenderer', () => {
+    ReactTestRenderer.act(() => {
+      ReactTestRenderer.create(element, {
+        createNodeMock: node => {
+          return document.createElement(node.type);
+        },
+      });
+    });
+  });
+}
+
 const fullSuite = {
   componentProp: testComponentProp,
   mergeClassName: testClassName,
   propsSpread: testPropsSpread,
   refForwarding: describeRef,
   rootClass: testRootClass,
+  reactTestRenderer: testReactTestRenderer,
 };
 
 /**