Debug tracing tests for CPU bound suspense (#19943)
Brian Vaughn committed
Oct 1, 2020 at 12:02 UTC
97625272abe1fecc8ffba469795803ca8cfff9a7
2 files changed
+121
-13
packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
+120
-12
@@ -96,6 +96,45 @@ describe('DebugTracing', () => {
96
expect(logs).toEqual(['log: ⚛️ Example resolved']);
97
});
98
99
+ // @gate experimental && build === 'development' && enableDebugTracing
100
+ it('should log sync render with CPU suspense', () => {
101
+ function Example() {
102
+ console.log('<Example/>');
103
+ return null;
104
+ }
105
+
106
+ function Wrapper({children}) {
107
+ console.log('<Wrapper/>');
108
+ return children;
109
+ }
110
+
111
+ ReactTestRenderer.create(
112
+ <React.unstable_DebugTracingMode>
113
+ <Wrapper>
114
+ <React.Suspense fallback={null} unstable_expectedLoadTime={1}>
115
+ <Example />
116
+ </React.Suspense>
117
+ </Wrapper>
118
+ </React.unstable_DebugTracingMode>,
119
+ );
120
+
121
+ expect(logs).toEqual([
122
+ 'group: ⚛️ render (0b0000000000000000000000000000001)',
123
+ 'log: <Wrapper/>',
124
+ 'groupEnd: ⚛️ render (0b0000000000000000000000000000001)',
125
+ ]);
126
+
127
+ logs.splice(0);
128
+
129
+ expect(Scheduler).toFlushUntilNextPaint([]);
130
+
131
+ expect(logs).toEqual([
132
+ 'group: ⚛️ render (0b0000010000000000000000000000000)',
133
+ 'log: <Example/>',
134
+ 'groupEnd: ⚛️ render (0b0000010000000000000000000000000)',
135
+ ]);
136
+ });
137
+
138
// @gate experimental && build === 'development' && enableDebugTracing
139
it('should log concurrent render with suspense', async () => {
140
const fakeSuspensePromise = Promise.resolve(true);
@@ -130,6 +169,52 @@ describe('DebugTracing', () => {
169
expect(logs).toEqual(['log: ⚛️ Example resolved']);
170
});
171
172
+ // @gate experimental && build === 'development' && enableDebugTracing
173
+ it('should log concurrent render with CPU suspense', () => {
174
+ function Example() {
175
+ console.log('<Example/>');
176
+ return null;
177
+ }
178
+
179
+ function Wrapper({children}) {
180
+ console.log('<Wrapper/>');
181
+ return children;
182
+ }
183
+
184
+ ReactTestRenderer.create(
185
+ <React.unstable_DebugTracingMode>
186
+ <Wrapper>
187
+ <React.Suspense fallback={null} unstable_expectedLoadTime={1}>
188
+ <Example />
189
+ </React.Suspense>
190
+ </Wrapper>
191
+ </React.unstable_DebugTracingMode>,
192
+ {unstable_isConcurrent: true},
193
+ );
194
+
195
+ expect(logs).toEqual([]);
196
+
197
+ logs.splice(0);
198
+
199
+ expect(Scheduler).toFlushUntilNextPaint([]);
200
+
201
+ expect(logs).toEqual([
202
+ 'group: ⚛️ render (0b0000000000000000000001000000000)',
203
+ 'log: <Wrapper/>',
204
+ 'groupEnd: ⚛️ render (0b0000000000000000000001000000000)',
205
+ ]);
206
+
207
+ logs.splice(0);
208
+
209
+ expect(Scheduler).toFlushUntilNextPaint([]);
210
+
211
+ expect(logs).toEqual([
212
+ 'group: ⚛️ render (0b0000010000000000000000000000000)',
213
+ 'log: <Example/>',
214
+ 'groupEnd: ⚛️ render (0b0000010000000000000000000000000)',
215
+ ]);
216
+ });
217
+
218
// @gate experimental && build === 'development' && enableDebugTracing
219
it('should log cascading class component updates', () => {
220
class Example extends React.Component {
@@ -191,12 +276,23 @@ describe('DebugTracing', () => {
276
expect(Scheduler).toFlushUntilNextPaint([]);
277
}).toErrorDev('Cannot update during an existing state transition');
278
194
- expect(logs).toEqual([
195
- 'group: ⚛️ render (0b0000000000000000000001000000000)',
196
- 'log: ⚛️ Example updated state (0b0000000000000000000010000000000)',
197
- 'log: ⚛️ Example updated state (0b0000000000000000000010000000000)',
198
- 'groupEnd: ⚛️ render (0b0000000000000000000001000000000)',
199
- ]);
279
+ gate(flags => {
280
+ if (flags.new) {
281
+ expect(logs).toEqual([
282
+ 'group: ⚛️ render (0b0000000000000000000001000000000)',
283
+ 'log: ⚛️ Example updated state (0b0000000000000000000001000000000)',
284
+ 'log: ⚛️ Example updated state (0b0000000000000000000001000000000)',
285
+ 'groupEnd: ⚛️ render (0b0000000000000000000001000000000)',
286
+ ]);
287
+ } else {
288
+ expect(logs).toEqual([
289
+ 'group: ⚛️ render (0b0000000000000000000001000000000)',
290
+ 'log: ⚛️ Example updated state (0b0000000000000000000010000000000)',
291
+ 'log: ⚛️ Example updated state (0b0000000000000000000010000000000)',
292
+ 'groupEnd: ⚛️ render (0b0000000000000000000001000000000)',
293
+ ]);
294
+ }
295
+ });
296
});
297
298
// @gate experimental && build === 'development' && enableDebugTracing
@@ -274,12 +370,24 @@ describe('DebugTracing', () => {
370
{unstable_isConcurrent: true},
371
);
372
});
277
- expect(logs).toEqual([
278
- 'group: ⚛️ render (0b0000000000000000000001000000000)',
279
- 'log: ⚛️ Example updated state (0b0000000000000000000010000000000)',
280
- 'log: ⚛️ Example updated state (0b0000000000000000000010000000000)', // debugRenderPhaseSideEffectsForStrictMode
281
- 'groupEnd: ⚛️ render (0b0000000000000000000001000000000)',
282
- ]);
373
+
374
+ gate(flags => {
375
+ if (flags.new) {
376
+ expect(logs).toEqual([
377
+ 'group: ⚛️ render (0b0000000000000000000001000000000)',
378
+ 'log: ⚛️ Example updated state (0b0000000000000000000001000000000)',
379
+ 'log: ⚛️ Example updated state (0b0000000000000000000001000000000)', // debugRenderPhaseSideEffectsForStrictMode
380
+ 'groupEnd: ⚛️ render (0b0000000000000000000001000000000)',
381
+ ]);
382
+ } else {
383
+ expect(logs).toEqual([
384
+ 'group: ⚛️ render (0b0000000000000000000001000000000)',
385
+ 'log: ⚛️ Example updated state (0b0000000000000000000010000000000)',
386
+ 'log: ⚛️ Example updated state (0b0000000000000000000010000000000)', // debugRenderPhaseSideEffectsForStrictMode
387
+ 'groupEnd: ⚛️ render (0b0000000000000000000001000000000)',
388
+ ]);
389
+ }
390
+ });
391
});
392
393
// @gate experimental && build === 'development' && enableDebugTracing
packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+1
-1
@@ -25,7 +25,7 @@ export const enableEagerRootListeners = !__VARIANT__;
25
// It logs information to the console about React scheduling, rendering, and commit phases.
26
//
27
// NOTE: This feature will only work in DEV mode; all callsights are wrapped with __DEV__.
28
-export const enableDebugTracing = false;
28
+export const enableDebugTracing = __EXPERIMENTAL__;
29
30
// This only has an effect in the new reconciler. But also, the new reconciler
31
// is only enabled when __VARIANT__ is true. So this is set to the opposite of