Repository: facebook/react
File: packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js (JavaScript)

Code before:
      unstable_isConcurrent: true,
    });

    await waitForAll(['Init A', 'Loading...']);
    expect(root).not.toMatchRenderedOutput('AB');

    await act(() => resolveFakeImport(ChildA));
    // We need to flush to trigger the B to load.
    await assertLog(['Init B']);
    await act(() => resolveFakeImport(ChildB));
    assertLog(['A', 'B', 'Did mount: A', 'Did mount: B']);
    expect(root).toMatchRenderedOutput('AB');

    // Swap the position of A and B
    React.startTransition(() => {
      root.update(<Parent swap={true} />);
    });
    await waitForAll(['Init B2', 'Loading...']);
    await act(() => resolveFakeImport(ChildB2));
    // We need to flush to trigger the second one to load.
    assertLog(['Init A2', 'Loading...']);
    await act(() => resolveFakeImport(ChildA2));
    assertLog(['b', 'a', 'Did update: b', 'Did update: a']);
    expect(root).toMatchRenderedOutput('ba');
  });

  describe('legacy mode', () => {
    beforeEach(() => {
      ReactFeatureFlags.disableLegacyMode = false;
    });

    afterEach(() => {
      ReactFeatureFlags.disableLegacyMode = true;
    });

    it('mount and reorder lazy elements (legacy mode)', async () => {
      class Child extends React.Component {
        componentDidMount() {
          Scheduler.log('Did mount: ' + this.props.label);
        }
        componentDidUpdate() {
          Scheduler.log('Did update: ' + this.props.label);
        }
        render() {
          return <Text text={this.props.label} />;
        }
      }

      const ChildA = <Child key="A" label="A" />;
      const lazyChildA = lazy(() => {
        Scheduler.log('Init A');

Review comment (suggestion):
Does it work to gate this code instead of setting the feature flag?

```suggestion
    // @gate disableLegacyMode
    it('mount and reorder lazy elements (legacy mode)', async () => {
```

Code after:

    await waitForAll(['Init A', 'Loading...']);
    expect(root).not.toMatchRenderedOutput('AB');

    await act(() => resolveFakeImport(ChildA));
    // We need to flush to trigger the B to load.
    await assertLog(['Init B']);
    await act(() => resolveFakeImport(ChildB));
    assertLog(['A', 'B', 'Did mount: A', 'Did mount: B']);
    expect(root).toMatchRenderedOutput('AB');

    // Swap the position of A and B
    React.startTransition(() => {
      root.update(<Parent swap={true} />);
    });
    await waitForAll(['Init B2', 'Loading...']);
    await act(() => resolveFakeImport(ChildB2));
    // We need to flush to trigger the second one to load.
    assertLog(['Init A2', 'Loading...']);
    await act(() => resolveFakeImport(ChildA2));
    assertLog(['b', 'a', 'Did update: b', 'Did update: a']);
    expect(root).toMatchRenderedOutput('ba');
  });

  describe('legacy mode', () => {
    it('mount and reorder lazy elements (legacy mode)', async () => {
      class Child extends React.Component {
        componentDidMount() {
          Scheduler.log('Did mount: ' + this.props.label);
        }
        componentDidUpdate() {
          Scheduler.log('Did update: ' + this.props.label);
        }
        render() {
          return <Text text={this.props.label} />;
        }
      }

      const ChildA = <Child key="A" label="A" />;
      const lazyChildA = lazy(() => {
        Scheduler.log('Init A');
        return fakeImport(ChildA);
      });
      const ChildB = <Child key="B" label="B" />;
      const lazyChildB = lazy(() => {
        Scheduler.log('Init B');
        return fakeImport(ChildB);
      });
      const ChildA2 = <Child key="A" label="a" />;
      const lazyChildA2 = lazy(() => {
        Scheduler.log('Init A2');