Skip to content

Commit

Permalink
Debug tracing tests for CPU bound suspense (#19943)
Browse files Browse the repository at this point in the history
  • Loading branch information
Brian Vaughn authored Oct 1, 2020
1 parent 43363e2 commit 9762527
Show file tree
Hide file tree
Showing 2 changed files with 121 additions and 13 deletions.
132 changes: 120 additions & 12 deletions packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,45 @@ describe('DebugTracing', () => {
expect(logs).toEqual(['log: ⚛️ Example resolved']);
});

// @gate experimental && build === 'development' && enableDebugTracing
it('should log sync render with CPU suspense', () => {
function Example() {
console.log('<Example/>');
return null;
}

function Wrapper({children}) {
console.log('<Wrapper/>');
return children;
}

ReactTestRenderer.create(
<React.unstable_DebugTracingMode>
<Wrapper>
<React.Suspense fallback={null} unstable_expectedLoadTime={1}>
<Example />
</React.Suspense>
</Wrapper>
</React.unstable_DebugTracingMode>,
);

expect(logs).toEqual([
'group: ⚛️ render (0b0000000000000000000000000000001)',
'log: <Wrapper/>',
'groupEnd: ⚛️ render (0b0000000000000000000000000000001)',
]);

logs.splice(0);

expect(Scheduler).toFlushUntilNextPaint([]);

expect(logs).toEqual([
'group: ⚛️ render (0b0000010000000000000000000000000)',
'log: <Example/>',
'groupEnd: ⚛️ render (0b0000010000000000000000000000000)',
]);
});

// @gate experimental && build === 'development' && enableDebugTracing
it('should log concurrent render with suspense', async () => {
const fakeSuspensePromise = Promise.resolve(true);
Expand Down Expand Up @@ -130,6 +169,52 @@ describe('DebugTracing', () => {
expect(logs).toEqual(['log: ⚛️ Example resolved']);
});

// @gate experimental && build === 'development' && enableDebugTracing
it('should log concurrent render with CPU suspense', () => {
function Example() {
console.log('<Example/>');
return null;
}

function Wrapper({children}) {
console.log('<Wrapper/>');
return children;
}

ReactTestRenderer.create(
<React.unstable_DebugTracingMode>
<Wrapper>
<React.Suspense fallback={null} unstable_expectedLoadTime={1}>
<Example />
</React.Suspense>
</Wrapper>
</React.unstable_DebugTracingMode>,
{unstable_isConcurrent: true},
);

expect(logs).toEqual([]);

logs.splice(0);

expect(Scheduler).toFlushUntilNextPaint([]);

expect(logs).toEqual([
'group: ⚛️ render (0b0000000000000000000001000000000)',
'log: <Wrapper/>',
'groupEnd: ⚛️ render (0b0000000000000000000001000000000)',
]);

logs.splice(0);

expect(Scheduler).toFlushUntilNextPaint([]);

expect(logs).toEqual([
'group: ⚛️ render (0b0000010000000000000000000000000)',
'log: <Example/>',
'groupEnd: ⚛️ render (0b0000010000000000000000000000000)',
]);
});

// @gate experimental && build === 'development' && enableDebugTracing
it('should log cascading class component updates', () => {
class Example extends React.Component {
Expand Down Expand Up @@ -191,12 +276,23 @@ describe('DebugTracing', () => {
expect(Scheduler).toFlushUntilNextPaint([]);
}).toErrorDev('Cannot update during an existing state transition');

expect(logs).toEqual([
'group: ⚛️ render (0b0000000000000000000001000000000)',
'log: ⚛️ Example updated state (0b0000000000000000000010000000000)',
'log: ⚛️ Example updated state (0b0000000000000000000010000000000)',
'groupEnd: ⚛️ render (0b0000000000000000000001000000000)',
]);
gate(flags => {
if (flags.new) {
expect(logs).toEqual([
'group: ⚛️ render (0b0000000000000000000001000000000)',
'log: ⚛️ Example updated state (0b0000000000000000000001000000000)',
'log: ⚛️ Example updated state (0b0000000000000000000001000000000)',
'groupEnd: ⚛️ render (0b0000000000000000000001000000000)',
]);
} else {
expect(logs).toEqual([
'group: ⚛️ render (0b0000000000000000000001000000000)',
'log: ⚛️ Example updated state (0b0000000000000000000010000000000)',
'log: ⚛️ Example updated state (0b0000000000000000000010000000000)',
'groupEnd: ⚛️ render (0b0000000000000000000001000000000)',
]);
}
});
});

// @gate experimental && build === 'development' && enableDebugTracing
Expand Down Expand Up @@ -274,12 +370,24 @@ describe('DebugTracing', () => {
{unstable_isConcurrent: true},
);
});
expect(logs).toEqual([
'group: ⚛️ render (0b0000000000000000000001000000000)',
'log: ⚛️ Example updated state (0b0000000000000000000010000000000)',
'log: ⚛️ Example updated state (0b0000000000000000000010000000000)', // debugRenderPhaseSideEffectsForStrictMode
'groupEnd: ⚛️ render (0b0000000000000000000001000000000)',
]);

gate(flags => {
if (flags.new) {
expect(logs).toEqual([
'group: ⚛️ render (0b0000000000000000000001000000000)',
'log: ⚛️ Example updated state (0b0000000000000000000001000000000)',
'log: ⚛️ Example updated state (0b0000000000000000000001000000000)', // debugRenderPhaseSideEffectsForStrictMode
'groupEnd: ⚛️ render (0b0000000000000000000001000000000)',
]);
} else {
expect(logs).toEqual([
'group: ⚛️ render (0b0000000000000000000001000000000)',
'log: ⚛️ Example updated state (0b0000000000000000000010000000000)',
'log: ⚛️ Example updated state (0b0000000000000000000010000000000)', // debugRenderPhaseSideEffectsForStrictMode
'groupEnd: ⚛️ render (0b0000000000000000000001000000000)',
]);
}
});
});

// @gate experimental && build === 'development' && enableDebugTracing
Expand Down
2 changes: 1 addition & 1 deletion packages/shared/forks/ReactFeatureFlags.www-dynamic.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export const enableEagerRootListeners = !__VARIANT__;
// It logs information to the console about React scheduling, rendering, and commit phases.
//
// NOTE: This feature will only work in DEV mode; all callsights are wrapped with __DEV__.
export const enableDebugTracing = false;
export const enableDebugTracing = __EXPERIMENTAL__;

// This only has an effect in the new reconciler. But also, the new reconciler
// is only enabled when __VARIANT__ is true. So this is set to the opposite of
Expand Down

0 comments on commit 9762527

Please sign in to comment.