{"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactFunctionComponent-test.js b\/packages\/react-dom\/src\/__tests__\/ReactFunctionComponent-test.js\nindex b30293f548..1ec444bea0 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactFunctionComponent-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactFunctionComponent-test.js\n@@ -11,8 +11,9 @@\n \n let PropTypes;\n let React;\n-let ReactDOM;\n+let ReactDOMClient;\n let ReactTestUtils;\n+let act;\n \n function FunctionComponent(props) {\n return

{props.name}<\/div>;\n@@ -23,18 +24,23 @@ describe('ReactFunctionComponent', () => {\n jest.resetModules();\n PropTypes = require('prop-types');\n React = require('react');\n- ReactDOM = require('react-dom');\n+ ReactDOMClient = require('react-dom\/client');\n+ act = require('internal-test-utils').act;\n ReactTestUtils = require('react-dom\/test-utils');\n });\n \n- it('should render stateless component', () => {\n+ it('should render stateless component', async () => {\n const el = document.createElement('div');\n- ReactDOM.render(, el);\n+\n+ const root = ReactDOMClient.createRoot(el);\n+ await act(() => {\n+ root.render();\n+ });\n \n expect(el.textContent).toBe('A');\n });\n \n- it('should update stateless component', () => {\n+ it('should update stateless component', async () => {\n class Parent extends React.Component {\n render() {\n return ;\n@@ -42,25 +48,34 @@ describe('ReactFunctionComponent', () => {\n }\n \n const el = document.createElement('div');\n- ReactDOM.render(, el);\n+\n+ const root = ReactDOMClient.createRoot(el);\n+ await act(() => {\n+ root.render();\n+ });\n expect(el.textContent).toBe('A');\n \n- ReactDOM.render(, el);\n+ await act(() => {\n+ root.render();\n+ });\n expect(el.textContent).toBe('B');\n });\n \n- it('should unmount stateless component', () => {\n+ it('should unmount stateless component', async () => {\n const container = document.createElement('div');\n \n- ReactDOM.render(, container);\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n expect(container.textContent).toBe('A');\n \n- ReactDOM.unmountComponentAtNode(container);\n+ root.unmount();\n expect(container.textContent).toBe('');\n });\n \n \/\/ @gate !disableLegacyContext\n- it('should pass context thru stateless component', () => {\n+ it('should pass context thru stateless component', async () => {\n class Child extends React.Component {\n static contextTypes = {\n test: PropTypes.string.isRequired,\n@@ -90,16 +105,22 @@ describe('ReactFunctionComponent', () => {\n }\n \n const el = document.createElement('div');\n- ReactDOM.render(, el);\n+\n+ const root = ReactDOMClient.createRoot(el);\n+ await act(() => {\n+ root.render();\n+ });\n \n expect(el.textContent).toBe('test');\n \n- ReactDOM.render(, el);\n+ await act(() => {\n+ root.render();\n+ });\n \n expect(el.textContent).toBe('mest');\n });\n \n- it('should warn for getDerivedStateFromProps on a function component', () => {\n+ it('should warn for getDerivedStateFromProps on a function component', async () => {\n function FunctionComponentWithChildContext() {\n return null;\n }\n@@ -107,15 +128,18 @@ describe('ReactFunctionComponent', () => {\n \n const container = document.createElement('div');\n \n- expect(() =>\n- ReactDOM.render(, container),\n- ).toErrorDev(\n+ await expect(async () => {\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'FunctionComponentWithChildContext: Function ' +\n 'components do not support getDerivedStateFromProps.',\n );\n });\n \n- it('should warn for childContextTypes on a function component', () => {\n+ it('should warn for childContextTypes on a function component', async () => {\n function FunctionComponentWithChildContext(props) {\n return

{props.name}<\/div>;\n }\n@@ -126,12 +150,12 @@ describe('ReactFunctionComponent', () => {\n \n const container = document.createElement('div');\n \n- expect(() =>\n- ReactDOM.render(\n- ,\n- container,\n- ),\n- ).toErrorDev(\n+ await expect(async () => {\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'FunctionComponentWithChildContext(...): childContextTypes cannot ' +\n 'be defined on a function component.',\n );\n@@ -378,7 +402,7 @@ describe('ReactFunctionComponent', () => {\n });\n \n \/\/ @gate !disableLegacyContext\n- it('should receive context', () => {\n+ it('should receive context', async () => {\n class Parent extends React.Component {\n static childContextTypes = {\n lang: PropTypes.string,\n@@ -399,7 +423,11 @@ describe('ReactFunctionComponent', () => {\n Child.contextTypes = {lang: PropTypes.string};\n \n const el = document.createElement('div');\n- ReactDOM.render(, el);\n+\n+ const root = ReactDOMClient.createRoot(el);\n+ await act(() => {\n+ root.render();\n+ });\n expect(el.textContent).toBe('en');\n });\n \n","body":"","files":[{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactFunctionComponent-test.js"}],"commit":{"shortRevision":"feed8f3f95","authorName":"Ricky","authorEmail":"rickhanlonii@gmail.com","subject":"Convert ReactFunctionComponent to createRoot (#27997)","revision":"feed8f3f95836a99eeaf5dc64d1c9ed62217c1de","authoredAt":"2024-01-18T22:32:04-05:00"},"parents":["b3003047101b4c7a643788a8faf576f7e370fb45"]}

dillon1000/react

Files changed