{"body":"","commit":{"authorEmail":"rdlesyutin@gmail.com","revision":"bfdc12c1912143ae4ec6d7466e619130adc911c5","authoredAt":"2024-02-07T10:50:26+00:00","subject":"chore: use versioned render in inspectedElement test (#28246)","shortRevision":"bfdc12c191","authorName":"Ruslan Lesiutin"},"parents":["d1829775adeee0f888ec7d464eb3041cfe23f1c3"],"files":[{"status":"M","path":"packages\/react-devtools-shared\/src\/__tests__\/inspectedElement-test.js"}],"patch":"diff --git a\/packages\/react-devtools-shared\/src\/__tests__\/inspectedElement-test.js b\/packages\/react-devtools-shared\/src\/__tests__\/inspectedElement-test.js\nindex cba7b3b2e7..06410859d5 100644\n--- a\/packages\/react-devtools-shared\/src\/__tests__\/inspectedElement-test.js\n+++ b\/packages\/react-devtools-shared\/src\/__tests__\/inspectedElement-test.js\n@@ -8,7 +8,12 @@\n *\/\n \n import typeof ReactTestRenderer from 'react-test-renderer';\n-import {withErrorsOrWarningsIgnored} from 'react-devtools-shared\/src\/__tests__\/utils';\n+import {\n+ withErrorsOrWarningsIgnored,\n+ getLegacyRenderImplementation,\n+ getModernRenderImplementation,\n+ getVersionedRenderImplementation,\n+} from 'react-devtools-shared\/src\/__tests__\/utils';\n \n import type {FrontendBridge} from 'react-devtools-shared\/src\/bridge';\n import type Store from 'react-devtools-shared\/src\/devtools\/store';\n@@ -33,7 +38,6 @@ describe('InspectedElement', () => {\n let TestUtilsAct;\n let TestRendererAct;\n \n- let legacyRender;\n let testRendererInstance;\n \n let ErrorBoundary;\n@@ -45,8 +49,6 @@ describe('InspectedElement', () => {\n utils = require('.\/utils');\n utils.beforeEachProfiling();\n \n- legacyRender = utils.legacyRender;\n-\n bridge = global.bridge;\n store = global.store;\n store.collapseNodesByDefault = false;\n@@ -101,6 +103,10 @@ describe('InspectedElement', () => {\n jest.restoreAllMocks();\n });\n \n+ const {render: legacyRender} = getLegacyRenderImplementation();\n+ const {render: modernRender} = getModernRenderImplementation();\n+ const {render} = getVersionedRenderImplementation();\n+\n const Contexts = ({\n children,\n defaultSelectedElementID = null,\n@@ -173,16 +179,17 @@ describe('InspectedElement', () => {\n return inspectedElement;\n }\n \n- it('should inspect the currently selected element', async () => {\n+ \/\/ TODO(hoxyq): Enable this test for versions ~18, currently broken\n+ \/\/ @reactVersion <= 18.2\n+ xit('should inspect the currently selected element (legacy render)', async () => {\n const Example = () => {\n const [count] = React.useState(1);\n return count;\n };\n \n- const container = document.createElement('div');\n- await utils.actAsync(() =>\n- legacyRender(, container),\n- );\n+ await utils.actAsync(() => {\n+ legacyRender();\n+ });\n \n const inspectedElement = await inspectElementAtIndex(0);\n expect(inspectedElement).toMatchInlineSnapshot(`\n@@ -216,6 +223,48 @@ describe('InspectedElement', () => {\n `);\n });\n \n+ it('should inspect the currently selected element (createRoot)', async () => {\n+ const Example = () => {\n+ const [count] = React.useState(1);\n+ return count;\n+ };\n+\n+ await utils.actAsync(() => {\n+ modernRender();\n+ });\n+\n+ const inspectedElement = await inspectElementAtIndex(0);\n+ expect(inspectedElement).toMatchInlineSnapshot(`\n+ {\n+ \"context\": null,\n+ \"events\": undefined,\n+ \"hooks\": [\n+ {\n+ \"hookSource\": {\n+ \"columnNumber\": \"removed by Jest serializer\",\n+ \"fileName\": \"react-devtools-shared\/src\/__tests__\/inspectedElement-test.js\",\n+ \"functionName\": \"Example\",\n+ \"lineNumber\": \"removed by Jest serializer\",\n+ },\n+ \"id\": 0,\n+ \"isStateEditable\": true,\n+ \"name\": \"State\",\n+ \"subHooks\": [],\n+ \"value\": 1,\n+ },\n+ ],\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"props\": {\n+ \"a\": 1,\n+ \"b\": \"abc\",\n+ },\n+ \"rootType\": \"createRoot()\",\n+ \"state\": null,\n+ }\n+ `);\n+ });\n+\n it('should have hasLegacyContext flag set to either \"true\" or \"false\" depending on which context API is used.', async () => {\n const contextData = {\n bool: true,\n@@ -256,9 +305,8 @@ describe('InspectedElement', () => {\n const ModernContext = React.createContext();\n ModernContext.displayName = 'ModernContext';\n \n- const container = document.createElement('div');\n await utils.actAsync(() =>\n- legacyRender(\n+ render(\n \n \n \n@@ -269,7 +317,6 @@ describe('InspectedElement', () => {\n {value => null}<\/ModernContext.Consumer>\n <\/ModernContext.Provider>\n <\/React.Fragment>,\n- container,\n ),\n );\n \n@@ -303,7 +350,7 @@ describe('InspectedElement', () => {\n \/\/ from props like defaultSelectedElementID and it's easier to reset here than\n \/\/ to read the TreeDispatcherContext and update the selected ID that way.\n \/\/ We're testing the inspected values here, not the context wiring, so that's ok.\n- utils.withErrorsOrWarningsIgnored(\n+ withErrorsOrWarningsIgnored(\n ['An update to %s inside a test was not wrapped in act'],\n () => {\n testRendererInstance = TestRenderer.create(null, {\n@@ -322,11 +369,7 @@ describe('InspectedElement', () => {\n it('should poll for updates for the currently selected element', async () => {\n const Example = () => null;\n \n- const container = document.createElement('div');\n- await utils.actAsync(\n- () => legacyRender(, container),\n- false,\n- );\n+ await utils.actAsync(() => render(), false);\n \n let inspectedElement = await inspectElementAtIndex(0);\n expect(inspectedElement.props).toMatchInlineSnapshot(`\n@@ -336,10 +379,7 @@ describe('InspectedElement', () => {\n }\n `);\n \n- await utils.actAsync(\n- () => legacyRender(, container),\n- false,\n- );\n+ await utils.actAsync(() => render(), false);\n \n \/\/ TODO (cache)\n \/\/ This test only passes if both the check-for-updates poll AND the test renderer.update() call are included below.\n@@ -371,13 +411,11 @@ describe('InspectedElement', () => {\n return null;\n });\n \n- const container = document.createElement('div');\n await utils.actAsync(() =>\n- legacyRender(\n+ render(\n \n \n <\/Wrapper>,\n- container,\n ),\n );\n \n@@ -403,11 +441,10 @@ describe('InspectedElement', () => {\n \n await utils.actAsync(\n () =>\n- legacyRender(\n+ render(\n \n \n <\/Wrapper>,\n- container,\n ),\n false,\n );\n@@ -435,13 +472,11 @@ describe('InspectedElement', () => {\n return null;\n });\n \n- const container = document.createElement('div');\n await utils.actAsync(() =>\n- legacyRender(\n+ render(\n \n \n <\/Wrapper>,\n- container,\n ),\n );\n \n@@ -465,7 +500,7 @@ describe('InspectedElement', () => {\n \/\/ The backend still thinks the most recently-inspected element is still cached,\n \/\/ so the frontend needs to tell it to resend a full value.\n \/\/ We can verify this by asserting that the component is re-rendered again.\n- utils.withErrorsOrWarningsIgnored(\n+ withErrorsOrWarningsIgnored(\n ['An update to %s inside a test was not wrapped in act'],\n () => {\n testRendererInstance = TestRenderer.create(null, {\n@@ -503,9 +538,7 @@ describe('InspectedElement', () => {\n return null;\n });\n \n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n- await utils.actAsync(() => root.render());\n+ await utils.actAsync(() => render());\n \n expect(targetRenderCount).toBe(1);\n expect(console.error).toHaveBeenCalledTimes(1);\n@@ -530,9 +563,8 @@ describe('InspectedElement', () => {\n it('should support simple data types', async () => {\n const Example = () => null;\n \n- const container = document.createElement('div');\n await utils.actAsync(() =>\n- legacyRender(\n+ render(\n {\n value_null={null}\n value_undefined={undefined}\n \/>,\n- container,\n ),\n );\n \n@@ -619,9 +650,8 @@ describe('InspectedElement', () => {\n },\n });\n \n- const container = document.createElement('div');\n await utils.actAsync(() =>\n- legacyRender(\n+ render(\n {\n symbol={Symbol('symbol')}\n typed_array={typedArray}\n \/>,\n- container,\n ),\n );\n \n@@ -781,12 +810,8 @@ describe('InspectedElement', () => {\n throw Error('Should not be consumed!');\n }\n \n- const container = document.createElement('div');\n-\n const iterable = generator();\n- await utils.actAsync(() =>\n- legacyRender(, container),\n- );\n+ await utils.actAsync(() => render());\n \n const inspectedElement = await inspectElementAtIndex(0);\n expect(inspectedElement.props).toMatchInlineSnapshot(`\n@@ -807,10 +832,7 @@ describe('InspectedElement', () => {\n object.number = 123;\n object.boolean = true;\n \n- const container = document.createElement('div');\n- await utils.actAsync(() =>\n- legacyRender(, container),\n- );\n+ await utils.actAsync(() => render());\n \n const inspectedElement = await inspectElementAtIndex(0);\n expect(inspectedElement.props).toMatchInlineSnapshot(`\n@@ -832,10 +854,7 @@ describe('InspectedElement', () => {\n hasOwnProperty: true,\n };\n \n- const container = document.createElement('div');\n- await utils.actAsync(() =>\n- legacyRender(, container),\n- );\n+ await utils.actAsync(() => render());\n \n const inspectedElement = await inspectElementAtIndex(0);\n \n@@ -869,10 +888,7 @@ describe('InspectedElement', () => {\n \n const Example = () => null;\n \n- const container = document.createElement('div');\n- await utils.actAsync(() =>\n- legacyRender(, container),\n- );\n+ await utils.actAsync(() => render());\n \n const inspectedElement = await inspectElementAtIndex(0);\n expect(inspectedElement.props).toMatchInlineSnapshot(`\n@@ -948,10 +964,7 @@ describe('InspectedElement', () => {\n },\n });\n \n- const container = document.createElement('div');\n- await utils.actAsync(() =>\n- legacyRender(, container),\n- );\n+ await utils.actAsync(() => render());\n \n const inspectedElement = await inspectElementAtIndex(0);\n expect(inspectedElement.props).toMatchInlineSnapshot(`\n@@ -1003,10 +1016,8 @@ describe('InspectedElement', () => {\n },\n );\n const Example = ({data}) => null;\n- const container = document.createElement('div');\n- await utils.actAsync(() =>\n- legacyRender(, container),\n- );\n+\n+ await utils.actAsync(() => render());\n \n const inspectedElement = await inspectElementAtIndex(0);\n expect(inspectedElement.props).toMatchInlineSnapshot(`\n@@ -1034,9 +1045,8 @@ describe('InspectedElement', () => {\n return state.foo.bar.baz;\n };\n \n- const container = document.createElement('div');\n await utils.actAsync(() =>\n- legacyRender(\n+ render(\n {\n },\n }}\n \/>,\n- container,\n ),\n );\n \n@@ -1200,13 +1209,11 @@ describe('InspectedElement', () => {\n it('should dehydrate complex nested values when requested', async () => {\n const Example = () => null;\n \n- const container = document.createElement('div');\n await utils.actAsync(() =>\n- legacyRender(\n+ render(\n ,\n- container,\n ),\n );\n \n@@ -1265,9 +1272,8 @@ describe('InspectedElement', () => {\n it('should include updates for nested values that were previously hydrated', async () => {\n const Example = () => null;\n \n- const container = document.createElement('div');\n await utils.actAsync(() =>\n- legacyRender(\n+ render(\n {\n },\n }}\n \/>,\n- container,\n ),\n );\n \n@@ -1370,7 +1375,7 @@ describe('InspectedElement', () => {\n \n await TestRendererAct(async () => {\n await TestUtilsAct(async () => {\n- legacyRender(\n+ render(\n {\n },\n }}\n \/>,\n- container,\n );\n });\n });\n@@ -1427,9 +1431,8 @@ describe('InspectedElement', () => {\n it('should return a full update if a path is inspected for an object that has other pending changes', async () => {\n const Example = () => null;\n \n- const container = document.createElement('div');\n await utils.actAsync(() =>\n- legacyRender(\n+ render(\n {\n },\n }}\n \/>,\n- container,\n ),\n );\n \n@@ -1507,7 +1509,7 @@ describe('InspectedElement', () => {\n \n await TestRendererAct(async () => {\n await TestUtilsAct(async () => {\n- legacyRender(\n+ render(\n {\n },\n }}\n \/>,\n- container,\n );\n });\n });\n@@ -1561,9 +1562,8 @@ describe('InspectedElement', () => {\n it('should not tear if hydration is requested after an update', async () => {\n const Example = () => null;\n \n- const container = document.createElement('div');\n await utils.actAsync(() =>\n- legacyRender(\n+ render(\n {\n },\n }}\n \/>,\n- container,\n ),\n );\n \n@@ -1610,7 +1609,7 @@ describe('InspectedElement', () => {\n `);\n \n await TestUtilsAct(async () => {\n- legacyRender(\n+ render(\n {\n },\n }}\n \/>,\n- container,\n );\n });\n \n@@ -1643,17 +1641,16 @@ describe('InspectedElement', () => {\n `);\n });\n \n- it('should inspect hooks for components that only use context', async () => {\n+ \/\/ TODO(hoxyq): Enable this test for versions ~18, currently broken\n+ \/\/ @reactVersion <= 18.2\n+ xit('should inspect hooks for components that only use context (legacy render)', async () => {\n const Context = React.createContext(true);\n const Example = () => {\n const value = React.useContext(Context);\n return value;\n };\n \n- const container = document.createElement('div');\n- await utils.actAsync(() =>\n- legacyRender(, container),\n- );\n+ await utils.actAsync(() => legacyRender());\n \n const inspectedElement = await inspectElementAtIndex(0);\n expect(inspectedElement).toMatchInlineSnapshot(`\n@@ -1687,6 +1684,47 @@ describe('InspectedElement', () => {\n `);\n });\n \n+ it('should inspect hooks for components that only use context (createRoot)', async () => {\n+ const Context = React.createContext(true);\n+ const Example = () => {\n+ const value = React.useContext(Context);\n+ return value;\n+ };\n+\n+ await utils.actAsync(() => modernRender());\n+\n+ const inspectedElement = await inspectElementAtIndex(0);\n+ expect(inspectedElement).toMatchInlineSnapshot(`\n+ {\n+ \"context\": null,\n+ \"events\": undefined,\n+ \"hooks\": [\n+ {\n+ \"hookSource\": {\n+ \"columnNumber\": \"removed by Jest serializer\",\n+ \"fileName\": \"react-devtools-shared\/src\/__tests__\/inspectedElement-test.js\",\n+ \"functionName\": \"Example\",\n+ \"lineNumber\": \"removed by Jest serializer\",\n+ },\n+ \"id\": null,\n+ \"isStateEditable\": false,\n+ \"name\": \"Context\",\n+ \"subHooks\": [],\n+ \"value\": true,\n+ },\n+ ],\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"props\": {\n+ \"a\": 1,\n+ \"b\": \"abc\",\n+ },\n+ \"rootType\": \"createRoot()\",\n+ \"state\": null,\n+ }\n+ `);\n+ });\n+\n it('should enable inspected values to be stored as global variables', async () => {\n const Example = () => null;\n \n@@ -1702,12 +1740,7 @@ describe('InspectedElement', () => {\n },\n };\n \n- await utils.actAsync(() =>\n- legacyRender(\n- ,\n- document.createElement('div'),\n- ),\n- );\n+ await utils.actAsync(() => render());\n \n let storeAsGlobal: StoreAsGlobal = ((null: any): StoreAsGlobal);\n \n@@ -1761,12 +1794,7 @@ describe('InspectedElement', () => {\n },\n };\n \n- await utils.actAsync(() =>\n- legacyRender(\n- ,\n- document.createElement('div'),\n- ),\n- );\n+ await utils.actAsync(() => render());\n \n let copyPath: CopyInspectedElementPath =\n ((null: any): CopyInspectedElementPath);\n@@ -1837,7 +1865,7 @@ describe('InspectedElement', () => {\n const bigInt = BigInt(123); \/\/ eslint-disable-line no-undef\n \n await utils.actAsync(() =>\n- legacyRender(\n+ render(\n {\n immutable={immutable}\n bigInt={bigInt}\n \/>,\n- document.createElement('div'),\n ),\n );\n \n@@ -1902,8 +1929,6 @@ describe('InspectedElement', () => {\n });\n \n it('should display complex values of useDebugValue', async () => {\n- const container = document.createElement('div');\n-\n function useDebuggableHook() {\n React.useDebugValue({foo: 2});\n React.useState(1);\n@@ -1914,9 +1939,7 @@ describe('InspectedElement', () => {\n return null;\n }\n \n- await utils.actAsync(() =>\n- legacyRender(, container),\n- );\n+ await utils.actAsync(() => render());\n \n const {hooks} = await inspectElementAtIndex(0);\n expect(hooks).toMatchInlineSnapshot(`\n@@ -1967,10 +1990,7 @@ describe('InspectedElement', () => {\n },\n );\n \n- const container = document.createElement('div');\n- await utils.actAsync(() =>\n- legacyRender(, container),\n- );\n+ await utils.actAsync(() => render());\n \n const inspectedElement = await inspectElementAtIndex(0);\n \n@@ -1994,12 +2014,13 @@ describe('InspectedElement', () => {\n `);\n });\n \n+ \/\/ TODO(hoxyq): Enable this test for versions ~18, currently broken\n \/\/ Regression test for github.com\/facebook\/react\/issues\/22099\n- it('should not error when an unchanged component is re-inspected after component filters changed', async () => {\n+ \/\/ @reactVersion <= 18.2\n+ xit('should not error when an unchanged component is re-inspected after component filters changed (legacy render)', async () => {\n const Example = () =>

;\n \n- const container = document.createElement('div');\n- await utils.actAsync(() => legacyRender(, container));\n+ await utils.actAsync(() => legacyRender());\n \n \/\/ Select\/inspect element\n let inspectedElement = await inspectElementAtIndex(0);\n@@ -2018,7 +2039,7 @@ describe('InspectedElement', () => {\n \n await utils.actAsync(async () => {\n \/\/ Ignore transient warning this causes\n- utils.withErrorsOrWarningsIgnored(['No element found with id'], () => {\n+ withErrorsOrWarningsIgnored(['No element found with id'], () => {\n store.componentFilters = [];\n \n \/\/ Flush events to the renderer.\n@@ -2030,7 +2051,7 @@ describe('InspectedElement', () => {\n \/\/ from props like defaultSelectedElementID and it's easier to reset here than\n \/\/ to read the TreeDispatcherContext and update the selected ID that way.\n \/\/ We're testing the inspected values here, not the context wiring, so that's ok.\n- utils.withErrorsOrWarningsIgnored(\n+ withErrorsOrWarningsIgnored(\n ['An update to %s inside a test was not wrapped in act'],\n () => {\n testRendererInstance = TestRenderer.create(null, {\n@@ -2055,7 +2076,69 @@ describe('InspectedElement', () => {\n `);\n });\n \n- it('should display the root type for ReactDOM.hydrate', async () => {\n+ \/\/ Regression test for github.com\/facebook\/react\/issues\/22099\n+ it('should not error when an unchanged component is re-inspected after component filters changed (createRoot)', async () => {\n+ const Example = () =>

;\n+\n+ await utils.actAsync(() => modernRender());\n+\n+ \/\/ Select\/inspect element\n+ let inspectedElement = await inspectElementAtIndex(0);\n+ expect(inspectedElement).toMatchInlineSnapshot(`\n+ {\n+ \"context\": null,\n+ \"events\": undefined,\n+ \"hooks\": null,\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"props\": {},\n+ \"rootType\": \"createRoot()\",\n+ \"state\": null,\n+ }\n+ `);\n+\n+ await utils.actAsync(async () => {\n+ \/\/ Ignore transient warning this causes\n+ withErrorsOrWarningsIgnored(['No element found with id'], () => {\n+ store.componentFilters = [];\n+\n+ \/\/ Flush events to the renderer.\n+ jest.runOnlyPendingTimers();\n+ });\n+ }, false);\n+\n+ \/\/ HACK: Recreate TestRenderer instance because we rely on default state values\n+ \/\/ from props like defaultSelectedElementID and it's easier to reset here than\n+ \/\/ to read the TreeDispatcherContext and update the selected ID that way.\n+ \/\/ We're testing the inspected values here, not the context wiring, so that's ok.\n+ withErrorsOrWarningsIgnored(\n+ ['An update to %s inside a test was not wrapped in act'],\n+ () => {\n+ testRendererInstance = TestRenderer.create(null, {\n+ isConcurrent: true,\n+ });\n+ },\n+ );\n+\n+ \/\/ Select\/inspect the same element again\n+ inspectedElement = await inspectElementAtIndex(0);\n+ expect(inspectedElement).toMatchInlineSnapshot(`\n+ {\n+ \"context\": null,\n+ \"events\": undefined,\n+ \"hooks\": null,\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"props\": {},\n+ \"rootType\": \"createRoot()\",\n+ \"state\": null,\n+ }\n+ `);\n+ });\n+\n+ \/\/ TODO(hoxyq): Enable this test for versions ~18, currently broken\n+ \/\/ @reactVersion <= 18.2\n+ xit('should display the root type for ReactDOM.hydrate', async () => {\n const Example = () =>

;\n \n await utils.actAsync(() => {\n@@ -2073,12 +2156,13 @@ describe('InspectedElement', () => {\n expect(inspectedElement.rootType).toMatchInlineSnapshot(`\"hydrate()\"`);\n });\n \n- it('should display the root type for ReactDOM.render', async () => {\n+ \/\/ TODO(hoxyq): Enable this test for versions ~18, currently broken\n+ \/\/ @reactVersion <= 18.2\n+ xit('should display the root type for ReactDOM.render', async () => {\n const Example = () =>

;\n \n await utils.actAsync(() => {\n- const container = document.createElement('div');\n- legacyRender(, container);\n+ legacyRender();\n }, false);\n \n const inspectedElement = await inspectElementAtIndex(0);\n@@ -2126,8 +2210,7 @@ describe('InspectedElement', () => {\n };\n \n await utils.actAsync(() => {\n- const container = document.createElement('div');\n- ReactDOMClient.createRoot(container).render();\n+ render();\n }, false);\n \n shouldThrow = true;\n@@ -2148,10 +2231,7 @@ describe('InspectedElement', () => {\n return count;\n };\n \n- const container = document.createElement('div');\n- await utils.actAsync(() =>\n- legacyRender(, container),\n- );\n+ await utils.actAsync(() => render());\n \n await inspectElementAtIndex(0);\n \n@@ -2187,10 +2267,7 @@ describe('InspectedElement', () => {\n return count;\n });\n \n- const container = document.createElement('div');\n- await utils.actAsync(() =>\n- legacyRender(, container),\n- );\n+ await utils.actAsync(() => render());\n \n await inspectElementAtIndex(0);\n \n@@ -2226,10 +2303,7 @@ describe('InspectedElement', () => {\n return count;\n });\n \n- const container = document.createElement('div');\n- await utils.actAsync(() =>\n- legacyRender(, container),\n- );\n+ await utils.actAsync(() => render());\n \n await inspectElementAtIndex(0);\n \n@@ -2269,10 +2343,7 @@ describe('InspectedElement', () => {\n }\n }\n \n- const container = document.createElement('div');\n- await utils.actAsync(() =>\n- legacyRender(, container),\n- );\n+ await utils.actAsync(() => render());\n \n await inspectElementAtIndex(0);\n \n@@ -2334,12 +2405,8 @@ describe('InspectedElement', () => {\n return null;\n };\n \n- const container = document.createElement('div');\n-\n await withErrorsOrWarningsIgnored(['test-only: '], async () => {\n- await utils.actAsync(() =>\n- legacyRender(, container),\n- );\n+ await utils.actAsync(() => render());\n });\n \n const data = await getErrorsAndWarningsForElementAtIndex(0);\n@@ -2371,11 +2438,8 @@ describe('InspectedElement', () => {\n return null;\n };\n \n- const container = document.createElement('div');\n- await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {\n- await utils.actAsync(() =>\n- legacyRender(, container),\n- );\n+ await withErrorsOrWarningsIgnored(['test-only:'], async () => {\n+ await utils.actAsync(() => render());\n });\n const data = await getErrorsAndWarningsForElementAtIndex(0);\n expect(data).toMatchInlineSnapshot(`\n@@ -2407,11 +2471,8 @@ describe('InspectedElement', () => {\n return null;\n };\n \n- const container = document.createElement('div');\n- await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {\n- await utils.actAsync(() =>\n- legacyRender(, container),\n- );\n+ await withErrorsOrWarningsIgnored(['test-only:'], async () => {\n+ await utils.actAsync(() => render());\n });\n \n const data = await getErrorsAndWarningsForElementAtIndex(0);\n@@ -2444,11 +2505,8 @@ describe('InspectedElement', () => {\n return null;\n };\n \n- const container = document.createElement('div');\n- await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {\n- await utils.actAsync(() =>\n- legacyRender(, container),\n- );\n+ await withErrorsOrWarningsIgnored(['test-only:'], async () => {\n+ await utils.actAsync(() => render());\n });\n \n const data = await getErrorsAndWarningsForElementAtIndex(0);\n@@ -2475,12 +2533,11 @@ describe('InspectedElement', () => {\n return [

];\n };\n \n- const container = document.createElement('div');\n- await utils.withErrorsOrWarningsIgnored(\n+ await withErrorsOrWarningsIgnored(\n ['Warning: Each child in a list should have a unique \"key\" prop.'],\n async () => {\n await utils.actAsync(() =>\n- legacyRender(, container),\n+ render(),\n );\n },\n );\n@@ -2507,11 +2564,8 @@ describe('InspectedElement', () => {\n return null;\n };\n \n- const container = document.createElement('div');\n- await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {\n- await utils.actAsync(() =>\n- legacyRender(, container),\n- );\n+ await withErrorsOrWarningsIgnored(['test-only:'], async () => {\n+ await utils.actAsync(() => render());\n });\n \n const {\n@@ -2538,15 +2592,13 @@ describe('InspectedElement', () => {\n return null;\n };\n \n- const container = document.createElement('div');\n- await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {\n+ await withErrorsOrWarningsIgnored(['test-only:'], async () => {\n await utils.actAsync(() =>\n- legacyRender(\n+ render(\n \n \n \n <\/React.Fragment>,\n- container,\n ),\n );\n });\n@@ -2635,15 +2687,13 @@ describe('InspectedElement', () => {\n return null;\n };\n \n- const container = document.createElement('div');\n- await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {\n+ await withErrorsOrWarningsIgnored(['test-only:'], async () => {\n await utils.actAsync(() =>\n- legacyRender(\n+ render(\n \n \n \n <\/React.Fragment>,\n- container,\n ),\n );\n });\n@@ -2726,7 +2776,9 @@ describe('InspectedElement', () => {\n });\n });\n \n- it('inspecting nested renderers should not throw', async () => {\n+ \/\/ TODO(hoxyq): Enable this test for versions ~18, currently broken\n+ \/\/ @reactVersion <= 18.2\n+ xit('inspecting nested renderers should not throw (legacy render)', async () => {\n \/\/ Ignoring react art warnings\n jest.spyOn(console, 'error').mockImplementation(() => {});\n const ReactArt = require('react-art');\n@@ -2749,7 +2801,7 @@ describe('InspectedElement', () => {\n }\n \n await utils.actAsync(() => {\n- legacyRender(, document.createElement('div'));\n+ legacyRender();\n });\n expect(store).toMatchInlineSnapshot(`\n [root]\n@@ -2784,6 +2836,64 @@ describe('InspectedElement', () => {\n `);\n });\n \n+ it('inspecting nested renderers should not throw (createRoot)', async () => {\n+ \/\/ Ignoring react art warnings\n+ jest.spyOn(console, 'error').mockImplementation(() => {});\n+ const ReactArt = require('react-art');\n+ const ArtSVGMode = require('art\/modes\/svg');\n+ const ARTCurrentMode = require('art\/modes\/current');\n+ store.componentFilters = [];\n+\n+ ARTCurrentMode.setCurrent(ArtSVGMode);\n+ const {Surface, Group} = ReactArt;\n+\n+ function Child() {\n+ return (\n+ \n+ \n+ <\/Surface>\n+ );\n+ }\n+ function App() {\n+ return ;\n+ }\n+\n+ await utils.actAsync(() => {\n+ modernRender();\n+ });\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ ▾ \n+ ▾ \n+

dillon1000/react

Files changed