diff --git a/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js b/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
index 041086690e7fe..e4e100fe2daf9 100644
--- a/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
@@ -11,9 +11,10 @@
describe('DebugTracing', () => {
let React;
- let ReactTestRenderer;
+ let ReactNoop;
let waitForPaint;
let waitForAll;
+ let act;
let logs;
@@ -27,10 +28,11 @@ describe('DebugTracing', () => {
jest.resetModules();
React = require('react');
- ReactTestRenderer = require('react-test-renderer');
+ ReactNoop = require('react-noop-renderer');
const InternalTestUtils = require('internal-test-utils');
waitForPaint = InternalTestUtils.waitForPaint;
waitForAll = InternalTestUtils.waitForAll;
+ act = InternalTestUtils.act;
logs = [];
@@ -50,31 +52,32 @@ describe('DebugTracing', () => {
});
// @gate enableDebugTracing
- it('should not log anything for sync render without suspends or state updates', () => {
- ReactTestRenderer.create(
-
-
- ,
- );
+ it('should not log anything for sync render without suspends or state updates', async () => {
+ await act(() => {
+ ReactNoop.render(
+
+
+ ,
+ );
+ });
expect(logs).toEqual([]);
});
- // @gate experimental && build === 'development' && enableDebugTracing
- it('should not log anything for concurrent render without suspends or state updates', () => {
- ReactTestRenderer.act(() =>
- ReactTestRenderer.create(
+ // @gate experimental && enableDebugTracing
+ it('should not log anything for concurrent render without suspends or state updates', async () => {
+ await act(() =>
+ ReactNoop.render(
,
- {isConcurrent: true},
),
);
expect(logs).toEqual([]);
});
// @gate experimental && build === 'development' && enableDebugTracing
- it('should log sync render with suspense', async () => {
+ it('should log sync render with suspense, legacy', async () => {
let resolveFakeSuspensePromise;
let didResolve = false;
const fakeSuspensePromise = new Promise(resolve => {
@@ -91,14 +94,12 @@ describe('DebugTracing', () => {
return null;
}
- ReactTestRenderer.act(() =>
- ReactTestRenderer.create(
-
-
-
-
- ,
- ),
+ ReactNoop.renderLegacySyncRoot(
+
+
+
+
+ ,
);
expect(logs).toEqual([
@@ -116,7 +117,7 @@ describe('DebugTracing', () => {
});
// @gate experimental && build === 'development' && enableDebugTracing && enableCPUSuspense
- it('should log sync render with CPU suspense', async () => {
+ it('should log sync render with CPU suspense, legacy', async () => {
function Example() {
console.log('');
return null;
@@ -127,7 +128,7 @@ describe('DebugTracing', () => {
return children;
}
- ReactTestRenderer.create(
+ ReactNoop.renderLegacySyncRoot(
@@ -172,14 +173,13 @@ describe('DebugTracing', () => {
return null;
}
- ReactTestRenderer.act(() =>
- ReactTestRenderer.create(
+ await act(() =>
+ ReactNoop.render(
,
- {isConcurrent: true},
),
);
@@ -191,12 +191,12 @@ describe('DebugTracing', () => {
logs.splice(0);
- await ReactTestRenderer.act(async () => await resolveFakeSuspensePromise());
+ await act(async () => await resolveFakeSuspensePromise());
expect(logs).toEqual(['log: ⚛️ Example resolved']);
});
// @gate experimental && build === 'development' && enableDebugTracing && enableCPUSuspense
- it('should log concurrent render with CPU suspense', () => {
+ it('should log concurrent render with CPU suspense', async () => {
function Example() {
console.log('');
return null;
@@ -207,8 +207,8 @@ describe('DebugTracing', () => {
return children;
}
- ReactTestRenderer.act(() =>
- ReactTestRenderer.create(
+ await act(() =>
+ ReactNoop.render(
@@ -216,7 +216,6 @@ describe('DebugTracing', () => {
,
- {isConcurrent: true},
),
);
@@ -231,7 +230,7 @@ describe('DebugTracing', () => {
});
// @gate experimental && build === 'development' && enableDebugTracing
- it('should log cascading class component updates', () => {
+ it('should log cascading class component updates', async () => {
class Example extends React.Component {
state = {didMount: false};
componentDidMount() {
@@ -242,12 +241,11 @@ describe('DebugTracing', () => {
}
}
- ReactTestRenderer.act(() =>
- ReactTestRenderer.create(
+ await act(() =>
+ ReactNoop.render(
,
- {isConcurrent: true},
),
);
@@ -261,7 +259,7 @@ describe('DebugTracing', () => {
});
// @gate experimental && build === 'development' && enableDebugTracing
- it('should log render phase state updates for class component', () => {
+ it('should log render phase state updates for class component', async () => {
class Example extends React.Component {
state = {didRender: false};
render() {
@@ -272,16 +270,17 @@ describe('DebugTracing', () => {
}
}
- expect(() => {
- ReactTestRenderer.act(() =>
- ReactTestRenderer.create(
+ await expect(async () => {
+ await act(() => {
+ ReactNoop.render(
,
- {isConcurrent: true},
- ),
- );
- }).toErrorDev('Cannot update during an existing state transition');
+ );
+ });
+ }).toErrorDev(
+ 'Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.',
+ );
expect(logs).toEqual([
`group: ⚛️ render (${DEFAULT_LANE_STRING})`,
@@ -291,7 +290,7 @@ describe('DebugTracing', () => {
});
// @gate experimental && build === 'development' && enableDebugTracing
- it('should log cascading layout updates', () => {
+ it('should log cascading layout updates', async () => {
function Example() {
const [didMount, setDidMount] = React.useState(false);
React.useLayoutEffect(() => {
@@ -300,12 +299,11 @@ describe('DebugTracing', () => {
return didMount;
}
- ReactTestRenderer.act(() =>
- ReactTestRenderer.create(
+ await act(() =>
+ ReactNoop.render(
,
- {isConcurrent: true},
),
);
@@ -319,7 +317,7 @@ describe('DebugTracing', () => {
});
// @gate experimental && build === 'development' && enableDebugTracing
- it('should log cascading passive updates', () => {
+ it('should log cascading passive updates', async () => {
function Example() {
const [didMount, setDidMount] = React.useState(false);
React.useEffect(() => {
@@ -328,12 +326,11 @@ describe('DebugTracing', () => {
return didMount;
}
- ReactTestRenderer.act(() => {
- ReactTestRenderer.create(
+ await act(() => {
+ ReactNoop.render(
,
- {isConcurrent: true},
);
});
expect(logs).toEqual([
@@ -344,7 +341,7 @@ describe('DebugTracing', () => {
});
// @gate experimental && build === 'development' && enableDebugTracing
- it('should log render phase updates', () => {
+ it('should log render phase updates', async () => {
function Example() {
const [didRender, setDidRender] = React.useState(false);
if (!didRender) {
@@ -353,12 +350,11 @@ describe('DebugTracing', () => {
return didRender;
}
- ReactTestRenderer.act(() => {
- ReactTestRenderer.create(
+ await act(() => {
+ ReactNoop.render(
,
- {isConcurrent: true},
);
});
@@ -370,18 +366,17 @@ describe('DebugTracing', () => {
});
// @gate experimental && build === 'development' && enableDebugTracing
- it('should log when user code logs', () => {
+ it('should log when user code logs', async () => {
function Example() {
console.log('Hello from user code');
return null;
}
- ReactTestRenderer.act(() =>
- ReactTestRenderer.create(
+ await act(() =>
+ ReactNoop.render(
,
- {isConcurrent: true},
),
);
@@ -392,8 +387,8 @@ describe('DebugTracing', () => {
]);
});
- // @gate experimental && build === 'development' && enableDebugTracing
- it('should not log anything outside of a unstable_DebugTracingMode subtree', () => {
+ // @gate experimental && enableDebugTracing
+ it('should not log anything outside of a unstable_DebugTracingMode subtree', async () => {
function ExampleThatCascades() {
const [didMount, setDidMount] = React.useState(false);
React.useLayoutEffect(() => {
@@ -412,8 +407,8 @@ describe('DebugTracing', () => {
return null;
}
- ReactTestRenderer.act(() =>
- ReactTestRenderer.create(
+ await act(() =>
+ ReactNoop.render(