Tests

Author: sebmarkbage

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -125,6 +125,20 @@ let assertConsoleErrorDev;
 
 describe('ReactFlight', () => {
   beforeEach(() => {
+    // Mock performance.now for timing tests
+    let time = 10;
+    const now = jest.fn().mockImplementation(() => {
+      return time++;
+    });
+    Object.defineProperty(performance, 'timeOrigin', {
+      value: time,
+      configurable: true,
+    });
+    Object.defineProperty(performance, 'now', {
+      value: now,
+      configurable: true,
+    });
+
     jest.resetModules();
     jest.mock('react', () => require('react/react.react-server'));
     ReactServer = require('react');
@@ -274,6 +288,7 @@ describe('ReactFlight', () => {
     });
   });
 
+  // @gate enableComponentPerformanceTrack
   it('can render a Client Component using a module reference and render there', async () => {
     function UserClient(props) {
       return (
@@ -300,6 +315,7 @@ describe('ReactFlight', () => {
       expect(getDebugInfo(greeting)).toEqual(
         __DEV__
           ? [
+              {time: 11},
               {
                 name: 'Greeting',
                 env: 'Server',
@@ -322,6 +338,7 @@ describe('ReactFlight', () => {
     expect(ReactNoop).toMatchRenderedOutput(<span>Hello, Seb Smith</span>);
   });
 
+  // @gate enableComponentPerformanceTrack
   it('can render a shared forwardRef Component', async () => {
     const Greeting = React.forwardRef(function Greeting(
       {firstName, lastName},
@@ -343,6 +360,7 @@ describe('ReactFlight', () => {
       expect(getDebugInfo(promise)).toEqual(
         __DEV__
           ? [
+              {time: 11},
               {
                 name: 'Greeting',
                 env: 'Server',
@@ -2659,6 +2677,7 @@ describe('ReactFlight', () => {
     );
   });
 
+  // @gate enableComponentPerformanceTrack
   it('preserves debug info for server-to-server pass through', async () => {
     function ThirdPartyLazyComponent() {
       return <span>!</span>;
@@ -2705,6 +2724,7 @@ describe('ReactFlight', () => {
       expect(getDebugInfo(promise)).toEqual(
         __DEV__
           ? [
+              {time: 15},
               {
                 name: 'ServerComponent',
                 env: 'Server',
@@ -2726,6 +2746,7 @@ describe('ReactFlight', () => {
       expect(getDebugInfo(thirdPartyChildren[0])).toEqual(
         __DEV__
           ? [
+              {time: 26},
               {
                 name: 'ThirdPartyComponent',
                 env: 'third-party',
@@ -2736,12 +2757,14 @@ describe('ReactFlight', () => {
                   : undefined,
                 props: {},
               },
+              {time: 17},
             ]
           : undefined,
       );
       expect(getDebugInfo(thirdPartyChildren[1])).toEqual(
         __DEV__
           ? [
+              {time: 27},
               {
                 name: 'ThirdPartyLazyComponent',
                 env: 'third-party',
@@ -2758,6 +2781,7 @@ describe('ReactFlight', () => {
       expect(getDebugInfo(thirdPartyChildren[2])).toEqual(
         __DEV__
           ? [
+              {time: 25},
               {
                 name: 'ThirdPartyFragmentComponent',
                 env: 'third-party',
@@ -2833,6 +2857,7 @@ describe('ReactFlight', () => {
       expect(getDebugInfo(promise)).toEqual(
         __DEV__
           ? [
+              {time: 13},
               {
                 name: 'ServerComponent',
                 env: 'Server',
@@ -2853,6 +2878,7 @@ describe('ReactFlight', () => {
       expect(getDebugInfo(thirdPartyFragment)).toEqual(
         __DEV__
           ? [
+              {time: 14},
               {
                 name: 'Keyed',
                 env: 'Server',
@@ -2872,6 +2898,7 @@ describe('ReactFlight', () => {
       expect(getDebugInfo(thirdPartyFragment.props.children)).toEqual(
         __DEV__
           ? [
+              {time: 23},
               {
                 name: 'ThirdPartyAsyncIterableComponent',
                 env: 'third-party',
@@ -3017,6 +3044,7 @@ describe('ReactFlight', () => {
     }
   });
 
+  // @gate enableComponentPerformanceTrack
   it('can change the environment name inside a component', async () => {
     let env = 'A';
     function Component(props) {
@@ -3041,6 +3069,7 @@ describe('ReactFlight', () => {
       expect(getDebugInfo(greeting)).toEqual(
         __DEV__
           ? [
+              {time: 11},
               {
                 name: 'Component',
                 env: 'A',
@@ -3205,6 +3234,7 @@ describe('ReactFlight', () => {
     );
   });
 
+  // @gate enableComponentPerformanceTrack
   it('uses the server component debug info as the element owner in DEV', async () => {
     function Container({children}) {
       return children;
@@ -3244,7 +3274,9 @@ describe('ReactFlight', () => {
           },
         };
         expect(getDebugInfo(greeting)).toEqual([
+          {time: 11},
           greetInfo,
+          {time: 12},
           {
             name: 'Container',
             env: 'Server',
@@ -3265,7 +3297,7 @@ describe('ReactFlight', () => {
         ]);
         // The owner that created the span was the outer server component.
         // We expect the debug info to be referentially equal to the owner.
-        expect(greeting._owner).toBe(greeting._debugInfo[0]);
+        expect(greeting._owner).toBe(greeting._debugInfo[1]);
       } else {
         expect(greeting._debugInfo).toBe(undefined);
         expect(greeting._owner).toBe(undefined);
@@ -3531,7 +3563,7 @@ describe('ReactFlight', () => {
     expect(caughtError.digest).toBe('digest("my-error")');
   });
 
-  // @gate __DEV__
+  // @gate __DEV__ && enableComponentPerformanceTrack
   it('can render deep but cut off JSX in debug info', async () => {
     function createDeepJSX(n) {
       if (n <= 0) {
@@ -3555,7 +3587,7 @@ describe('ReactFlight', () => {
     await act(async () => {
       const rootModel = await ReactNoopFlightClient.read(transport);
       const root = rootModel.root;
-      const children = root._debugInfo[0].props.children;
+      const children = root._debugInfo[1].props.children;
       expect(children.type).toBe('div');
       expect(children.props.children.type).toBe('div');
       ReactNoop.render(root);
@@ -3564,7 +3596,7 @@ describe('ReactFlight', () => {
     expect(ReactNoop).toMatchRenderedOutput(<div>not using props</div>);
   });
 
-  // @gate __DEV__
+  // @gate __DEV__ && enableComponentPerformanceTrack
   it('can render deep but cut off Map/Set in debug info', async () => {
     function createDeepMap(n) {
       if (n <= 0) {
@@ -3603,8 +3635,8 @@ describe('ReactFlight', () => {
 
     await act(async () => {
       const rootModel = await ReactNoopFlightClient.read(transport);
-      const set = rootModel.set._debugInfo[0].props.set;
-      const map = rootModel.map._debugInfo[0].props.map;
+      const set = rootModel.set._debugInfo[1].props.set;
+      const map = rootModel.map._debugInfo[1].props.map;
       expect(set instanceof Set).toBe(true);
       expect(set.size).toBe(1);
       // eslint-disable-next-line no-for-of-loops/no-for-of-loops

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js

@@ -49,6 +49,20 @@ function normalizeCodeLocInfo(str) {
 
 describe('ReactFlightDOMEdge', () => {
   beforeEach(() => {
+    // Mock performance.now for timing tests
+    let time = 10;
+    const now = jest.fn().mockImplementation(() => {
+      return time++;
+    });
+    Object.defineProperty(performance, 'timeOrigin', {
+      value: time,
+      configurable: true,
+    });
+    Object.defineProperty(performance, 'now', {
+      value: now,
+      configurable: true,
+    });
+
     jest.resetModules();
 
     reactServerAct = require('internal-test-utils').serverAct;
@@ -401,7 +415,7 @@ describe('ReactFlightDOMEdge', () => {
 
     const serializedContent = await readResult(stream1);
 
-    expect(serializedContent.length).toBeLessThan(425);
+    expect(serializedContent.length).toBeLessThan(490);
     expect(timesRendered).toBeLessThan(5);
 
     const model = await ReactServerDOMClient.createFromReadableStream(stream2, {
@@ -472,7 +486,7 @@ describe('ReactFlightDOMEdge', () => {
     const [stream1, stream2] = passThrough(stream).tee();
 
     const serializedContent = await readResult(stream1);
-    expect(serializedContent.length).toBeLessThan(__DEV__ ? 605 : 400);
+    expect(serializedContent.length).toBeLessThan(__DEV__ ? 680 : 400);
     expect(timesRendered).toBeLessThan(5);
 
     const model = await serverAct(() =>
@@ -506,7 +520,7 @@ describe('ReactFlightDOMEdge', () => {
       ),
     );
     const serializedContent = await readResult(stream);
-    const expectedDebugInfoSize = __DEV__ ? 300 * 20 : 0;
+    const expectedDebugInfoSize = __DEV__ ? 320 * 20 : 0;
     expect(serializedContent.length).toBeLessThan(150 + expectedDebugInfoSize);
   });
 
@@ -934,6 +948,7 @@ describe('ReactFlightDOMEdge', () => {
     );
   });
 
+  // @gate enableComponentPerformanceTrack
   it('supports async server component debug info as the element owner in DEV', async () => {
     function Container({children}) {
       return children;
@@ -989,7 +1004,9 @@ describe('ReactFlightDOMEdge', () => {
         owner: null,
       });
       expect(lazyWrapper._debugInfo).toEqual([
+        {time: 11},
         greetInfo,
+        {time: 12},
         expect.objectContaining({
           name: 'Container',
           env: 'Server',
@@ -998,7 +1015,7 @@ describe('ReactFlightDOMEdge', () => {
       ]);
       // The owner that created the span was the outer server component.
       // We expect the debug info to be referentially equal to the owner.
-      expect(greeting._owner).toBe(lazyWrapper._debugInfo[0]);
+      expect(greeting._owner).toBe(lazyWrapper._debugInfo[1]);
     } else {
       expect(lazyWrapper._debugInfo).toBe(undefined);
       expect(greeting._owner).toBe(undefined);