[SnackbarContent] Convert unit tests to @testing-library/react (#17942)

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

@@ -1,64 +1,70 @@
 import React from 'react';
-import { assert } from 'chai';
-import { createShallow, createMount, getClasses } from '@material-ui/core/test-utils';
+import { expect } from 'chai';
+import { createClientRender } from 'test/utils/createClientRender';
+import { createMount, getClasses } from '@material-ui/core/test-utils';
 import describeConformance from '../test-utils/describeConformance';
 import Paper from '../Paper';
 import SnackbarContent from './SnackbarContent';
 
 describe('<SnackbarContent />', () => {
   let mount;
-  let shallow;
   let classes;
+  const render = createClientRender({ strict: true });
 
   before(() => {
     mount = createMount({ strict: true });
-    shallow = createShallow({ untilSelector: 'withStyles(Paper)' });
     classes = getClasses(<SnackbarContent message="message" />);
   });
 
-  after(() => {
-    mount.cleanUp();
-  });
-
   describeConformance(<SnackbarContent message="conform?" />, () => ({
     classes,
     inheritComponent: Paper,
     mount,
     refInstanceof: window.HTMLDivElement,
     skip: ['componentProp'],
+    after: () => mount.cleanUp(),
   }));
 
   describe('prop: action', () => {
     it('should render the action', () => {
       const action = <span>action</span>;
-      const wrapper = shallow(<SnackbarContent message="message" action={action} />);
-      assert.strictEqual(wrapper.childAt(1).hasClass(classes.action), true);
-      assert.strictEqual(wrapper.childAt(1).contains(action), true);
+      const { container } = render(
+        <SnackbarContent message="message" data-testid="action" action={action} />,
+      );
+      expect(container.querySelector(`.${classes.action}`)).to.have.class(classes.action);
+      expect(container.querySelector(`.${classes.action}`)).to.contain('span');
     });
 
     it('should render an array of elements', () => {
       const action0 = <span key={0}>action0</span>;
       const action1 = <span key={1}>action1</span>;
-      const wrapper = shallow(<SnackbarContent message="message" action={[action0, action1]} />);
-      assert.strictEqual(wrapper.childAt(1).hasClass(classes.action), true);
-      assert.strictEqual(wrapper.childAt(1).contains(action0), true);
-      assert.strictEqual(wrapper.childAt(1).contains(action1), true);
+      const { getByText } = render(
+        <SnackbarContent message="message" action={[action0, action1]} />,
+      );
+      expect(getByText('action0')).to.not.be.null;
+      expect(getByText('action1')).to.not.be.null;
     });
   });
 
   describe('prop: message', () => {
     it('should render the message', () => {
-      const message = <span>message</span>;
-      const wrapper = shallow(<SnackbarContent message={message} />);
-      assert.strictEqual(wrapper.childAt(0).hasClass(classes.message), true);
-      assert.strictEqual(wrapper.childAt(0).contains(message), true);
+      const message = 'message prop text';
+      const { getByRole } = render(<SnackbarContent message={<span>{message}</span>} />);
+      expect(getByRole('alert')).to.have.text(message);
     });
   });
 
   describe('prop: role', () => {
-    it('should render the role', () => {
-      const wrapper = shallow(<SnackbarContent message="message" role="alert" />);
-      assert.strictEqual(wrapper.props().role, 'alert');
+    it('renders the default role', () => {
+      const { getByRole } = render(<SnackbarContent message="alert message" />);
+      expect(getByRole('alert')).to.have.text('alert message');
+    });
+
+    it('can override the role', () => {
+      const { queryByRole } = render(
+        <SnackbarContent message="alertdialog message" role="alertdialog" />,
+      );
+      expect(queryByRole('alertdialog')).to.have.text('alertdialog message');
     });
   });
 });