diff --git a/packages/react/src/__tests__/createReactClassIntegration-test.js b/packages/react/src/__tests__/createReactClassIntegration-test.js index dff9042a1bd21..dfba4146f443a 100644 --- a/packages/react/src/__tests__/createReactClassIntegration-test.js +++ b/packages/react/src/__tests__/createReactClassIntegration-test.js @@ -14,7 +14,6 @@ let act; let PropTypes; let React; let ReactDOMClient; -let ReactTestUtils; let createReactClass; describe('create-react-class-integration', () => { @@ -24,7 +23,6 @@ describe('create-react-class-integration', () => { PropTypes = require('prop-types'); React = require('react'); ReactDOMClient = require('react-dom/client'); - ReactTestUtils = require('react-dom/test-utils'); createReactClass = require('create-react-class/factory')( React.Component, React.isValidElement, @@ -231,7 +229,7 @@ describe('create-react-class-integration', () => { ]); }); - it('should support statics', () => { + it('should support statics', async () => { const Component = createReactClass({ statics: { abc: 'def', @@ -247,8 +245,13 @@ describe('create-react-class-integration', () => { return ; }, }); - let instance = ; - instance = ReactTestUtils.renderIntoDocument(instance); + const container = document.createElement('div'); + const root = ReactDOMClient.createRoot(container); + let instance; + await act(() => { + root.render( (instance = current)} />); + }); + expect(instance.constructor.abc).toBe('def'); expect(Component.abc).toBe('def'); expect(instance.constructor.def).toBe(0); @@ -261,7 +264,7 @@ describe('create-react-class-integration', () => { expect(Component.pqr()).toBe(Component); }); - it('should work with object getInitialState() return values', () => { + it('should work with object getInitialState() return values', async () => { const Component = createReactClass({ getInitialState: function () { return { @@ -272,12 +275,17 @@ describe('create-react-class-integration', () => { return ; }, }); - let instance = ; - instance = ReactTestUtils.renderIntoDocument(instance); + const container = document.createElement('div'); + const root = ReactDOMClient.createRoot(container); + let instance; + await act(() => { + root.render( (instance = current)} />); + }); + expect(instance.state.occupation).toEqual('clown'); }); - it('should work with getDerivedStateFromProps() return values', () => { + it('should work with getDerivedStateFromProps() return values', async () => { const Component = createReactClass({ getInitialState() { return {}; @@ -289,8 +297,12 @@ describe('create-react-class-integration', () => { Component.getDerivedStateFromProps = () => { return {occupation: 'clown'}; }; - let instance = ; - instance = ReactTestUtils.renderIntoDocument(instance); + let instance; + const container = document.createElement('div'); + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render( (instance = current)} />); + }); expect(instance.state.occupation).toEqual('clown'); }); @@ -328,8 +340,9 @@ describe('create-react-class-integration', () => { expect(container.firstChild.className).toBe('foo'); }); - it('should throw with non-object getInitialState() return values', () => { - [['an array'], 'a string', 1234].forEach(function (state) { + it('should throw with non-object getInitialState() return values', async () => { + // eslint-disable-next-line no-for-of-loops/no-for-of-loops + for (const state of [['an array'], 'a string', 1234]) { const Component = createReactClass({ getInitialState: function () { return state; @@ -338,16 +351,19 @@ describe('create-react-class-integration', () => { return ; }, }); - let instance = ; - expect(function () { - instance = ReactTestUtils.renderIntoDocument(instance); - }).toThrowError( + const container = document.createElement('div'); + const root = ReactDOMClient.createRoot(container); + await expect( + act(() => { + root.render(); + }), + ).rejects.toThrowError( 'Component.getInitialState(): must return an object or null', ); - }); + } }); - it('should work with a null getInitialState() return value', () => { + it('should work with a null getInitialState() return value', async () => { const Component = createReactClass({ getInitialState: function () { return null; @@ -356,9 +372,13 @@ describe('create-react-class-integration', () => { return ; }, }); - expect(() => - ReactTestUtils.renderIntoDocument(), - ).not.toThrow(); + const container = document.createElement('div'); + const root = ReactDOMClient.createRoot(container); + await expect( + act(() => { + root.render(); + }), + ).resolves.not.toThrow(); }); it('should throw when using legacy factories', () => { @@ -375,7 +395,7 @@ describe('create-react-class-integration', () => { ); }); - it('replaceState and callback works', () => { + it('replaceState and callback works', async () => { const ops = []; const Component = createReactClass({ getInitialState() { @@ -387,10 +407,19 @@ describe('create-react-class-integration', () => { }, }); - const instance = ReactTestUtils.renderIntoDocument(); - instance.replaceState({step: 1}, () => { - ops.push('Callback: ' + instance.state.step); + const container = document.createElement('div'); + const root = ReactDOMClient.createRoot(container); + let instance; + await act(() => { + root.render( (instance = current)} />); + }); + + await act(() => { + instance.replaceState({step: 1}, () => { + ops.push('Callback: ' + instance.state.step); + }); }); + expect(ops).toEqual(['Render: 0', 'Render: 1', 'Callback: 1']); });