{"files":[{"path":"packages\/react-devtools-shared\/src\/__tests__\/storeComponentFilters-test.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/__tests__\/utils.js","status":"M"}],"patch":"diff --git a\/packages\/react-devtools-shared\/src\/__tests__\/storeComponentFilters-test.js b\/packages\/react-devtools-shared\/src\/__tests__\/storeComponentFilters-test.js\nindex e2a59177b6..573ca40cba 100644\n--- a\/packages\/react-devtools-shared\/src\/__tests__\/storeComponentFilters-test.js\n+++ b\/packages\/react-devtools-shared\/src\/__tests__\/storeComponentFilters-test.js\n@@ -10,25 +10,18 @@\n import type {FrontendBridge} from 'react-devtools-shared\/src\/bridge';\n import type Store from 'react-devtools-shared\/src\/devtools\/store';\n \n+import {\n+ getLegacyRenderImplementation,\n+ getVersionedRenderImplementation,\n+} from '.\/utils';\n+\n describe('Store component filters', () => {\n let React;\n let Types;\n let bridge: FrontendBridge;\n- let legacyRender;\n let store: Store;\n let utils;\n-\n- const act = async (callback: Function) => {\n- if (React.act != null) {\n- await React.act(callback);\n- } else if (React.unstable_act != null) {\n- await React.unstable_act(callback);\n- } else {\n- callback();\n- }\n-\n- jest.runAllTimers(); \/\/ Flush Bridge operations\n- };\n+ let actAsync;\n \n beforeEach(() => {\n bridge = global.bridge;\n@@ -41,12 +34,14 @@ describe('Store component filters', () => {\n Types = require('react-devtools-shared\/src\/frontend\/types');\n utils = require('.\/utils');\n \n- legacyRender = utils.legacyRender;\n+ actAsync = utils.actAsync;\n });\n \n+ const {render} = getVersionedRenderImplementation();\n+\n \/\/ @reactVersion >= 16.0\n it('should throw if filters are updated while profiling', async () => {\n- await act(async () => store.profilerStore.startProfiling());\n+ await actAsync(async () => store.profilerStore.startProfiling());\n expect(() => (store.componentFilters = [])).toThrow(\n 'Cannot modify filter preferences while profiling',\n );\n@@ -61,12 +56,11 @@ describe('Store component filters', () => {\n }\n const FunctionComponent = () =>

Hi<\/div>;\n \n- await act(async () =>\n- legacyRender(\n+ await actAsync(async () =>\n+ render(\n \n \n <\/ClassComponent>,\n- document.createElement('div'),\n ),\n );\n expect(store).toMatchInlineSnapshot(`\n@@ -77,7 +71,7 @@ describe('Store component filters', () => {\n

\n `);\n \n- await act(\n+ await actAsync(\n async () =>\n (store.componentFilters = [\n utils.createElementTypeFilter(Types.ElementTypeHostComponent),\n@@ -89,7 +83,7 @@ describe('Store component filters', () => {\n \n `);\n \n- await act(\n+ await actAsync(\n async () =>\n (store.componentFilters = [\n utils.createElementTypeFilter(Types.ElementTypeClass),\n@@ -102,7 +96,7 @@ describe('Store component filters', () => {\n

\n `);\n \n- await act(\n+ await actAsync(\n async () =>\n (store.componentFilters = [\n utils.createElementTypeFilter(Types.ElementTypeClass),\n@@ -115,7 +109,7 @@ describe('Store component filters', () => {\n

\n `);\n \n- await act(\n+ await actAsync(\n async () =>\n (store.componentFilters = [\n utils.createElementTypeFilter(Types.ElementTypeClass, false),\n@@ -130,7 +124,7 @@ describe('Store component filters', () => {\n

\n `);\n \n- await act(async () => (store.componentFilters = []));\n+ await actAsync(async () => (store.componentFilters = []));\n expect(store).toMatchInlineSnapshot(`\n [root]\n ▾ \n@@ -144,16 +138,14 @@ describe('Store component filters', () => {\n it('should ignore invalid ElementTypeRoot filter', async () => {\n const Component = () =>

Hi<\/div>;\n \n- await act(async () =>\n- legacyRender(, document.createElement('div')),\n- );\n+ await actAsync(async () => render());\n expect(store).toMatchInlineSnapshot(`\n [root]\n ▾ \n

\n `);\n \n- await act(\n+ await actAsync(\n async () =>\n (store.componentFilters = [\n utils.createElementTypeFilter(Types.ElementTypeRoot),\n@@ -174,14 +166,13 @@ describe('Store component filters', () => {\n const Bar = () => ;\n const Baz = () => ;\n \n- await act(async () =>\n- legacyRender(\n+ await actAsync(async () =>\n+ render(\n \n \n \n \n <\/React.Fragment>,\n- document.createElement('div'),\n ),\n );\n expect(store).toMatchInlineSnapshot(`\n@@ -194,7 +185,7 @@ describe('Store component filters', () => {\n \n `);\n \n- await act(\n+ await actAsync(\n async () =>\n (store.componentFilters = [utils.createDisplayNameFilter('Foo')]),\n );\n@@ -207,7 +198,7 @@ describe('Store component filters', () => {\n \n `);\n \n- await act(\n+ await actAsync(\n async () =>\n (store.componentFilters = [utils.createDisplayNameFilter('Ba')]),\n );\n@@ -219,7 +210,7 @@ describe('Store component filters', () => {\n \n `);\n \n- await act(\n+ await actAsync(\n async () =>\n (store.componentFilters = [utils.createDisplayNameFilter('B.z')]),\n );\n@@ -237,16 +228,14 @@ describe('Store component filters', () => {\n it('should filter by path', async () => {\n const Component = () =>

Hi<\/div>;\n \n- await act(async () =>\n- legacyRender(, document.createElement('div')),\n- );\n+ await actAsync(async () => render());\n expect(store).toMatchInlineSnapshot(`\n [root]\n ▾ \n

\n `);\n \n- await act(\n+ await actAsync(\n async () =>\n (store.componentFilters = [\n utils.createLocationFilter(__filename.replace(__dirname, '')),\n@@ -255,7 +244,7 @@ describe('Store component filters', () => {\n \n expect(store).toMatchInlineSnapshot(`[root]`);\n \n- await act(\n+ await actAsync(\n async () =>\n (store.componentFilters = [\n utils.createLocationFilter('this:is:a:made:up:path'),\n@@ -277,7 +266,7 @@ describe('Store component filters', () => {\n const Bar = () => ;\n Bar.displayName = 'Bar(Foo(Component))';\n \n- await act(async () => legacyRender(, document.createElement('div')));\n+ await actAsync(async () => render());\n expect(store).toMatchInlineSnapshot(`\n [root]\n ▾ [Bar][Foo]\n@@ -286,7 +275,7 @@ describe('Store component filters', () => {\n

\n `);\n \n- await act(\n+ await actAsync(\n async () => (store.componentFilters = [utils.createHOCFilter(true)]),\n );\n expect(store).toMatchInlineSnapshot(`\n@@ -295,7 +284,7 @@ describe('Store component filters', () => {\n

\n `);\n \n- await act(\n+ await actAsync(\n async () => (store.componentFilters = [utils.createHOCFilter(false)]),\n );\n expect(store).toMatchInlineSnapshot(`\n@@ -309,7 +298,7 @@ describe('Store component filters', () => {\n \n \/\/ @reactVersion >= 16.0\n it('should not send a bridge update if the set of enabled filters has not changed', async () => {\n- await act(\n+ await actAsync(\n async () => (store.componentFilters = [utils.createHOCFilter(true)]),\n );\n \n@@ -317,21 +306,21 @@ describe('Store component filters', () => {\n throw Error('Unexpected component update');\n });\n \n- await act(\n+ await actAsync(\n async () =>\n (store.componentFilters = [\n utils.createHOCFilter(false),\n utils.createHOCFilter(true),\n ]),\n );\n- await act(\n+ await actAsync(\n async () =>\n (store.componentFilters = [\n utils.createHOCFilter(true),\n utils.createLocationFilter('abc', false),\n ]),\n );\n- await act(\n+ await actAsync(\n async () =>\n (store.componentFilters = [\n utils.createHOCFilter(true),\n@@ -363,10 +352,7 @@ describe('Store component filters', () => {\n utils.createElementTypeFilter(Types.ElementTypeSuspense),\n ];\n \n- const container = document.createElement('div');\n- await act(async () =>\n- legacyRender(, container),\n- );\n+ await actAsync(async () => render());\n expect(store).toMatchInlineSnapshot(`\n [root]\n ▾ \n@@ -374,18 +360,14 @@ describe('Store component filters', () => {\n

\n `);\n \n- await act(async () =>\n- legacyRender(, container),\n- );\n+ await actAsync(async () => render());\n expect(store).toMatchInlineSnapshot(`\n [root]\n ▾ \n \n `);\n \n- await act(async () =>\n- legacyRender(, container),\n- );\n+ await actAsync(async () => render());\n expect(store).toMatchInlineSnapshot(`\n [root]\n ▾ \n@@ -395,8 +377,11 @@ describe('Store component filters', () => {\n });\n \n describe('inline errors and warnings', () => {\n+ const {render: legacyRender} = getLegacyRenderImplementation();\n+\n \/\/ @reactVersion >= 17.0\n- it('only counts for unfiltered components', async () => {\n+ \/\/ @reactVersion <= 18.2\n+ it('only counts for unfiltered components (legacy render)', async () => {\n function ComponentWithWarning() {\n console.warn('test-only: render warning');\n return null;\n@@ -411,15 +396,7 @@ describe('Store component filters', () => {\n return null;\n }\n \n- \/\/ HACK This require() is needed (somewhere in the test) for this case to pass.\n- \/\/ Without it, the legacyRender() call below causes this test to fail\n- \/\/ because it requires \"react-dom\" for the first time,\n- \/\/ which causes the console error() and warn() methods to be overridden again,\n- \/\/ effectively disconnecting the DevTools override in 'react-devtools-shared\/src\/backend\/console'.\n- require('react-dom');\n-\n- const container = document.createElement('div');\n- await act(\n+ await actAsync(\n async () =>\n (store.componentFilters = [\n utils.createDisplayNameFilter('Warning'),\n@@ -433,7 +410,6 @@ describe('Store component filters', () => {\n \n \n <\/React.Fragment>,\n- container,\n );\n });\n \n@@ -441,7 +417,99 @@ describe('Store component filters', () => {\n expect(store.errorCount).toBe(0);\n expect(store.warningCount).toBe(0);\n \n- await act(async () => (store.componentFilters = []));\n+ await actAsync(async () => (store.componentFilters = []));\n+ expect(store).toMatchInlineSnapshot(`\n+ ✕ 2, ⚠ 2\n+ [root]\n+ ✕\n+ ⚠\n+ ✕⚠\n+ `);\n+\n+ await actAsync(\n+ async () =>\n+ (store.componentFilters = [utils.createDisplayNameFilter('Warning')]),\n+ );\n+ expect(store).toMatchInlineSnapshot(`\n+ ✕ 1, ⚠ 0\n+ [root]\n+ ✕\n+ `);\n+\n+ await actAsync(\n+ async () =>\n+ (store.componentFilters = [utils.createDisplayNameFilter('Error')]),\n+ );\n+ expect(store).toMatchInlineSnapshot(`\n+ ✕ 0, ⚠ 1\n+ [root]\n+ ⚠\n+ `);\n+\n+ await actAsync(\n+ async () =>\n+ (store.componentFilters = [\n+ utils.createDisplayNameFilter('Warning'),\n+ utils.createDisplayNameFilter('Error'),\n+ ]),\n+ );\n+ expect(store).toMatchInlineSnapshot(`[root]`);\n+ expect(store.errorCount).toBe(0);\n+ expect(store.warningCount).toBe(0);\n+\n+ await actAsync(async () => (store.componentFilters = []));\n+ expect(store).toMatchInlineSnapshot(`\n+ ✕ 2, ⚠ 2\n+ [root]\n+ ✕\n+ ⚠\n+ ✕⚠\n+ `);\n+ });\n+\n+ \/\/ @reactVersion >= 18\n+ it('only counts for unfiltered components (createRoot)', async () => {\n+ function ComponentWithWarning() {\n+ console.warn('test-only: render warning');\n+ return null;\n+ }\n+ function ComponentWithError() {\n+ console.error('test-only: render error');\n+ return null;\n+ }\n+ function ComponentWithWarningAndError() {\n+ console.error('test-only: render error');\n+ console.warn('test-only: render warning');\n+ return null;\n+ }\n+\n+ await actAsync(\n+ async () =>\n+ (store.componentFilters = [\n+ utils.createDisplayNameFilter('Warning'),\n+ utils.createDisplayNameFilter('Error'),\n+ ]),\n+ );\n+\n+ utils.act(\n+ () =>\n+ utils.withErrorsOrWarningsIgnored(['test-only:'], () => {\n+ render(\n+ \n+ \n+ \n+ \n+ <\/React.Fragment>,\n+ );\n+ }),\n+ false,\n+ );\n+\n+ expect(store).toMatchInlineSnapshot(``);\n+ expect(store.errorCount).toBe(0);\n+ expect(store.warningCount).toBe(0);\n+\n+ await actAsync(async () => (store.componentFilters = []));\n expect(store).toMatchInlineSnapshot(`\n ✕ 2, ⚠ 2\n [root]\n@@ -450,7 +518,7 @@ describe('Store component filters', () => {\n ✕⚠\n `);\n \n- await act(\n+ await actAsync(\n async () =>\n (store.componentFilters = [utils.createDisplayNameFilter('Warning')]),\n );\n@@ -460,7 +528,7 @@ describe('Store component filters', () => {\n ✕\n `);\n \n- await act(\n+ await actAsync(\n async () =>\n (store.componentFilters = [utils.createDisplayNameFilter('Error')]),\n );\n@@ -470,7 +538,7 @@ describe('Store component filters', () => {\n ⚠\n `);\n \n- await act(\n+ await actAsync(\n async () =>\n (store.componentFilters = [\n utils.createDisplayNameFilter('Warning'),\n@@ -481,7 +549,7 @@ describe('Store component filters', () => {\n expect(store.errorCount).toBe(0);\n expect(store.warningCount).toBe(0);\n \n- await act(async () => (store.componentFilters = []));\n+ await actAsync(async () => (store.componentFilters = []));\n expect(store).toMatchInlineSnapshot(`\n ✕ 2, ⚠ 2\n [root]\ndiff --git a\/packages\/react-devtools-shared\/src\/__tests__\/utils.js b\/packages\/react-devtools-shared\/src\/__tests__\/utils.js\nindex f00e66d983..2b2f98aae8 100644\n--- a\/packages\/react-devtools-shared\/src\/__tests__\/utils.js\n+++ b\/packages\/react-devtools-shared\/src\/__tests__\/utils.js\n@@ -21,6 +21,12 @@ import {ReactVersion} from '..\/..\/..\/..\/ReactVersions';\n \n const requestedReactVersion = process.env.REACT_VERSION || ReactVersion;\n export function getActDOMImplementation(): () => void | Promise {\n+ \/\/ This is for React < 17, where act wasn't shipped yet.\n+ if (semver.lt(requestedReactVersion, '17.0.0')) {\n+ require('react-dom\/test-utils');\n+ return cb => cb();\n+ }\n+\n \/\/ This is for React < 18, where act was distributed in react-dom\/test-utils.\n if (semver.lt(requestedReactVersion, '18.0.0')) {\n const ReactDOMTestUtils = require('react-dom\/test-utils');\n@@ -41,13 +47,30 @@ export function getActDOMImplementation(): () => void | Promise {\n throw new Error(\"Couldn't find any available act implementation\");\n }\n \n+export function getActTestRendererImplementation(): () => void | Promise {\n+ \/\/ This is for React < 17, where act wasn't shipped yet.\n+ if (semver.lt(requestedReactVersion, '17.0.0')) {\n+ require('react-test-renderer');\n+ return cb => cb();\n+ }\n+\n+ const RTR = require('react-test-renderer');\n+ if (RTR.act) {\n+ return RTR.act;\n+ }\n+\n+ throw new Error(\n+ \"Couldn't find any available act implementation in react-test-renderer\",\n+ );\n+}\n+\n export function act(\n callback: Function,\n recursivelyFlush: boolean = true,\n ): void {\n \/\/ act from react-test-renderer has some side effects on React DevTools\n \/\/ it injects the renderer for DevTools, see ReactTestRenderer.js\n- const {act: actTestRenderer} = require('react-test-renderer');\n+ const actTestRenderer = getActTestRendererImplementation();\n const actDOM = getActDOMImplementation();\n \n actDOM(() => {\n@@ -74,7 +97,7 @@ export async function actAsync(\n ): Promise {\n \/\/ act from react-test-renderer has some side effects on React DevTools\n \/\/ it injects the renderer for DevTools, see ReactTestRenderer.js\n- const {act: actTestRenderer} = require('react-test-renderer');\n+ const actTestRenderer = getActTestRendererImplementation();\n const actDOM = getActDOMImplementation();\n \n await actDOM(async () => {\n","parents":["ad720f36ec3328c70aa30277f12985e30bc0e880"],"commit":{"revision":"12d56fca3da06328ac61d86976afa728b97b49d6","authoredAt":"2024-02-06T16:25:03+00:00","authorName":"Ruslan Lesiutin","subject":"chore: use versioned render in storeComponentFilters test (#28241)","shortRevision":"12d56fca3d","authorEmail":"rdlesyutin@gmail.com"},"body":""}

dillon1000/react

Files changed