Function App

packages/react-reconciler/src/__tests__/ReactExpiration-test.js:633–681

({step})

    const {Suspense} = React;

    function App({step}) {
      return (
        <Suspense fallback={<Text text="Loading..." />}>
          <AsyncText text={'A' + step} />
          <Text text="B" />
          <Text text="C" />
        </Suspense>
      );
    }

    const root = ReactNoop.createRoot();
    await act(async () => {
      await resolveText('A0');
      root.render(<App step={0} />);
    });
    assertLog(['A0', 'B', 'C']);
    expect(root).toMatchRenderedOutput('A0BC');

    await act(async () => {
      React.startTransition(() => {
        root.render(<App step={1} />);
      });
      await waitForAll([
        'Suspend! [A1]',
        // pre-warming
        'B',
        'C',
        // end pre-warming
        'Loading...',
      ]);

      // Lots of time elapses before the promise resolves
      Scheduler.unstable_advanceTime(10000);
      await resolveText('A1');
      assertLog(['Promise resolved [A1]']);

      await waitFor(['A1']);
      expect(root).toMatchRenderedOutput('A0BC');

      // Lots more time elapses. We're CPU-bound now, so we should treat this
      // as starvation.
      Scheduler.unstable_advanceTime(10000);

      // The rest of the update finishes without yielding.
      await waitFor([], {
        additionalLogsAfterAttemptingToYield: ['B', 'C'],
      });
    });
  });

  it('flushSync should not affect expired work', async () => {
    let setA;