{"body":"it'll be removed soon anyway but until then let's unblock moving legacy\r\nAPIs behind a flag.","files":[{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactTestUtils-test.js"}],"parents":["f637f6a4736a9a02ab18067ef4b1c5e033c8d6f4"],"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactTestUtils-test.js b\/packages\/react-dom\/src\/__tests__\/ReactTestUtils-test.js\nindex 15de9b7087..0d2c8574d8 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactTestUtils-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactTestUtils-test.js\n@@ -9,8 +9,9 @@\n \n 'use strict';\n \n+import {act} from 'internal-test-utils';\n import * as React from 'react';\n-import * as ReactDOM from 'react-dom';\n+import * as ReactDOMClient from 'react-dom\/client';\n import * as ReactDOMServer from 'react-dom\/server';\n import * as ReactTestUtils from 'react-dom\/test-utils';\n \n@@ -30,7 +31,7 @@ describe('ReactTestUtils', () => {\n expect(Object.keys(ReactTestUtils.Simulate).sort()).toMatchSnapshot();\n });\n \n- it('gives Jest mocks a passthrough implementation with mockComponent()', () => {\n+ it('gives Jest mocks a passthrough implementation with mockComponent()', async () => {\n class MockedComponent extends React.Component {\n render() {\n throw new Error('Should not get here.');\n@@ -51,11 +52,15 @@ describe('ReactTestUtils', () => {\n ReactTestUtils.mockComponent(MockedComponent);\n \n const container = document.createElement('div');\n- ReactDOM.render(Hello<\/MockedComponent>, container);\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(Hello<\/MockedComponent>);\n+ });\n+\n expect(container.textContent).toBe('Hello');\n });\n \n- it('can scryRenderedComponentsWithType', () => {\n+ it('can scryRenderedComponentsWithType', async () => {\n class Child extends React.Component {\n render() {\n return null;\n@@ -70,7 +75,12 @@ describe('ReactTestUtils', () => {\n );\n }\n }\n- const renderedComponent = ReactTestUtils.renderIntoDocument();\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ let renderedComponent;\n+ await act(() => {\n+ root.render( (renderedComponent = current)} \/>);\n+ });\n const scryResults = ReactTestUtils.scryRenderedComponentsWithType(\n renderedComponent,\n Child,\n@@ -78,7 +88,7 @@ describe('ReactTestUtils', () => {\n expect(scryResults.length).toBe(1);\n });\n \n- it('can scryRenderedDOMComponentsWithClass with TextComponent', () => {\n+ it('can scryRenderedDOMComponentsWithClass with TextComponent', async () => {\n class Wrapper extends React.Component {\n render() {\n return (\n@@ -89,7 +99,12 @@ describe('ReactTestUtils', () => {\n }\n }\n \n- const renderedComponent = ReactTestUtils.renderIntoDocument();\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ let renderedComponent;\n+ await act(() => {\n+ root.render( (renderedComponent = current)} \/>);\n+ });\n const scryResults = ReactTestUtils.scryRenderedDOMComponentsWithClass(\n renderedComponent,\n 'NonExistentClass',\n@@ -97,7 +112,7 @@ describe('ReactTestUtils', () => {\n expect(scryResults.length).toBe(0);\n });\n \n- it('can scryRenderedDOMComponentsWithClass with className contains \\\\n', () => {\n+ it('can scryRenderedDOMComponentsWithClass with className contains \\\\n', async () => {\n class Wrapper extends React.Component {\n render() {\n return (\n@@ -108,7 +123,12 @@ describe('ReactTestUtils', () => {\n }\n }\n \n- const renderedComponent = ReactTestUtils.renderIntoDocument();\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ let renderedComponent;\n+ await act(() => {\n+ root.render( (renderedComponent = current)} \/>);\n+ });\n const scryResults = ReactTestUtils.scryRenderedDOMComponentsWithClass(\n renderedComponent,\n 'x',\n@@ -116,7 +136,7 @@ describe('ReactTestUtils', () => {\n expect(scryResults.length).toBe(1);\n });\n \n- it('can scryRenderedDOMComponentsWithClass with multiple classes', () => {\n+ it('can scryRenderedDOMComponentsWithClass with multiple classes', async () => {\n class Wrapper extends React.Component {\n render() {\n return (\n@@ -127,7 +147,12 @@ describe('ReactTestUtils', () => {\n }\n }\n \n- const renderedComponent = ReactTestUtils.renderIntoDocument();\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ let renderedComponent;\n+ await act(() => {\n+ root.render( (renderedComponent = current)} \/>);\n+ });\n const scryResults1 = ReactTestUtils.scryRenderedDOMComponentsWithClass(\n renderedComponent,\n 'x y',\n@@ -162,7 +187,7 @@ describe('ReactTestUtils', () => {\n expect(scryResults5.length).toBe(0);\n });\n \n- it('traverses children in the correct order', () => {\n+ it('traverses children in the correct order', async () => {\n class Wrapper extends React.Component {\n render() {\n return

{this.props.children}<\/div>;\n@@ -170,25 +195,29 @@ describe('ReactTestUtils', () => {\n }\n \n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- {null}\n-

purple<\/div>\n- <\/Wrapper>,\n- container,\n- );\n- const tree = ReactDOM.render(\n- \n-

orange<\/div>\n-

purple<\/div>\n- <\/Wrapper>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(\n+ \n+ {null}\n+

purple<\/div>\n+ <\/Wrapper>,\n+ );\n+ });\n+ let tree;\n+ await act(() => {\n+ root.render(\n+ (tree = current)}>\n+

orange<\/div>\n+

purple<\/div>\n+ <\/Wrapper>,\n+ );\n+ });\n \n const log = [];\n ReactTestUtils.findAllInRenderedTree(tree, function (child) {\n if (ReactTestUtils.isDOMComponent(child)) {\n- log.push(ReactDOM.findDOMNode(child).textContent);\n+ log.push(child.textContent);\n }\n });\n \n@@ -196,7 +225,7 @@ describe('ReactTestUtils', () => {\n expect(log).toEqual(['orangepurple', 'orange', 'purple']);\n });\n \n- it('should support injected wrapper components as DOM components', () => {\n+ it('should support injected wrapper components as DOM components', async () => {\n const injectedDOMComponents = [\n 'button',\n 'form',\n@@ -208,13 +237,22 @@ describe('ReactTestUtils', () => {\n 'textarea',\n ];\n \n- injectedDOMComponents.forEach(function (type) {\n- const testComponent = ReactTestUtils.renderIntoDocument(\n- React.createElement(type),\n- );\n+ \/\/ eslint-disable-next-line no-for-of-loops\/no-for-of-loops\n+ for (const type of injectedDOMComponents) {\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ let testComponent;\n+ await act(() => {\n+ root.render(\n+ React.createElement(type, {\n+ ref: current => (testComponent = current),\n+ }),\n+ );\n+ });\n+\n expect(testComponent.tagName).toBe(type.toUpperCase());\n expect(ReactTestUtils.isDOMComponent(testComponent)).toBe(true);\n- });\n+ }\n \n \/\/ Full-page components (html, head, body) can't be rendered into a div\n \/\/ directly...\n@@ -237,7 +275,13 @@ describe('ReactTestUtils', () => {\n \n const markup = ReactDOMServer.renderToString();\n const testDocument = getTestDocument(markup);\n- const component = ReactDOM.hydrate(, testDocument);\n+ let component;\n+ await act(() => {\n+ ReactDOMClient.hydrateRoot(\n+ testDocument,\n+ (component = current)} \/>,\n+ );\n+ });\n \n expect(component.htmlRef.current.tagName).toBe('HTML');\n expect(component.headRef.current.tagName).toBe('HEAD');\n@@ -247,7 +291,7 @@ describe('ReactTestUtils', () => {\n expect(ReactTestUtils.isDOMComponent(component.bodyRef.current)).toBe(true);\n });\n \n- it('can scry with stateless components involved', () => {\n+ it('can scry with stateless components involved', async () => {\n const Function = () => (\n

\n@@ -265,7 +309,13 @@ describe('ReactTestUtils', () => {\n }\n }\n \n- const inst = ReactTestUtils.renderIntoDocument();\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ let inst;\n+ await act(() => {\n+ root.render( (inst = current)} \/>);\n+ });\n+\n const hrs = ReactTestUtils.scryRenderedDOMComponentsWithTag(inst, 'hr');\n expect(hrs.length).toBe(2);\n });\n@@ -327,7 +377,7 @@ describe('ReactTestUtils', () => {\n });\n \n describe('Simulate', () => {\n- it('should change the value of an input field', () => {\n+ it('should change the value of an input field', async () => {\n const obj = {\n handler: function (e) {\n e.persist();\n@@ -335,10 +385,11 @@ describe('ReactTestUtils', () => {\n };\n spyOnDevAndProd(obj, 'handler');\n const container = document.createElement('div');\n- const node = ReactDOM.render(\n- ,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+ const node = container.firstChild;\n \n node.value = 'giraffe';\n ReactTestUtils.Simulate.change(node);\n@@ -348,7 +399,7 @@ describe('ReactTestUtils', () => {\n );\n });\n \n- it('should change the value of an input field in a component', () => {\n+ it('should change the value of an input field in a component', async () => {\n class SomeComponent extends React.Component {\n inputRef = React.createRef();\n render() {\n@@ -371,10 +422,16 @@ describe('ReactTestUtils', () => {\n };\n spyOnDevAndProd(obj, 'handler');\n const container = document.createElement('div');\n- const instance = ReactDOM.render(\n- ,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ let instance;\n+ await act(() => {\n+ root.render(\n+ (instance = current)}\n+ \/>,\n+ );\n+ });\n \n const node = instance.inputRef.current;\n node.value = 'zebra';\n@@ -385,27 +442,33 @@ describe('ReactTestUtils', () => {\n );\n });\n \n- it('should not warn when used with extra properties', () => {\n+ it('should not warn when used with extra properties', async () => {\n const CLIENT_X = 100;\n \n class Component extends React.Component {\n+ childRef = React.createRef();\n handleClick = e => {\n expect(e.clientX).toBe(CLIENT_X);\n };\n \n render() {\n- return

;\n+ return

;\n }\n }\n \n const element = document.createElement('div');\n- const instance = ReactDOM.render(, element);\n- ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(instance), {\n+ const root = ReactDOMClient.createRoot(element);\n+ let instance;\n+ await act(() => {\n+ root.render( (instance = current)} \/>);\n+ });\n+\n+ ReactTestUtils.Simulate.click(instance.childRef.current, {\n clientX: CLIENT_X,\n });\n });\n \n- it('should set the type of the event', () => {\n+ it('should set the type of the event', async () => {\n let event;\n const stub = jest.fn().mockImplementation(e => {\n e.persist();\n@@ -413,8 +476,11 @@ describe('ReactTestUtils', () => {\n });\n \n const container = document.createElement('div');\n- const instance = ReactDOM.render(

, container);\n- const node = ReactDOM.findDOMNode(instance);\n+ const root = ReactDOMClient.createRoot(container);\n+ let node;\n+ await act(() => {\n+ root.render(

(node = current)} \/>);\n+ });\n \n ReactTestUtils.Simulate.keyDown(node);\n \n@@ -422,7 +488,7 @@ describe('ReactTestUtils', () => {\n expect(event.nativeEvent.type).toBe('keydown');\n });\n \n- it('should work with renderIntoDocument', () => {\n+ it('should work with renderIntoDocument', async () => {\n const onChange = jest.fn();\n \n class MyComponent extends React.Component {\n@@ -435,7 +501,13 @@ describe('ReactTestUtils', () => {\n }\n }\n \n- const instance = ReactTestUtils.renderIntoDocument();\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ let instance;\n+ await act(() => {\n+ root.render( (instance = current)} \/>);\n+ });\n+\n const input = ReactTestUtils.findRenderedDOMComponentWithTag(\n instance,\n 'input',\n@@ -449,7 +521,7 @@ describe('ReactTestUtils', () => {\n });\n });\n \n- it('should call setState callback with no arguments', () => {\n+ it('should call setState callback with no arguments', async () => {\n let mockArgs;\n class Component extends React.Component {\n componentDidMount() {\n@@ -460,17 +532,28 @@ describe('ReactTestUtils', () => {\n }\n }\n \n- ReactTestUtils.renderIntoDocument();\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+\n expect(mockArgs.length).toEqual(0);\n });\n- it('should find rendered component with type in document', () => {\n+ it('should find rendered component with type in document', async () => {\n class MyComponent extends React.Component {\n render() {\n return true;\n }\n }\n \n- const instance = ReactTestUtils.renderIntoDocument();\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ let instance;\n+ await act(() => {\n+ root.render( (instance = current)} \/>);\n+ });\n+\n const renderedComponentType = ReactTestUtils.findRenderedComponentWithType(\n instance,\n MyComponent,\n","commit":{"shortRevision":"2314227de5","revision":"2314227de55b23e5819f7b96443693df16b5e911","authorName":"Sebastian Silbermann","authorEmail":"silbermann.sebastian@gmail.com","subject":"Convert ReactTestUtils to createRoot (#28446)","authoredAt":"2024-02-26T21:54:46+01:00"}}

dillon1000/react

Files changed