Skip to content

Commit 62adda3

Browse files
eps1loneps1lon
committed
Wrap all updates in act()
1 parent 9763176 commit 62adda3

File tree

4 files changed

+178
-112
lines changed

4 files changed

+178
-112
lines changed

‎test/CSSTransition-test.js‎

Lines changed: 77 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { render } from './utils';
2+
import { render, waitFor } from './utils';
33

44
import CSSTransition from '../src/CSSTransition';
55
import TransitionGroup from '../src/TransitionGroup';
@@ -36,8 +36,9 @@ describe('CSSTransition', () => {
3636
});
3737

3838
describe('entering', () => {
39-
it('should apply classes at each transition state', (done) => {
39+
it('should apply classes at each transition state', async () => {
4040
let count = 0;
41+
let done = false;
4142
const nodeRef = React.createRef();
4243
const { setProps } = render(
4344
<CSSTransition nodeRef={nodeRef} timeout={10} classNames="test">
@@ -63,12 +64,16 @@ describe('CSSTransition', () => {
6364
onEntered() {
6465
expect(nodeRef.current.className).toEqual('test-enter-done');
6566
expect(count).toEqual(2);
66-
done();
67+
done = true;
6768
},
6869
});
70+
71+
await waitFor(() => {
72+
expect(done).toBe(true);
73+
});
6974
});
7075

71-
it('should apply custom classNames names', (done) => {
76+
it('should apply custom classNames names', async () => {
7277
let count = 0;
7378
const nodeRef = React.createRef();
7479
const { setProps } = render(
@@ -102,15 +107,17 @@ describe('CSSTransition', () => {
102107

103108
onEntered() {
104109
expect(nodeRef.current.className).toEqual('custom-super-done');
105-
expect(count).toEqual(2);
106-
done();
107110
},
108111
});
112+
113+
await waitFor(() => {
114+
expect(count).toEqual(2);
115+
});
109116
});
110117
});
111118

112119
describe('appearing', () => {
113-
it('should apply appear classes at each transition state', (done) => {
120+
it('should apply appear classes at each transition state', async () => {
114121
let count = 0;
115122
const nodeRef = React.createRef();
116123
render(
@@ -137,61 +144,68 @@ describe('CSSTransition', () => {
137144
expect(nodeRef.current.className).toEqual(
138145
'appear-test-appear-done appear-test-enter-done'
139146
);
140-
expect(count).toEqual(2);
141-
done();
142147
}}
143148
>
144149
<div ref={nodeRef} />
145150
</CSSTransition>
146151
);
152+
153+
await waitFor(() => {
154+
expect(count).toEqual(2);
155+
});
147156
});
148157

149158
it('should lose the "*-appear-done" class after leaving and entering again', async () => {
150159
const nodeRef = React.createRef();
151-
let handleEntered;
152-
let onEntered = new Promise((resolve) => {
153-
handleEntered = resolve;
154-
});
155-
let handleExited;
156-
const onExited = new Promise((resolve) => {
157-
handleExited = resolve;
158-
});
160+
let entered = false;
161+
let exited = false;
159162
const { setProps } = render(
160163
<CSSTransition
161164
timeout={10}
162165
nodeRef={nodeRef}
163166
classNames="appear-test"
164167
in={true}
165168
appear={true}
166-
onEntered={handleEntered}
169+
onEntered={() => {
170+
entered = true;
171+
}}
167172
>
168173
<div ref={nodeRef} />
169174
</CSSTransition>
170175
);
171176

172-
await onEntered;
177+
await waitFor(() => {
178+
expect(entered).toEqual(true);
179+
});
173180
setProps({
174181
in: false,
175182
onEntered: () => {},
176-
onExited: handleExited,
183+
onExited: () => {
184+
exited = true;
185+
},
177186
});
178187

179-
await onExited;
180-
expect(nodeRef.current.className).toBe('appear-test-exit-done');
181-
onEntered = new Promise((resolve) => {
182-
handleEntered = resolve;
188+
await waitFor(() => {
189+
expect(exited).toEqual(true);
183190
});
191+
expect(nodeRef.current.className).toBe('appear-test-exit-done');
192+
entered = false;
184193
setProps({
185194
in: true,
186-
onEntered: handleEntered,
195+
onEntered: () => {
196+
entered = true;
197+
},
187198
});
188199

189-
await onEntered;
200+
await waitFor(() => {
201+
expect(entered).toEqual(true);
202+
});
190203
expect(nodeRef.current.className).toBe('appear-test-enter-done');
191204
});
192205

193-
it('should not add undefined when appearDone is not defined', (done) => {
206+
it('should not add undefined when appearDone is not defined', async () => {
194207
const nodeRef = React.createRef();
208+
let done = false;
195209
render(
196210
<CSSTransition
197211
timeout={10}
@@ -206,15 +220,19 @@ describe('CSSTransition', () => {
206220
onEntered={(isAppearing) => {
207221
expect(isAppearing).toEqual(true);
208222
expect(nodeRef.current.className).toEqual('');
209-
done();
223+
done = true;
210224
}}
211225
>
212226
<div ref={nodeRef} />
213227
</CSSTransition>
214228
);
229+
230+
await waitFor(() => {
231+
expect(done).toEqual(true);
232+
});
215233
});
216234

217-
it('should not be appearing in normal enter mode', (done) => {
235+
it('should not be appearing in normal enter mode', async () => {
218236
let count = 0;
219237
const nodeRef = React.createRef();
220238
render(
@@ -248,10 +266,12 @@ describe('CSSTransition', () => {
248266
expect(nodeRef.current.className).toEqual(
249267
'not-appear-test-enter-done'
250268
);
251-
expect(count).toEqual(2);
252-
done();
253269
},
254270
});
271+
272+
await waitFor(() => {
273+
expect(count).toEqual(2);
274+
});
255275
});
256276

257277
it('should not enter the transition states when appear=false', () => {
@@ -280,7 +300,7 @@ describe('CSSTransition', () => {
280300
});
281301

282302
describe('exiting', () => {
283-
it('should apply classes at each transition state', (done) => {
303+
it('should apply classes at each transition state', async () => {
284304
let count = 0;
285305
const nodeRef = React.createRef();
286306
const { setProps } = render(
@@ -306,13 +326,15 @@ describe('CSSTransition', () => {
306326

307327
onExited() {
308328
expect(nodeRef.current.className).toEqual('test-exit-done');
309-
expect(count).toEqual(2);
310-
done();
311329
},
312330
});
331+
332+
await waitFor(() => {
333+
expect(count).toEqual(2);
334+
});
313335
});
314336

315-
it('should apply custom classNames names', (done) => {
337+
it('should apply custom classNames names', async () => {
316338
let count = 0;
317339
const nodeRef = React.createRef();
318340
const { setProps } = render(
@@ -347,13 +369,15 @@ describe('CSSTransition', () => {
347369

348370
onExited() {
349371
expect(nodeRef.current.className).toEqual('custom-super-done');
350-
expect(count).toEqual(2);
351-
done();
352372
},
353373
});
374+
375+
await waitFor(() => {
376+
expect(count).toEqual(2);
377+
});
354378
});
355379

356-
it('should support empty prefix', (done) => {
380+
it('should support empty prefix', async () => {
357381
let count = 0;
358382

359383
const nodeRef = React.createRef();
@@ -378,10 +402,12 @@ describe('CSSTransition', () => {
378402

379403
onExited() {
380404
expect(nodeRef.current.className).toEqual('exit-done');
381-
expect(count).toEqual(2);
382-
done();
383405
},
384406
});
407+
408+
await waitFor(() => {
409+
expect(count).toEqual(2);
410+
});
385411
});
386412
});
387413

@@ -423,20 +449,7 @@ describe('CSSTransition', () => {
423449
<Test direction="down" text="foo" nodeRef={nodeRef.foo} />
424450
);
425451

426-
const rerender = (getProps) =>
427-
new Promise((resolve) =>
428-
setProps({
429-
onEnter: undefined,
430-
onEntering: undefined,
431-
onEntered: undefined,
432-
onExit: undefined,
433-
onExiting: undefined,
434-
onExited: undefined,
435-
...getProps(resolve),
436-
})
437-
);
438-
439-
await rerender((resolve) => ({
452+
setProps({
440453
direction: 'up',
441454
text: 'bar',
442455
nodeRef: nodeRef.bar,
@@ -450,11 +463,14 @@ describe('CSSTransition', () => {
450463
expect(nodeRef.bar.current.className).toEqual(
451464
'up-enter up-enter-active'
452465
);
453-
resolve();
454466
},
455-
}));
467+
});
456468

457-
await rerender((resolve) => ({
469+
await waitFor(() => {
470+
expect(count).toEqual(2);
471+
});
472+
473+
setProps({
458474
direction: 'down',
459475
text: 'foo',
460476
nodeRef: nodeRef.foo,
@@ -468,11 +484,12 @@ describe('CSSTransition', () => {
468484
onEntered() {
469485
count++;
470486
expect(nodeRef.foo.current.className).toEqual('down-enter-done');
471-
resolve();
472487
},
473-
}));
488+
});
474489

475-
expect(count).toEqual(4);
490+
await waitFor(() => {
491+
expect(count).toEqual(4);
492+
});
476493
});
477494
});
478495
});

‎test/CSSTransitionGroup-test.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -218,7 +218,9 @@ describe('CSSTransitionGroup', () => {
218218
ReactDOM.unmountComponentAtNode(container);
219219

220220
// Testing that no exception is thrown here, as the timeout has been cleared.
221-
jest.runAllTimers();
221+
act(() => {
222+
jest.runAllTimers();
223+
});
222224
});
223225

224226
it('should handle unmounted elements properly', () => {

0 commit comments

Comments
 (0)