diff --git a/packages/material-ui/src/SnackbarContent/SnackbarContent.test.js b/packages/material-ui/src/SnackbarContent/SnackbarContent.test.js
index 9b0182d0a2367d..82909ea5b6ca05 100644
--- a/packages/material-ui/src/SnackbarContent/SnackbarContent.test.js
+++ b/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('', () => {
let mount;
- let shallow;
let classes;
+ const render = createClientRender({ strict: true });
before(() => {
mount = createMount({ strict: true });
- shallow = createShallow({ untilSelector: 'withStyles(Paper)' });
classes = getClasses();
});
- after(() => {
- mount.cleanUp();
- });
-
describeConformance(, () => ({
classes,
inheritComponent: Paper,
mount,
refInstanceof: window.HTMLDivElement,
skip: ['componentProp'],
+ after: () => mount.cleanUp(),
}));
describe('prop: action', () => {
it('should render the action', () => {
const action = action;
- const wrapper = shallow();
- assert.strictEqual(wrapper.childAt(1).hasClass(classes.action), true);
- assert.strictEqual(wrapper.childAt(1).contains(action), true);
+ const { container } = render(
+ ,
+ );
+ 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 = action0;
const action1 = action1;
- const wrapper = shallow();
- 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(
+ ,
+ );
+ expect(getByText('action0')).to.not.be.null;
+ expect(getByText('action1')).to.not.be.null;
});
});
describe('prop: message', () => {
it('should render the message', () => {
- const message = message;
- const wrapper = shallow();
- 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({message}} />);
+ expect(getByRole('alert')).to.have.text(message);
});
});
describe('prop: role', () => {
- it('should render the role', () => {
- const wrapper = shallow();
- assert.strictEqual(wrapper.props().role, 'alert');
+ it('renders the default role', () => {
+ const { getByRole } = render();
+ expect(getByRole('alert')).to.have.text('alert message');
+ });
+
+ it('can override the role', () => {
+ const { queryByRole } = render(
+ ,
+ );
+ expect(queryByRole('alertdialog')).to.have.text('alertdialog message');
});
});
});