diff --git a/packages/material-ui/src/Grow/Grow.test.js b/packages/material-ui/src/Grow/Grow.test.js
index 7358402795f4d7..1e1ef814fa2fe3 100644
--- a/packages/material-ui/src/Grow/Grow.test.js
+++ b/packages/material-ui/src/Grow/Grow.test.js
@@ -2,7 +2,7 @@ import * as React from 'react';
import { expect } from 'chai';
import { spy, useFakeTimers } from 'sinon';
// use act from test/utils/createClientRender once we drop createMount from this test
-import { createMount, describeConformance } from 'test/utils';
+import { createClientRender, createMount, describeConformance } from 'test/utils';
import { act } from 'react-dom/test-utils';
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import { Transition } from 'react-transition-group';
@@ -10,6 +10,7 @@ import Grow from './Grow';
import useForkRef from '../utils/useForkRef';
describe('', () => {
+ const render = createClientRender();
const mount = createMount({ strict: true });
const defaultProps = {
in: true,
@@ -51,7 +52,7 @@ describe('', () => {
const handleExit = spy();
const handleExiting = spy();
const handleExited = spy();
- const wrapper = mount(
+ const { container, setProps } = render(
', () => {
,
);
- const child = wrapper.find('#test');
- wrapper.setProps({ in: true });
+ const child = container.querySelector('#test');
+
+ setProps({ in: true });
expect(handleEnter.callCount).to.equal(1);
- expect(handleEnter.args[0][0]).to.equal(child.instance());
+ expect(handleEnter.args[0][0]).to.equal(child);
expect(handleEnter.args[0][0].style.transition).to.match(
/opacity (0ms )?cubic-bezier\(0.4, 0, 0.2, 1\)( 0ms)?,( )?transform (0ms )?cubic-bezier\(0.4, 0, 0.2, 1\)( 0ms)?/,
);
expect(handleEntering.callCount).to.equal(1);
- expect(handleEntering.args[0][0]).to.equal(child.instance());
+ expect(handleEntering.args[0][0]).to.equal(child);
clock.tick(1000);
expect(handleEntered.callCount).to.equal(1);
- expect(handleEntered.args[0][0]).to.equal(child.instance());
+ expect(handleEntered.args[0][0]).to.equal(child);
- wrapper.setProps({ in: false });
+ setProps({ in: false });
expect(handleExit.callCount).to.equal(1);
- expect(handleExit.args[0][0]).to.equal(child.instance());
+ expect(handleExit.args[0][0]).to.equal(child);
expect(handleExit.args[0][0].style.opacity).to.equal('0');
expect(handleExit.args[0][0].style.transform).to.equal(
@@ -93,14 +95,14 @@ describe('', () => {
);
expect(handleExiting.callCount).to.equal(1);
- expect(handleExiting.args[0][0]).to.equal(child.instance());
+ expect(handleExiting.args[0][0]).to.equal(child);
expect(handleExiting.callCount).to.equal(1);
- expect(handleExiting.args[0][0]).to.equal(child.instance());
+ expect(handleExiting.args[0][0]).to.equal(child);
clock.tick(1000);
expect(handleExited.callCount).to.equal(1);
- expect(handleExited.args[0][0]).to.equal(child.instance());
+ expect(handleExited.args[0][0]).to.equal(child);
});
});
@@ -120,7 +122,7 @@ describe('', () => {
describe('onEnter', () => {
it('should create proper easeOut animation', () => {
const handleEnter = spy();
- mount(
+ render(
', () => {
);
}
- const wrapper = mount();
- wrapper.setProps({
+ const { setProps } = render();
+ setProps({
in: true,
});
@@ -213,7 +215,7 @@ describe('', () => {
const timeout = 10;
const handleEntered = spy();
- mount();
+ render();
expect(handleEntered.callCount).to.equal(0);
@@ -234,7 +236,7 @@ describe('', () => {
describe('onExit', () => {
it('should delay based on height when timeout is auto', () => {
const handleExited = spy();
- const wrapper = mount(
+ const { setProps } = render(
,
@@ -242,7 +244,7 @@ describe('', () => {
clock.tick(0);
- wrapper.setProps({
+ setProps({
in: false,
});
@@ -254,10 +256,12 @@ describe('', () => {
it('should use timeout as delay when timeout is number', () => {
const timeout = 20;
const handleExited = spy();
- const wrapper = mount();
+ const { setProps } = render(
+ ,
+ );
clock.tick(timeout);
- wrapper.setProps({
+ setProps({
in: false,
});
@@ -270,7 +274,7 @@ describe('', () => {
it('should create proper sharp animation', () => {
const handleExit = spy();
- const wrapper = mount(
+ const { setProps } = render(
', () => {
/>,
);
- wrapper.setProps({
+ setProps({
in: false,
});