[test] Migrate more components to react-testing-library (#22874)

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

@@ -1,26 +1,23 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createShallow } from 'test/utils';
+import { createClientRender } from 'test/utils';
 import Hidden from './Hidden';
-import HiddenJs from './HiddenJs';
-import HiddenCss from './HiddenCss';
 
 describe('<Hidden />', () => {
-  let shallow;
-
-  before(() => {
-    shallow = createShallow();
-  });
+  const render = createClientRender();
+  const child = <span>Hello</span>;
 
   describe('prop: implementation', () => {
     it('should use HiddenJs by default', () => {
-      const wrapper = shallow(<Hidden>Hello</Hidden>);
-      expect(wrapper.find(HiddenJs).length).to.equal(1);
+      const { container } = render(<Hidden width="sm">{child}</Hidden>);
+      // JS implementation doesn't requires wrapping <div />
+      expect(container.firstChild).to.have.tagName('span');
     });
 
     it('should change the implementation', () => {
-      const wrapper = shallow(<Hidden implementation="css">Hello</Hidden>);
-      expect(wrapper.find(HiddenCss).length).to.equal(1);
+      const { container } = render(<Hidden implementation="css">{child}</Hidden>);
+      // CSS implementation requires wrapping <div />
+      expect(container.firstChild).to.have.tagName('div');
     });
   });
 });

packages/material-ui/src/Hidden/HiddenCss.test.js

@@ -1,21 +1,20 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createShallow, getClasses, createMount } from 'test/utils';
+import { getClasses, createMount, createClientRender } from 'test/utils';
 import HiddenCss from './HiddenCss';
 import { createMuiTheme, MuiThemeProvider } from '../styles';
 
-const Foo = () => <div>bar</div>;
+const TestChild = () => <div data-testid="test-child">bar</div>;
 
 describe('<HiddenCss />', () => {
   /**
    * @type {ReturnType<typeof createMount>}
    */
   const mount = createMount();
-  let shallow;
+  const render = createClientRender();
   let classes;
 
   before(() => {
-    shallow = createShallow({ untilSelector: 'div' });
     classes = getClasses(
       <HiddenCss>
         <div />
@@ -25,116 +24,125 @@ describe('<HiddenCss />', () => {
 
   describe('the generated class names', () => {
     it('should be ok with only', () => {
-      const wrapper = shallow(
+      const { container } = render(
         <HiddenCss only="sm">
           <div className="foo" />
         </HiddenCss>,
       );
+      const root = container.firstChild;
 
-      expect(wrapper.type()).to.equal('div');
-      expect(wrapper.hasClass(classes.onlySm)).to.equal(true);
-
-      const div = wrapper.childAt(0);
-      expect(div.type()).to.equal('div');
-      expect(div.props().className).to.equal('foo');
+      expect(root).to.have.tagName('div');
+      expect(root).to.have.class(classes.onlySm);
+      expect(root.firstChild).to.have.tagName('div');
+      expect(root.firstChild).to.have.class('foo');
     });
 
     it('should be ok with only as an array', () => {
-      const wrapper = shallow(
+      const { container } = render(
         <HiddenCss only={['xs', 'sm']}>
           <div className="foo" />
         </HiddenCss>,
       );
+      const root = container.firstChild;
 
-      expect(wrapper.type()).to.equal('div');
-      expect(wrapper.props().className.split(' ')[0]).to.equal(classes.onlyXs);
-      expect(wrapper.props().className.split(' ')[1]).to.equal(classes.onlySm);
+      expect(root).to.have.tagName('div');
+      expect(root).to.have.class(classes.onlyXs);
+      expect(root).to.have.class(classes.onlySm);
     });
 
     it('should be ok with only as an empty array', () => {
-      const wrapper = shallow(
+      const { container } = render(
         <HiddenCss only={[]}>
           <div className="foo" />
         </HiddenCss>,
       );
+      const root = container.firstChild;
 
-      expect(wrapper.type()).to.equal('div');
-      expect(wrapper.props().className).to.equal('');
+      expect(root).to.have.tagName('div');
+      Object.keys(classes).forEach((className) => expect(root).to.not.have.class(className));
     });
 
     it('should be ok with mdDown', () => {
-      const wrapper = shallow(
+      const { container } = render(
         <HiddenCss mdDown>
           <div className="foo" />
         </HiddenCss>,
       );
-      expect(wrapper.hasClass(classes.mdDown)).to.equal(true);
+
+      expect(container.firstChild).to.have.class(classes.mdDown);
     });
 
     it('should be ok with mdUp', () => {
-      const wrapper = shallow(
+      const { container } = render(
         <HiddenCss mdUp>
           <div className="foo" />
         </HiddenCss>,
       );
-      expect(wrapper.hasClass(classes.mdUp)).to.equal(true);
+
+      expect(container.firstChild).to.have.class(classes.mdUp);
     });
     it('should handle provided className prop', () => {
-      const wrapper = shallow(
+      const { container } = render(
         <HiddenCss mdUp className="custom">
           <div className="foo" />
         </HiddenCss>,
       );
-      expect(wrapper.hasClass('custom')).to.equal(true);
+
+      expect(container.firstChild).to.have.class('custom');
     });
 
     it('allows custom breakpoints', () => {
       const theme = createMuiTheme({ breakpoints: { keys: ['xxl'] } });
-      const wrapper = mount(
+      const { container } = render(
         <MuiThemeProvider theme={theme}>
           <HiddenCss xxlUp className="testid" classes={{ xxlUp: 'xxlUp' }}>
             <div />
           </HiddenCss>
         </MuiThemeProvider>,
       );
 
-      expect(wrapper.find('div.testid').hasClass('xxlUp')).to.equal(true);
+      expect(container.querySelector('.testid')).to.have.class('xxlUp');
     });
   });
 
   describe('prop: children', () => {
     it('should work when text Node', () => {
-      const wrapper = shallow(<HiddenCss mdUp>foo</HiddenCss>);
-      expect(wrapper.type()).to.equal('div');
-      expect(wrapper.hasClass(classes.mdUp)).to.equal(true);
-      expect(wrapper.childAt(0).text()).to.equal('foo');
+      const { container, queryByText } = render(<HiddenCss mdUp>foo</HiddenCss>);
+      const root = container.firstChild;
+
+      expect(root).to.have.tagName('div');
+      expect(root).to.have.class(classes.mdUp);
+      expect(queryByText('foo')).to.not.equal(null);
     });
 
     it('should work when Element', () => {
-      const wrapper = shallow(
+      const { container, queryByTestId } = render(
         <HiddenCss mdUp>
-          <Foo />
+          <TestChild />
         </HiddenCss>,
       );
-      expect(wrapper.type()).to.equal('div');
-      expect(wrapper.hasClass(classes.mdUp)).to.equal(true);
-      expect(wrapper.childAt(0).is(Foo)).to.equal(true);
+      const root = container.firstChild;
+
+      expect(root).to.have.tagName('div');
+      expect(root).to.have.class(classes.mdUp);
+      expect(queryByTestId('test-child')).to.not.equal(null);
     });
 
     it('should work when mixed ChildrenArray', () => {
-      const wrapper = shallow(
+      const { container, queryAllByTestId, queryByText } = render(
         <HiddenCss mdUp>
-          <Foo />
-          <Foo />
+          <TestChild />
+          <TestChild />
           foo
         </HiddenCss>,
       );
+      const root = container.firstChild;
+      const children = queryAllByTestId('test-child');
 
-      expect(wrapper.type()).to.equal('div');
-      expect(wrapper.hasClass(classes.mdUp)).to.equal(true);
-      expect(wrapper.childAt(0).is(Foo)).to.equal(true);
-      expect(wrapper.childAt(1).is(Foo)).to.equal(true);
-      expect(wrapper.childAt(2).text()).to.equal('foo');
+      expect(root).to.have.tagName('div');
+      expect(root).to.have.class(classes.mdUp);
+      expect(children.length).to.equal(2);
+      expect(queryByText('foo')).to.not.equal(null);
     });
   });
 

packages/material-ui/src/Hidden/HiddenJs.test.js

@@ -1,14 +1,10 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createShallow } from 'test/utils';
+import { createClientRender } from 'test/utils';
 import HiddenJs from './HiddenJs';
 
 describe('<HiddenJs />', () => {
-  let shallow;
-
-  before(() => {
-    shallow = createShallow({ dive: true });
-  });
+  const render = createClientRender();
 
   function resolvePropName(upDownOnly, breakpoint) {
     if (upDownOnly === 'only') {
@@ -29,12 +25,13 @@ describe('<HiddenJs />', () => {
       const props = { [prop]: upDownOnly === 'only' ? breakpoint : true };
 
       it(descriptions[upDownOnly], () => {
-        const wrapper = shallow(
+        const { container } = render(
           <HiddenJs width={width} {...props}>
             <div>foo</div>
           </HiddenJs>,
         );
-        expect(wrapper.type()).to.equal(null);
+
+        expect(container.firstChild).to.equal(null);
       });
     });
   }
@@ -50,14 +47,14 @@ describe('<HiddenJs />', () => {
       const props = { [prop]: upDownOnly === 'only' ? breakpoint : true };
 
       it(descriptions[upDownOnly], () => {
-        const wrapper = shallow(
+        const { container, queryByText } = render(
           <HiddenJs width={width} {...props}>
             <div>foo</div>
           </HiddenJs>,
         );
-        expect(wrapper.type()).to.not.equal(null);
-        expect(wrapper.name()).to.equal('div');
-        expect(wrapper.first().text()).to.equal('foo');
+
+        expect(container.firstChild).to.have.tagName('div');
+        expect(queryByText('foo')).to.not.equal(null);
       });
     });
   }