diff --git a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
index 6e037088c9204..461cf6dfda08f 100644
--- a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
+++ b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
@@ -11,6 +11,7 @@ let React;
let ReactDOM;
let ReactTestUtils;
let act;
+let container;
jest.useRealTimers();
@@ -29,6 +30,12 @@ describe('ReactTestUtils.act()', () => {
ReactDOM = require('react-dom');
ReactTestUtils = require('react-dom/test-utils');
act = ReactTestUtils.act;
+ container = document.createElement('div');
+ document.body.appendChild(container);
+ });
+ afterEach(() => {
+ ReactDOM.unmountComponentAtNode(container);
+ document.body.removeChild(container);
});
describe('sync', () => {
@@ -66,9 +73,6 @@ describe('ReactTestUtils.act()', () => {
);
}
- const container = document.createElement('div');
- // attach to body so events works
- document.body.appendChild(container);
let calledCounter = 0;
act(() => {
ReactDOM.render(
@@ -96,8 +100,6 @@ describe('ReactTestUtils.act()', () => {
act(click);
expect(calledCounter).toBe(5);
expect(button.innerHTML).toBe('5');
-
- document.body.removeChild(container);
});
it('should flush effects recursively', () => {
@@ -111,7 +113,6 @@ describe('ReactTestUtils.act()', () => {
return ctr;
}
- const container = document.createElement('div');
act(() => {
ReactDOM.render(, container);
});
@@ -130,8 +131,6 @@ describe('ReactTestUtils.act()', () => {
);
}
- const container = document.createElement('div');
- document.body.appendChild(container);
let button;
act(() => {
ReactDOM.render(, container);
@@ -142,7 +141,6 @@ describe('ReactTestUtils.act()', () => {
expect(() => setValue(1)).toWarnDev([
'An update to App inside a test was not wrapped in act(...).',
]);
- document.body.removeChild(container);
});
describe('fake timers', () => {
beforeEach(() => {
@@ -162,7 +160,6 @@ describe('ReactTestUtils.act()', () => {
}, []);
return toggle;
}
- const container = document.createElement('div');
act(() => {
ReactDOM.render(, container);
@@ -184,7 +181,6 @@ describe('ReactTestUtils.act()', () => {
}, []);
return toggle;
}
- const container = document.createElement('div');
act(() => {
ReactDOM.render(, container);
@@ -220,6 +216,33 @@ describe('ReactTestUtils.act()', () => {
// all 5 ticks present and accounted for
expect(el.innerHTML).toBe('5');
});
+ it('flushes immediate re-renders with act', () => {
+ function App() {
+ let [ctr, setCtr] = React.useState(0);
+ React.useEffect(() => {
+ if (ctr === 0) {
+ setCtr(1);
+ }
+ const timeout = setTimeout(() => setCtr(2), 1000);
+ return () => clearTimeout(timeout);
+ });
+ return ctr;
+ }
+
+ act(() => {
+ ReactDOM.render(, container);
+ // Since the effects won't be flushed yet, this does not advance the timer
+ jest.runAllTimers();
+ });
+
+ expect(container.innerHTML).toBe('1');
+
+ act(() => {
+ jest.runAllTimers();
+ });
+
+ expect(container.innerHTML).toBe('2');
+ });
});
it('warns if you return a value inside act', () => {