diff --git a/packages/material-ui/src/ListItem/ListItem.test.js b/packages/material-ui/src/ListItem/ListItem.test.js
index 670d5027a3fb40..15213eb9a30809 100644
--- a/packages/material-ui/src/ListItem/ListItem.test.js
+++ b/packages/material-ui/src/ListItem/ListItem.test.js
@@ -16,7 +16,7 @@ const NoContent = React.forwardRef(() => {
describe('', () => {
let mount;
- const render = createClientRender({ strict: false });
+ const render = createClientRender();
let classes;
before(() => {
@@ -126,6 +126,21 @@ describe('', () => {
expect(listItem.querySelector(`div.${classes.root}`)).not.to.equal(null);
});
+ it('can autofocus a custom ContainerComponent', () => {
+ const { getByRole } = render(
+
+
+
+ ,
+ );
+
+ expect(getByRole('listitem')).toHaveFocus();
+ });
+
it('should allow customization of the wrapper', () => {
const { getByRole } = render(
@@ -177,6 +192,33 @@ describe('', () => {
'Material-UI: unable to set focus to a ListItem whose component has not been rendered.',
);
});
+
+ // StrictMode compatible usage is illustrated in "can autofocus a custom ContainerComponent"
+ it('warns in StrictMode if the custom ContainerComponent is a class component', () => {
+ // eslint-disable-next-line react/prefer-stateless-function
+ class CustomListItemContainer extends React.Component {
+ // React dedupes the findDOMNode deprecation warning by displayName
+ // since we can't reset modules in watchmode we implement cache busting
+ // by creating a random display name
+ static displayName = `CustomListItemContainer-#${Math.random()}`;
+
+ render() {
+ return ;
+ }
+ }
+ const { getByRole } = render(
+
+
+
+ ,
+ );
+
+ expect(getByRole('listitem')).toHaveFocus();
+ expect(consoleErrorMock.callCount()).to.equal(1);
+ expect(consoleErrorMock.messages()[0]).to.include(
+ 'findDOMNode is deprecated in StrictMode',
+ );
+ });
});
});