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');