{"body":"Convert createReactClassIntegration-test to createRoot","parents":["ef2859d50bb6b4b31b304f4fe4bb43dc273a9b54"],"commit":{"shortRevision":"9723093df3","authorName":"Jan Kassens","authorEmail":"jkassens@meta.com","authoredAt":"2024-01-09T15:30:56-05:00","revision":"9723093df319f06886fe488d6d88ff615a3e8fc3","subject":"Convert createReactClassIntegration-test to createRoot (#27914)"},"patch":"diff --git a\/packages\/react\/src\/__tests__\/createReactClassIntegration-test.js b\/packages\/react\/src\/__tests__\/createReactClassIntegration-test.js\nindex b907fafea6..dff9042a1b 100644\n--- a\/packages\/react\/src\/__tests__\/createReactClassIntegration-test.js\n+++ b\/packages\/react\/src\/__tests__\/createReactClassIntegration-test.js\n@@ -9,18 +9,21 @@\n \n 'use strict';\n \n+let act;\n+\n let PropTypes;\n let React;\n-let ReactDOM;\n+let ReactDOMClient;\n let ReactTestUtils;\n let createReactClass;\n \n describe('create-react-class-integration', () => {\n beforeEach(() => {\n jest.resetModules();\n+ ({act} = require('internal-test-utils'));\n PropTypes = require('prop-types');\n React = require('react');\n- ReactDOM = require('react-dom');\n+ ReactDOMClient = require('react-dom\/client');\n ReactTestUtils = require('react-dom\/test-utils');\n createReactClass = require('create-react-class\/factory')(\n React.Component,\n@@ -292,7 +295,7 @@ describe('create-react-class-integration', () => {\n });\n \n \/\/ @gate !disableLegacyContext\n- it('renders based on context getInitialState', () => {\n+ it('renders based on context getInitialState', async () => {\n const Foo = createReactClass({\n contextTypes: {\n className: PropTypes.string,\n@@ -318,7 +321,10 @@ describe('create-react-class-integration', () => {\n });\n \n const container = document.createElement('div');\n- ReactDOM.render(, container);\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n expect(container.firstChild.className).toBe('foo');\n });\n \n@@ -388,7 +394,7 @@ describe('create-react-class-integration', () => {\n expect(ops).toEqual(['Render: 0', 'Render: 1', 'Callback: 1']);\n });\n \n- it('getDerivedStateFromProps updates state when props change', () => {\n+ it('getDerivedStateFromProps updates state when props change', async () => {\n const Component = createReactClass({\n getInitialState() {\n return {\n@@ -404,23 +410,26 @@ describe('create-react-class-integration', () => {\n });\n \n const container = document.createElement('div');\n- const instance = ReactDOM.render(\n-

\n- \n- <\/div>,\n- container,\n- );\n- expect(instance.textContent).toEqual('count:1');\n- ReactDOM.render(\n-

\n- \n- <\/div>,\n- container,\n- );\n- expect(instance.textContent).toEqual('count:3');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(\n+

\n+ \n+ <\/div>,\n+ );\n+ });\n+ expect(container.firstChild.textContent).toEqual('count:1');\n+ await act(() => {\n+ root.render(\n+

\n+ \n+ <\/div>,\n+ );\n+ });\n+ expect(container.firstChild.textContent).toEqual('count:3');\n });\n \n- it('should support the new static getDerivedStateFromProps method', () => {\n+ it('should support the new static getDerivedStateFromProps method', async () => {\n let instance;\n const Component = createReactClass({\n statics: {\n@@ -438,11 +447,14 @@ describe('create-react-class-integration', () => {\n return null;\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(instance.state.foo).toBe('bar');\n });\n \n- it('warns if getDerivedStateFromProps is not static', () => {\n+ it('warns if getDerivedStateFromProps is not static', async () => {\n const Foo = createReactClass({\n displayName: 'Foo',\n getDerivedStateFromProps() {\n@@ -452,15 +464,18 @@ describe('create-react-class-integration', () => {\n return

;\n },\n });\n- expect(() =>\n- ReactDOM.render(, document.createElement('div')),\n- ).toErrorDev(\n+ await expect(async () => {\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Foo: getSnapshotBeforeUpdate() is defined as a static method ' +\n 'and will be ignored. Instead, declare it as an instance method.',\n );\n });\n \n- it('should warn if state is not properly initialized before getDerivedStateFromProps', () => {\n+ it('should warn if state is not properly initialized before getDerivedStateFromProps', async () => {\n const Component = createReactClass({\n displayName: 'Component',\n statics: {\n@@ -510,9 +531,12 @@ describe('create-react-class-integration', () => {\n return null;\n },\n });\n- expect(() =>\n- ReactDOM.render(, document.createElement('div')),\n- ).toErrorDev(\n+ await expect(async () => {\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n '`Component` uses `getDerivedStateFromProps` but its initial state is ' +\n 'null. This is not recommended. Instead, define the initial state by ' +\n 'assigning an object to `this.state` in the constructor of `Component`. ' +\n@@ -520,7 +544,7 @@ describe('create-react-class-integration', () => {\n );\n });\n \n- it('should not invoke deprecated lifecycles (cWM\/cWRP\/cWU) if new static gDSFP is present', () => {\n+ it('should not invoke deprecated lifecycles (cWM\/cWRP\/cWU) if new static gDSFP is present', async () => {\n const Component = createReactClass({\n statics: {\n getDerivedStateFromProps: function () {\n@@ -544,9 +568,12 @@ describe('create-react-class-integration', () => {\n },\n });\n \n- expect(() => {\n- expect(() => {\n- ReactDOM.render(, document.createElement('div'));\n+ await expect(async () => {\n+ await expect(async () => {\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await act(() => {\n+ root.render();\n+ });\n }).toErrorDev(\n 'Unsafe legacy lifecycles will not be called for components using new component APIs.\\n\\n' +\n 'Component uses getDerivedStateFromProps() but also contains the following legacy lifecycles:\\n' +\n@@ -564,10 +591,13 @@ describe('create-react-class-integration', () => {\n ],\n {withoutStack: true},\n );\n- ReactDOM.render(, document.createElement('div'));\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await act(() => {\n+ root.render();\n+ });\n });\n \n- it('should not invoke deprecated lifecycles (cWM\/cWRP\/cWU) if new getSnapshotBeforeUpdate is present', () => {\n+ it('should not invoke deprecated lifecycles (cWM\/cWRP\/cWU) if new getSnapshotBeforeUpdate is present', async () => {\n const Component = createReactClass({\n getSnapshotBeforeUpdate: function () {\n return null;\n@@ -587,9 +617,12 @@ describe('create-react-class-integration', () => {\n },\n });\n \n- expect(() => {\n- expect(() => {\n- ReactDOM.render(, document.createElement('div'));\n+ await expect(async () => {\n+ await expect(async () => {\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await act(() => {\n+ root.render();\n+ });\n }).toErrorDev(\n 'Unsafe legacy lifecycles will not be called for components using new component APIs.\\n\\n' +\n 'Component uses getSnapshotBeforeUpdate() but also contains the following legacy lifecycles:\\n' +\n@@ -607,10 +640,13 @@ describe('create-react-class-integration', () => {\n ],\n {withoutStack: true},\n );\n- ReactDOM.render(, document.createElement('div'));\n+ await act(() => {\n+ const root2 = ReactDOMClient.createRoot(document.createElement('div'));\n+ root2.render();\n+ });\n });\n \n- it('should invoke both deprecated and new lifecycles if both are present', () => {\n+ it('should invoke both deprecated and new lifecycles if both are present', async () => {\n const log = [];\n \n const Component = createReactClass({\n@@ -641,8 +677,13 @@ describe('create-react-class-integration', () => {\n },\n });\n \n- const div = document.createElement('div');\n- expect(() => ReactDOM.render(, div)).toWarnDev(\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toWarnDev(\n [\n 'componentWillMount has been renamed',\n 'componentWillReceiveProps has been renamed',\n@@ -654,7 +695,9 @@ describe('create-react-class-integration', () => {\n \n log.length = 0;\n \n- ReactDOM.render(, div);\n+ await act(() => {\n+ root.render();\n+ });\n expect(log).toEqual([\n 'componentWillReceiveProps',\n 'UNSAFE_componentWillReceiveProps',\n@@ -663,7 +706,7 @@ describe('create-react-class-integration', () => {\n ]);\n });\n \n- it('isMounted works', () => {\n+ it('isMounted works', async () => {\n const ops = [];\n let instance;\n const Component = createReactClass({\n@@ -716,9 +759,13 @@ describe('create-react-class-integration', () => {\n },\n });\n \n- const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n \n- expect(() => ReactDOM.render(, container)).toErrorDev(\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Warning: MyComponent: isMounted is deprecated. Instead, make sure to ' +\n 'clean up subscriptions and pending requests in componentWillUnmount ' +\n 'to prevent memory leaks.',\n@@ -726,9 +773,14 @@ describe('create-react-class-integration', () => {\n );\n \n \/\/ Dedupe\n- ReactDOM.render(, container);\n \n- ReactDOM.unmountComponentAtNode(container);\n+ await act(() => {\n+ root.render();\n+ });\n+\n+ await act(() => {\n+ root.unmount();\n+ });\n instance.log('after unmount');\n expect(ops).toEqual([\n 'getInitialState: false',\n","files":[{"status":"M","path":"packages\/react\/src\/__tests__\/createReactClassIntegration-test.js"}]}

dillon1000/react

Files changed