diff --git a/packages/material-ui/src/AppBar/AppBar.test.js b/packages/material-ui/src/AppBar/AppBar.test.js
index 3f5d4f3c941ad6..5ddcc67e5ad317 100644
--- a/packages/material-ui/src/AppBar/AppBar.test.js
+++ b/packages/material-ui/src/AppBar/AppBar.test.js
@@ -1,18 +1,17 @@
 import * as React from 'react';
-import { assert } from 'chai';
-import { createMount, createShallow, getClasses } from '@material-ui/core/test-utils';
+import { expect } from 'chai';
+import { createMount, getClasses } from '@material-ui/core/test-utils';
+import { createClientRender } from 'test/utils/createClientRender';
 import describeConformance from '../test-utils/describeConformance';
 import AppBar from './AppBar';
 import Paper from '../Paper';
 
 describe('<AppBar />', () => {
   let mount;
-  let shallow;
   let classes;
-
+  const render = createClientRender();
   before(() => {
     mount = createMount({ strict: true });
-    shallow = createShallow({ dive: true });
     classes = getClasses(<AppBar>Hello World</AppBar>);
   });
 
@@ -29,30 +28,34 @@ describe('<AppBar />', () => {
   }));
 
   it('should render with the root class and primary', () => {
-    const wrapper = shallow(<AppBar>Hello World</AppBar>);
-    assert.strictEqual(wrapper.hasClass(classes.root), true);
-    assert.strictEqual(wrapper.hasClass(classes.colorPrimary), true);
-    assert.strictEqual(wrapper.hasClass(classes.colorSecondary), false);
+    const { container } = render(<AppBar>Hello World</AppBar>);
+    const appBar = container.firstChild;
+    expect(appBar).to.have.class(classes.root);
+    expect(appBar).to.have.class(classes.colorPrimary);
+    expect(appBar).to.not.have.class(classes.colorSecondary);
   });
 
   it('should render a primary app bar', () => {
-    const wrapper = shallow(<AppBar color="primary">Hello World</AppBar>);
-    assert.strictEqual(wrapper.hasClass(classes.root), true);
-    assert.strictEqual(wrapper.hasClass(classes.colorPrimary), true);
-    assert.strictEqual(wrapper.hasClass(classes.colorSecondary), false);
+    const { container } = render(<AppBar color="primary">Hello World</AppBar>);
+    const appBar = container.firstChild;
+    expect(appBar).to.have.class(classes.root);
+    expect(appBar).to.have.class(classes.colorPrimary);
+    expect(appBar).to.not.have.class(classes.colorSecondary);
   });
 
   it('should render an secondary app bar', () => {
-    const wrapper = shallow(<AppBar color="secondary">Hello World</AppBar>);
-    assert.strictEqual(wrapper.hasClass(classes.root), true);
-    assert.strictEqual(wrapper.hasClass(classes.colorPrimary), false);
-    assert.strictEqual(wrapper.hasClass(classes.colorSecondary), true);
+    const { container } = render(<AppBar color="secondary">Hello World</AppBar>);
+    const appBar = container.firstChild;
+    expect(appBar).to.have.class(classes.root);
+    expect(appBar).to.not.have.class(classes.colorPrimary);
+    expect(appBar).to.have.class(classes.colorSecondary);
   });
 
   describe('Dialog', () => {
     it('should add a .mui-fixed class', () => {
-      const wrapper = shallow(<AppBar position="fixed">Hello World</AppBar>);
-      assert.strictEqual(wrapper.hasClass('mui-fixed'), true);
+      const { container } = render(<AppBar position="fixed">Hello World</AppBar>);
+      const appBar = container.firstChild;
+      expect(appBar).to.have.class('mui-fixed');
     });
   });
 });