diff --git a/packages/material-ui/src/Backdrop/Backdrop.test.js b/packages/material-ui/src/Backdrop/Backdrop.test.js index fd5e9cc505077e..2419401da3be12 100644 --- a/packages/material-ui/src/Backdrop/Backdrop.test.js +++ b/packages/material-ui/src/Backdrop/Backdrop.test.js @@ -25,7 +25,11 @@ describe('', () => { inheritComponent: 'div', mount, refInstanceof: window.HTMLDivElement, - skip: ['componentProp'], + skip: [ + 'componentProp', + // react-transition-group issue + 'reactTestRenderer', + ], })); it('should render a backdrop div', () => { diff --git a/packages/material-ui/src/Dialog/Dialog.test.js b/packages/material-ui/src/Dialog/Dialog.test.js index 66625c796a2afb..e910669dfc4a4c 100644 --- a/packages/material-ui/src/Dialog/Dialog.test.js +++ b/packages/material-ui/src/Dialog/Dialog.test.js @@ -44,7 +44,11 @@ describe('', () => { inheritComponent: Modal, mount, refInstanceof: window.HTMLDivElement, - skip: ['componentProp'], + skip: [ + 'componentProp', + // react-transition-group issue + 'reactTestRenderer', + ], }), ); diff --git a/packages/material-ui/src/Drawer/Drawer.test.js b/packages/material-ui/src/Drawer/Drawer.test.js index 1b26e81dc8ca31..effe587e28cc45 100644 --- a/packages/material-ui/src/Drawer/Drawer.test.js +++ b/packages/material-ui/src/Drawer/Drawer.test.js @@ -35,7 +35,11 @@ describe('', () => { inheritComponent: 'div', mount, refInstanceof: window.HTMLDivElement, - skip: ['componentProp'], + skip: [ + 'componentProp', + // react-transition-group issue + 'reactTestRenderer', + ], }), ); diff --git a/packages/material-ui/src/Fade/Fade.test.js b/packages/material-ui/src/Fade/Fade.test.js index 52ff59382ef22f..8901eef4a8f369 100644 --- a/packages/material-ui/src/Fade/Fade.test.js +++ b/packages/material-ui/src/Fade/Fade.test.js @@ -28,7 +28,11 @@ describe('', () => { inheritComponent: Transition, mount, refInstanceof: window.HTMLDivElement, - skip: ['componentProp'], + skip: [ + 'componentProp', + // react-transition-group issue + 'reactTestRenderer', + ], })); describe('transition lifecycle', () => { diff --git a/packages/material-ui/src/Grow/Grow.test.js b/packages/material-ui/src/Grow/Grow.test.js index 21f67cf7200947..dfd3248ff2dd43 100644 --- a/packages/material-ui/src/Grow/Grow.test.js +++ b/packages/material-ui/src/Grow/Grow.test.js @@ -34,7 +34,11 @@ describe('', () => { inheritComponent: Transition, mount, refInstanceof: window.HTMLDivElement, - skip: ['componentProp'], + skip: [ + 'componentProp', + // react-transition-group issue + 'reactTestRenderer', + ], }), ); diff --git a/packages/material-ui/src/Menu/Menu.test.js b/packages/material-ui/src/Menu/Menu.test.js index f9f679457040bb..70d203ed0ff203 100644 --- a/packages/material-ui/src/Menu/Menu.test.js +++ b/packages/material-ui/src/Menu/Menu.test.js @@ -32,7 +32,11 @@ describe('', () => { inheritComponent: Popover, mount, refInstanceof: window.HTMLDivElement, - skip: ['componentProp'], + skip: [ + 'componentProp', + // react-transition-group issue + 'reactTestRenderer', + ], })); describe('event callbacks', () => { diff --git a/packages/material-ui/src/Modal/Modal.test.js b/packages/material-ui/src/Modal/Modal.test.js index 1b671acc388e36..b28227b0998d30 100644 --- a/packages/material-ui/src/Modal/Modal.test.js +++ b/packages/material-ui/src/Modal/Modal.test.js @@ -35,7 +35,12 @@ describe('', () => { inheritComponent: 'div', mount, refInstanceof: window.HTMLDivElement, - skip: ['rootClass', 'componentProp'], + skip: [ + 'rootClass', + 'componentProp', + // https://github.com/facebook/react/issues/11565 + 'reactTestRenderer', + ], }), ); diff --git a/packages/material-ui/src/Popover/Popover.test.js b/packages/material-ui/src/Popover/Popover.test.js index 92f112dd1c7bce..4210dcaa63571b 100644 --- a/packages/material-ui/src/Popover/Popover.test.js +++ b/packages/material-ui/src/Popover/Popover.test.js @@ -75,7 +75,11 @@ describe('', () => { inheritComponent: Modal, mount, refInstanceof: window.HTMLDivElement, - skip: ['componentProp'], + skip: [ + 'componentProp', + // react-transition-group issue + 'reactTestRenderer', + ], })); describe('root node', () => { diff --git a/packages/material-ui/src/Popper/Popper.test.js b/packages/material-ui/src/Popper/Popper.test.js index 3900668275ae2b..3940f7b3db4587 100644 --- a/packages/material-ui/src/Popper/Popper.test.js +++ b/packages/material-ui/src/Popper/Popper.test.js @@ -30,7 +30,11 @@ describe('', () => { inheritComponent: 'div', mount, refInstanceof: window.HTMLDivElement, - skip: ['componentProp'], + skip: [ + 'componentProp', + // https://github.com/facebook/react/issues/11565 + 'reactTestRenderer', + ], })); describe('prop: placement', () => { diff --git a/packages/material-ui/src/Slide/Slide.test.js b/packages/material-ui/src/Slide/Slide.test.js index b04568b7af4fc2..f16a100235c2bf 100644 --- a/packages/material-ui/src/Slide/Slide.test.js +++ b/packages/material-ui/src/Slide/Slide.test.js @@ -33,7 +33,11 @@ describe('', () => { inheritComponent: Transition, mount, refInstanceof: window.HTMLDivElement, - skip: ['componentProp'], + skip: [ + 'componentProp', + // react-transition-group issue + 'reactTestRenderer', + ], }), ); diff --git a/packages/material-ui/src/Snackbar/Snackbar.test.js b/packages/material-ui/src/Snackbar/Snackbar.test.js index 0a80b518c5238f..3d083cffe08c7a 100644 --- a/packages/material-ui/src/Snackbar/Snackbar.test.js +++ b/packages/material-ui/src/Snackbar/Snackbar.test.js @@ -25,7 +25,11 @@ describe('', () => { inheritComponent: 'div', mount, refInstanceof: window.HTMLDivElement, - skip: ['componentProp'], + skip: [ + 'componentProp', + // react-transition-group issue + 'reactTestRenderer', + ], })); describe('prop: onClose', () => { diff --git a/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.test.js b/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.test.js index 5708d7af20c8ce..b54c39c7563643 100644 --- a/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.test.js +++ b/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.test.js @@ -96,7 +96,11 @@ describe('', () => { 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', () => { diff --git a/packages/material-ui/src/Tabs/Tabs.js b/packages/material-ui/src/Tabs/Tabs.js index 7e4d14070a1553..3d3c39c5355395 100644 --- a/packages/material-ui/src/Tabs/Tabs.js +++ b/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 ( -
- {conditionalElements.scrollButtonLeft} - {conditionalElements.scrollbarSizeListener} + {conditionalElements.scrollButtonLeft} + {conditionalElements.scrollbarSizeListener} +
-
- {children} -
- {mounted && indicator} + {children}
- {conditionalElements.scrollButtonRight} + {mounted && indicator}
+ {conditionalElements.scrollButtonRight} ); }); diff --git a/packages/material-ui/src/Zoom/Zoom.test.js b/packages/material-ui/src/Zoom/Zoom.test.js index 13e3a0c9650b8f..6321cc1bcee461 100644 --- a/packages/material-ui/src/Zoom/Zoom.test.js +++ b/packages/material-ui/src/Zoom/Zoom.test.js @@ -27,7 +27,11 @@ describe('', () => { inheritComponent: Transition, mount, refInstanceof: window.HTMLDivElement, - skip: ['componentProp'], + skip: [ + 'componentProp', + // react-transition-group issue + 'reactTestRenderer', + ], }), ); diff --git a/packages/material-ui/src/test-utils/describeConformance.js b/packages/material-ui/src/test-utils/describeConformance.js index 95586f74805d52..65becc9af31311 100644 --- a/packages/material-ui/src/test-utils/describeConformance.js +++ b/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, }; /**