test

Author: lunaruan

packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js

@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ * @jest-environment node
+ */
+
+let React;
+let ReactNoop;
+let Scheduler;
+let act;
+
+let useState;
+let startTransition;
+
+describe('ReactInteractionTracing', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+
+    act = require('jest-react').act;
+
+    useState = React.useState;
+    startTransition = React.startTransition;
+  });
+
+  function Text({text}) {
+    Scheduler.unstable_yieldValue(text);
+    return text;
+  }
+
+  function advanceTimers(ms) {
+    // Note: This advances Jest's virtual time but not React's. Use
+    // ReactNoop.expire for that.
+    if (typeof ms !== 'number') {
+      throw new Error('Must specify ms');
+    }
+    jest.advanceTimersByTime(ms);
+    // Wait until the end of the current tick
+    // We cannot use a timer since we're faking them
+    return Promise.resolve().then(() => {});
+  }
+
+  // @gate enableTransitionTracing
+  it('should correctly trace basic interaction', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionStart(${name}, ${startTime})`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+
+    let navigateToPageTwo;
+    function App() {
+      const [navigate, setNavigate] = useState(false);
+      navigateToPageTwo = () => {
+        setNavigate(true);
+      };
+
+      return (
+        <div>
+          {navigate ? <Text text="Page Two" /> : <Text text="Page One" />}
+        </div>
+      );
+    }
+
+    const root = ReactNoop.createRoot({transitionCallbacks});
+    await act(async () => {
+      root.render(<App />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      expect(Scheduler).toFlushAndYield(['Page One']);
+
+      await act(async () => {
+        startTransition(() => navigateToPageTwo(), {name: 'page transition'});
+
+        ReactNoop.expire(1000);
+        await advanceTimers(1000);
+
+        expect(Scheduler).toFlushAndYield([
+          'Page Two',
+          'onTransitionStart(page transition, 1000)',
+          'onTransitionComplete(page transition, 1000, 2000)',
+        ]);
+      });
+    });
+  });
+});

packages/shared/forks/ReactFeatureFlags.www-dynamic.js

@@ -28,6 +28,7 @@ export const consoleManagedByDevToolsDuringStrictMode = __VARIANT__;
 export const warnOnSubscriptionInsideStartTransition = __VARIANT__;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = __VARIANT__;
 export const enableClientRenderFallbackOnHydrationMismatch = __VARIANT__;
+export const enableTransitionTracing = __VARIANT__;
 
 // Enable this flag to help with concurrent mode debugging.
 // It logs information to the console about React scheduling, rendering, and commit phases.