Viewing github.com/facebook/react/packages/react-devtools-shared/src/__tests_

```
/**
```

 * Copyright (c) Meta Platforms, Inc. and affiliates.

```
 *
```

 * This source code is licensed under the MIT license found in the

 * LICENSE file in the root directory of this source tree.

```
 *
```
```
 * @flow
```
```
 */
```

import type Store from 'react-devtools-shared/src/devtools/store';

```
describe('commit tree', () => {
```
```
  let React;
```
```
  let ReactDOMClient;
```
```
  let Scheduler;
```
```
  let legacyRender;
```
```
  let store: Store;
```
```
  let utils;
```
```
  beforeEach(() => {
```
```
    utils = require('./utils');
```
```
    utils.beforeEachProfiling();
```
```
    legacyRender = utils.legacyRender;
```
```
    store = global.store;
```

    store.collapseNodesByDefault = false;

    store.recordChangeDescriptions = true;

```
    React = require('react');
```

    ReactDOMClient = require('react-dom/client');

```
    Scheduler = require('scheduler');
```
```
  });
```
```
  // @reactVersion >= 16.9
```

  it('should be able to rebuild the store tree for each commit', () => {

```
    const Parent = ({count}) => {
```

      Scheduler.unstable_advanceTime(10);

```
      return new Array(count)
```
```
        .fill(true)
```

        .map((_, index) => <Child key={index} />);

```
    };
```

    const Child = React.memo(function Child() {

      Scheduler.unstable_advanceTime(2);

```
      return null;
```
```
    });
```

    const container = document.createElement('div');

    utils.act(() => store.profilerStore.startProfiling());

    utils.act(() => legacyRender(<Parent count={1} />, container));

    expect(store).toMatchInlineSnapshot(`

```
      [root]
```
```
        ▾ <Parent>
```
```
            <Child key="0"> [Memo]
```
```
    `);
```

    utils.act(() => legacyRender(<Parent count={3} />, container));

    expect(store).toMatchInlineSnapshot(`

```
      [root]
```
```
        ▾ <Parent>
```
```
            <Child key="0"> [Memo]
```
```
            <Child key="1"> [Memo]
```
```
            <Child key="2"> [Memo]
```
```
    `);
```

    utils.act(() => legacyRender(<Parent count={2} />, container));

    expect(store).toMatchInlineSnapshot(`

```
      [root]
```
```
        ▾ <Parent>
```
```
            <Child key="0"> [Memo]
```
```
            <Child key="1"> [Memo]
```
```
    `);
```

    utils.act(() => legacyRender(<Parent count={0} />, container));

    expect(store).toMatchInlineSnapshot(`

```
      [root]
```
```
          <Parent>
```
```
    `);
```

    utils.act(() => store.profilerStore.stopProfiling());

```
    const rootID = store.roots[0];
```
```
    const commitTrees = [];
```

    for (let commitIndex = 0; commitIndex < 4; commitIndex++) {

```
      commitTrees.push(
```

        store.profilerStore.profilingCache.getCommitTree({

```
          commitIndex,
```
```
          rootID,
```
```
        }),
```
```
      );
```
```
    }
```

    expect(commitTrees[0].nodes.size).toBe(3); // <Root> + <Parent> + <Child>

    expect(commitTrees[1].nodes.size).toBe(5); // <Root> + <Parent> + <Child> x 3

    expect(commitTrees[2].nodes.size).toBe(4); // <Root> + <Parent> + <Child> x 2

    expect(commitTrees[3].nodes.size).toBe(2); // <Root> + <Parent>

```
  });
```
```
  describe('Lazy', () => {
```

    async function fakeImport(result) {

```
      return {default: result};
```
```
    }
```

    const LazyInnerComponent = () => null;

    const App = ({renderChildren}) => {

```
      if (renderChildren) {
```
```
        return (
```

          <React.Suspense fallback="Loading...">

```
            <LazyComponent />
```
```
          </React.Suspense>
```
```
        );
```
```
      } else {
```
```
        return null;
```
```
      }
```
```
    };
```
```
    let LazyComponent;
```
```
    beforeEach(() => {
```

      LazyComponent = React.lazy(() => fakeImport(LazyInnerComponent));

```
    });
```
```
    // @reactVersion >= 16.9
```

    it('should support Lazy components (legacy render)', async () => {

      const container = document.createElement('div');

      utils.act(() => store.profilerStore.startProfiling());

      utils.act(() => legacyRender(<App renderChildren={true} />, container));

```
      await Promise.resolve();
```

      expect(store).toMatchInlineSnapshot(`

```
        [root]
```
```
          ▾ <App>
```
```
              <Suspense>
```
```
      `);
```

      utils.act(() => legacyRender(<App renderChildren={true} />, container));

      expect(store).toMatchInlineSnapshot(`

```
        [root]
```
```
          ▾ <App>
```
```
            ▾ <Suspense>
```
```
                <LazyInnerComponent>
```
```
      `);
```

      utils.act(() => legacyRender(<App renderChildren={false} />, container));

      expect(store).toMatchInlineSnapshot(`

```
        [root]
```
```
            <App>
```
```
      `);
```

      utils.act(() => store.profilerStore.stopProfiling());

```
      const rootID = store.roots[0];
```
```
      const commitTrees = [];
```

      for (let commitIndex = 0; commitIndex < 3; commitIndex++) {

```
        commitTrees.push(
```

          store.profilerStore.profilingCache.getCommitTree({

```
            commitIndex,
```
```
            rootID,
```
```
          }),
```
```
        );
```
```
      }
```

      expect(commitTrees[0].nodes.size).toBe(3); // <Root> + <App> + <Suspense>

      expect(commitTrees[1].nodes.size).toBe(4); // <Root> + <App> + <Suspense> + <LazyInnerComponent>

      expect(commitTrees[2].nodes.size).toBe(2); // <Root> + <App>

```
    });
```
```
    // @reactVersion >= 18.0
```

    it('should support Lazy components (createRoot)', async () => {

      const container = document.createElement('div');

      const root = ReactDOMClient.createRoot(container);

      utils.act(() => store.profilerStore.startProfiling());

      utils.act(() => root.render(<App renderChildren={true} />));

```
      await Promise.resolve();
```

      expect(store).toMatchInlineSnapshot(`

```
        [root]
```
```
          ▾ <App>
```
```
              <Suspense>
```
```
      `);
```

      utils.act(() => root.render(<App renderChildren={true} />));

      expect(store).toMatchInlineSnapshot(`

```
        [root]
```
```
          ▾ <App>
```
```
            ▾ <Suspense>
```
```
                <LazyInnerComponent>
```
```
      `);
```

      utils.act(() => root.render(<App renderChildren={false} />));

      expect(store).toMatchInlineSnapshot(`

```
        [root]
```
```
            <App>
```
```
      `);
```

      utils.act(() => store.profilerStore.stopProfiling());

```
      const rootID = store.roots[0];
```
```
      const commitTrees = [];
```

      for (let commitIndex = 0; commitIndex < 3; commitIndex++) {

```
        commitTrees.push(
```

          store.profilerStore.profilingCache.getCommitTree({

```
            commitIndex,
```
```
            rootID,
```
```
          }),
```
```
        );
```
```
      }
```

      expect(commitTrees[0].nodes.size).toBe(3); // <Root> + <App> + <Suspense>

      expect(commitTrees[1].nodes.size).toBe(4); // <Root> + <App> + <Suspense> + <LazyInnerComponent>

      expect(commitTrees[2].nodes.size).toBe(2); // <Root> + <App>

```
    });
```
```
    // @reactVersion >= 16.9
```

    it('should support Lazy components that are unmounted before resolving (legacy render)', async () => {

      const container = document.createElement('div');

      utils.act(() => store.profilerStore.startProfiling());

      utils.act(() => legacyRender(<App renderChildren={true} />, container));

      expect(store).toMatchInlineSnapshot(`

```
        [root]
```
```
          ▾ <App>
```
```
              <Suspense>
```
```
      `);
```

      utils.act(() => legacyRender(<App renderChildren={false} />, container));

      expect(store).toMatchInlineSnapshot(`

```
        [root]
```
```
            <App>
```
```
      `);
```

      utils.act(() => store.profilerStore.stopProfiling());

```
      const rootID = store.roots[0];
```
```
      const commitTrees = [];
```

      for (let commitIndex = 0; commitIndex < 2; commitIndex++) {

```
        commitTrees.push(
```

          store.profilerStore.profilingCache.getCommitTree({

```
            commitIndex,
```
```
            rootID,
```
```
          }),
```
```
        );
```
```
      }
```

      expect(commitTrees[0].nodes.size).toBe(3); // <Root> + <App> + <Suspense>

      expect(commitTrees[1].nodes.size).toBe(2); // <Root> + <App>

```
    });
```
```
    // @reactVersion >= 18.0
```

    it('should support Lazy components that are unmounted before resolving (createRoot)', async () => {

      const container = document.createElement('div');

      const root = ReactDOMClient.createRoot(container);

      utils.act(() => store.profilerStore.startProfiling());

      utils.act(() => root.render(<App renderChildren={true} />));

      expect(store).toMatchInlineSnapshot(`

```
        [root]
```
```
          ▾ <App>
```
```
              <Suspense>
```
```
      `);
```

      utils.act(() => root.render(<App renderChildren={false} />));

      expect(store).toMatchInlineSnapshot(`

```
        [root]
```
```
            <App>
```
```
      `);
```

      utils.act(() => store.profilerStore.stopProfiling());

```
      const rootID = store.roots[0];
```
```
      const commitTrees = [];
```

      for (let commitIndex = 0; commitIndex < 2; commitIndex++) {

```
        commitTrees.push(
```

          store.profilerStore.profilingCache.getCommitTree({

```
            commitIndex,
```
```
            rootID,
```
```
          }),
```
```
        );
```
```
      }
```

      expect(commitTrees[0].nodes.size).toBe(3); // <Root> + <App> + <Suspense>

      expect(commitTrees[1].nodes.size).toBe(2); // <Root> + <App>

```
    });
```
```
  });
```
```
});
```