/**

* 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
*/

describe('Store', () => {
let React;
let ReactDOM;
let ReactDOMClient;
let agent;
let act;
let actAsync;
let bridge;
let getRendererID;
let legacyRender;
let store;
let withErrorsOrWarningsIgnored;

beforeEach(() => {
agent = global.agent;
bridge = global.bridge;
store = global.store;

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

const utils = require('./utils');

act = utils.act;
actAsync = utils.actAsync;
getRendererID = utils.getRendererID;
legacyRender = utils.legacyRender;
withErrorsOrWarningsIgnored = utils.withErrorsOrWarningsIgnored;
});

// @reactVersion >= 18.0

it('should not allow a root node to be collapsed', () => {
const Component = () => <div>Hi</div>;

act(() =>
legacyRender(<Component count={4} />, document.createElement('div')),
);
expect(store).toMatchInlineSnapshot(`
[root]
<Component>
`);

expect(store.roots).toHaveLength(1);

const rootID = store.roots[0];

expect(() => store.toggleIsCollapsed(rootID, true)).toThrow(

'Root nodes cannot be collapsed',
);
});
 // @reactVersion >= 18.0
it('should properly handle a root with no visible nodes', () => {
const Root = ({children}) => children;

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

act(() => legacyRender(<Root>{null}</Root>, container));

expect(store).toMatchInlineSnapshot(`
[root]
<Root>
`);

act(() => legacyRender(<div />, container));

expect(store).toMatchInlineSnapshot(`[root]`);
});

// This test is not the same cause as what's reported on GitHub,

// but the resulting behavior (owner mounting after descendant) is the same.
// Thec ase below is admittedly contrived and relies on side effects.
// I'mnot yet sure of how to reduce the GitHub reported production case to a test
though.
// See https://github.com/facebook/react/issues/21445
// @reactVersion >= 18.0
it('should handle when a component mounts before its owner', () => {
const promise = new Promise(resolve => {});

let Dynamic = null;

const Owner = () => {
Dynamic = <Child />;
throw promise;
};
const Parent = () => {
return Dynamic;
};
const Child = () => null;

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

act(() =>
legacyRender(
<>
<React.Suspense fallback="Loading...">
<Owner />
</React.Suspense>
<Parent />
</>,
container,
),
);
expect(store).toMatchInlineSnapshot(`
[root]
<Suspense>
▾ <Parent>
<Child>
`);
});

// @reactVersion >= 18.0

it('should handle multibyte character strings', () => {
const Component = () => null;
Component.displayName = '🟩💜🔵';

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

act(() => legacyRender(<Component />, container));

expect(store).toMatchInlineSnapshot(`
[root]
<🟩💜🔵>
`);
});

describe('StrictMode compliance', () => {

it('should mark strict root elements as strict', () => {
const App = () => <Component />;
const Component = () => null;

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

const root = ReactDOMClient.createRoot(container, {
unstable_strictMode: true,
});
act(() => {
root.render(<App />);
});

expect(store.getElementAtIndex(0).isStrictModeNonCompliant).toBe(false);
expect(store.getElementAtIndex(1).isStrictModeNonCompliant).toBe(false);
});

// @reactVersion >= 18.0

it('should mark non strict root elements as not strict', () => {
const App = () => <Component />;
const Component = () => null;

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

const root = ReactDOMClient.createRoot(container);
act(() => {
root.render(<App />);
});

expect(store.getElementAtIndex(0).isStrictModeNonCompliant).toBe(true);
expect(store.getElementAtIndex(1).isStrictModeNonCompliant).toBe(true);
});

it('should mark StrictMode subtree elements as strict', () => {

const App = () => (
<React.StrictMode>
<Component />
</React.StrictMode>
);
const Component = () => null;

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

const root = ReactDOMClient.createRoot(container);
act(() => {
root.render(<App />);
});
 expect(store.getElementAtIndex(0).isStrictModeNonCompliant).toBe(true);
expect(store.getElementAtIndex(1).isStrictModeNonCompliant).toBe(false);
});
});

describe('collapseNodesByDefault:false', () => {
beforeEach(() => {
store.collapseNodesByDefault = false;
});

// @reactVersion >= 18.0

it('should support mount and update operations', () => {
const Grandparent = ({count}) => (
<React.Fragment>
<Parent count={count} />
<Parent count={count} />
</React.Fragment>
);
const Parent = ({count}) =>
new Array(count).fill(true).map((_, index) => <Child key={index} />);
const Child = () => <div>Hi!</div>;

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

act(() => legacyRender(<Grandparent count={4} />, container));

expect(store).toMatchInlineSnapshot(`
[root]
▾ <Grandparent>
▾ <Parent>
<Child key="0">
<Child key="1">
<Child key="2">
<Child key="3">
▾ <Parent>
<Child key="0">
<Child key="1">
<Child key="2">
<Child key="3">
`);

act(() => legacyRender(<Grandparent count={2} />, container));

expect(store).toMatchInlineSnapshot(`
[root]
▾ <Grandparent>
▾ <Parent>
<Child key="0">
<Child key="1">
▾ <Parent>
<Child key="0">
<Child key="1">
`);

act(() => ReactDOM.unmountComponentAtNode(container));

expect(store).toMatchInlineSnapshot(``);
});

// @reactVersion >= 18.0

it('should support mount and update operations for multiple roots', () => {
const Parent = ({count}) =>
 new Array(count).fill(true).map((_, index) => <Child key={index} />);
const Child = () => <div>Hi!</div>;

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

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

act(() => {
legacyRender(<Parent key="A" count={3} />, containerA);
legacyRender(<Parent key="B" count={2} />, containerB);
});
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Parent key="A">
<Child key="0">
<Child key="1">
<Child key="2">
[root]
▾ <Parent key="B">
<Child key="0">
<Child key="1">
`);

act(() => {
legacyRender(<Parent key="A" count={4} />, containerA);
legacyRender(<Parent key="B" count={1} />, containerB);
});
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Parent key="A">
<Child key="0">
<Child key="1">
<Child key="2">
<Child key="3">
[root]
▾ <Parent key="B">
<Child key="0">
`);

act(() => ReactDOM.unmountComponentAtNode(containerB));

expect(store).toMatchInlineSnapshot(`
[root]
▾ <Parent key="A">
<Child key="0">
<Child key="1">
<Child key="2">
<Child key="3">
`);

act(() => ReactDOM.unmountComponentAtNode(containerA));

expect(store).toMatchInlineSnapshot(``);
});

// @reactVersion >= 18.0

it('should filter DOM nodes from the store tree', () => {
const Grandparent = () => (
<div>
<div>
<Parent />
</div>
 <Parent />
</div>
);
const Parent = () => (
<div>
<Child />
</div>
);
const Child = () => <div>Hi!</div>;

act(() =>
legacyRender(<Grandparent count={4} />, document.createElement('div')),
);
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Grandparent>
▾ <Parent>
<Child>
▾ <Parent>
<Child>
`);
});

// @reactVersion >= 18.0

it('should display Suspense nodes properly in various states', () => {
const Loading = () => <div>Loading...</div>;
const SuspendingComponent = () => {
throw new Promise(() => {});
};
const Component = () => {
return <div>Hello</div>;
};
const Wrapper = ({shouldSuspense}) => (
<React.Fragment>
<Component key="Outside" />
<React.Suspense fallback={<Loading />}>
{shouldSuspense ? (
<SuspendingComponent />
) : (
<Component key="Inside" />
)}
</React.Suspense>
</React.Fragment>
);

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

act(() => legacyRender(<Wrapper shouldSuspense={true} />, container));
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Loading>
`);

act(() => {
legacyRender(<Wrapper shouldSuspense={false} />, container);
});
expect(store).toMatchInlineSnapshot(`
 [root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Component key="Inside">
`);
});

// @reactVersion >= 18.0

it('should support nested Suspense nodes', () => {
const Component = () => null;
const Loading = () => <div>Loading...</div>;
const Never = () => {
throw new Promise(() => {});
};

const Wrapper = ({
suspendFirst = false,
suspendSecond = false,
suspendParent = false,
}) => (
<React.Fragment>
<Component key="Outside" />
<React.Suspense fallback={<Loading key="Parent Fallback" />}>
<Component key="Unrelated at Start" />
<React.Suspense fallback={<Loading key="Suspense 1 Fallback" />}>
{suspendFirst ? (
<Never />
) : (
<Component key="Suspense 1 Content" />
)}
</React.Suspense>
<React.Suspense fallback={<Loading key="Suspense 2 Fallback" />}>
{suspendSecond ? (
<Never />
) : (
<Component key="Suspense 2 Content" />
)}
</React.Suspense>
<React.Suspense fallback={<Loading key="Suspense 3 Fallback" />}>
<Never />
</React.Suspense>
{suspendParent && <Never />}
<Component key="Unrelated at End" />
</React.Suspense>
</React.Fragment>
);

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

act(() =>
legacyRender(
<Wrapper
suspendParent={false}
suspendFirst={false}
suspendSecond={false}
/>,
container,
),
);
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Component key="Unrelated at Start">
▾ <Suspense>
<Component key="Suspense 1 Content">
▾ <Suspense>
<Component key="Suspense 2 Content">
▾ <Suspense>
<Loading key="Suspense 3 Fallback">
<Component key="Unrelated at End">
`);
act(() =>
legacyRender(
<Wrapper
suspendParent={false}
suspendFirst={true}
suspendSecond={false}
/>,
container,
),
);
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Component key="Unrelated at Start">
▾ <Suspense>
<Loading key="Suspense 1 Fallback">
▾ <Suspense>
<Component key="Suspense 2 Content">
▾ <Suspense>
<Loading key="Suspense 3 Fallback">
<Component key="Unrelated at End">
`);
act(() =>
legacyRender(
<Wrapper
suspendParent={false}
suspendFirst={false}
suspendSecond={true}
/>,
container,
),
);
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Component key="Unrelated at Start">
▾ <Suspense>
<Component key="Suspense 1 Content">
▾ <Suspense>
<Loading key="Suspense 2 Fallback">
▾ <Suspense>
 <Loading key="Suspense 3 Fallback">
<Component key="Unrelated at End">
`);
act(() =>
legacyRender(
<Wrapper
suspendParent={false}
suspendFirst={true}
suspendSecond={false}
/>,
container,
),
);
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Component key="Unrelated at Start">
▾ <Suspense>
<Loading key="Suspense 1 Fallback">
▾ <Suspense>
<Component key="Suspense 2 Content">
▾ <Suspense>
<Loading key="Suspense 3 Fallback">
<Component key="Unrelated at End">
`);
act(() =>
legacyRender(
<Wrapper
suspendParent={true}
suspendFirst={true}
suspendSecond={false}
/>,
container,
),
);
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Loading key="Parent Fallback">
`);
act(() =>
legacyRender(
<Wrapper
suspendParent={false}
suspendFirst={true}
suspendSecond={true}
/>,
container,
),
);
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
 <Component key="Unrelated at Start">
▾ <Suspense>
<Loading key="Suspense 1 Fallback">
▾ <Suspense>
<Loading key="Suspense 2 Fallback">
▾ <Suspense>
<Loading key="Suspense 3 Fallback">
<Component key="Unrelated at End">
`);
act(() =>
legacyRender(
<Wrapper
suspendParent={false}
suspendFirst={false}
suspendSecond={false}
/>,
container,
),
);
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Component key="Unrelated at Start">
▾ <Suspense>
<Component key="Suspense 1 Content">
▾ <Suspense>
<Component key="Suspense 2 Content">
▾ <Suspense>
<Loading key="Suspense 3 Fallback">
<Component key="Unrelated at End">
`);

const rendererID = getRendererID();

act(() =>
agent.overrideSuspense({
id: store.getElementIDAtIndex(4),
rendererID,
forceFallback: true,
}),
);
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Component key="Unrelated at Start">
▾ <Suspense>
<Loading key="Suspense 1 Fallback">
▾ <Suspense>
<Component key="Suspense 2 Content">
▾ <Suspense>
<Loading key="Suspense 3 Fallback">
<Component key="Unrelated at End">
`);
act(() =>
agent.overrideSuspense({
id: store.getElementIDAtIndex(2),
 rendererID,
forceFallback: true,
}),
);
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Loading key="Parent Fallback">
`);
act(() =>
legacyRender(
<Wrapper
suspendParent={false}
suspendFirst={true}
suspendSecond={true}
/>,
container,
),
);
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Loading key="Parent Fallback">
`);
act(() =>
agent.overrideSuspense({
id: store.getElementIDAtIndex(2),
rendererID,
forceFallback: false,
}),
);
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Component key="Unrelated at Start">
▾ <Suspense>
<Loading key="Suspense 1 Fallback">
▾ <Suspense>
<Loading key="Suspense 2 Fallback">
▾ <Suspense>
<Loading key="Suspense 3 Fallback">
<Component key="Unrelated at End">
`);
act(() =>
agent.overrideSuspense({
id: store.getElementIDAtIndex(4),
rendererID,
forceFallback: false,
}),
);
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Wrapper>
 <Component key="Outside">
▾ <Suspense>
<Component key="Unrelated at Start">
▾ <Suspense>
<Loading key="Suspense 1 Fallback">
▾ <Suspense>
<Loading key="Suspense 2 Fallback">
▾ <Suspense>
<Loading key="Suspense 3 Fallback">
<Component key="Unrelated at End">
`);
act(() =>
legacyRender(
<Wrapper
suspendParent={false}
suspendFirst={false}
suspendSecond={false}
/>,
container,
),
);
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Component key="Unrelated at Start">
▾ <Suspense>
<Component key="Suspense 1 Content">
▾ <Suspense>
<Component key="Suspense 2 Content">
▾ <Suspense>
<Loading key="Suspense 3 Fallback">
<Component key="Unrelated at End">
`);
});

it('should display a partially rendered SuspenseList', () => {

const Loading = () => <div>Loading...</div>;
const SuspendingComponent = () => {
throw new Promise(() => {});
};
const Component = () => {
return <div>Hello</div>;
};
const Wrapper = ({shouldSuspense}) => (
<React.Fragment>
<React.unstable_SuspenseList revealOrder="forwards" tail="collapsed">
<Component key="A" />
<React.Suspense fallback={<Loading />}>
{shouldSuspense ? <SuspendingComponent /> : <Component key="B" />}
</React.Suspense>
<Component key="C" />
</React.unstable_SuspenseList>
</React.Fragment>
);

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

const root = ReactDOMClient.createRoot(container);
 act(() => {
root.render(<Wrapper shouldSuspense={true} />);
});
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Wrapper>
▾ <SuspenseList>
<Component key="A">
▾ <Suspense>
<Loading>
`);

act(() => {
root.render(<Wrapper shouldSuspense={false} />);
});
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Wrapper>
▾ <SuspenseList>
<Component key="A">
▾ <Suspense>
<Component key="B">
<Component key="C">
`);
});

// @reactVersion >= 18.0

it('should support collapsing parts of the tree', () => {
const Grandparent = ({count}) => (
<React.Fragment>
<Parent count={count} />
<Parent count={count} />
</React.Fragment>
);
const Parent = ({count}) =>
new Array(count).fill(true).map((_, index) => <Child key={index} />);
const Child = () => <div>Hi!</div>;

act(() =>
legacyRender(<Grandparent count={2} />, document.createElement('div')),
);
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Grandparent>
▾ <Parent>
<Child key="0">
<Child key="1">
▾ <Parent>
<Child key="0">
<Child key="1">
`);

const grandparentID = store.getElementIDAtIndex(0);

const parentOneID = store.getElementIDAtIndex(1);
const parentTwoID = store.getElementIDAtIndex(4);

act(() => store.toggleIsCollapsed(parentOneID, true));

expect(store).toMatchInlineSnapshot(`
[root]
 ▾ <Grandparent>
▸ <Parent>
▾ <Parent>
<Child key="0">
<Child key="1">
`);

act(() => store.toggleIsCollapsed(parentTwoID, true));

expect(store).toMatchInlineSnapshot(`
[root]
▾ <Grandparent>
▸ <Parent>
▸ <Parent>
`);

act(() => store.toggleIsCollapsed(parentOneID, false));

expect(store).toMatchInlineSnapshot(`
[root]
▾ <Grandparent>
▾ <Parent>
<Child key="0">
<Child key="1">
▸ <Parent>
`);

act(() => store.toggleIsCollapsed(grandparentID, true));

expect(store).toMatchInlineSnapshot(`
[root]
▸ <Grandparent>
`);

act(() => store.toggleIsCollapsed(grandparentID, false));

expect(store).toMatchInlineSnapshot(`
[root]
▾ <Grandparent>
▾ <Parent>
<Child key="0">
<Child key="1">
▸ <Parent>
`);
});

// @reactVersion >= 18.0

it('should support reordering of children', () => {
const Root = ({children}) => children;
const Component = () => null;

const Foo = () => [<Component key="0" />];

const Bar = () => [<Component key="0" />, <Component key="1" />];
const foo = <Foo key="foo" />;
const bar = <Bar key="bar" />;

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

act(() => legacyRender(<Root>{[foo, bar]}</Root>, container));

expect(store).toMatchInlineSnapshot(`
[root]
▾ <Root>
▾ <Foo key="foo">
 <Component key="0">
▾ <Bar key="bar">
<Component key="0">
<Component key="1">
`);

act(() => legacyRender(<Root>{[bar, foo]}</Root>, container));

expect(store).toMatchInlineSnapshot(`
[root]
▾ <Root>
▾ <Bar key="bar">
<Component key="0">
<Component key="1">
▾ <Foo key="foo">
<Component key="0">
`);

act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));

expect(store).toMatchInlineSnapshot(`
[root]
▸ <Root>
`);

act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));

expect(store).toMatchInlineSnapshot(`
[root]
▾ <Root>
▾ <Bar key="bar">
<Component key="0">
<Component key="1">
▾ <Foo key="foo">
<Component key="0">
`);
});
});

describe('collapseNodesByDefault:true', () => {
beforeEach(() => {
store.collapseNodesByDefault = true;
});

// @reactVersion >= 18.0

it('should support mount and update operations', () => {
const Parent = ({count}) =>
new Array(count).fill(true).map((_, index) => <Child key={index} />);
const Child = () => <div>Hi!</div>;

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

act(() =>
legacyRender(
<React.Fragment>
<Parent count={1} />
<Parent count={3} />
</React.Fragment>,
container,
),
);
expect(store).toMatchInlineSnapshot(`
 [root]
▸ <Parent>
▸ <Parent>
`);

act(() =>
legacyRender(
<React.Fragment>
<Parent count={2} />
<Parent count={1} />
</React.Fragment>,
container,
),
);
expect(store).toMatchInlineSnapshot(`
[root]
▸ <Parent>
▸ <Parent>
`);

act(() => ReactDOM.unmountComponentAtNode(container));

expect(store).toMatchInlineSnapshot(``);
});

// @reactVersion >= 18.0

it('should support mount and update operations for multiple roots', () => {
const Parent = ({count}) =>
new Array(count).fill(true).map((_, index) => <Child key={index} />);
const Child = () => <div>Hi!</div>;

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

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

act(() => {
legacyRender(<Parent key="A" count={3} />, containerA);
legacyRender(<Parent key="B" count={2} />, containerB);
});
expect(store).toMatchInlineSnapshot(`
[root]
▸ <Parent key="A">
[root]
▸ <Parent key="B">
`);

act(() => {
legacyRender(<Parent key="A" count={4} />, containerA);
legacyRender(<Parent key="B" count={1} />, containerB);
});
expect(store).toMatchInlineSnapshot(`
[root]
▸ <Parent key="A">
[root]
▸ <Parent key="B">
`);

act(() => ReactDOM.unmountComponentAtNode(containerB));

expect(store).toMatchInlineSnapshot(`
[root]
▸ <Parent key="A">
 `);

act(() => ReactDOM.unmountComponentAtNode(containerA));

expect(store).toMatchInlineSnapshot(``);
});

// @reactVersion >= 18.0

it('should filter DOM nodes from the store tree', () => {
const Grandparent = () => (
<div>
<div>
<Parent />
</div>
<Parent />
</div>
);
const Parent = () => (
<div>
<Child />
</div>
);
const Child = () => <div>Hi!</div>;

act(() =>
legacyRender(<Grandparent count={4} />, document.createElement('div')),
);
expect(store).toMatchInlineSnapshot(`
[root]
▸ <Grandparent>
`);

act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));

expect(store).toMatchInlineSnapshot(`
[root]
▾ <Grandparent>
▸ <Parent>
▸ <Parent>
`);

act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));

expect(store).toMatchInlineSnapshot(`
[root]
▾ <Grandparent>
▾ <Parent>
<Child>
▸ <Parent>
`);
});

// @reactVersion >= 18.0

it('should display Suspense nodes properly in various states', () => {
const Loading = () => <div>Loading...</div>;
const SuspendingComponent = () => {
throw new Promise(() => {});
};
const Component = () => {
return <div>Hello</div>;
};
const Wrapper = ({shouldSuspense}) => (
 <React.Fragment>
<Component key="Outside" />
<React.Suspense fallback={<Loading />}>
{shouldSuspense ? (
<SuspendingComponent />
) : (
<Component key="Inside" />
)}
</React.Suspense>
</React.Fragment>
);

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

act(() => legacyRender(<Wrapper shouldSuspense={true} />, container));
expect(store).toMatchInlineSnapshot(`
[root]
▸ <Wrapper>
`);

// This test isn't meaningful unless we expand the suspended tree

act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(2), false));
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Loading>
`);

act(() => {
legacyRender(<Wrapper shouldSuspense={false} />, container);
});
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Component key="Inside">
`);
});

// @reactVersion >= 18.0

it('should support expanding parts of the tree', () => {
const Grandparent = ({count}) => (
<React.Fragment>
<Parent count={count} />
<Parent count={count} />
</React.Fragment>
);
const Parent = ({count}) =>
new Array(count).fill(true).map((_, index) => <Child key={index} />);
const Child = () => <div>Hi!</div>;

act(() =>
legacyRender(<Grandparent count={2} />, document.createElement('div')),
);
expect(store).toMatchInlineSnapshot(`
[root]
 ▸ <Grandparent>
`);

const grandparentID = store.getElementIDAtIndex(0);

act(() => store.toggleIsCollapsed(grandparentID, false));

expect(store).toMatchInlineSnapshot(`
[root]
▾ <Grandparent>
▸ <Parent>
▸ <Parent>
`);

const parentOneID = store.getElementIDAtIndex(1);

const parentTwoID = store.getElementIDAtIndex(2);

act(() => store.toggleIsCollapsed(parentOneID, false));

expect(store).toMatchInlineSnapshot(`
[root]
▾ <Grandparent>
▾ <Parent>
<Child key="0">
<Child key="1">
▸ <Parent>
`);

act(() => store.toggleIsCollapsed(parentTwoID, false));

expect(store).toMatchInlineSnapshot(`
[root]
▾ <Grandparent>
▾ <Parent>
<Child key="0">
<Child key="1">
▾ <Parent>
<Child key="0">
<Child key="1">
`);

act(() => store.toggleIsCollapsed(parentOneID, true));

expect(store).toMatchInlineSnapshot(`
[root]
▾ <Grandparent>
▸ <Parent>
▾ <Parent>
<Child key="0">
<Child key="1">
`);

act(() => store.toggleIsCollapsed(parentTwoID, true));

expect(store).toMatchInlineSnapshot(`
[root]
▾ <Grandparent>
▸ <Parent>
▸ <Parent>
`);

act(() => store.toggleIsCollapsed(grandparentID, true));

expect(store).toMatchInlineSnapshot(`
[root]
 ▸ <Grandparent>
`);
});

// @reactVersion >= 18.0

it('should support expanding deep parts of the tree', () => {
const Wrapper = ({forwardedRef}) => (
<Nested depth={3} forwardedRef={forwardedRef} />
);
const Nested = ({depth, forwardedRef}) =>
depth > 0 ? (
<Nested depth={depth - 1} forwardedRef={forwardedRef} />
) : (
<div ref={forwardedRef} />
);

const ref = React.createRef();

act(() =>
legacyRender(
<Wrapper forwardedRef={ref} />,
document.createElement('div'),
),
);
expect(store).toMatchInlineSnapshot(`
[root]
▸ <Wrapper>
`);

const deepestedNodeID = agent.getIDForNode(ref.current);

act(() => store.toggleIsCollapsed(deepestedNodeID, false));

expect(store).toMatchInlineSnapshot(`
[root]
▾ <Wrapper>
▾ <Nested>
▾ <Nested>
▾ <Nested>
<Nested>
`);

const rootID = store.getElementIDAtIndex(0);

act(() => store.toggleIsCollapsed(rootID, true));

expect(store).toMatchInlineSnapshot(`
[root]
▸ <Wrapper>
`);

act(() => store.toggleIsCollapsed(rootID, false));

expect(store).toMatchInlineSnapshot(`
[root]
▾ <Wrapper>
▾ <Nested>
▾ <Nested>
▾ <Nested>
<Nested>
`);
 const id = store.getElementIDAtIndex(1);

act(() => store.toggleIsCollapsed(id, true));

expect(store).toMatchInlineSnapshot(`
[root]
▾ <Wrapper>
▸ <Nested>
`);

act(() => store.toggleIsCollapsed(id, false));

expect(store).toMatchInlineSnapshot(`
[root]
▾ <Wrapper>
▾ <Nested>
▾ <Nested>
▾ <Nested>
<Nested>
`);
});

// @reactVersion >= 18.0

it('should support reordering of children', () => {
const Root = ({children}) => children;
const Component = () => null;

const Foo = () => [<Component key="0" />];

const Bar = () => [<Component key="0" />, <Component key="1" />];
const foo = <Foo key="foo" />;
const bar = <Bar key="bar" />;

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

act(() => legacyRender(<Root>{[foo, bar]}</Root>, container));

expect(store).toMatchInlineSnapshot(`
[root]
▸ <Root>
`);

act(() => legacyRender(<Root>{[bar, foo]}</Root>, container));

expect(store).toMatchInlineSnapshot(`
[root]
▸ <Root>
`);

act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));

expect(store).toMatchInlineSnapshot(`
[root]
▾ <Root>
▸ <Bar key="bar">
▸ <Foo key="foo">
`);

act(() => {
store.toggleIsCollapsed(store.getElementIDAtIndex(2), false);
store.toggleIsCollapsed(store.getElementIDAtIndex(1), false);
});
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Root>
 ▾ <Bar key="bar">
<Component key="0">
<Component key="1">
▾ <Foo key="foo">
<Component key="0">
`);

act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));

expect(store).toMatchInlineSnapshot(`
[root]
▸ <Root>
`);
});

// @reactVersion >= 18.0

it('should not add new nodes when suspense is toggled', () => {
const SuspenseTree = () => {
return (
<React.Suspense fallback={<Fallback>Loading outer</Fallback>}>
<Parent />
</React.Suspense>
);
};

const Fallback = () => null;

const Parent = () => <Child />;
const Child = () => null;

act(() => legacyRender(<SuspenseTree />, document.createElement('div')));

expect(store).toMatchInlineSnapshot(`
[root]
▸ <SuspenseTree>
`);

act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));

act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));
expect(store).toMatchInlineSnapshot(`
[root]
▾ <SuspenseTree>
▾ <Suspense>
▸ <Parent>
`);

const rendererID = getRendererID();

const suspenseID = store.getElementIDAtIndex(1);

act(() =>
agent.overrideSuspense({
id: suspenseID,
rendererID,
forceFallback: true,
}),
);
expect(store).toMatchInlineSnapshot(`
[root]
▾ <SuspenseTree>
▾ <Suspense>
<Fallback>
`);
 act(() =>
agent.overrideSuspense({
id: suspenseID,
rendererID,
forceFallback: false,
}),
);
expect(store).toMatchInlineSnapshot(`
[root]
▾ <SuspenseTree>
▾ <Suspense>
▸ <Parent>
`);
});
});

describe('getIndexOfElementID', () => {
beforeEach(() => {
store.collapseNodesByDefault = false;
});

// @reactVersion >= 18.0

it('should support a single root with a single child', () => {
const Grandparent = () => (
<React.Fragment>
<Parent />
<Parent />
</React.Fragment>
);
const Parent = () => <Child />;
const Child = () => null;

act(() => legacyRender(<Grandparent />, document.createElement('div')));

for (let i = 0; i < store.numElements; i++) {

expect(store.getIndexOfElementID(store.getElementIDAtIndex(i))).toBe(i);
}
});

// @reactVersion >= 18.0

it('should support multiple roots with one children each', () => {
const Grandparent = () => <Parent />;
const Parent = () => <Child />;
const Child = () => null;

act(() => {
legacyRender(<Grandparent />, document.createElement('div'));
legacyRender(<Grandparent />, document.createElement('div'));
});

for (let i = 0; i < store.numElements; i++) {

expect(store.getIndexOfElementID(store.getElementIDAtIndex(i))).toBe(i);
}
});

// @reactVersion >= 18.0

it('should support a single root with multiple top level children', () => {
const Grandparent = () => <Parent />;
 const Parent = () => <Child />;
const Child = () => null;

act(() =>
legacyRender(
<React.Fragment>
<Grandparent />
<Grandparent />
</React.Fragment>,
document.createElement('div'),
),
);

for (let i = 0; i < store.numElements; i++) {

expect(store.getIndexOfElementID(store.getElementIDAtIndex(i))).toBe(i);
}
});

// @reactVersion >= 18.0

it('should support multiple roots with multiple top level children', () => {
const Grandparent = () => <Parent />;
const Parent = () => <Child />;
const Child = () => null;

act(() => {
legacyRender(
<React.Fragment>
<Grandparent />
<Grandparent />
</React.Fragment>,
document.createElement('div'),
);
legacyRender(
<React.Fragment>
<Grandparent />
<Grandparent />
</React.Fragment>,
document.createElement('div'),
);
});

for (let i = 0; i < store.numElements; i++) {

expect(store.getIndexOfElementID(store.getElementIDAtIndex(i))).toBe(i);
}
});
});

// @reactVersion >= 18.0

it('detects and updates profiling support based on the attached roots', () => {
const Component = () => null;

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

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

expect(store.rootSupportsBasicProfiling).toBe(false);

act(() => legacyRender(<Component />, containerA));

expect(store.rootSupportsBasicProfiling).toBe(true);
 act(() => legacyRender(<Component />, containerB));
act(() => ReactDOM.unmountComponentAtNode(containerA));
expect(store.rootSupportsBasicProfiling).toBe(true);

act(() => ReactDOM.unmountComponentAtNode(containerB));

expect(store.rootSupportsBasicProfiling).toBe(false);
});

// @reactVersion >= 18.0

it('should properly serialize non-string key values', () => {
const Child = () => null;

// Bypass React element's automatic stringifying of keys intentionally.

// This is pretty hacky.
const fauxElement = Object.assign({}, <Child />, {key: 123});

act(() => legacyRender([fauxElement], document.createElement('div')));

expect(store).toMatchInlineSnapshot(`
[root]
<Child key="123">
`);
});

it('should show the right display names for special component types', async () =>
{
const MyComponent = (props, ref) => null;
const ForwardRefComponent = React.forwardRef(MyComponent);
const MyComponent2 = (props, ref) => null;
const ForwardRefComponentWithAnonymousFunction = React.forwardRef(() => (
<MyComponent2 />
));
const MyComponent3 = (props, ref) => null;
const ForwardRefComponentWithCustomDisplayName =
React.forwardRef(MyComponent3);
ForwardRefComponentWithCustomDisplayName.displayName = 'Custom';
const MyComponent4 = (props, ref) => null;
const MemoComponent = React.memo(MyComponent4);
const MemoForwardRefComponent = React.memo(ForwardRefComponent);

const FakeHigherOrderComponent = () => null;

FakeHigherOrderComponent.displayName = 'withFoo(withBar(Baz))';

const MemoizedFakeHigherOrderComponent = React.memo(

FakeHigherOrderComponent,
);
const ForwardRefFakeHigherOrderComponent = React.forwardRef(
FakeHigherOrderComponent,
);

const MemoizedFakeHigherOrderComponentWithDisplayNameOverride = React.memo(

FakeHigherOrderComponent,
);
MemoizedFakeHigherOrderComponentWithDisplayNameOverride.displayName =
'memoRefOverride';
const ForwardRefFakeHigherOrderComponentWithDisplayNameOverride =
React.forwardRef(FakeHigherOrderComponent);
ForwardRefFakeHigherOrderComponentWithDisplayNameOverride.displayName =
'forwardRefOverride';
 const App = () => (
<React.Fragment>
<MyComponent />
<ForwardRefComponent />
<ForwardRefComponentWithAnonymousFunction />
<ForwardRefComponentWithCustomDisplayName />
<MemoComponent />
<MemoForwardRefComponent />
<FakeHigherOrderComponent />
<MemoizedFakeHigherOrderComponent />
<ForwardRefFakeHigherOrderComponent />
<React.unstable_Cache />
<MemoizedFakeHigherOrderComponentWithDisplayNameOverride />
<ForwardRefFakeHigherOrderComponentWithDisplayNameOverride />
</React.Fragment>
);

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

// Render once to start fetching the lazy component

act(() => legacyRender(<App />, container));

await Promise.resolve();

// Render again after it resolves

act(() => legacyRender(<App />, container));

expect(store).toMatchInlineSnapshot(`
[root]
▾ <App>
<MyComponent>
<MyComponent> [ForwardRef]
▾ <Anonymous> [ForwardRef]
<MyComponent2>
<Custom>
<MyComponent4> [Memo]
▾ <MyComponent> [Memo]
<MyComponent> [ForwardRef]
<Baz> [withFoo][withBar]
<Baz> [Memo][withFoo][withBar]
<Baz> [ForwardRef][withFoo][withBar]
<Cache>
<memoRefOverride>
<forwardRefOverride>
`);
});

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 >= 18.0

it('should support Lazy components (legacy render)', async () => {
const container = document.createElement('div');

// Render once to start fetching the lazy component

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

expect(store).toMatchInlineSnapshot(`
[root]
▾ <App>
<Suspense>
`);

await Promise.resolve();

// Render again after it resolves

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

expect(store).toMatchInlineSnapshot(`
[root]
▾ <App>
▾ <Suspense>
<LazyInnerComponent>
`);

// Render again to unmount it

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

expect(store).toMatchInlineSnapshot(`
[root]
<App>
`);
});

// @reactVersion >= 18.0

it('should support Lazy components in (createRoot)', async () => {
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);

// Render once to start fetching the lazy component

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

expect(store).toMatchInlineSnapshot(`
[root]
▾ <App>
<Suspense>
`);
 await Promise.resolve();

// Render again after it resolves

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

expect(store).toMatchInlineSnapshot(`
[root]
▾ <App>
▾ <Suspense>
<LazyInnerComponent>
`);

// Render again to unmount it

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

expect(store).toMatchInlineSnapshot(`
[root]
<App>
`);
});

// @reactVersion >= 18.0

it('should support Lazy components that are unmounted before they finish
loading (legacy render)', async () => {
const container = document.createElement('div');

// Render once to start fetching the lazy component

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

expect(store).toMatchInlineSnapshot(`
[root]
▾ <App>
<Suspense>
`);

// Render again to unmount it before it finishes loading

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

expect(store).toMatchInlineSnapshot(`
[root]
<App>
`);
});

// @reactVersion >= 18.0

it('should support Lazy components that are unmounted before they finish
loading in (createRoot)', async () => {
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);

// Render once to start fetching the lazy component

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

expect(store).toMatchInlineSnapshot(`
[root]
▾ <App>
<Suspense>
`);
 // Render again to unmount it before it finishes loading
act(() => root.render(<App renderChildren={false} />));

expect(store).toMatchInlineSnapshot(`
[root]
<App>
`);
});
});

describe('inline errors and warnings', () => {

// @reactVersion >= 18.0
it('during render are counted', () => {
function Example() {
console.error('test-only: render error');
console.warn('test-only: render warning');
return null;
}
const container = document.createElement('div');

withErrorsOrWarningsIgnored(['test-only:'], () => {
act(() => legacyRender(<Example />, container));
});

expect(store).toMatchInlineSnapshot(`
✕ 1, ⚠ 1
[root]
<Example> ✕⚠
`);

withErrorsOrWarningsIgnored(['test-only:'], () => {
act(() => legacyRender(<Example rerender={1} />, container));
});

expect(store).toMatchInlineSnapshot(`
✕ 2, ⚠ 2
[root]
<Example> ✕⚠
`);
});

// @reactVersion >= 18.0

it('during layout get counted', () => {
function Example() {
React.useLayoutEffect(() => {
console.error('test-only: layout error');
console.warn('test-only: layout warning');
});
return null;
}
const container = document.createElement('div');

withErrorsOrWarningsIgnored(['test-only:'], () => {
act(() => legacyRender(<Example />, container));
});

expect(store).toMatchInlineSnapshot(`
✕ 1, ⚠ 1
 [root]
<Example> ✕⚠
`);

withErrorsOrWarningsIgnored(['test-only:'], () => {
act(() => legacyRender(<Example rerender={1} />, container));
});

expect(store).toMatchInlineSnapshot(`
✕ 2, ⚠ 2
[root]
<Example> ✕⚠
`);
});

describe('during passive effects', () => {

function flushPendingBridgeOperations() {
jest.runOnlyPendingTimers();
}

// Gross abstraction around pending passive warning/error delay.

function flushPendingPassiveErrorAndWarningCounts() {
jest.advanceTimersByTime(1000);
}

// @reactVersion >= 18.0

it('are counted (after a delay)', () => {
function Example() {
React.useEffect(() => {
console.error('test-only: passive error');
console.warn('test-only: passive warning');
});
return null;
}
const container = document.createElement('div');

withErrorsOrWarningsIgnored(['test-only:'], () => {
act(() => {
legacyRender(<Example />, container);
}, false);
});
flushPendingBridgeOperations();
expect(store).toMatchInlineSnapshot(`
[root]
<Example>
`);

// After a delay, passive effects should be committed as well

act(flushPendingPassiveErrorAndWarningCounts, false);
expect(store).toMatchInlineSnapshot(`
✕ 1, ⚠ 1
[root]
<Example> ✕⚠
`);

act(() => ReactDOM.unmountComponentAtNode(container));

expect(store).toMatchInlineSnapshot(``);
});
// @reactVersion >= 18.0
it('are flushed early when there is a new commit', () => {
function Example() {
React.useEffect(() => {
console.error('test-only: passive error');
console.warn('test-only: passive warning');
});
return null;
}

function Noop() {
return null;
}

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

withErrorsOrWarningsIgnored(['test-only:'], () => {
act(() => {
legacyRender(
<>
<Example />
</>,
container,
);
}, false);
flushPendingBridgeOperations();
expect(store).toMatchInlineSnapshot(`
[root]
<Example>
`);

// Before warnings and errors have flushed, flush another commit.

act(() => {
legacyRender(
<>
<Example />
<Noop />
</>,
container,
);
}, false);
flushPendingBridgeOperations();
expect(store).toMatchInlineSnapshot(`
✕ 1, ⚠ 1
[root]
<Example> ✕⚠
<Noop>
`);
});

// After a delay, passive effects should be committed as well

act(flushPendingPassiveErrorAndWarningCounts, false);
expect(store).toMatchInlineSnapshot(`
✕ 2, ⚠ 2
[root]
<Example> ✕⚠
<Noop>
`);
 act(() => ReactDOM.unmountComponentAtNode(container));
expect(store).toMatchInlineSnapshot(``);
});
});

// @reactVersion >= 18.0

it('from react get counted', () => {
const container = document.createElement('div');
function Example() {
return [<Child />];
}
function Child() {
return null;
}

withErrorsOrWarningsIgnored(
['Warning: Each child in a list should have a unique "key" prop'],
() => {
act(() => legacyRender(<Example />, container));
},
);

expect(store).toMatchInlineSnapshot(`
✕ 1, ⚠ 0
[root]
▾ <Example> ✕
<Child>
`);
});

// @reactVersion >= 18.0

it('can be cleared for the whole app', () => {
function Example() {
console.error('test-only: render error');
console.warn('test-only: render warning');
return null;
}
const container = document.createElement('div');
withErrorsOrWarningsIgnored(['test-only:'], () => {
act(() =>
legacyRender(
<React.Fragment>
<Example />
<Example />
</React.Fragment>,
container,
),
);
});

expect(store).toMatchInlineSnapshot(`
✕ 2, ⚠ 2
[root]
<Example> ✕⚠
<Example> ✕⚠
`);

const {
clearErrorsAndWarnings,
 } = require('react-devtools-shared/src/backendAPI');
clearErrorsAndWarnings({bridge, store});

// flush events to the renderer

jest.runAllTimers();

expect(store).toMatchInlineSnapshot(`
[root]
<Example>
<Example>
`);
});

// @reactVersion >= 18.0

it('can be cleared for particular Fiber (only warnings)', () => {
function Example() {
console.error('test-only: render error');
console.warn('test-only: render warning');
return null;
}
const container = document.createElement('div');
withErrorsOrWarningsIgnored(['test-only:'], () => {
act(() =>
legacyRender(
<React.Fragment>
<Example />
<Example />
</React.Fragment>,
container,
),
);
});

expect(store).toMatchInlineSnapshot(`
✕ 2, ⚠ 2
[root]
<Example> ✕⚠
<Example> ✕⚠
`);

const id = ((store.getElementIDAtIndex(1): any): number);

const rendererID = store.getRendererIDForElement(id);

const {
clearWarningsForElement,
} = require('react-devtools-shared/src/backendAPI');
clearWarningsForElement({bridge, id, rendererID});

// Flush events to the renderer.

jest.runAllTimers();

expect(store).toMatchInlineSnapshot(`
✕ 2, ⚠ 1
[root]
<Example> ✕⚠
<Example> ✕
`);
});
// @reactVersion >= 18.0
it('can be cleared for a particular Fiber (only errors)', () => {
function Example() {
console.error('test-only: render error');
console.warn('test-only: render warning');
return null;
}
const container = document.createElement('div');
withErrorsOrWarningsIgnored(['test-only:'], () => {
act(() =>
legacyRender(
<React.Fragment>
<Example />
<Example />
</React.Fragment>,
container,
),
);
});

expect(store).toMatchInlineSnapshot(`
✕ 2, ⚠ 2
[root]
<Example> ✕⚠
<Example> ✕⚠
`);

const id = ((store.getElementIDAtIndex(1): any): number);

const rendererID = store.getRendererIDForElement(id);

const {
clearErrorsForElement,
} = require('react-devtools-shared/src/backendAPI');
clearErrorsForElement({bridge, id, rendererID});

// Flush events to the renderer.

jest.runAllTimers();

expect(store).toMatchInlineSnapshot(`
✕ 1, ⚠ 2
[root]
<Example> ✕⚠
<Example> ⚠
`);
});

// @reactVersion >= 18.0

it('are updated when fibers are removed from the tree', () => {
function ComponentWithWarning() {
console.warn('test-only: render warning');
return null;
}
function ComponentWithError() {
console.error('test-only: render error');
return null;
}
function ComponentWithWarningAndError() {
console.error('test-only: render error');
console.warn('test-only: render warning');
 return null;
}
const container = document.createElement('div');
withErrorsOrWarningsIgnored(['test-only:'], () => {
act(() =>
legacyRender(
<React.Fragment>
<ComponentWithError />
<ComponentWithWarning />
<ComponentWithWarningAndError />
</React.Fragment>,
container,
),
);
});
expect(store).toMatchInlineSnapshot(`
✕ 2, ⚠ 2
[root]
<ComponentWithError> ✕
<ComponentWithWarning> ⚠
<ComponentWithWarningAndError> ✕⚠
`);

withErrorsOrWarningsIgnored(['test-only:'], () => {
act(() =>
legacyRender(
<React.Fragment>
<ComponentWithWarning />
<ComponentWithWarningAndError />
</React.Fragment>,
container,
),
);
});
expect(store).toMatchInlineSnapshot(`
✕ 1, ⚠ 2
[root]
<ComponentWithWarning> ⚠
<ComponentWithWarningAndError> ✕⚠
`);

withErrorsOrWarningsIgnored(['test-only:'], () => {
act(() =>
legacyRender(
<React.Fragment>
<ComponentWithWarning />
</React.Fragment>,
container,
),
);
});
expect(store).toMatchInlineSnapshot(`
✕ 0, ⚠ 2
[root]
<ComponentWithWarning> ⚠
`);

withErrorsOrWarningsIgnored(['test-only:'], () => {
act(() => legacyRender(<React.Fragment />, container));
 });
expect(store).toMatchInlineSnapshot(`[root]`);
expect(store.errorCount).toBe(0);
expect(store.warningCount).toBe(0);
});

// Regression test for https://github.com/facebook/react/issues/23202

// @reactVersion >= 18.0
it('suspense boundary children should not double unmount and error', async ()
=> {
async function fakeImport(result) {
return {default: result};
}

const ChildA = () => null;

const ChildB = () => null;

const LazyChildA = React.lazy(() => fakeImport(ChildA));

const LazyChildB = React.lazy(() => fakeImport(ChildB));

function App({renderA}) {
return (
<React.Suspense>
{renderA ? <LazyChildA /> : <LazyChildB />}
</React.Suspense>
);
}

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

const root = ReactDOMClient.createRoot(container);
await actAsync(() => root.render(<App renderA={true} />));

expect(store).toMatchInlineSnapshot(`
[root]
▾ <App>
▾ <Suspense>
<ChildA>
`);

await actAsync(() => root.render(<App renderA={false} />));

expect(store).toMatchInlineSnapshot(`
[root]
▾ <App>
▾ <Suspense>
<ChildB>
`);
});
});
});