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', () => {