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,
};
/**