@samitouri / QOS-React
Code Commits Issues Pulls Sessions CI/CD
main
main
js 159 lines 3.7 KB
Raw
1 /**
2 * Copyright (c) Meta Platforms, Inc. and affiliates.
3 *
4 * This source code is licensed under the MIT license found in the
5 * LICENSE file in the root directory of this source tree.
6 *
7 * @emails react-core
8 * @jest-environment jsdom
9 */
10
11 'use strict';
12
13 let React;
14 let ReactDOM;
15 let ReactDOMClient;
16 let ReactDebugTools;
17 let act;
18
19 function normalizeSourceLoc(tree) {
20 tree.forEach(node => {
21 if (node.hookSource) {
22 node.hookSource.fileName = '**';
23 node.hookSource.lineNumber = 0;
24 node.hookSource.columnNumber = 0;
25 }
26 normalizeSourceLoc(node.subHooks);
27 });
28 return tree;
29 }
30
31 describe('ReactHooksInspectionIntegration', () => {
32 beforeEach(() => {
33 jest.resetModules();
34 React = require('react');
35 ReactDOM = require('react-dom');
36 ReactDOMClient = require('react-dom/client');
37 act = require('internal-test-utils').act;
38 ReactDebugTools = require('react-debug-tools');
39 });
40
41 it('should support useFormStatus hook', async () => {
42 function FormStatus() {
43 const status = ReactDOM.useFormStatus();
44 React.useMemo(() => 'memo', []);
45 React.useMemo(() => 'not used', []);
46
47 return JSON.stringify(status);
48 }
49
50 const treeWithoutFiber = ReactDebugTools.inspectHooks(FormStatus);
51 expect(normalizeSourceLoc(treeWithoutFiber)).toEqual([
52 {
53 debugInfo: null,
54 hookSource: {
55 columnNumber: 0,
56 fileName: '**',
57 functionName: 'FormStatus',
58 lineNumber: 0,
59 },
60 id: null,
61 isStateEditable: false,
62 name: 'FormStatus',
63 subHooks: [],
64 value: null,
65 },
66 {
67 debugInfo: null,
68 hookSource: {
69 columnNumber: 0,
70 fileName: '**',
71 functionName: 'FormStatus',
72 lineNumber: 0,
73 },
74 id: 0,
75 isStateEditable: false,
76 name: 'Memo',
77 subHooks: [],
78 value: 'memo',
79 },
80 {
81 debugInfo: null,
82 hookSource: {
83 columnNumber: 0,
84 fileName: '**',
85 functionName: 'FormStatus',
86 lineNumber: 0,
87 },
88 id: 1,
89 isStateEditable: false,
90 name: 'Memo',
91 subHooks: [],
92 value: 'not used',
93 },
94 ]);
95
96 const root = ReactDOMClient.createRoot(document.createElement('div'));
97
98 await act(() => {
99 root.render(
100 <form>
101 <FormStatus />
102 </form>,
103 );
104 });
105
106 // Implementation detail. Feel free to adjust the position of the Fiber in the tree.
107 const formStatusFiber = root._internalRoot.current.child.child;
108 const treeWithFiber = ReactDebugTools.inspectHooksOfFiber(formStatusFiber);
109 expect(normalizeSourceLoc(treeWithFiber)).toEqual([
110 {
111 debugInfo: null,
112 hookSource: {
113 columnNumber: 0,
114 fileName: '**',
115 functionName: 'FormStatus',
116 lineNumber: 0,
117 },
118 id: null,
119 isStateEditable: false,
120 name: 'FormStatus',
121 subHooks: [],
122 value: {
123 action: null,
124 data: null,
125 method: null,
126 pending: false,
127 },
128 },
129 {
130 debugInfo: null,
131 hookSource: {
132 columnNumber: 0,
133 fileName: '**',
134 functionName: 'FormStatus',
135 lineNumber: 0,
136 },
137 id: 0,
138 isStateEditable: false,
139 name: 'Memo',
140 subHooks: [],
141 value: 'memo',
142 },
143 {
144 debugInfo: null,
145 hookSource: {
146 columnNumber: 0,
147 fileName: '**',
148 functionName: 'FormStatus',
149 lineNumber: 0,
150 },
151 id: 1,
152 isStateEditable: false,
153 name: 'Memo',
154 subHooks: [],
155 value: 'not used',
156 },
157 ]);
158 });
159 });