Skip to content

Commit a30e7d9

Browse files
philipp-spiessSunil Pai
authored andcommitted
act() tests - Reuse and properly unmount containers (#14974)
1 parent 8cf963c commit a30e7d9

File tree

1 file changed

+34
-11
lines changed

1 file changed

+34
-11
lines changed

packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js

Lines changed: 34 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ let React;
1111
let ReactDOM;
1212
let ReactTestUtils;
1313
let act;
14+
let container;
1415

1516
jest.useRealTimers();
1617

@@ -29,6 +30,12 @@ describe('ReactTestUtils.act()', () => {
2930
ReactDOM = require('react-dom');
3031
ReactTestUtils = require('react-dom/test-utils');
3132
act = ReactTestUtils.act;
33+
container = document.createElement('div');
34+
document.body.appendChild(container);
35+
});
36+
afterEach(() => {
37+
ReactDOM.unmountComponentAtNode(container);
38+
document.body.removeChild(container);
3239
});
3340

3441
describe('sync', () => {
@@ -66,9 +73,6 @@ describe('ReactTestUtils.act()', () => {
6673
);
6774
}
6875

69-
const container = document.createElement('div');
70-
// attach to body so events works
71-
document.body.appendChild(container);
7276
let calledCounter = 0;
7377
act(() => {
7478
ReactDOM.render(
@@ -96,8 +100,6 @@ describe('ReactTestUtils.act()', () => {
96100
act(click);
97101
expect(calledCounter).toBe(5);
98102
expect(button.innerHTML).toBe('5');
99-
100-
document.body.removeChild(container);
101103
});
102104

103105
it('should flush effects recursively', () => {
@@ -111,7 +113,6 @@ describe('ReactTestUtils.act()', () => {
111113
return ctr;
112114
}
113115

114-
const container = document.createElement('div');
115116
act(() => {
116117
ReactDOM.render(<App />, container);
117118
});
@@ -130,8 +131,6 @@ describe('ReactTestUtils.act()', () => {
130131
</button>
131132
);
132133
}
133-
const container = document.createElement('div');
134-
document.body.appendChild(container);
135134
let button;
136135
act(() => {
137136
ReactDOM.render(<App />, container);
@@ -142,7 +141,6 @@ describe('ReactTestUtils.act()', () => {
142141
expect(() => setValue(1)).toWarnDev([
143142
'An update to App inside a test was not wrapped in act(...).',
144143
]);
145-
document.body.removeChild(container);
146144
});
147145
describe('fake timers', () => {
148146
beforeEach(() => {
@@ -162,7 +160,6 @@ describe('ReactTestUtils.act()', () => {
162160
}, []);
163161
return toggle;
164162
}
165-
const container = document.createElement('div');
166163

167164
act(() => {
168165
ReactDOM.render(<App />, container);
@@ -184,7 +181,6 @@ describe('ReactTestUtils.act()', () => {
184181
}, []);
185182
return toggle;
186183
}
187-
const container = document.createElement('div');
188184

189185
act(() => {
190186
ReactDOM.render(<App />, container);
@@ -220,6 +216,33 @@ describe('ReactTestUtils.act()', () => {
220216
// all 5 ticks present and accounted for
221217
expect(el.innerHTML).toBe('5');
222218
});
219+
it('flushes immediate re-renders with act', () => {
220+
function App() {
221+
let [ctr, setCtr] = React.useState(0);
222+
React.useEffect(() => {
223+
if (ctr === 0) {
224+
setCtr(1);
225+
}
226+
const timeout = setTimeout(() => setCtr(2), 1000);
227+
return () => clearTimeout(timeout);
228+
});
229+
return ctr;
230+
}
231+
232+
act(() => {
233+
ReactDOM.render(<App />, container);
234+
// Since the effects won't be flushed yet, this does not advance the timer
235+
jest.runAllTimers();
236+
});
237+
238+
expect(container.innerHTML).toBe('1');
239+
240+
act(() => {
241+
jest.runAllTimers();
242+
});
243+
244+
expect(container.innerHTML).toBe('2');
245+
});
223246
});
224247

225248
it('warns if you return a value inside act', () => {

0 commit comments

Comments
 (0)