diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
index 0e0993268343b..8dbdc9919793a 100644
--- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
@@ -51,7 +51,12 @@ describe('ReactHooksInspectionIntegration', () => {
);
}
- const renderer = ReactTestRenderer.create();
+ let renderer;
+ await act(() => {
+ renderer = ReactTestRenderer.create(, {
+ unstable_isConcurrent: true,
+ });
+ });
let childFiber = renderer.root.findByType(Foo)._currentFiber();
let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
@@ -204,7 +209,9 @@ describe('ReactHooksInspectionIntegration', () => {
}
let renderer;
await act(() => {
- renderer = ReactTestRenderer.create();
+ renderer = ReactTestRenderer.create(, {
+ unstable_isConcurrent: true,
+ });
});
let childFiber = renderer.root.findByType(Foo)._currentFiber();
@@ -434,7 +441,7 @@ describe('ReactHooksInspectionIntegration', () => {
"isStateEditable": false,
"name": "Memo",
"subHooks": [],
- "value": "Ab",
+ "value": "AB",
},
{
"debugInfo": null,
@@ -492,7 +499,9 @@ describe('ReactHooksInspectionIntegration', () => {
}
let renderer;
await act(() => {
- renderer = ReactTestRenderer.create();
+ renderer = ReactTestRenderer.create(, {
+ unstable_isConcurrent: true,
+ });
});
let childFiber = renderer.root.findByType(Foo)._currentFiber();
@@ -750,7 +759,7 @@ describe('ReactHooksInspectionIntegration', () => {
"isStateEditable": false,
"name": "Memo",
"subHooks": [],
- "value": "Ab",
+ "value": "AB",
},
{
"debugInfo": null,
@@ -770,7 +779,7 @@ describe('ReactHooksInspectionIntegration', () => {
`);
});
- it('should inspect the value of the current provider in useContext', () => {
+ it('should inspect the value of the current provider in useContext', async () => {
const MyContext = React.createContext('default');
const ThemeContext = React.createContext('default');
ThemeContext.displayName = 'Theme';
@@ -779,11 +788,15 @@ describe('ReactHooksInspectionIntegration', () => {
React.useContext(ThemeContext);
return
{value}
;
}
- const renderer = ReactTestRenderer.create(
-
-
- ,
- );
+ let renderer;
+ await act(() => {
+ renderer = ReactTestRenderer.create(
+
+
+ ,
+ {unstable_isConcurrent: true},
+ );
+ });
const childFiber = renderer.root.findByType(Foo)._currentFiber();
const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
@@ -820,14 +833,19 @@ describe('ReactHooksInspectionIntegration', () => {
`);
});
- it('should inspect forwardRef', () => {
+ it('should inspect forwardRef', async () => {
const obj = function () {};
const Foo = React.forwardRef(function (props, ref) {
React.useImperativeHandle(ref, () => obj);
return ;
});
const ref = React.createRef();
- const renderer = ReactTestRenderer.create();
+ let renderer;
+ await act(() => {
+ renderer = ReactTestRenderer.create(, {
+ unstable_isConcurrent: true,
+ });
+ });
const childFiber = renderer.root.findByType(Foo)._currentFiber();
const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
@@ -851,13 +869,18 @@ describe('ReactHooksInspectionIntegration', () => {
`);
});
- it('should inspect memo', () => {
+ it('should inspect memo', async () => {
function InnerFoo(props) {
const [value] = React.useState('hello');
return {value}
;
}
const Foo = React.memo(InnerFoo);
- const renderer = ReactTestRenderer.create();
+ let renderer;
+ await act(() => {
+ renderer = ReactTestRenderer.create(, {
+ unstable_isConcurrent: true,
+ });
+ });
// TODO: Test renderer findByType is broken for memo. Have to search for the inner.
const childFiber = renderer.root.findByType(InnerFoo)._currentFiber();
const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
@@ -881,7 +904,7 @@ describe('ReactHooksInspectionIntegration', () => {
`);
});
- it('should inspect custom hooks', () => {
+ it('should inspect custom hooks', async () => {
function useCustom() {
const [value] = React.useState('hello');
return value;
@@ -890,7 +913,12 @@ describe('ReactHooksInspectionIntegration', () => {
const value = useCustom();
return {value}
;
}
- const renderer = ReactTestRenderer.create();
+ let renderer;
+ await act(() => {
+ renderer = ReactTestRenderer.create(, {
+ unstable_isConcurrent: true,
+ });
+ });
const childFiber = renderer.root.findByType(Foo)._currentFiber();
const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
@@ -928,14 +956,19 @@ describe('ReactHooksInspectionIntegration', () => {
`);
});
- it('should support composite useTransition hook', () => {
+ it('should support composite useTransition hook', async () => {
function Foo(props) {
React.useTransition();
const memoizedValue = React.useMemo(() => 'hello', []);
React.useMemo(() => 'not used', []);
return {memoizedValue}
;
}
- const renderer = ReactTestRenderer.create();
+ let renderer;
+ await act(() => {
+ renderer = ReactTestRenderer.create(, {
+ unstable_isConcurrent: true,
+ });
+ });
const childFiber = renderer.root.findByType(Foo)._currentFiber();
const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
@@ -1148,14 +1181,19 @@ describe('ReactHooksInspectionIntegration', () => {
`);
});
- it('should support useDeferredValue hook', () => {
+ it('should support useDeferredValue hook', async () => {
function Foo(props) {
React.useDeferredValue('abc');
const memoizedValue = React.useMemo(() => 1, []);
React.useMemo(() => 2, []);
return {memoizedValue}
;
}
- const renderer = ReactTestRenderer.create();
+ let renderer;
+ await act(() => {
+ renderer = ReactTestRenderer.create(, {
+ unstable_isConcurrent: true,
+ });
+ });
const childFiber = renderer.root.findByType(Foo)._currentFiber();
const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
@@ -1464,14 +1502,19 @@ describe('ReactHooksInspectionIntegration', () => {
`);
});
- it('should support useId hook', () => {
+ it('should support useId hook', async () => {
function Foo(props) {
const id = React.useId();
const [state] = React.useState('hello');
return {state}
;
}
- const renderer = ReactTestRenderer.create();
+ let renderer;
+ await act(() => {
+ renderer = ReactTestRenderer.create(, {
+ unstable_isConcurrent: true,
+ });
+ });
const childFiber = renderer.root.findByType(Foo)._currentFiber();
const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
@@ -1502,7 +1545,7 @@ describe('ReactHooksInspectionIntegration', () => {
describe('useMemoCache', () => {
// @gate enableUseMemoCacheHook
- it('should not be inspectable', () => {
+ it('should not be inspectable', async () => {
function Foo() {
const $ = useMemoCache(1);
let t0;
@@ -1517,7 +1560,12 @@ describe('ReactHooksInspectionIntegration', () => {
return t0;
}
- const renderer = ReactTestRenderer.create();
+ let renderer;
+ await act(() => {
+ renderer = ReactTestRenderer.create(, {
+ unstable_isConcurrent: true,
+ });
+ });
const childFiber = renderer.root.findByType(Foo)._currentFiber();
const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
@@ -1525,7 +1573,7 @@ describe('ReactHooksInspectionIntegration', () => {
});
// @gate enableUseMemoCacheHook
- it('should work in combination with other hooks', () => {
+ it('should work in combination with other hooks', async () => {
function useSomething() {
const [something] = React.useState(null);
const changeOtherSomething = React.useCallback(() => {}, [something]);
@@ -1552,7 +1600,12 @@ describe('ReactHooksInspectionIntegration', () => {
return t0;
}
- const renderer = ReactTestRenderer.create();
+ let renderer;
+ await act(() => {
+ renderer = ReactTestRenderer.create(, {
+ unstable_isConcurrent: true,
+ });
+ });
const childFiber = renderer.root.findByType(Foo)._currentFiber();
const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
@@ -1561,7 +1614,7 @@ describe('ReactHooksInspectionIntegration', () => {
});
describe('useDebugValue', () => {
- it('should support inspectable values for multiple custom hooks', () => {
+ it('should support inspectable values for multiple custom hooks', async () => {
function useLabeledValue(label) {
const [value] = React.useState(label);
React.useDebugValue(`custom label ${label}`);
@@ -1578,7 +1631,12 @@ describe('ReactHooksInspectionIntegration', () => {
useLabeledValue('d');
return null;
}
- const renderer = ReactTestRenderer.create();
+ let renderer;
+ await act(() => {
+ renderer = ReactTestRenderer.create(, {
+ unstable_isConcurrent: true,
+ });
+ });
const childFiber = renderer.root.findByType(Example)._currentFiber();
const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
if (__DEV__) {
@@ -1795,7 +1853,7 @@ describe('ReactHooksInspectionIntegration', () => {
`);
});
- it('should support inspectable values for nested custom hooks', () => {
+ it('should support inspectable values for nested custom hooks', async () => {
function useInner() {
React.useDebugValue('inner');
React.useState(0);
@@ -1808,7 +1866,12 @@ describe('ReactHooksInspectionIntegration', () => {
useOuter();
return null;
}
- const renderer = ReactTestRenderer.create();
+ let renderer;
+ await act(() => {
+ renderer = ReactTestRenderer.create(, {
+ unstable_isConcurrent: true,
+ });
+ });
const childFiber = renderer.root.findByType(Example)._currentFiber();
const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
if (__DEV__) {
@@ -1911,7 +1974,7 @@ describe('ReactHooksInspectionIntegration', () => {
`);
});
- it('should support multiple inspectable values per custom hooks', () => {
+ it('should support multiple inspectable values per custom hooks', async () => {
function useMultiLabelCustom() {
React.useDebugValue('one');
React.useDebugValue('two');
@@ -1928,7 +1991,12 @@ describe('ReactHooksInspectionIntegration', () => {
useSingleLabelCustom('two');
return null;
}
- const renderer = ReactTestRenderer.create();
+ let renderer;
+ await act(() => {
+ renderer = ReactTestRenderer.create(, {
+ unstable_isConcurrent: true,
+ });
+ });
const childFiber = renderer.root.findByType(Example)._currentFiber();
const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
if (__DEV__) {
@@ -2121,18 +2189,23 @@ describe('ReactHooksInspectionIntegration', () => {
`);
});
- it('should ignore useDebugValue() made outside of a custom hook', () => {
+ it('should ignore useDebugValue() made outside of a custom hook', async () => {
function Example() {
React.useDebugValue('this is invalid');
return null;
}
- const renderer = ReactTestRenderer.create();
+ let renderer;
+ await act(() => {
+ renderer = ReactTestRenderer.create(, {
+ unstable_isConcurrent: true,
+ });
+ });
const childFiber = renderer.root.findByType(Example)._currentFiber();
const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
expect(tree).toHaveLength(0);
});
- it('should support an optional formatter function param', () => {
+ it('should support an optional formatter function param', async () => {
function useCustom() {
React.useDebugValue({bar: 123}, object => `bar:${object.bar}`);
React.useState(0);
@@ -2141,7 +2214,12 @@ describe('ReactHooksInspectionIntegration', () => {
useCustom();
return null;
}
- const renderer = ReactTestRenderer.create();
+ let renderer;
+ await act(() => {
+ renderer = ReactTestRenderer.create(, {
+ unstable_isConcurrent: true,
+ });
+ });
const childFiber = renderer.root.findByType(Example)._currentFiber();
const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
if (__DEV__) {
@@ -2266,7 +2344,7 @@ describe('ReactHooksInspectionIntegration', () => {
`);
});
- it('should support an injected dispatcher', () => {
+ it('should support an injected dispatcher', async () => {
function Foo(props) {
const [state] = React.useState('hello world');
return {state}
;
@@ -2287,7 +2365,12 @@ describe('ReactHooksInspectionIntegration', () => {
},
};
- const renderer = ReactTestRenderer.create();
+ let renderer;
+ await act(() => {
+ renderer = ReactTestRenderer.create(, {
+ unstable_isConcurrent: true,
+ });
+ });
const childFiber = renderer.root._currentFiber();
let didCatch = false;
@@ -2332,7 +2415,12 @@ describe('ReactHooksInspectionIntegration', () => {
return count: {data.count}
;
}
- const renderer = ReactTestRenderer.create();
+ let renderer;
+ await act(() => {
+ renderer = ReactTestRenderer.create(, {
+ unstable_isConcurrent: true,
+ });
+ });
expect(renderer.toJSON()).toEqual({
type: 'div',
props: {},
@@ -2384,7 +2472,7 @@ describe('ReactHooksInspectionIntegration', () => {
`);
});
- it('should support composite useSyncExternalStore hook', () => {
+ it('should support composite useSyncExternalStore hook', async () => {
const useSyncExternalStore = React.useSyncExternalStore;
function Foo() {
const value = useSyncExternalStore(
@@ -2396,7 +2484,12 @@ describe('ReactHooksInspectionIntegration', () => {
return value;
}
- const renderer = ReactTestRenderer.create();
+ let renderer;
+ await act(() => {
+ renderer = ReactTestRenderer.create(, {
+ unstable_isConcurrent: true,
+ });
+ });
const childFiber = renderer.root.findByType(Foo)._currentFiber();
const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
@@ -2447,7 +2540,7 @@ describe('ReactHooksInspectionIntegration', () => {
`);
});
- it('should support use(Context) hook', () => {
+ it('should support use(Context) hook', async () => {
const Context = React.createContext('default');
function Foo() {
const value = React.use(Context);
@@ -2457,7 +2550,12 @@ describe('ReactHooksInspectionIntegration', () => {
return value;
}
- const renderer = ReactTestRenderer.create();
+ let renderer;
+ await act(() => {
+ renderer = ReactTestRenderer.create(, {
+ unstable_isConcurrent: true,
+ });
+ });
const childFiber = renderer.root.findByType(Foo)._currentFiber();
const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
@@ -2509,7 +2607,7 @@ describe('ReactHooksInspectionIntegration', () => {
});
// @gate enableAsyncActions
- it('should support useOptimistic hook', () => {
+ it('should support useOptimistic hook', async () => {
const useOptimistic = React.useOptimistic;
function Foo() {
const [value] = useOptimistic('abc', currentState => currentState);
@@ -2518,7 +2616,12 @@ describe('ReactHooksInspectionIntegration', () => {
return value;
}
- const renderer = ReactTestRenderer.create();
+ let renderer;
+ await act(() => {
+ renderer = ReactTestRenderer.create(, {
+ unstable_isConcurrent: true,
+ });
+ });
const childFiber = renderer.root.findByType(Foo)._currentFiber();
const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
@@ -2570,7 +2673,7 @@ describe('ReactHooksInspectionIntegration', () => {
});
// @gate enableFormActions && enableAsyncActions
- it('should support useFormState hook', () => {
+ it('should support useFormState hook', async () => {
function Foo() {
const [value] = ReactDOM.useFormState(function increment(n) {
return n;
@@ -2581,7 +2684,12 @@ describe('ReactHooksInspectionIntegration', () => {
return value;
}
- const renderer = ReactTestRenderer.create();
+ let renderer;
+ await act(() => {
+ renderer = ReactTestRenderer.create(, {
+ unstable_isConcurrent: true,
+ });
+ });
const childFiber = renderer.root.findByType(Foo)._currentFiber();
const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`