diff --git a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js index 87c9cfe627dc6..43bc0d8b34382 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js @@ -50,7 +50,7 @@ describe('ReactDOMFiberAsync', () => { document.body.removeChild(container); }); - it('renders synchronously by default', () => { + it('renders synchronously by default in legacy mode', () => { const ops = []; ReactDOM.render(
Hi
, container, () => { ops.push(container.textContent); @@ -61,12 +61,16 @@ describe('ReactDOMFiberAsync', () => { expect(ops).toEqual(['Hi', 'Bye']); }); - it('flushSync batches sync updates and flushes them at the end of the batch', () => { + it('flushSync batches sync updates and flushes them at the end of the batch', async () => { const ops = []; let instance; class Component extends React.Component { state = {text: ''}; + componentDidMount() { + instance = this; + } + push(val) { this.setState(state => ({text: state.text + val})); } @@ -79,9 +83,13 @@ describe('ReactDOMFiberAsync', () => { } } - ReactDOM.render(, container); + const root = ReactDOMClient.createRoot(container); + await act(() => root.render()); + + await act(() => { + instance.push('A'); + }); - instance.push('A'); expect(ops).toEqual(['A']); expect(container.textContent).toEqual('A'); @@ -92,19 +100,26 @@ describe('ReactDOMFiberAsync', () => { expect(container.textContent).toEqual('A'); expect(ops).toEqual(['A']); }); + expect(container.textContent).toEqual('ABC'); expect(ops).toEqual(['A', 'ABC']); - instance.push('D'); + await act(() => { + instance.push('D'); + }); expect(container.textContent).toEqual('ABCD'); expect(ops).toEqual(['A', 'ABC', 'ABCD']); }); - it('flushSync flushes updates even if nested inside another flushSync', () => { + it('flushSync flushes updates even if nested inside another flushSync', async () => { const ops = []; let instance; class Component extends React.Component { state = {text: ''}; + componentDidMount() { + instance = this; + } + push(val) { this.setState(state => ({text: state.text + val})); } @@ -117,9 +132,12 @@ describe('ReactDOMFiberAsync', () => { } } - ReactDOM.render(, container); + const root = ReactDOMClient.createRoot(container); + await act(() => root.render()); - instance.push('A'); + await act(() => { + instance.push('A'); + }); expect(ops).toEqual(['A']); expect(container.textContent).toEqual('A'); @@ -141,7 +159,7 @@ describe('ReactDOMFiberAsync', () => { expect(ops).toEqual(['A', 'ABCD']); }); - it('flushSync logs an error if already performing work', () => { + it('flushSync logs an error if already performing work', async () => { class Component extends React.Component { componentDidUpdate() { ReactDOM.flushSync(); @@ -152,11 +170,16 @@ describe('ReactDOMFiberAsync', () => { } // Initial mount - ReactDOM.render(, container); + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render(); + }); // Update - expect(() => ReactDOM.render(, container)).toErrorDev( - 'flushSync was called from inside a lifecycle method', - ); + expect(() => { + ReactDOM.flushSync(() => { + root.render(); + }); + }).toErrorDev('flushSync was called from inside a lifecycle method'); }); describe('concurrent mode', () => { @@ -492,11 +515,14 @@ describe('ReactDOMFiberAsync', () => { const containerA = document.createElement('div'); const containerB = document.createElement('div'); const containerC = document.createElement('div'); + const rootA = ReactDOMClient.createRoot(containerA); + const rootB = ReactDOMClient.createRoot(containerB); + const rootC = ReactDOMClient.createRoot(containerC); await act(() => { - ReactDOM.render(, containerA); - ReactDOM.render(, containerB); - ReactDOM.render(, containerC); + rootA.render(); + rootB.render(); + rootC.render(); }); expect(containerA.textContent).toEqual('Finished');