[test] Convert remaining enzyme tests to testing-library (#26832)

packages/material-ui-styles/src/styled/styled.test.js

@@ -2,14 +2,14 @@ import * as React from 'react';
 import { expect } from 'chai';
 import PropTypes from 'prop-types';
 import { SheetsRegistry } from 'jss';
-import { createMount } from 'test/utils';
+import { createClientRender, screen } from 'test/utils';
 import { createGenerateClassName } from '@material-ui/styles';
 import styled from './styled';
 import StylesProvider from '../StylesProvider';
 
 describe('styled', () => {
   // StrictModeViolation: uses makeStyles
-  const mount = createMount({ strict: false });
+  const render = createClientRender({ strict: false });
   let StyledButton;
 
   before(() => {
@@ -28,7 +28,7 @@ describe('styled', () => {
     const sheetsRegistry = new SheetsRegistry();
     const generateClassName = createGenerateClassName();
 
-    mount(
+    render(
       <StylesProvider sheetsRegistry={sheetsRegistry} generateClassName={generateClassName}>
         <StyledButton>Styled Components</StyledButton>
       </StylesProvider>,
@@ -39,26 +39,26 @@ describe('styled', () => {
   });
 
   describe('prop: clone', () => {
-    let wrapper;
+    let view;
 
     beforeEach(() => {
-      wrapper = mount(
-        <StyledButton clone data-test="enzyme">
+      view = render(
+        <StyledButton clone data-test="styled">
           <div>Styled Components</div>
         </StyledButton>,
       );
     });
 
     it('should be able to pass props to cloned element', () => {
-      expect(wrapper.find('div').props()['data-test']).to.equal('enzyme');
+      expect(view.container.firstChild).to.have.attribute('data-test', 'styled');
     });
 
     it('should be able to clone the child element', () => {
-      expect(wrapper.getDOMNode().nodeName).to.equal('DIV');
-      wrapper.setProps({
+      expect(view.container.firstChild).to.have.tagName('DIV');
+      view.setProps({
         clone: false,
       });
-      expect(wrapper.getDOMNode().nodeName).to.equal('BUTTON');
+      expect(view.container.firstChild).to.have.tagName('BUTTON');
     });
   });
 
@@ -75,13 +75,12 @@ describe('styled', () => {
     style.filterProps = ['color'];
     style.propTypes = {};
     const StyledDiv = styled('div')(style);
-    const wrapper = mount(
-      <StyledDiv data-test="enzyme" color="blue">
+    render(
+      <StyledDiv data-testid="styled" data-color="blue">
         Styled Components
       </StyledDiv>,
     );
-    expect(wrapper.find('div').props().color).to.equal(undefined);
-    expect(wrapper.find('div').props()['data-test']).to.equal('enzyme');
+    expect(screen.getByTestId('styled')).to.have.attribute('data-color', 'blue');
   });
 
   describe('warnings', () => {
@@ -102,6 +101,6 @@ describe('styled', () => {
   });
 
   it('should accept a child function', () => {
-    mount(<StyledButton>{(props) => <div {...props}>Styled Components</div>}</StyledButton>);
+    render(<StyledButton>{(props) => <div {...props}>Styled Components</div>}</StyledButton>);
   });
 });

packages/material-ui-unstyled/src/Portal/Portal.test.js

@@ -5,7 +5,7 @@ import { createServerRender, createClientRender } from 'test/utils';
 import Portal from './Portal';
 
 describe('<Portal />', () => {
-  const serverRender = createServerRender();
+  const serverRender = createServerRender({ expectUseLayoutEffectWarning: true });
   const render = createClientRender();
 
   describe('server-side', () => {
@@ -17,25 +17,12 @@ describe('<Portal />', () => {
     });
 
     it('render nothing on the server', () => {
-      const markup1 = serverRender(<div>Bar</div>);
-      expect(markup1.text()).to.equal('Bar');
-
-      let markup2;
-      expect(() => {
-        markup2 = serverRender(
-          <Portal>
-            <div>Bar</div>
-          </Portal>,
-        );
-      }).toErrorDev(
-        // Known issue due to using SSR APIs in a browser environment.
-        // We use 2x useLayoutEffect in the component.
-        [
-          'Warning: useLayoutEffect does nothing on the server',
-          'Warning: useLayoutEffect does nothing on the server',
-        ],
+      const container = serverRender(
+        <Portal>
+          <div>Bar</div>
+        </Portal>,
       );
-      expect(markup2.text()).to.equal('');
+      expect(container.firstChild).to.equal(null);
     });
   });
 

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

@@ -362,8 +362,8 @@ describe('<Button />', () => {
     });
 
     it('should server-side render', () => {
-      const markup = serverRender(<Button>Hello World</Button>);
-      expect(markup.text()).to.equal('Hello World');
+      const container = serverRender(<Button>Hello World</Button>);
+      expect(container.firstChild).to.have.text('Hello World');
     });
   });
 

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

@@ -163,8 +163,8 @@ describe('<Fab />', () => {
     });
 
     it('should server-side render', () => {
-      const markup = serverRender(<Fab>Fab</Fab>);
-      expect(markup.text()).to.equal('Fab');
+      const container = serverRender(<Fab>Fab</Fab>);
+      expect(container.firstChild).to.have.text('Fab');
     });
   });
 });

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

@@ -5,22 +5,17 @@ import NoSsr from '@material-ui/core/NoSsr';
 
 describe('<NoSsr />', () => {
   const render = createClientRender();
-  const serverRender = createServerRender();
+  const serverRender = createServerRender({ expectUseLayoutEffectWarning: true });
 
   describe('server-side rendering', () => {
     it('should not render the children as the width is unknown', () => {
-      let wrapper;
-      expect(() => {
-        wrapper = serverRender(
-          <NoSsr>
-            <span>Hello</span>
-          </NoSsr>,
-        );
-      }).toErrorDev(
-        // Known issue due to using SSR APIs in a browser environment.
-        ['Warning: useLayoutEffect does nothing on the server'],
+      const container = serverRender(
+        <NoSsr>
+          <span>Hello</span>
+        </NoSsr>,
       );
-      expect(wrapper.text()).to.equal('');
+
+      expect(container.firstChild).to.equal(null);
     });
   });
 
@@ -37,20 +32,15 @@ describe('<NoSsr />', () => {
 
   describe('prop: fallback', () => {
     it('should render the fallback', () => {
-      let wrapper;
-      expect(() => {
-        wrapper = serverRender(
-          <div>
-            <NoSsr fallback="fallback">
-              <span>Hello</span>
-            </NoSsr>
-          </div>,
-        );
-      }).toErrorDev(
-        // Known issue due to using SSR APIs in a browser environment.
-        ['Warning: useLayoutEffect does nothing on the server'],
+      const container = serverRender(
+        <div>
+          <NoSsr fallback="fallback">
+            <span>Hello</span>
+          </NoSsr>
+        </div>,
       );
-      expect(wrapper.text()).to.equal('fallback');
+
+      expect(container.firstChild).to.have.text('fallback');
     });
   });
 

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

@@ -800,13 +800,13 @@ describe('<Tabs />', () => {
     const serverRender = createServerRender({ expectUseLayoutEffectWarning: true });
 
     it('should let the selected <Tab /> render the indicator server-side', () => {
-      const markup = serverRender(
+      const container = serverRender(
         <Tabs value={1}>
           <Tab />
           <Tab />
         </Tabs>,
       );
-      const indicator = markup.find(`button > .${classes.indicator}`);
+      const indicator = container.firstChild.querySelectorAll(`button > .${classes.indicator}`);
       expect(indicator).to.have.lengthOf(1);
     });
   });

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

@@ -143,8 +143,8 @@ describe('<ToggleButton />', () => {
     const serverRender = createServerRender({ expectUseLayoutEffectWarning: true });
 
     it('should server-side render', () => {
-      const markup = serverRender(<ToggleButton value="hello">Hello World</ToggleButton>);
-      expect(markup.text()).to.equal('Hello World');
+      const container = serverRender(<ToggleButton value="hello">Hello World</ToggleButton>);
+      expect(container.firstChild).to.have.text('Hello World');
     });
   });
 });

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

@@ -253,37 +253,34 @@ describe('useMediaQuery', () => {
   });
 
   describe('server-side', () => {
-    const serverRender = createServerRender();
+    const serverRender = createServerRender({ expectUseLayoutEffectWarning: true });
 
     it('should use the ssr match media ponyfill', () => {
-      let markup;
-      expect(() => {
-        function MyComponent() {
-          const matches = useMediaQuery('(min-width:2000px)');
+      function MyComponent() {
+        const matches = useMediaQuery('(min-width:2000px)');
 
-          return <span>{`${matches}`}</span>;
-        }
+        return <span>{`${matches}`}</span>;
+      }
 
-        const Test = () => {
-          const ssrMatchMedia = (query) => ({
-            matches: mediaQuery.match(query, {
-              width: 3000,
-            }),
-          });
+      const Test = () => {
+        const ssrMatchMedia = (query) => ({
+          matches: mediaQuery.match(query, {
+            width: 3000,
+          }),
+        });
 
-          return (
-            <ThemeProvider
-              theme={{ components: { MuiUseMediaQuery: { defaultProps: { ssrMatchMedia } } } }}
-            >
-              <MyComponent />
-            </ThemeProvider>
-          );
-        };
+        return (
+          <ThemeProvider
+            theme={{ components: { MuiUseMediaQuery: { defaultProps: { ssrMatchMedia } } } }}
+          >
+            <MyComponent />
+          </ThemeProvider>
+        );
+      };
 
-        markup = serverRender(<Test />);
-      }).toErrorDev(['Warning: useLayoutEffect does nothing on the server']);
+      const container = serverRender(<Test />);
 
-      expect(markup.text()).to.equal('true');
+      expect(container.firstChild).to.have.text('true');
     });
   });