{"patch":"diff --git a\/src\/__tests__\/__snapshots__\/store-test.js.snap b\/src\/__tests__\/__snapshots__\/store-test.js.snap\nindex 102a328558..cd0df483e4 100644\n--- a\/src\/__tests__\/__snapshots__\/store-test.js.snap\n+++ b\/src\/__tests__\/__snapshots__\/store-test.js.snap\n@@ -25,6 +25,27 @@ exports[`Store should filter DOM nodes from the store tree: 1: mount 1`] = `\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 support collapsing parts of the tree: 1: mount 1`] = `\n [root]\n ▾ \ndiff --git a\/src\/__tests__\/store-test.js b\/src\/__tests__\/store-test.js\nindex bdfa5e3d9a..1d293f0213 100644\n--- a\/src\/__tests__\/store-test.js\n+++ b\/src\/__tests__\/store-test.js\n@@ -5,12 +5,12 @@ describe('Store', () => {\n let ReactDOM;\n let TestUtils;\n let store;\n+ let print;\n \n const act = (callback: Function) => {\n TestUtils.act(() => {\n callback();\n });\n-\n jest.runAllTimers(); \/\/ Flush Bridge operations\n };\n \n@@ -20,6 +20,8 @@ describe('Store', () => {\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@@ -163,4 +165,174 @@ 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+ 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","commit":{"revision":"2b3ecc63b3a7fb9488ebf78c53f1992d7842a6a7","authorEmail":"bvaughn@fb.com","shortRevision":"2b3ecc63b3","authoredAt":"2019-04-15T09:34:40-07:00","subject":"Merge pull request #158 from gaearon\/stress-test","authorName":"Brian Vaughn"},"parents":["b3546e0e02c31fcf8cc6d2fdf1c40b8984209933","f569d27f86e19f11a9fca809198c0fb70397dddb"],"files":[{"status":"M","path":"src\/__tests__\/__snapshots__\/store-test.js.snap"},{"status":"M","path":"src\/__tests__\/store-test.js"}],"body":"Add a stress test for tree traversal"}

dillon1000/react

Files changed