{"patch":"diff --git a\/src\/__tests__\/__snapshots__\/store-test.js.snap b\/src\/__tests__\/__snapshots__\/store-test.js.snap\nindex 97bd08f7ff..102a328558 100644\n--- a\/src\/__tests__\/__snapshots__\/store-test.js.snap\n+++ b\/src\/__tests__\/__snapshots__\/store-test.js.snap\n@@ -25,244 +25,6 @@ exports[`Store should filter DOM nodes from the store tree: 1: mount 1`] = `\n \n `;\n \n-exports[`Store should handle a stress test for Suspense 1`] = `\n-[root]\n- ▾ \n- \n- ▾ \n- \n- \n-`;\n-\n-exports[`Store should handle a stress test for Suspense 2`] = `\n-[root]\n- ▾ \n- \n- ▾ \n- \n- \n-`;\n-\n-exports[`Store should handle a stress test for Suspense 3`] = `\n-[root]\n- ▾ \n- \n- ▾ \n- \n- \n- \n- \n-`;\n-\n-exports[`Store should handle a stress test for Suspense 4`] = `\n-[root]\n- ▾ \n- \n- ▾ \n- \n- \n- \n- \n-`;\n-\n-exports[`Store should handle a stress test for Suspense 5`] = `\n-[root]\n- ▾ \n- \n- ▾ \n- \n- \n- \n-`;\n-\n-exports[`Store should handle a stress test for Suspense 6`] = `\n-[root]\n- ▾ \n- \n- ▾ \n- \n- \n- \n-`;\n-\n-exports[`Store should handle a stress test for Suspense 7`] = `\n-[root]\n- ▾ \n- \n- ▾ \n- \n- \n- \n-`;\n-\n-exports[`Store should handle a stress test for Suspense 8`] = `\n-[root]\n- ▾ \n- \n- ▾ \n- \n- \n- \n-`;\n-\n-exports[`Store should handle a stress test for Suspense 9`] = `\n-[root]\n- ▾ \n- \n- ▾ \n- \n- \n-`;\n-\n-exports[`Store should handle a stress test for Suspense 10`] = `\n-[root]\n- ▾ \n- \n- \n- \n-`;\n-\n-exports[`Store should handle a stress test for Suspense 11`] = `\n-[root]\n- ▾ \n- \n- ▾ \n- \n- \n-`;\n-\n-exports[`Store should handle a stress test for Suspense 12`] = `\n-[root]\n- ▾ \n- \n- ▾ \n- \n- \n-`;\n-\n-exports[`Store should handle a stress test with different tree operations: 1: abcde 1`] = `\n-[root]\n- ▾ \n- \n- \n- \n- \n- \n-`;\n-\n-exports[`Store should handle a stress test with different tree operations: 2: abxde 1`] = `\n-[root]\n- ▾ \n- \n- \n- ▾ \n- \n- \n- \n-`;\n-\n-exports[`Store should handle stress test with reordering 1`] = `\n-[root]\n- ▾ \n- \n-`;\n-\n-exports[`Store should handle stress test with reordering 2`] = `\n-[root]\n- ▾ \n- \n-`;\n-\n-exports[`Store should handle stress test with reordering 3`] = `\n-[root]\n- ▾ \n- \n-`;\n-\n-exports[`Store should handle stress test with reordering 4`] = `\n-[root]\n- ▾ \n- \n-`;\n-\n-exports[`Store should handle stress test with reordering 5`] = `\n-[root]\n- ▾ \n- \n-`;\n-\n-exports[`Store should handle stress test with reordering 6`] = `\n-[root]\n- ▾ \n- \n-`;\n-\n-exports[`Store should handle stress test with reordering 7`] = `\n-[root]\n- ▾ \n- \n-`;\n-\n-exports[`Store should handle stress test with reordering 8`] = `\n-[root]\n- ▾ \n- \n-`;\n-\n-exports[`Store should handle stress test with reordering 9`] = `\n-[root]\n- ▾ \n- \n-`;\n-\n-exports[`Store should handle stress test with reordering 10`] = `\n-[root]\n- ▾ \n- \n-`;\n-\n-exports[`Store should handle stress test with reordering 11`] = `\n-[root]\n- ▾ \n- \n- \n-`;\n-\n-exports[`Store should handle stress test with reordering 12`] = `\n-[root]\n- ▾ \n- \n- \n-`;\n-\n-exports[`Store should handle stress test with reordering 13`] = `\n-[root]\n- ▾ \n- \n- \n-`;\n-\n-exports[`Store should handle stress test with reordering 14`] = `\n-[root]\n- ▾ \n- \n- \n-`;\n-\n-exports[`Store should handle stress test with reordering 15`] = `\n-[root]\n- ▾ \n- \n- \n-`;\n-\n-exports[`Store should handle stress test with reordering 16`] = `\n-[root]\n- ▾ \n- \n- \n-`;\n-\n exports[`Store should support collapsing parts of the tree: 1: mount 1`] = `\n [root]\n ▾ \ndiff --git a\/src\/__tests__\/__snapshots__\/storeStress-test.js.snap b\/src\/__tests__\/__snapshots__\/storeStress-test.js.snap\nnew file mode 100644\nindex 0000000000..9deb51fb38\n--- \/dev\/null\n+++ b\/src\/__tests__\/__snapshots__\/storeStress-test.js.snap\n@@ -0,0 +1,239 @@\n+\/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n+\n+exports[`StoreStress should handle a stress test for Suspense 1`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+`;\n+\n+exports[`StoreStress should handle a stress test for Suspense 2`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+`;\n+\n+exports[`StoreStress should handle a stress test for Suspense 3`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+ \n+ \n+`;\n+\n+exports[`StoreStress should handle a stress test for Suspense 4`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+ \n+ \n+`;\n+\n+exports[`StoreStress should handle a stress test for Suspense 5`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+ \n+`;\n+\n+exports[`StoreStress should handle a stress test for Suspense 6`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+ \n+`;\n+\n+exports[`StoreStress should handle a stress test for Suspense 7`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+ \n+`;\n+\n+exports[`StoreStress should handle a stress test for Suspense 8`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+ \n+`;\n+\n+exports[`StoreStress should handle a stress test for Suspense 9`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+`;\n+\n+exports[`StoreStress should handle a stress test for Suspense 10`] = `\n+[root]\n+ ▾ \n+ \n+ \n+ \n+`;\n+\n+exports[`StoreStress should handle a stress test for Suspense 11`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+`;\n+\n+exports[`StoreStress should handle a stress test for Suspense 12`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+`;\n+\n+exports[`StoreStress should handle a stress test with different tree operations: 1: abcde 1`] = `\n+[root]\n+ ▾ \n+ \n+ \n+ \n+ \n+ \n+`;\n+\n+exports[`StoreStress should handle a stress test with different tree operations: 2: abxde 1`] = `\n+[root]\n+ ▾ \n+ \n+ \n+ ▾ \n+ \n+ \n+ \n+`;\n+\n+exports[`StoreStress should handle stress test with reordering 1`] = `\n+[root]\n+ ▾ \n+ \n+`;\n+\n+exports[`StoreStress should handle stress test with reordering 2`] = `\n+[root]\n+ ▾ \n+ \n+`;\n+\n+exports[`StoreStress should handle stress test with reordering 3`] = `\n+[root]\n+ ▾ \n+ \n+`;\n+\n+exports[`StoreStress should handle stress test with reordering 4`] = `\n+[root]\n+ ▾ \n+ \n+`;\n+\n+exports[`StoreStress should handle stress test with reordering 5`] = `\n+[root]\n+ ▾ \n+ \n+`;\n+\n+exports[`StoreStress should handle stress test with reordering 6`] = `\n+[root]\n+ ▾ \n+ \n+`;\n+\n+exports[`StoreStress should handle stress test with reordering 7`] = `\n+[root]\n+ ▾ \n+ \n+`;\n+\n+exports[`StoreStress should handle stress test with reordering 8`] = `\n+[root]\n+ ▾ \n+ \n+`;\n+\n+exports[`StoreStress should handle stress test with reordering 9`] = `\n+[root]\n+ ▾ \n+ \n+`;\n+\n+exports[`StoreStress should handle stress test with reordering 10`] = `\n+[root]\n+ ▾ \n+ \n+`;\n+\n+exports[`StoreStress should handle stress test with reordering 11`] = `\n+[root]\n+ ▾ \n+ \n+ \n+`;\n+\n+exports[`StoreStress should handle stress test with reordering 12`] = `\n+[root]\n+ ▾ \n+ \n+ \n+`;\n+\n+exports[`StoreStress should handle stress test with reordering 13`] = `\n+[root]\n+ ▾ \n+ \n+ \n+`;\n+\n+exports[`StoreStress should handle stress test with reordering 14`] = `\n+[root]\n+ ▾ \n+ \n+ \n+`;\n+\n+exports[`StoreStress should handle stress test with reordering 15`] = `\n+[root]\n+ ▾ \n+ \n+ \n+`;\n+\n+exports[`StoreStress should handle stress test with reordering 16`] = `\n+[root]\n+ ▾ \n+ \n+ \n+`;\ndiff --git a\/src\/__tests__\/store-test.js b\/src\/__tests__\/store-test.js\nindex 913302029b..82da076f0a 100644\n--- a\/src\/__tests__\/store-test.js\n+++ b\/src\/__tests__\/store-test.js\n@@ -4,9 +4,7 @@ describe('Store', () => {\n let React;\n let ReactDOM;\n let TestUtils;\n- let bridge;\n let store;\n- let print;\n \n const act = (callback: Function) => {\n TestUtils.act(() => {\n@@ -16,14 +14,11 @@ describe('Store', () => {\n };\n \n beforeEach(() => {\n- bridge = global.bridge;\n store = global.store;\n \n React = require('react');\n ReactDOM = require('react-dom');\n TestUtils = require('react-dom\/test-utils');\n-\n- print = require('.\/storeSerializer').print;\n });\n \n it('should support mount and update operations', () => {\n@@ -98,8 +93,7 @@ describe('Store', () => {\n expect(store).toMatchSnapshot('1: mount');\n });\n \n- \/\/ TODO We should write more complex Suspense tests than just this\n- it('should display Suspense nodes properly in various states', async done => {\n+ it('should display Suspense nodes properly in various states', () => {\n const Loading = () =>
Loading...<\/div>;\n const SuspendingComponent = () => {\n throw new Promise(() => {});\n@@ -124,12 +118,10 @@ describe('Store', () => {\n act(() => ReactDOM.render(, container));\n expect(store).toMatchSnapshot('1: loading');\n \n- act(async () => {\n+ act(() => {\n ReactDOM.render(, container);\n });\n expect(store).toMatchSnapshot('2: resolved');\n-\n- done();\n });\n \n it('should support collapsing parts of the tree', () => {\n@@ -167,672 +159,4 @@ describe('Store', () => {\n act(() => store.toggleIsCollapsed(grandparentID, false));\n expect(store).toMatchSnapshot('6: expand Grandparent');\n });\n-\n- \/\/ This is a stress test for the tree mount\/update\/unmount traversal.\n- \/\/ It renders different trees that should produce the same output.\n- it('should handle a stress test with different tree operations', () => {\n- let setShowX;\n- const A = () => 'a';\n- const B = () => 'b';\n- const C = () => {\n- \/\/ We'll be manually flipping this component back and forth in the test.\n- \/\/ We only do this for a single node in order to verify that DevTools\n- \/\/ can handle a subtree switching alternates while other subtrees are memoized.\n- let [showX, _setShowX] = React.useState(false);\n- setShowX = _setShowX;\n- return showX ? : 'c';\n- };\n- const D = () => 'd';\n- const E = () => 'e';\n- const X = () => 'x';\n- const a = ;\n- const b = ;\n- const c = ;\n- const d = ;\n- const e = ;\n-\n- function Parent({ children }) {\n- return children;\n- }\n-\n- \/\/ 1. Render a normal version of [a, b, c, d, e].\n- let container = document.createElement('div');\n- act(() => ReactDOM.render({[a, b, c, d, e]}<\/Parent>, container));\n- expect(store).toMatchSnapshot('1: abcde');\n- expect(container.textContent).toMatch('abcde');\n- const snapshotForABCDE = print(store);\n-\n- \/\/ 2. Render a version where renders an child instead of 'c'.\n- \/\/ This is how we'll test an update to a single component.\n- act(() => {\n- setShowX(true);\n- });\n- expect(store).toMatchSnapshot('2: abxde');\n- expect(container.textContent).toMatch('abxde');\n- const snapshotForABXDE = print(store);\n-\n- \/\/ 3. Verify flipping it back produces the original result.\n- act(() => {\n- setShowX(false);\n- });\n- expect(container.textContent).toMatch('abcde');\n- expect(print(store)).toBe(snapshotForABCDE);\n-\n- \/\/ 4. Clean up.\n- act(() => ReactDOM.unmountComponentAtNode(container));\n- expect(print(store)).toBe('');\n-\n- \/\/ Now comes the interesting part.\n- \/\/ All of these cases are equivalent to [a, b, c, d, e] in output.\n- \/\/ We'll verify that DevTools produces the same snapshots for them.\n- \/\/ These cases are picked so that rendering them sequentially in the same\n- \/\/ container results in a combination of mounts, updates, unmounts, and reorders.\n- \/\/ prettier-ignore\n- let cases = [\n- [a, b, c, d, e],\n- [[a], b, c, d, e],\n- [[a, b], c, d, e],\n- [[a, b], c, [d, e]],\n- [[a, b], c, [d, '', e]],\n- [[a], b, c, d, [e]],\n- [a, b, [[c]], d, e],\n- [[a, ''], [b], [c], [d], [e]],\n- [a, b, [c, [d, ['', e]]]],\n- [a, b, c, d, e],\n- [
{a}<\/div>, b, c, d, e],\n- [
{a}{b}<\/div>, c, d, e],\n- [
{a}{b}<\/div>, c,
{d}{e}<\/div>],\n- [
{a}{b}<\/div>, c,
{d}{e}<\/div>],\n- [
{a}{b}<\/div>, c,
{d}{e}<\/div>],\n- [
{a}{b}<\/div>, c,
{d}{e}<\/div>],\n- [{a}<\/span>, b, c, d, [e]],\n- [a, b, {c}<\/span><\/span>, d, e],\n- [
{a}<\/div>, [b], {c}<\/span>, [d],
{e}<\/div>],\n- [a, b, [c,
{d}{e}<\/span><\/div>], ''],\n- [a, [[]], b, c, [d, [[]], e]],\n- [[[a, b, c, d], e]],\n- [a, b, c, d, e]\n- ];\n-\n- \/\/ 5. Test fresh mount for each case.\n- for (let i = 0; i < cases.length; i++) {\n- \/\/ Ensure fresh mount.\n- container = document.createElement('div');\n-\n- \/\/ Verify mounting 'abcde'.\n- act(() => ReactDOM.render({cases[i]}<\/Parent>, container));\n- expect(container.textContent).toMatch('abcde');\n- expect(print(store)).toEqual(snapshotForABCDE);\n-\n- \/\/ Verify switching to 'abxde'.\n- act(() => {\n- setShowX(true);\n- });\n- expect(container.textContent).toMatch('abxde');\n- expect(print(store)).toBe(snapshotForABXDE);\n-\n- \/\/ Verify switching back to 'abcde'.\n- act(() => {\n- setShowX(false);\n- });\n- expect(container.textContent).toMatch('abcde');\n- expect(print(store)).toBe(snapshotForABCDE);\n-\n- \/\/ Clean up.\n- act(() => ReactDOM.unmountComponentAtNode(container));\n- expect(print(store)).toBe('');\n- }\n-\n- \/\/ 6. Verify *updates* by reusing the container between iterations.\n- \/\/ There'll be no unmounting until the very end.\n- container = document.createElement('div');\n- for (let i = 0; i < cases.length; i++) {\n- \/\/ Verify mounting 'abcde'.\n- act(() => ReactDOM.render({cases[i]}<\/Parent>, container));\n- expect(container.textContent).toMatch('abcde');\n- expect(print(store)).toEqual(snapshotForABCDE);\n-\n- \/\/ Verify switching to 'abxde'.\n- act(() => {\n- setShowX(true);\n- });\n- expect(container.textContent).toMatch('abxde');\n- expect(print(store)).toBe(snapshotForABXDE);\n-\n- \/\/ Verify switching back to 'abcde'.\n- act(() => {\n- setShowX(false);\n- });\n- expect(container.textContent).toMatch('abcde');\n- expect(print(store)).toBe(snapshotForABCDE);\n- \/\/ Don't unmount. Reuse the container between iterations.\n- }\n- act(() => ReactDOM.unmountComponentAtNode(container));\n- expect(print(store)).toBe('');\n-\n- \/\/ 7. Same as the previous step, but for Concurrent Mode.\n- container = document.createElement('div');\n- \/\/ $FlowFixMe\n- let root = ReactDOM.unstable_createRoot(container);\n- for (let i = 0; i < cases.length; i++) {\n- \/\/ Verify mounting 'abcde'.\n- act(() => root.render({cases[i]}<\/Parent>));\n- expect(container.textContent).toMatch('abcde');\n- expect(print(store)).toEqual(snapshotForABCDE);\n-\n- \/\/ Verify switching to 'abxde'.\n- act(() => {\n- setShowX(true);\n- });\n- expect(container.textContent).toMatch('abxde');\n- expect(print(store)).toBe(snapshotForABXDE);\n-\n- \/\/ Verify switching back to 'abcde'.\n- act(() => {\n- setShowX(false);\n- });\n- expect(container.textContent).toMatch('abcde');\n- expect(print(store)).toBe(snapshotForABCDE);\n- \/\/ Don't unmount. Reuse the container between iterations.\n- }\n- act(() => root.unmount());\n- expect(print(store)).toBe('');\n- });\n-\n- it('should handle stress test with reordering', () => {\n- const A = () => 'a';\n- const B = () => 'b';\n- const C = () => 'c';\n- const D = () => 'd';\n- const E = () => 'e';\n- const a = ;\n- const b = ;\n- const c = ;\n- const d = ;\n- const e = ;\n-\n- \/\/ prettier-ignore\n- let steps = [\n- a,\n- b,\n- c,\n- d,\n- e,\n- [a],\n- [b],\n- [c],\n- [d],\n- [e],\n- [a, b],\n- [b, a],\n- [b, c],\n- [c, b],\n- [a, c],\n- [c, a],\n- ];\n-\n- const Root = ({ children }) => {\n- return children;\n- };\n-\n- \/\/ 1. Capture the expected render result.\n- let snapshots = [];\n- let container = document.createElement('div');\n- for (let i = 0; i < steps.length; i++) {\n- act(() => ReactDOM.render({steps[i]}<\/Root>, container));\n- \/\/ We snapshot each step once so it doesn't regress.\n- expect(store).toMatchSnapshot();\n- snapshots.push(print(store));\n- act(() => ReactDOM.unmountComponentAtNode(container));\n- expect(print(store)).toBe('');\n- }\n-\n- \/\/ 2. Verify that we can update from every step to every other step and back.\n- for (let i = 0; i < steps.length; i++) {\n- for (let j = 0; j < steps.length; j++) {\n- let container = document.createElement('div');\n- act(() => ReactDOM.render({steps[i]}<\/Root>, container));\n- expect(print(store)).toMatch(snapshots[i]);\n- act(() => ReactDOM.render({steps[j]}<\/Root>, container));\n- expect(print(store)).toMatch(snapshots[j]);\n- act(() => ReactDOM.render({steps[i]}<\/Root>, container));\n- expect(print(store)).toMatch(snapshots[i]);\n- act(() => ReactDOM.unmountComponentAtNode(container));\n- expect(print(store)).toBe('');\n- }\n- }\n-\n- \/\/ 3. Same test as above, but this time we wrap children in a host component.\n- for (let i = 0; i < steps.length; i++) {\n- for (let j = 0; j < steps.length; j++) {\n- let container = document.createElement('div');\n- act(() =>\n- ReactDOM.render(\n- \n-
{steps[i]}<\/div>\n- <\/Root>,\n- container\n- )\n- );\n- expect(print(store)).toMatch(snapshots[i]);\n- act(() =>\n- ReactDOM.render(\n- \n-
{steps[j]}<\/div>\n- <\/Root>,\n- container\n- )\n- );\n- expect(print(store)).toMatch(snapshots[j]);\n- act(() =>\n- ReactDOM.render(\n- \n-
{steps[i]}<\/div>\n- <\/Root>,\n- container\n- )\n- );\n- expect(print(store)).toMatch(snapshots[i]);\n- act(() => ReactDOM.unmountComponentAtNode(container));\n- expect(print(store)).toBe('');\n- }\n- }\n- });\n-\n- it('should handle a stress test for Suspense', async () => {\n- const A = () => 'a';\n- const B = () => 'b';\n- const C = () => 'c';\n- const X = () => 'x';\n- const Y = () => 'y';\n- const Z = () => 'z';\n- const a = ;\n- const b = ;\n- const c = ;\n- \/\/ const x = ;\n- \/\/ const y = ;\n- const z = ;\n-\n- \/\/ prettier-ignore\n- const steps = [\n- a,\n- [a],\n- [a, b, c],\n- [c, b, a],\n- [c, null, a],\n- {c}{a}<\/React.Fragment>,\n-
{c}{a}<\/div>,\n-
{a}<\/span>{b}<\/div>,\n- [[a]],\n- null,\n- b,\n- a\n- ];\n-\n- const Never = () => {\n- throw new Promise(() => {});\n- };\n-\n- const Root = ({ children }) => {\n- return children;\n- };\n-\n- \/\/ 1. For each step, check Suspense can render them as initial primary content.\n- \/\/ This is the only step where we use Jest snapshots.\n- let snapshots = [];\n- let container = document.createElement('div');\n- for (let i = 0; i < steps.length; i++) {\n- act(() =>\n- ReactDOM.render(\n- \n- \n- {steps[i]}<\/React.Suspense>\n- \n- <\/Root>,\n- container\n- )\n- );\n- \/\/ We snapshot each step once so it doesn't regress.\n- expect(store).toMatchSnapshot();\n- snapshots.push(print(store));\n- act(() => ReactDOM.unmountComponentAtNode(container));\n- expect(print(store)).toBe('');\n- }\n-\n- \/\/ 2. Verify check Suspense can render same steps as initial fallback content.\n- for (let i = 0; i < steps.length; i++) {\n- act(() =>\n- ReactDOM.render(\n- \n- \n- \n- \n- \n- \n- <\/React.Suspense>\n- \n- <\/Root>,\n- container\n- )\n- );\n- expect(print(store)).toEqual(snapshots[i]);\n- act(() => ReactDOM.unmountComponentAtNode(container));\n- expect(print(store)).toBe('');\n- }\n-\n- \/\/ 3. Verify we can update from each step to each step in primary mode.\n- for (let i = 0; i < steps.length; i++) {\n- for (let j = 0; j < steps.length; j++) {\n- \/\/ Always start with a fresh container and steps[i].\n- container = document.createElement('div');\n- act(() =>\n- ReactDOM.render(\n- \n- \n- {steps[i]}<\/React.Suspense>\n- \n- <\/Root>,\n- container\n- )\n- );\n- expect(print(store)).toEqual(snapshots[i]);\n- \/\/ Re-render with steps[j].\n- act(() =>\n- ReactDOM.render(\n- \n- \n- {steps[j]}<\/React.Suspense>\n- \n- <\/Root>,\n- container\n- )\n- );\n- \/\/ Verify the successful transition to steps[j].\n- expect(print(store)).toEqual(snapshots[j]);\n- \/\/ Check that we can transition back again.\n- act(() =>\n- ReactDOM.render(\n- \n- \n- {steps[i]}<\/React.Suspense>\n- \n- <\/Root>,\n- container\n- )\n- );\n- expect(print(store)).toEqual(snapshots[i]);\n- \/\/ Clean up after every iteration.\n- act(() => ReactDOM.unmountComponentAtNode(container));\n- expect(print(store)).toBe('');\n- }\n- }\n-\n- \/\/ 4. Verify we can update from each step to each step in fallback mode.\n- for (let i = 0; i < steps.length; i++) {\n- for (let j = 0; j < steps.length; j++) {\n- \/\/ Always start with a fresh container and steps[i].\n- container = document.createElement('div');\n- act(() =>\n- ReactDOM.render(\n- \n- \n- \n- \n- \n- \n- <\/React.Suspense>\n- \n- <\/Root>,\n- container\n- )\n- );\n- expect(print(store)).toEqual(snapshots[i]);\n- \/\/ Re-render with steps[j].\n- act(() =>\n- ReactDOM.render(\n- \n- \n- \n- \n- \n- \n- <\/React.Suspense>\n- \n- <\/Root>,\n- container\n- )\n- );\n- \/\/ Verify the successful transition to steps[j].\n- expect(print(store)).toEqual(snapshots[j]);\n- \/\/ Check that we can transition back again.\n- act(() =>\n- ReactDOM.render(\n- \n- \n- \n- \n- \n- \n- <\/React.Suspense>\n- \n- <\/Root>,\n- container\n- )\n- );\n- expect(print(store)).toEqual(snapshots[i]);\n- \/\/ Clean up after every iteration.\n- act(() => ReactDOM.unmountComponentAtNode(container));\n- expect(print(store)).toBe('');\n- }\n- }\n-\n- \/\/ 5. Verify we can update from each step to each step when moving primary -> fallback.\n- for (let i = 0; i < steps.length; i++) {\n- for (let j = 0; j < steps.length; j++) {\n- \/\/ Always start with a fresh container and steps[i].\n- container = document.createElement('div');\n- act(() =>\n- ReactDOM.render(\n- \n- \n- {steps[i]}<\/React.Suspense>\n- \n- <\/Root>,\n- container\n- )\n- );\n- expect(print(store)).toEqual(snapshots[i]);\n- \/\/ Re-render with steps[j].\n- act(() =>\n- ReactDOM.render(\n- \n- \n- \n- \n- \n- \n- <\/React.Suspense>\n- \n- <\/Root>,\n- container\n- )\n- );\n- \/\/ Verify the successful transition to steps[j].\n- expect(print(store)).toEqual(snapshots[j]);\n- \/\/ Check that we can transition back again.\n- act(() =>\n- ReactDOM.render(\n- \n- \n- {steps[i]}<\/React.Suspense>\n- \n- <\/Root>,\n- container\n- )\n- );\n- expect(print(store)).toEqual(snapshots[i]);\n- \/\/ Clean up after every iteration.\n- act(() => ReactDOM.unmountComponentAtNode(container));\n- expect(print(store)).toBe('');\n- }\n- }\n-\n- \/\/ 6. Verify we can update from each step to each step when moving fallback -> primary.\n- for (let i = 0; i < steps.length; i++) {\n- for (let j = 0; j < steps.length; j++) {\n- \/\/ Always start with a fresh container and steps[i].\n- container = document.createElement('div');\n- act(() =>\n- ReactDOM.render(\n- \n- \n- \n- \n- \n- \n- <\/React.Suspense>\n- \n- <\/Root>,\n- container\n- )\n- );\n- expect(print(store)).toEqual(snapshots[i]);\n- \/\/ Re-render with steps[j].\n- act(() =>\n- ReactDOM.render(\n- \n- \n- {steps[j]}<\/React.Suspense>\n- \n- <\/Root>,\n- container\n- )\n- );\n- \/\/ Verify the successful transition to steps[j].\n- expect(print(store)).toEqual(snapshots[j]);\n- \/\/ Check that we can transition back again.\n- act(() =>\n- ReactDOM.render(\n- \n- \n- \n- \n- \n- \n- <\/React.Suspense>\n- \n- <\/Root>,\n- container\n- )\n- );\n- expect(print(store)).toEqual(snapshots[i]);\n- \/\/ Clean up after every iteration.\n- act(() => ReactDOM.unmountComponentAtNode(container));\n- expect(print(store)).toBe('');\n- }\n- }\n-\n- \/\/ 7. Verify we can update from each step to each step when toggling Suspense.\n- for (let i = 0; i < steps.length; i++) {\n- for (let j = 0; j < steps.length; j++) {\n- \/\/ Always start with a fresh container and steps[i].\n- container = document.createElement('div');\n- act(() =>\n- ReactDOM.render(\n- \n- \n- {steps[i]}<\/React.Suspense>\n- \n- <\/Root>,\n- container\n- )\n- );\n-\n- \/\/ We get ID from the index in the tree above:\n- \/\/ Root, X, Suspense, ...\n- \/\/ ^ (index is 2)\n- const suspenseID = store.getElementIDAtIndex(2);\n-\n- \/\/ Force fallback.\n- expect(print(store)).toEqual(snapshots[i]);\n- act(() => {\n- const suspenseID = store.getElementIDAtIndex(2);\n- bridge.send('overrideSuspense', {\n- id: suspenseID,\n- rendererID: store.getRendererIDForElement(suspenseID),\n- forceFallback: true,\n- });\n- });\n- expect(print(store)).toEqual(snapshots[j]);\n-\n- \/\/ Stop forcing fallback.\n- act(() => {\n- bridge.send('overrideSuspense', {\n- id: suspenseID,\n- rendererID: store.getRendererIDForElement(suspenseID),\n- forceFallback: false,\n- });\n- });\n- expect(print(store)).toEqual(snapshots[i]);\n-\n- \/\/ Trigger actual fallback.\n- act(() =>\n- ReactDOM.render(\n- \n- \n- \n- \n- \n- \n- <\/React.Suspense>\n- \n- <\/Root>,\n- container\n- )\n- );\n- expect(print(store)).toEqual(snapshots[j]);\n-\n- \/\/ Force fallback while we're in fallback mode.\n- act(() => {\n- bridge.send('overrideSuspense', {\n- id: suspenseID,\n- rendererID: store.getRendererIDForElement(suspenseID),\n- forceFallback: true,\n- });\n- });\n- \/\/ Keep seeing fallback content.\n- expect(print(store)).toEqual(snapshots[j]);\n-\n- \/\/ Switch to primary mode.\n- act(() =>\n- ReactDOM.render(\n- \n- \n- {steps[i]}<\/React.Suspense>\n- \n- <\/Root>,\n- container\n- )\n- );\n- \/\/ Fallback is still forced though.\n- expect(print(store)).toEqual(snapshots[j]);\n-\n- \/\/ Stop forcing fallback. This reverts to primary content.\n- act(() => {\n- bridge.send('overrideSuspense', {\n- id: suspenseID,\n- rendererID: store.getRendererIDForElement(suspenseID),\n- forceFallback: false,\n- });\n- });\n- \/\/ Now we see primary content.\n- expect(print(store)).toEqual(snapshots[i]);\n-\n- \/\/ Clean up after every iteration.\n- act(() => ReactDOM.unmountComponentAtNode(container));\n- expect(print(store)).toBe('');\n- }\n- }\n- \/\/ TODO: Test Concurrent Mode\n- });\n });\ndiff --git a\/src\/__tests__\/storeStress-test.js b\/src\/__tests__\/storeStress-test.js\nnew file mode 100644\nindex 0000000000..22490c71aa\n--- \/dev\/null\n+++ b\/src\/__tests__\/storeStress-test.js\n@@ -0,0 +1,696 @@\n+\/\/ @flow\n+\n+describe('StoreStress', () => {\n+ let React;\n+ let ReactDOM;\n+ let TestUtils;\n+ let bridge;\n+ let store;\n+ let print;\n+\n+ const act = (callback: Function) => {\n+ TestUtils.act(() => {\n+ callback();\n+ });\n+ jest.runAllTimers(); \/\/ Flush Bridge operations\n+ };\n+\n+ beforeEach(() => {\n+ bridge = global.bridge;\n+ store = global.store;\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ TestUtils = require('react-dom\/test-utils');\n+\n+ print = require('.\/storeSerializer').print;\n+ });\n+\n+ \/\/ This is a stress test for the tree mount\/update\/unmount traversal.\n+ \/\/ It renders different trees that should produce the same output.\n+ it('should handle a stress test with different tree operations', () => {\n+ let setShowX;\n+ const A = () => 'a';\n+ const B = () => 'b';\n+ const C = () => {\n+ \/\/ We'll be manually flipping this component back and forth in the test.\n+ \/\/ We only do this for a single node in order to verify that DevTools\n+ \/\/ can handle a subtree switching alternates while other subtrees are memoized.\n+ let [showX, _setShowX] = React.useState(false);\n+ setShowX = _setShowX;\n+ return showX ? : 'c';\n+ };\n+ const D = () => 'd';\n+ const E = () => 'e';\n+ const X = () => 'x';\n+ const a = ;\n+ const b = ;\n+ const c = ;\n+ const d = ;\n+ const e = ;\n+\n+ function Parent({ children }) {\n+ return children;\n+ }\n+\n+ \/\/ 1. Render a normal version of [a, b, c, d, e].\n+ let container = document.createElement('div');\n+ act(() => ReactDOM.render({[a, b, c, d, e]}<\/Parent>, container));\n+ expect(store).toMatchSnapshot('1: abcde');\n+ expect(container.textContent).toMatch('abcde');\n+ const snapshotForABCDE = print(store);\n+\n+ \/\/ 2. Render a version where renders an child instead of 'c'.\n+ \/\/ This is how we'll test an update to a single component.\n+ act(() => {\n+ setShowX(true);\n+ });\n+ expect(store).toMatchSnapshot('2: abxde');\n+ expect(container.textContent).toMatch('abxde');\n+ const snapshotForABXDE = print(store);\n+\n+ \/\/ 3. Verify flipping it back produces the original result.\n+ act(() => {\n+ setShowX(false);\n+ });\n+ expect(container.textContent).toMatch('abcde');\n+ expect(print(store)).toBe(snapshotForABCDE);\n+\n+ \/\/ 4. Clean up.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+\n+ \/\/ Now comes the interesting part.\n+ \/\/ All of these cases are equivalent to [a, b, c, d, e] in output.\n+ \/\/ We'll verify that DevTools produces the same snapshots for them.\n+ \/\/ These cases are picked so that rendering them sequentially in the same\n+ \/\/ container results in a combination of mounts, updates, unmounts, and reorders.\n+ \/\/ prettier-ignore\n+ let cases = [\n+ [a, b, c, d, e],\n+ [[a], b, c, d, e],\n+ [[a, b], c, d, e],\n+ [[a, b], c, [d, e]],\n+ [[a, b], c, [d, '', e]],\n+ [[a], b, c, d, [e]],\n+ [a, b, [[c]], d, e],\n+ [[a, ''], [b], [c], [d], [e]],\n+ [a, b, [c, [d, ['', e]]]],\n+ [a, b, c, d, e],\n+ [
{a}<\/div>, b, c, d, e],\n+ [
{a}{b}<\/div>, c, d, e],\n+ [
{a}{b}<\/div>, c,
{d}{e}<\/div>],\n+ [
{a}{b}<\/div>, c,
{d}{e}<\/div>],\n+ [
{a}{b}<\/div>, c,
{d}{e}<\/div>],\n+ [
{a}{b}<\/div>, c,
{d}{e}<\/div>],\n+ [{a}<\/span>, b, c, d, [e]],\n+ [a, b, {c}<\/span><\/span>, d, e],\n+ [
{a}<\/div>, [b], {c}<\/span>, [d],
{e}<\/div>],\n+ [a, b, [c,
{d}{e}<\/span><\/div>], ''],\n+ [a, [[]], b, c, [d, [[]], e]],\n+ [[[a, b, c, d], e]],\n+ [a, b, c, d, e]\n+ ];\n+\n+ \/\/ 5. Test fresh mount for each case.\n+ for (let i = 0; i < cases.length; i++) {\n+ \/\/ Ensure fresh mount.\n+ container = document.createElement('div');\n+\n+ \/\/ Verify mounting 'abcde'.\n+ act(() => ReactDOM.render({cases[i]}<\/Parent>, container));\n+ expect(container.textContent).toMatch('abcde');\n+ expect(print(store)).toEqual(snapshotForABCDE);\n+\n+ \/\/ Verify switching to 'abxde'.\n+ act(() => {\n+ setShowX(true);\n+ });\n+ expect(container.textContent).toMatch('abxde');\n+ expect(print(store)).toBe(snapshotForABXDE);\n+\n+ \/\/ Verify switching back to 'abcde'.\n+ act(() => {\n+ setShowX(false);\n+ });\n+ expect(container.textContent).toMatch('abcde');\n+ expect(print(store)).toBe(snapshotForABCDE);\n+\n+ \/\/ Clean up.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+\n+ \/\/ 6. Verify *updates* by reusing the container between iterations.\n+ \/\/ There'll be no unmounting until the very end.\n+ container = document.createElement('div');\n+ for (let i = 0; i < cases.length; i++) {\n+ \/\/ Verify mounting 'abcde'.\n+ act(() => ReactDOM.render({cases[i]}<\/Parent>, container));\n+ expect(container.textContent).toMatch('abcde');\n+ expect(print(store)).toEqual(snapshotForABCDE);\n+\n+ \/\/ Verify switching to 'abxde'.\n+ act(() => {\n+ setShowX(true);\n+ });\n+ expect(container.textContent).toMatch('abxde');\n+ expect(print(store)).toBe(snapshotForABXDE);\n+\n+ \/\/ Verify switching back to 'abcde'.\n+ act(() => {\n+ setShowX(false);\n+ });\n+ expect(container.textContent).toMatch('abcde');\n+ expect(print(store)).toBe(snapshotForABCDE);\n+ \/\/ Don't unmount. Reuse the container between iterations.\n+ }\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+\n+ \/\/ 7. Same as the previous step, but for Concurrent Mode.\n+ container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ let root = ReactDOM.unstable_createRoot(container);\n+ for (let i = 0; i < cases.length; i++) {\n+ \/\/ Verify mounting 'abcde'.\n+ act(() => root.render({cases[i]}<\/Parent>));\n+ expect(container.textContent).toMatch('abcde');\n+ expect(print(store)).toEqual(snapshotForABCDE);\n+\n+ \/\/ Verify switching to 'abxde'.\n+ act(() => {\n+ setShowX(true);\n+ });\n+ expect(container.textContent).toMatch('abxde');\n+ expect(print(store)).toBe(snapshotForABXDE);\n+\n+ \/\/ Verify switching back to 'abcde'.\n+ act(() => {\n+ setShowX(false);\n+ });\n+ expect(container.textContent).toMatch('abcde');\n+ expect(print(store)).toBe(snapshotForABCDE);\n+ \/\/ Don't unmount. Reuse the container between iterations.\n+ }\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ });\n+\n+ it('should handle stress test with reordering', () => {\n+ const A = () => 'a';\n+ const B = () => 'b';\n+ const C = () => 'c';\n+ const D = () => 'd';\n+ const E = () => 'e';\n+ const a = ;\n+ const b = ;\n+ const c = ;\n+ const d = ;\n+ const e = ;\n+\n+ \/\/ prettier-ignore\n+ let steps = [\n+ a,\n+ b,\n+ c,\n+ d,\n+ e,\n+ [a],\n+ [b],\n+ [c],\n+ [d],\n+ [e],\n+ [a, b],\n+ [b, a],\n+ [b, c],\n+ [c, b],\n+ [a, c],\n+ [c, a],\n+ ];\n+\n+ const Root = ({ children }) => {\n+ return children;\n+ };\n+\n+ \/\/ 1. Capture the expected render result.\n+ let snapshots = [];\n+ let container = document.createElement('div');\n+ for (let i = 0; i < steps.length; i++) {\n+ act(() => ReactDOM.render({steps[i]}<\/Root>, container));\n+ \/\/ We snapshot each step once so it doesn't regress.\n+ expect(store).toMatchSnapshot();\n+ snapshots.push(print(store));\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+\n+ \/\/ 2. Verify that we can update from every step to every other step and back.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ let container = document.createElement('div');\n+ act(() => ReactDOM.render({steps[i]}<\/Root>, container));\n+ expect(print(store)).toMatch(snapshots[i]);\n+ act(() => ReactDOM.render({steps[j]}<\/Root>, container));\n+ expect(print(store)).toMatch(snapshots[j]);\n+ act(() => ReactDOM.render({steps[i]}<\/Root>, container));\n+ expect(print(store)).toMatch(snapshots[i]);\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 3. Same test as above, but this time we wrap children in a host component.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ let container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ \n+
{steps[i]}<\/div>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toMatch(snapshots[i]);\n+ act(() =>\n+ ReactDOM.render(\n+ \n+
{steps[j]}<\/div>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toMatch(snapshots[j]);\n+ act(() =>\n+ ReactDOM.render(\n+ \n+
{steps[i]}<\/div>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toMatch(snapshots[i]);\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+ });\n+\n+ it('should handle a stress test for Suspense', async () => {\n+ const A = () => 'a';\n+ const B = () => 'b';\n+ const C = () => 'c';\n+ const X = () => 'x';\n+ const Y = () => 'y';\n+ const Z = () => 'z';\n+ const a = ;\n+ const b = ;\n+ const c = ;\n+ \/\/ const x = ;\n+ \/\/ const y = ;\n+ const z = ;\n+\n+ \/\/ prettier-ignore\n+ const steps = [\n+ a,\n+ [a],\n+ [a, b, c],\n+ [c, b, a],\n+ [c, null, a],\n+ {c}{a}<\/React.Fragment>,\n+
{c}{a}<\/div>,\n+
{a}<\/span>{b}<\/div>,\n+ [[a]],\n+ null,\n+ b,\n+ a\n+ ];\n+\n+ const Never = () => {\n+ throw new Promise(() => {});\n+ };\n+\n+ const Root = ({ children }) => {\n+ return children;\n+ };\n+\n+ \/\/ 1. For each step, check Suspense can render them as initial primary content.\n+ \/\/ This is the only step where we use Jest snapshots.\n+ let snapshots = [];\n+ let container = document.createElement('div');\n+ for (let i = 0; i < steps.length; i++) {\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ {steps[i]}<\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ We snapshot each step once so it doesn't regress.\n+ expect(store).toMatchSnapshot();\n+ snapshots.push(print(store));\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+\n+ \/\/ 2. Verify check Suspense can render same steps as initial fallback content.\n+ for (let i = 0; i < steps.length; i++) {\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ \n+ \n+ \n+ <\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+\n+ \/\/ 3. Verify we can update from each step to each step in primary mode.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ {steps[i]}<\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ {steps[j]}<\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(snapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ {steps[i]}<\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 4. Verify we can update from each step to each step in fallback mode.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ \n+ \n+ \n+ <\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ \n+ \n+ \n+ <\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(snapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ \n+ \n+ \n+ <\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 5. Verify we can update from each step to each step when moving primary -> fallback.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ {steps[i]}<\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ \n+ \n+ \n+ <\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(snapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ {steps[i]}<\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 6. Verify we can update from each step to each step when moving fallback -> primary.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ \n+ \n+ \n+ <\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ {steps[j]}<\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(snapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ \n+ \n+ \n+ <\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 7. Verify we can update from each step to each step when toggling Suspense.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ {steps[i]}<\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+\n+ \/\/ We get ID from the index in the tree above:\n+ \/\/ Root, X, Suspense, ...\n+ \/\/ ^ (index is 2)\n+ const suspenseID = store.getElementIDAtIndex(2);\n+\n+ \/\/ Force fallback.\n+ expect(print(store)).toEqual(snapshots[i]);\n+ act(() => {\n+ const suspenseID = store.getElementIDAtIndex(2);\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: true,\n+ });\n+ });\n+ expect(print(store)).toEqual(snapshots[j]);\n+\n+ \/\/ Stop forcing fallback.\n+ act(() => {\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: false,\n+ });\n+ });\n+ expect(print(store)).toEqual(snapshots[i]);\n+\n+ \/\/ Trigger actual fallback.\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ \n+ \n+ \n+ <\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[j]);\n+\n+ \/\/ Force fallback while we're in fallback mode.\n+ act(() => {\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: true,\n+ });\n+ });\n+ \/\/ Keep seeing fallback content.\n+ expect(print(store)).toEqual(snapshots[j]);\n+\n+ \/\/ Switch to primary mode.\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ {steps[i]}<\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ Fallback is still forced though.\n+ expect(print(store)).toEqual(snapshots[j]);\n+\n+ \/\/ Stop forcing fallback. This reverts to primary content.\n+ act(() => {\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: false,\n+ });\n+ });\n+ \/\/ Now we see primary content.\n+ expect(print(store)).toEqual(snapshots[i]);\n+\n+ \/\/ Clean up after every iteration.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+ \/\/ TODO: Test Concurrent Mode\n+ });\n+});\n","body":"","parents":["d4db178d334f65291b9210b864ba03d219cdfbf2"],"commit":{"shortRevision":"8576c85b0d","authorName":"Dan Abramov","authorEmail":"dan.abramov@gmail.com","authoredAt":"2019-04-16T18:10:15+01:00","revision":"8576c85b0dc6a1012c36ac7711e88c8fb1aac0a3","subject":"Move stress tests to their own file"},"files":[{"status":"M","path":"src\/__tests__\/__snapshots__\/store-test.js.snap"},{"status":"A","path":"src\/__tests__\/__snapshots__\/storeStress-test.js.snap"},{"status":"M","path":"src\/__tests__\/store-test.js"},{"status":"A","path":"src\/__tests__\/storeStress-test.js"}]}

dillon1000/react

Files changed