Skip to content

Commit 24a37de

Browse files
author
Sebastian Silbermann
committed
Current behavior for returning incorrect deferred value in debug-tools dispatcher
1 parent 6580a4b commit 24a37de

File tree

1 file changed

+244
-0
lines changed

1 file changed

+244
-0
lines changed

‎packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js‎

Lines changed: 244 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1206,6 +1206,250 @@ describe('ReactHooksInspectionIntegration', () => {
12061206
`);
12071207
});
12081208

1209+
it('should return the deferred value', async () => {
1210+
let unsuspend;
1211+
function Lazy() {
1212+
return 'Lazy';
1213+
}
1214+
const Suspender = React.lazy(
1215+
() =>
1216+
new Promise(resolve => {
1217+
unsuspend = () => resolve({default: Lazy});
1218+
}),
1219+
);
1220+
const Context = React.createContext('default');
1221+
let setShow;
1222+
function Foo(props) {
1223+
const [show, _setShow] = React.useState(false);
1224+
const deferredShow = React.useDeferredValue(show);
1225+
const isPending = show !== deferredShow;
1226+
const contextDisplay = isPending ? React.use(Context) : '<none>';
1227+
React.useMemo(() => 'hello', []);
1228+
React.useMemo(() => 'not used', []);
1229+
1230+
// Otherwise we capture the version from the react-debug-tools dispatcher.
1231+
if (setShow === undefined) {
1232+
setShow = _setShow;
1233+
}
1234+
1235+
return (
1236+
<React.Suspense fallback="Loading">
1237+
Context: {contextDisplay}, {isPending ? 'Pending' : 'Nothing Pending'}
1238+
{deferredShow ? [', ', <Suspender key="suspender" />] : null}
1239+
</React.Suspense>
1240+
);
1241+
}
1242+
const renderer = await act(() => {
1243+
return ReactTestRenderer.create(
1244+
<Context.Provider value="provided">
1245+
<Foo />
1246+
</Context.Provider>,
1247+
{isConcurrent: true},
1248+
);
1249+
});
1250+
let childFiber = renderer.root.findByType(Foo)._currentFiber();
1251+
let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
1252+
expect(renderer).toMatchRenderedOutput('Context: <none>, Nothing Pending');
1253+
expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
1254+
[
1255+
{
1256+
"debugInfo": null,
1257+
"hookSource": {
1258+
"columnNumber": 0,
1259+
"fileName": "**",
1260+
"functionName": "Foo",
1261+
"lineNumber": 0,
1262+
},
1263+
"id": 0,
1264+
"isStateEditable": true,
1265+
"name": "State",
1266+
"subHooks": [],
1267+
"value": false,
1268+
},
1269+
{
1270+
"debugInfo": null,
1271+
"hookSource": {
1272+
"columnNumber": 0,
1273+
"fileName": "**",
1274+
"functionName": "Foo",
1275+
"lineNumber": 0,
1276+
},
1277+
"id": 1,
1278+
"isStateEditable": false,
1279+
"name": "DeferredValue",
1280+
"subHooks": [],
1281+
"value": false,
1282+
},
1283+
{
1284+
"debugInfo": null,
1285+
"hookSource": {
1286+
"columnNumber": 0,
1287+
"fileName": "**",
1288+
"functionName": "Foo",
1289+
"lineNumber": 0,
1290+
},
1291+
"id": 2,
1292+
"isStateEditable": false,
1293+
"name": "Memo",
1294+
"subHooks": [],
1295+
"value": "hello",
1296+
},
1297+
{
1298+
"debugInfo": null,
1299+
"hookSource": {
1300+
"columnNumber": 0,
1301+
"fileName": "**",
1302+
"functionName": "Foo",
1303+
"lineNumber": 0,
1304+
},
1305+
"id": 3,
1306+
"isStateEditable": false,
1307+
"name": "Memo",
1308+
"subHooks": [],
1309+
"value": "not used",
1310+
},
1311+
]
1312+
`);
1313+
1314+
await act(() => {
1315+
setShow(true);
1316+
});
1317+
1318+
expect(renderer).toMatchRenderedOutput('Context: provided, Pending');
1319+
childFiber = renderer.root.findByType(Foo)._currentFiber();
1320+
tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
1321+
expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
1322+
[
1323+
{
1324+
"debugInfo": null,
1325+
"hookSource": {
1326+
"columnNumber": 0,
1327+
"fileName": "**",
1328+
"functionName": "Foo",
1329+
"lineNumber": 0,
1330+
},
1331+
"id": 0,
1332+
"isStateEditable": true,
1333+
"name": "State",
1334+
"subHooks": [],
1335+
"value": true,
1336+
},
1337+
{
1338+
"debugInfo": null,
1339+
"hookSource": {
1340+
"columnNumber": 0,
1341+
"fileName": "**",
1342+
"functionName": "Foo",
1343+
"lineNumber": 0,
1344+
},
1345+
"id": 1,
1346+
"isStateEditable": false,
1347+
"name": "DeferredValue",
1348+
"subHooks": [],
1349+
"value": false,
1350+
},
1351+
{
1352+
"debugInfo": null,
1353+
"hookSource": {
1354+
"columnNumber": 0,
1355+
"fileName": "**",
1356+
"functionName": "Foo",
1357+
"lineNumber": 0,
1358+
},
1359+
"id": 2,
1360+
"isStateEditable": false,
1361+
"name": "Memo",
1362+
"subHooks": [],
1363+
"value": "hello",
1364+
},
1365+
{
1366+
"debugInfo": null,
1367+
"hookSource": {
1368+
"columnNumber": 0,
1369+
"fileName": "**",
1370+
"functionName": "Foo",
1371+
"lineNumber": 0,
1372+
},
1373+
"id": 3,
1374+
"isStateEditable": false,
1375+
"name": "Memo",
1376+
"subHooks": [],
1377+
"value": "not used",
1378+
},
1379+
]
1380+
`);
1381+
1382+
await act(() => {
1383+
unsuspend();
1384+
});
1385+
1386+
expect(renderer).toMatchRenderedOutput(
1387+
'Context: <none>, Nothing Pending, Lazy',
1388+
);
1389+
childFiber = renderer.root.findByType(Foo)._currentFiber();
1390+
tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
1391+
expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
1392+
[
1393+
{
1394+
"debugInfo": null,
1395+
"hookSource": {
1396+
"columnNumber": 0,
1397+
"fileName": "**",
1398+
"functionName": "Foo",
1399+
"lineNumber": 0,
1400+
},
1401+
"id": 0,
1402+
"isStateEditable": true,
1403+
"name": "State",
1404+
"subHooks": [],
1405+
"value": true,
1406+
},
1407+
{
1408+
"debugInfo": null,
1409+
"hookSource": {
1410+
"columnNumber": 0,
1411+
"fileName": "**",
1412+
"functionName": "Foo",
1413+
"lineNumber": 0,
1414+
},
1415+
"id": 1,
1416+
"isStateEditable": false,
1417+
"name": "DeferredValue",
1418+
"subHooks": [],
1419+
"value": true,
1420+
},
1421+
{
1422+
"debugInfo": null,
1423+
"hookSource": {
1424+
"columnNumber": 0,
1425+
"fileName": "**",
1426+
"functionName": "Foo",
1427+
"lineNumber": 0,
1428+
},
1429+
"id": 2,
1430+
"isStateEditable": false,
1431+
"name": "Memo",
1432+
"subHooks": [],
1433+
"value": "hello",
1434+
},
1435+
{
1436+
"debugInfo": null,
1437+
"hookSource": {
1438+
"columnNumber": 0,
1439+
"fileName": "**",
1440+
"functionName": "Foo",
1441+
"lineNumber": 0,
1442+
},
1443+
"id": 3,
1444+
"isStateEditable": false,
1445+
"name": "Memo",
1446+
"subHooks": [],
1447+
"value": "not used",
1448+
},
1449+
]
1450+
`);
1451+
});
1452+
12091453
it('should support useId hook', () => {
12101454
function Foo(props) {
12111455
const id = React.useId();

0 commit comments

Comments
 (0)