{"patch":"diff --git a\/packages\/react\/src\/__tests__\/ReactPureComponent-test.js b\/packages\/react\/src\/__tests__\/ReactPureComponent-test.js\nindex 0c085fa063..e55a601364 100644\n--- a\/packages\/react\/src\/__tests__\/ReactPureComponent-test.js\n+++ b\/packages\/react\/src\/__tests__\/ReactPureComponent-test.js\n@@ -9,16 +9,20 @@\n \n 'use strict';\n \n+let act;\n+\n let React;\n-let ReactDOM;\n+let ReactDOMClient;\n \n describe('ReactPureComponent', () => {\n beforeEach(() => {\n+ act = require('internal-test-utils').act;\n+\n React = require('react');\n- ReactDOM = require('react-dom');\n+ ReactDOMClient = require('react-dom\/client');\n });\n \n- it('should render', () => {\n+ it('should render', async () => {\n let renders = 0;\n class Component extends React.PureComponent {\n constructor() {\n@@ -32,36 +36,47 @@ describe('ReactPureComponent', () => {\n }\n \n const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n let text;\n- let component;\n+ const componentRef = React.createRef();\n \n text = ['porcini'];\n- component = ReactDOM.render(, container);\n+ await act(() => {\n+ root.render();\n+ });\n expect(container.textContent).toBe('porcini');\n expect(renders).toBe(1);\n \n text = ['morel'];\n- component = ReactDOM.render(, container);\n+ await act(() => {\n+ root.render();\n+ });\n expect(container.textContent).toBe('morel');\n expect(renders).toBe(2);\n \n text[0] = 'portobello';\n- component = ReactDOM.render(, container);\n+ await act(() => {\n+ root.render();\n+ });\n expect(container.textContent).toBe('morel');\n expect(renders).toBe(2);\n \n \/\/ Setting state without changing it doesn't cause a rerender.\n- component.setState({type: 'mushrooms'});\n+ await act(() => {\n+ componentRef.current.setState({type: 'mushrooms'});\n+ });\n expect(container.textContent).toBe('morel');\n expect(renders).toBe(2);\n \n \/\/ But changing state does.\n- component.setState({type: 'portobello mushrooms'});\n+ await act(() => {\n+ componentRef.current.setState({type: 'portobello mushrooms'});\n+ });\n expect(container.textContent).toBe('portobello');\n expect(renders).toBe(3);\n });\n \n- it('can override shouldComponentUpdate', () => {\n+ it('can override shouldComponentUpdate', async () => {\n let renders = 0;\n class Component extends React.PureComponent {\n render() {\n@@ -74,17 +89,24 @@ describe('ReactPureComponent', () => {\n }\n \n const container = document.createElement('div');\n- expect(() => ReactDOM.render(, container)).toErrorDev(\n+ const root = ReactDOMClient.createRoot(container);\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Warning: ' +\n 'Component has a method called shouldComponentUpdate(). ' +\n 'shouldComponentUpdate should not be used when extending React.PureComponent. ' +\n 'Please extend React.Component if shouldComponentUpdate is used.',\n );\n- ReactDOM.render(, container);\n+ await act(() => {\n+ root.render();\n+ });\n expect(renders).toBe(2);\n });\n \n- it('extends React.Component', () => {\n+ it('extends React.Component', async () => {\n let renders = 0;\n class Component extends React.PureComponent {\n render() {\n@@ -94,11 +116,14 @@ describe('ReactPureComponent', () => {\n return

;\n }\n }\n- ReactDOM.render(, document.createElement('div'));\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await act(() => {\n+ root.render();\n+ });\n expect(renders).toBe(1);\n });\n \n- it('should warn when shouldComponentUpdate is defined on React.PureComponent', () => {\n+ it('should warn when shouldComponentUpdate is defined on React.PureComponent', async () => {\n class PureComponent extends React.PureComponent {\n shouldComponentUpdate() {\n return true;\n@@ -107,8 +132,12 @@ describe('ReactPureComponent', () => {\n return

;\n }\n }\n- const container = document.createElement('div');\n- expect(() => ReactDOM.render(, container)).toErrorDev(\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Warning: ' +\n 'PureComponent has a method called shouldComponentUpdate(). ' +\n 'shouldComponentUpdate should not be used when extending React.PureComponent. ' +\n","body":"Convert ReactPureComponent-test to createRoot","files":[{"status":"M","path":"packages\/react\/src\/__tests__\/ReactPureComponent-test.js"}],"parents":["2594caa09e0aca49493cd62659c1e3d1d3488a7e"],"commit":{"authorName":"Jan Kassens","authoredAt":"2024-01-10T10:17:15-05:00","authorEmail":"jkassens@meta.com","subject":"Convert ReactPureComponent-test to createRoot (#27917)","revision":"08cd087cada28bf05165b87b6e31a97c6ac598b4","shortRevision":"08cd087cad"}}

dillon1000/react

Files changed