storeStressTestConcurrent Test

/**
* 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('StoreStressConcurrent', () => {
let React;
let ReactDOMClient;
let act;
let actAsync;
let bridge;
let store;
let print;
beforeEach(() => {
bridge = global.bridge;
store = global.store;
store.collapseNodesByDefault = false;
React = require('react');
ReactDOMClient = require('react-dom/client');
act = require('./utils').act;
// TODO: Figure out recommendation for concurrent mode tests, then replace
// this helper with the real thing.
actAsync = require('./utils').actAsync;
print = require('./__serializers__/storeSerializer').print;
});
// TODO: Remove this in favor of @gate pragma

if (!__EXPERIMENTAL__) {
it("empty test so Jest doesn't complain", () => {});
return;
}
// This is a stress test for the tree mount/update/unmount traversal.

// It renders different trees that should produce the same output.
// @reactVersion >= 18.0
it('should handle a stress test with different tree operations (Concurrent
Mode)', () => {
let setShowX;
const A = () => 'a';
const B = () => 'b';
const C = () => {
// We'll be manually flipping this component back and forth in the test.
// We only do this for a single node in order to verify that DevTools
// can handle a subtree switching alternates while other subtrees are
memoized.
const [showX, _setShowX] = React.useState(false);
setShowX = _setShowX;
return showX ? <X /> : 'c';
};
const D = () => 'd';
const E = () => 'e';
const X = () => 'x';
const a = <A key="a" />;
const b = <B key="b" />;
const c = <C key="c" />;
const d = <D key="d" />;
const e = <E key="e" />;
function Parent({children}) {
return children;
}
// 1. Render a normal version of [a, b, c, d, e].

let container = document.createElement('div');
let root = ReactDOMClient.createRoot(container);
act(() => root.render(<Parent>{[a, b, c, d, e]}</Parent>));
expect(store).toMatchInlineSnapshot(
`
[root]
▾ <Parent>
<A key="a">
<B key="b">
<C key="c">
<D key="d">
<E key="e">
`,
);
expect(container.textContent).toMatch('abcde');
const snapshotForABCDE = print(store);
// 2. Render a version where <C /> renders an <X /> child instead of 'c'.
// This is how we'll test an update to a single component.
act(() => {
setShowX(true);
});
expect(store).toMatchInlineSnapshot(
`
[root]
▾ <Parent>
<A key="a">
<B key="b">
▾ <C key="c">
<X>
<D key="d">
<E key="e">
`,
);
expect(container.textContent).toMatch('abxde');
const snapshotForABXDE = print(store);
// 3. Verify flipping it back produces the original result.

act(() => {
setShowX(false);
});
expect(print(store)).toBe(snapshotForABCDE);
// 4. Clean up.
act(() => root.unmount());
expect(print(store)).toBe('');
// Now comes the interesting part.
// All of these cases are equivalent to [a, b, c, d, e] in output.
// We'll verify that DevTools produces the same snapshots for them.
// These cases are picked so that rendering them sequentially in the same
// container results in a combination of mounts, updates, unmounts, and
reorders.
// prettier-ignore
const cases = [
[a, b, c, d, e],
[[a], b, c, d, e],
[[a, b], c, d, e],
[[a, b], c, [d, e]],
[[a, b], c, [d, '', e]],
[[a], b, c, d, [e]],
[a, b, [[c]], d, e],
[[a, ''], [b], [c], [d], [e]],
[a, b, [c, [d, ['', e]]]],
[a, b, c, d, e],
[<div key="0">{a}</div>, b, c, d, e],
[<div key="0">{a}{b}</div>, c, d, e],
[<div key="0">{a}{b}</div>, c, <div key="1">{d}{e}</div>],
[<span key="0">{a}</span>, b, c, d, [e]],
[a, b, <span key="0"><span>{c}</span></span>, d, e],
[<div key="0">{a}</div>, [b], <span key="1">{c}</span>, [d], <div
key="2">{e}</div>],
[a, b, [c, <div key="0">{d}<span>{e}</span></div>], ''],
[a, [[]], b, c, [d, [[]], e]],
[[[a, b, c, d], e]],
[a, b, c, d, e],
];
// 5. Test fresh mount for each case.

for (let i = 0; i < cases.length; i++) {
// Ensure fresh mount.
container = document.createElement('div');
root = ReactDOMClient.createRoot(container);
// Verify mounting 'abcde'.

act(() => root.render(<Parent>{cases[i]}</Parent>));
expect(print(store)).toEqual(snapshotForABCDE);
// Verify switching to 'abxde'.

act(() => {
setShowX(true);
});
expect(print(store)).toBe(snapshotForABXDE);
// Verify switching back to 'abcde'.

act(() => {
setShowX(false);
});
// Clean up.
}
// 6. Verify *updates* by reusing the container between iterations.

// There'll be no unmounting until the very end.
root = ReactDOMClient.createRoot(container);
for (let i = 0; i < cases.length; i++) {
// Verify mounting 'abcde'.
act(() => root.render(<Parent>{cases[i]}</Parent>));
expect(print(store)).toEqual(snapshotForABCDE);
// Verify switching to 'abxde'.

act(() => {
setShowX(true);
});
expect(print(store)).toBe(snapshotForABXDE);
// Verify switching back to 'abcde'.

act(() => {
setShowX(false);
});
// Don't unmount. Reuse the container between iterations.
}
});

it('should handle stress test with reordering (Concurrent Mode)', () => {
const A = () => 'a';
const B = () => 'b';
const C = () => 'c';
const D = () => 'd';
const E = () => 'e';
const d = <D key="d" />;
const e = <E key="e" />;
// prettier-ignore
const steps = [
a,
b,
c,
d,
e,
[a],
[b],
[c],
[d],
[e],
[a, b],
[b, a],
[b, c],
[c, b],
[a, c],
[c, a],
];
const Root = ({children}) => {

return children;
};
// 1. Capture the expected render result.

const snapshots = [];
for (let i = 0; i < steps.length; i++) {
const root = ReactDOMClient.createRoot(container);
act(() => root.render(<Root>{steps[i]}</Root>));
// We snapshot each step once so it doesn't regress.
snapshots.push(print(store));
}
expect(snapshots).toMatchInlineSnapshot(`
[
"[root]
▾ <Root>
<A key="a">",
"[root]
▾ <Root>
<B key="b">",
"[root]
▾ <Root>
<C key="c">",
"[root]
▾ <Root>
<D key="d">",
"[root]
▾ <Root>
<E key="e">",
"[root]
▾ <Root>
<A key="a">",
"[root]
▾ <Root>
<B key="b">",
"[root]
▾ <Root>
<C key="c">",
"[root]
▾ <Root>
<D key="d">",
"[root]
▾ <Root>
<E key="e">",
"[root]
▾ <Root>
<A key="a">
<B key="b">",
"[root]
▾ <Root>
<B key="b">
<A key="a">",
"[root]
▾ <Root>
<B key="b">
<C key="c">",
"[root]
▾ <Root>
<C key="c">
<B key="b">",
"[root]
▾ <Root>
<A key="a">
<C key="c">",
"[root]
▾ <Root>
<C key="c">
<A key="a">",
]
`);
// 2. Verify that we can update from every step to every other step and back.
for (let j = 0; j < steps.length; j++) {
expect(print(store)).toMatch(snapshots[i]);
act(() => root.render(<Root>{steps[j]}</Root>));
expect(print(store)).toMatch(snapshots[j]);
}
}
// 3. Same test as above, but this time we wrap children in a host component.
act(() =>
root.render(
<Root>
<div>{steps[i]}</div>
</Root>,
),
);
act(() =>
root.render(
<Root>
<div>{steps[j]}</div>
</Root>,
),
);
expect(print(store)).toMatch(snapshots[j]);
act(() =>
root.render(
<Root>
<div>{steps[i]}</div>
</Root>,
),
);
}
}
});

it('should handle a stress test for Suspense (Concurrent Mode)', async () => {
const A = () => 'a';
const B = () => 'b';
const C = () => 'c';
const X = () => 'x';
const Y = () => 'y';
const Z = () => 'z';
const z = <Z key="z" />;
// prettier-ignore
const steps = [
a,
[a],
[a, b, c],
[c, b, a],
[c, null, a],
<React.Fragment>{c}{a}</React.Fragment>,
<div>{c}{a}</div>,
<div><span>{a}</span>{b}</div>,
[[a]],
null,
b,
a,
];
const Never = () => {

throw new Promise(() => {});
};

return children;
};
// 1. For each step, check Suspense can render them as initial primary content.
// This is the only step where we use Jest snapshots.
act(() =>
root.render(
<Root>
<X />
<React.Suspense fallback={z}>{steps[i]}</React.Suspense>
<Y />
</Root>,
),
);
// We snapshot each step once so it doesn't regress.d
}
[
"[root]
▾ <Root>
<X>
▾ <Suspense>
<A key="a">
<Y>",
"[root]
▾ <Root>
<X>
▾ <Suspense>
<A key="a">
<Y>",
"[root]
▾ <Root>
<X>
▾ <Suspense>
<A key="a">
<B key="b">
<C key="c">
<Y>",
"[root]
▾ <Root>
<X>
▾ <Suspense>
<C key="c">
<B key="b">
<A key="a">
<Y>",
"[root]
▾ <Root>
<X>
▾ <Suspense>
<C key="c">
<A key="a">
<Y>",
"[root]
▾ <Root>
<X>
▾ <Suspense>
<C key="c">
<A key="a">
<Y>",
"[root]
▾ <Root>
<X>
▾ <Suspense>
<C key="c">
<A key="a">
<Y>",
"[root]
▾ <Root>
<X>
▾ <Suspense>
<A key="a">
<B key="b">
<Y>",
"[root]
▾ <Root>
<X>
▾ <Suspense>
<A key="a">
<Y>",
"[root]
▾ <Root>
<X>
<Suspense>
<Y>",
"[root]
▾ <Root>
<X>
▾ <Suspense>
<B key="b">
<Y>",
"[root]
▾ <Root>
<X>
▾ <Suspense>
<A key="a">
<Y>",
]
`);
// 2. Verify check Suspense can render same steps as initial fallback content.
act(() =>
root.render(
<Root>
<X />
<React.Suspense fallback={steps[i]}>
<Z />
<Never />
<Z />
</React.Suspense>
<Y />
</Root>,
),
);
expect(print(store)).toEqual(snapshots[i]);
}
// 3. Verify we can update from each step to each step in primary mode.
// Always start with a fresh container and steps[i].
act(() =>
root.render(
<Root>
<X />
<Y />
</Root>,
),
);
// Re-render with steps[j].
act(() =>
root.render(
<Root>
<X />
<React.Suspense fallback={z}>{steps[j]}</React.Suspense>
<Y />
</Root>,
),
);
// Verify the successful transition to steps[j].
expect(print(store)).toEqual(snapshots[j]);
// Check that we can transition back again.
act(() =>
root.render(
<Root>
<X />
<Y />
</Root>,
),
);
// Clean up after every iteration.
}
}
// 4. Verify we can update from each step to each step in fallback mode.
act(() =>
root.render(
<Root>
<X />
<Z />
<Never />
<Z />
</React.Suspense>
<Y />
</Root>,
),
);
act(() =>
root.render(
<Root>
<X />
<React.Suspense fallback={steps[j]}>
<Z />
<Never />
<Z />
</React.Suspense>
<Y />
</Root>,
),
);
act(() =>
root.render(
<Root>
<X />
<Z />
<Never />
<Z />
</React.Suspense>
<Y />
</Root>,
),
);
}
}
// 5. Verify we can update from each step to each step when moving primary ->
fallback.
act(() =>
root.render(
<Root>
<X />
<Y />
</Root>,
),
);
act(() =>
root.render(
<Root>
<X />
<Z />
<Never />
<Z />
</React.Suspense>
<Y />
</Root>,
),
);
act(() =>
root.render(
<Root>
<X />
<Y />
</Root>,
),
);
}
}
// 6. Verify we can update from each step to each step when moving fallback ->
primary.
act(() =>
root.render(
<Root>
<X />
<Z />
<Never />
<Z />
</React.Suspense>
<Y />
</Root>,
),
);
act(() =>
root.render(
<Root>
<X />
<React.Suspense fallback={z}>{steps[j]}</React.Suspense>
<Y />
</Root>,
),
);
act(() =>
root.render(
<Root>
<X />
<Z />
<Never />
<Z />
</React.Suspense>
<Y />
</Root>,
),
);
}
}
// 7. Verify we can update from each step to each step when toggling Suspense.
act(() =>
root.render(
<Root>
<X />
<React.Suspense fallback={steps[j]}>{steps[i]}</React.Suspense>
<Y />
</Root>,
),
);
// We get ID from the index in the tree above:

// Root, X, Suspense, ...
// ^ (index is 2)
const suspenseID = store.getElementIDAtIndex(2);
// Force fallback.
await actAsync(async () => {
bridge.send('overrideSuspense', {
id: suspenseID,
rendererID: store.getRendererIDForElement(suspenseID),
forceFallback: true,
});
});
// Stop forcing fallback.

id: suspenseID,
forceFallback: false,
});
});
// Trigger actual fallback.

act(() =>
root.render(
<Root>
<X />
<Z />
<Never />
<Z />
</React.Suspense>
<Y />
</Root>,
),
);
// Force fallback while we're in fallback mode.

act(() => {
id: suspenseID,
});
});
// Keep seeing fallback content.
// Switch to primary mode.

act(() =>
root.render(
<Root>
<X />
<React.Suspense fallback={steps[j]}>{steps[i]}</React.Suspense>
<Y />
</Root>,
),
);
// Fallback is still forced though.
// Stop forcing fallback. This reverts to primary content.

id: suspenseID,
});
});
// Now we see primary content.

await actAsync(async () => root.unmount());
}
}
});

it('should handle a stress test for Suspense without type change (Concurrent
Mode)', async () => {
const A = () => 'a';
const B = () => 'b';
const C = () => 'c';
const X = () => 'x';
const Y = () => 'y';
const Z = () => 'z';
const z = <Z key="z" />;
// prettier-ignore
const steps = [
a,
[a],
[a, b, c],
[c, b, a],
[c, null, a],
<React.Fragment>{c}{a}</React.Fragment>,
<div>{c}{a}</div>,
<div><span>{a}</span>{b}</div>,
[[a]],
null,
b,
a,
];
const Never = () => {

throw new Promise(() => {});
};
const MaybeSuspend = ({children, suspend}) => {

if (suspend) {
return (
<div>
{children}
<Never />
<X />
</div>
);
}
return (
<div>
{children}
<Z />
</div>
);
};

return children;
};
// 1. For each step, check Suspense can render them as initial primary content.
// This is the only step where we use Jest snapshots.
act(() =>
root.render(
<Root>
<X />
<React.Suspense fallback={z}>
<MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
</React.Suspense>
<Y />
</Root>,
),
);
}
// 2. Verify check Suspense can render same steps as initial fallback content.
// We don't actually assert here because the tree includes <MaybeSuspend>
// which is different from the snapshots above. So we take more snapshots.
const fallbackSnapshots = [];
act(() =>
root.render(
<Root>
<X />
<Z />
<MaybeSuspend suspend={true}>{steps[i]}</MaybeSuspend>
<Z />
</React.Suspense>
<Y />
</Root>,
),
);
fallbackSnapshots.push(print(store));
}
[
"[root]
▾ <Root>
<X>
▾ <Suspense>
▾ <MaybeSuspend>
<A key="a">
<Z>
<Y>",
"[root]
▾ <Root>
<X>
▾ <Suspense>
▾ <MaybeSuspend>
<A key="a">
<Z>
<Y>",
"[root]
▾ <Root>
<X>
▾ <Suspense>
▾ <MaybeSuspend>
<A key="a">
<B key="b">
<C key="c">
<Z>
<Y>",
"[root]
▾ <Root>
<X>
▾ <Suspense>
▾ <MaybeSuspend>
<C key="c">
<B key="b">
<A key="a">
<Z>
<Y>",
"[root]
▾ <Root>
<X>
▾ <Suspense>
▾ <MaybeSuspend>
<C key="c">
<A key="a">
<Z>
<Y>",
"[root]
▾ <Root>
<X>
▾ <Suspense>
▾ <MaybeSuspend>
<C key="c">
<A key="a">
<Z>
<Y>",
"[root]
▾ <Root>
<X>
▾ <Suspense>
▾ <MaybeSuspend>
<C key="c">
<A key="a">
<Z>
<Y>",
"[root]
▾ <Root>
<X>
▾ <Suspense>
▾ <MaybeSuspend>
<A key="a">
<B key="b">
<Z>
<Y>",
"[root]
▾ <Root>
<X>
▾ <Suspense>
▾ <MaybeSuspend>
<A key="a">
<Z>
<Y>",
"[root]
▾ <Root>
<X>
▾ <Suspense>
▾ <MaybeSuspend>
<Z>
<Y>",
"[root]
▾ <Root>
<X>
▾ <Suspense>
▾ <MaybeSuspend>
<B key="b">
<Z>
<Y>",
"[root]
▾ <Root>
<X>
▾ <Suspense>
▾ <MaybeSuspend>
<A key="a">
<Z>
<Y>",
]
`);
// 3. Verify we can update from each step to each step in primary mode.
act(() =>
root.render(
<Root>
<X />
</React.Suspense>
<Y />
</Root>,
),
);
act(() =>
root.render(
<Root>
<X />
<MaybeSuspend suspend={false}>{steps[j]}</MaybeSuspend>
</React.Suspense>
<Y />
</Root>,
),
);
act(() =>
root.render(
<Root>
<X />
</React.Suspense>
<Y />
</Root>,
),
);
}
}
// 4. Verify we can update from each step to each step in fallback mode.
act(() =>
root.render(
<Root>
<X />
<Z />
<MaybeSuspend suspend={true}>
<X />
<Y />
</MaybeSuspend>
<Z />
</React.Suspense>
<Y />
</Root>,
),
);
expect(print(store)).toEqual(fallbackSnapshots[i]);
act(() =>
root.render(
<Root>
<X />
<Z />
<Y />
<X />
</MaybeSuspend>
<Z />
</React.Suspense>
<Y />
</Root>,
),
);
expect(print(store)).toEqual(fallbackSnapshots[j]);
act(() =>
root.render(
<Root>
<X />
<Z />
<X />
<Y />
</MaybeSuspend>
<Z />
</React.Suspense>
<Y />
</Root>,
),
);
}
}
// 5. Verify we can update from each step to each step when moving primary ->
fallback.
act(() =>
root.render(
<Root>
<X />
</React.Suspense>
<Y />
</Root>,
),
);
act(() =>
root.render(
<Root>
<X />
</React.Suspense>
<Y />
</Root>,
),
);
act(() =>
root.render(
<Root>
<X />
</React.Suspense>
<Y />
</Root>,
),
);
}
}
// 6. Verify we can update from each step to each step when moving fallback ->
primary.
act(() =>
root.render(
<Root>
<X />
<MaybeSuspend suspend={true}>{steps[j]}</MaybeSuspend>
</React.Suspense>
<Y />
</Root>,
),
);
act(() =>
root.render(
<Root>
<X />
<MaybeSuspend suspend={false}>{steps[j]}</MaybeSuspend>
</React.Suspense>
<Y />
</Root>,
),
);
act(() =>
root.render(
<Root>
<X />
<MaybeSuspend suspend={true}>{steps[j]}</MaybeSuspend>
</React.Suspense>
<Y />
</Root>,
),
);
}
}
// 7. Verify we can update from each step to each step when toggling Suspense.
act(() =>
root.render(
<Root>
<X />
</React.Suspense>
<Y />
</Root>,
),
);
// We get ID from the index in the tree above:

// Root, X, Suspense, ...
// ^ (index is 2)
const suspenseID = store.getElementIDAtIndex(2);
// Force fallback.
id: suspenseID,
});
});
// Stop forcing fallback.

id: suspenseID,
});
});
// Trigger actual fallback.

act(() =>
root.render(
<Root>
<X />
</React.Suspense>
<Y />
</Root>,
),
);
// Force fallback while we're in fallback mode.

act(() => {
id: suspenseID,
});
});
// Keep seeing fallback content.
// Switch to primary mode.

act(() =>
root.render(
<Root>
<X />
</React.Suspense>
<Y />
</Root>,
),
);
// Fallback is still forced though.
// Stop forcing fallback. This reverts to primary content.

id: suspenseID,
});
});
// Now we see primary content.

}
}
});
});

storeStressTestConcurrent Test

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

storeStressTestConcurrent Test

Uploaded by

Copyright:

Available Formats

/**

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

// TODO: Remove this in favor of @gate pragma

// This is a stress test for the tree mount/update/unmount traversal.

// 1. Render a normal version of [a, b, c, d, e].

// 3. Verify flipping it back produces the original result.

// 5. Test fresh mount for each case.

// Verify mounting 'abcde'.

// Verify switching to 'abxde'.

// Verify switching back to 'abcde'.

// 6. Verify *updates* by reusing the container between iterations.

// Verify switching to 'abxde'.

// Verify switching back to 'abcde'.

// @reactVersion >= 18.0

const Root = ({children}) => {

// 1. Capture the expected render result.

// @reactVersion >= 18.0

const Never = () => {

const Root = ({children}) => {

// We get ID from the index in the tree above:

// Stop forcing fallback.

// Trigger actual fallback.

// Force fallback while we're in fallback mode.

// Switch to primary mode.

// Stop forcing fallback. This reverts to primary content.

// Clean up after every iteration.

// @reactVersion >= 18.0

const Never = () => {

const MaybeSuspend = ({children, suspend}) => {

const Root = ({children}) => {

// We get ID from the index in the tree above:

// Stop forcing fallback.

// Trigger actual fallback.

// Force fallback while we're in fallback mode.

// Switch to primary mode.

// Stop forcing fallback. This reverts to primary content.

// Clean up after every iteration.

You might also like

// 6. Verify updates by reusing the container between iterations.