[test] Migrate more components to react-testing-library

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

@@ -1,7 +1,14 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createShallow, getClasses, createMount, describeConformance, act } from 'test/utils';
+import {
+  getClasses,
+  createMount,
+  describeConformance,
+  act,
+  createClientRender,
+  fireEvent,
+} from 'test/utils';
 import Link from './Link';
 import Typography from '../Typography';
 
@@ -15,12 +22,13 @@ function focusVisible(element) {
 
 describe('<Link />', () => {
   const mount = createMount();
-  let shallow;
+  const render = createClientRender();
   let classes;
+  let typographyClasses;
 
   before(() => {
-    shallow = createShallow({ dive: true });
     classes = getClasses(<Link href="/">Home</Link>);
+    typographyClasses = getClasses(<Typography />);
   });
 
   describeConformance(<Link href="/">Home</Link>, () => ({
@@ -31,18 +39,20 @@ describe('<Link />', () => {
   }));
 
   it('should render children', () => {
-    const wrapper = mount(<Link href="/">Home</Link>);
-    expect(wrapper.contains('Home')).to.equal(true);
+    const { queryByText } = render(<Link href="/">Home</Link>);
+
+    expect(queryByText('Home')).to.not.equal(null);
   });
 
   it('should pass props to the <Typography> component', () => {
-    const wrapper = mount(
+    const { container } = render(
       <Link href="/" color="primary">
         Test
       </Link>,
     );
-    const typography = wrapper.find(Typography);
-    expect(typography.props().color).to.equal('primary');
+    const typography = container.querySelector(`.${typographyClasses.colorPrimary}`);
+
+    expect(typography).to.not.equal(null);
   });
 
   describe('event callbacks', () => {
@@ -54,36 +64,37 @@ describe('<Link />', () => {
         return result;
       }, {});
 
-      const wrapper = shallow(
+      const { container } = render(
         <Link href="/" {...handlers}>
           Home
         </Link>,
       );
+      const anchor = container.querySelector('a');
 
       events.forEach((n) => {
         const event = n.charAt(2).toLowerCase() + n.slice(3);
-        wrapper.simulate(event, { target: { tagName: 'a' } });
+        fireEvent[event](anchor);
         expect(handlers[n].callCount).to.equal(1);
       });
     });
   });
 
   describe('keyboard focus', () => {
     it('should add the focusVisible class when focused', () => {
-      const wrapper = mount(<Link href="/">Home</Link>);
-      const anchor = wrapper.find('a').instance();
+      const { container } = render(<Link href="/">Home</Link>);
+      const anchor = container.querySelector('a');
 
-      expect(anchor.classList.contains(classes.focusVisible)).to.equal(false);
+      expect(anchor).to.not.have.class(classes.focusVisible);
 
       focusVisible(anchor);
 
-      expect(anchor.classList.contains(classes.focusVisible)).to.equal(true);
+      expect(anchor).to.have.class(classes.focusVisible);
 
       act(() => {
         anchor.blur();
       });
 
-      expect(anchor.classList.contains(classes.focusVisible)).to.equal(false);
+      expect(anchor).to.not.have.class(classes.focusVisible);
     });
   });
 });

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

@@ -1,15 +1,14 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createShallow, getClasses, createMount, describeConformance } from 'test/utils';
+import { getClasses, createMount, describeConformance, createClientRender } from 'test/utils';
 import ListSubheader from './ListSubheader';
 
 describe('<ListSubheader />', () => {
   const mount = createMount();
-  let shallow;
+  const render = createClientRender();
   let classes;
 
   before(() => {
-    shallow = createShallow({ dive: true });
     classes = getClasses(<ListSubheader />);
   });
 
@@ -21,38 +20,44 @@ describe('<ListSubheader />', () => {
   }));
 
   it('should display primary color', () => {
-    const wrapper = shallow(<ListSubheader color="primary" />);
-    expect(wrapper.hasClass(classes.colorPrimary)).to.equal(true);
-    expect(wrapper.hasClass(classes.root)).to.equal(true);
+    const { container } = render(<ListSubheader color="primary" />);
+
+    expect(container.firstChild).to.have.class(classes.colorPrimary);
+    expect(container.firstChild).to.have.class(classes.root);
   });
 
   it('should display inset class', () => {
-    const wrapper = shallow(<ListSubheader inset />);
-    expect(wrapper.hasClass(classes.inset)).to.equal(true);
-    expect(wrapper.hasClass(classes.root)).to.equal(true);
+    const { container } = render(<ListSubheader inset />);
+
+    expect(container.firstChild).to.have.class(classes.inset);
+    expect(container.firstChild).to.have.class(classes.root);
   });
 
   describe('prop: disableSticky', () => {
     it('should display sticky class', () => {
-      const wrapper = shallow(<ListSubheader />);
-      expect(wrapper.hasClass(classes.sticky)).to.equal(true);
+      const { container } = render(<ListSubheader />);
+
+      expect(container.firstChild).to.have.class(classes.sticky);
     });
 
     it('should not display sticky class', () => {
-      const wrapper = shallow(<ListSubheader disableSticky />);
-      expect(wrapper.hasClass(classes.sticky)).to.equal(false);
+      const { container } = render(<ListSubheader disableSticky />);
+
+      expect(container.firstChild).to.not.have.class(classes.sticky);
     });
   });
 
   describe('prop: disableGutters', () => {
     it('should not display gutters class', () => {
-      const wrapper = shallow(<ListSubheader disableGutters />);
-      expect(wrapper.hasClass(classes.gutters)).to.equal(false);
+      const { container } = render(<ListSubheader disableGutters />);
+
+      expect(container.firstChild).to.not.have.class(classes.gutters);
     });
 
     it('should display gutters class', () => {
-      const wrapper = shallow(<ListSubheader />);
-      expect(wrapper.hasClass(classes.gutters)).to.equal(true);
+      const { container } = render(<ListSubheader />);
+
+      expect(container.firstChild).to.have.class(classes.gutters);
     });
   });
 });