diff --git a/packages/react-dom/src/__tests__/refs-test.js b/packages/react-dom/src/__tests__/refs-test.js index e42661abd5a1f..2018134c32511 100644 --- a/packages/react-dom/src/__tests__/refs-test.js +++ b/packages/react-dom/src/__tests__/refs-test.js @@ -12,7 +12,6 @@ let React = require('react'); let ReactDOMClient = require('react-dom/client'); let ReactFeatureFlags = require('shared/ReactFeatureFlags'); -let ReactTestUtils = require('react-dom/test-utils'); let act = require('internal-test-utils').act; // This is testing if string refs are deleted from `instance.refs` @@ -26,7 +25,6 @@ describe('reactiverefs', () => { React = require('react'); ReactDOMClient = require('react-dom/client'); ReactFeatureFlags = require('shared/ReactFeatureFlags'); - ReactTestUtils = require('react-dom/test-utils'); act = require('internal-test-utils').act; }); @@ -73,10 +71,7 @@ describe('reactiverefs', () => { } const expectClickLogsLengthToBe = function (instance, length) { - const clickLogs = ReactTestUtils.scryRenderedDOMComponentsWithClass( - instance, - 'clickLogDiv', - ); + const clickLogs = instance.container.querySelectorAll('.clickLogDiv'); expect(clickLogs.length).toBe(length); expect(Object.keys(instance.refs.myCounter.refs).length).toBe(length); }; @@ -101,13 +96,14 @@ describe('reactiverefs', () => { * into a different parent. */ class TestRefsComponent extends React.Component { + container = null; doReset = () => { this.refs.myCounter.triggerReset(); }; render() { return ( -
+
(this.container = current)}>
Reset Me By Clicking This.
@@ -170,10 +166,8 @@ describe('reactiverefs', () => { */ it('Should increase refs with an increase in divs', async () => { const testRefsComponent = await renderTestRefsComponent(); - const clickIncrementer = ReactTestUtils.findRenderedDOMComponentWithClass( - testRefsComponent, - 'clickIncrementer', - ); + const clickIncrementer = + testRefsComponent.container.querySelector('.clickIncrementer'); expectClickLogsLengthToBe(testRefsComponent, 1); @@ -202,7 +196,7 @@ describe('reactiverefs', () => { if (!ReactFeatureFlags.disableModulePatternComponents) { describe('factory components', () => { - it('Should correctly get the ref', () => { + it('Should correctly get the ref', async () => { function Comp() { return { elemRef: React.createRef(), @@ -213,9 +207,14 @@ if (!ReactFeatureFlags.disableModulePatternComponents) { } let inst; - expect( - () => (inst = ReactTestUtils.renderIntoDocument()), - ).toErrorDev( + await expect(async () => { + const container = document.createElement('div'); + const root = ReactDOMClient.createRoot(container); + + await act(() => { + root.render( (inst = current)} />); + }); + }).toErrorDev( 'Warning: The component appears to be a function component that returns a class instance. ' + 'Change Comp to a class that extends React.Component instead. ' + "If you can't use a class try assigning the prototype on the function as a workaround. " + @@ -237,10 +236,10 @@ describe('ref swapping', () => { React = require('react'); ReactDOMClient = require('react-dom/client'); ReactFeatureFlags = require('shared/ReactFeatureFlags'); - ReactTestUtils = require('react-dom/test-utils'); act = require('internal-test-utils').act; RefHopsAround = class extends React.Component { + container = null; state = {count: 0}; hopRef = React.createRef(); divOneRef = React.createRef(); @@ -260,7 +259,7 @@ describe('ref swapping', () => { * points to the correct divs. */ return ( -
+
(this.container = current)}>
{ }; }); - it('Allow refs to hop around children correctly', () => { - const refHopsAround = ReactTestUtils.renderIntoDocument(); + it('Allow refs to hop around children correctly', async () => { + const container = document.createElement('div'); + const root = ReactDOMClient.createRoot(container); - const firstDiv = ReactTestUtils.findRenderedDOMComponentWithClass( - refHopsAround, - 'first', - ); - const secondDiv = ReactTestUtils.findRenderedDOMComponentWithClass( - refHopsAround, - 'second', - ); - const thirdDiv = ReactTestUtils.findRenderedDOMComponentWithClass( - refHopsAround, - 'third', - ); + let refHopsAround; + await act(() => { + root.render( (refHopsAround = current)} />); + }); + + const firstDiv = refHopsAround.container.querySelector('.first'); + const secondDiv = refHopsAround.container.querySelector('.second'); + const thirdDiv = refHopsAround.container.querySelector('.third'); expect(refHopsAround.hopRef.current).toEqual(firstDiv); expect(refHopsAround.divTwoRef.current).toEqual(secondDiv); expect(refHopsAround.divThreeRef.current).toEqual(thirdDiv); - refHopsAround.moveRef(); + await act(() => { + refHopsAround.moveRef(); + }); expect(refHopsAround.divOneRef.current).toEqual(firstDiv); expect(refHopsAround.hopRef.current).toEqual(secondDiv); expect(refHopsAround.divThreeRef.current).toEqual(thirdDiv); - refHopsAround.moveRef(); + await act(() => { + refHopsAround.moveRef(); + }); expect(refHopsAround.divOneRef.current).toEqual(firstDiv); expect(refHopsAround.divTwoRef.current).toEqual(secondDiv); expect(refHopsAround.hopRef.current).toEqual(thirdDiv); @@ -313,7 +313,9 @@ describe('ref swapping', () => { * Make sure that after the third, we're back to where we started and the * refs are completely restored. */ - refHopsAround.moveRef(); + await act(() => { + refHopsAround.moveRef(); + }); expect(refHopsAround.hopRef.current).toEqual(firstDiv); expect(refHopsAround.divTwoRef.current).toEqual(secondDiv); expect(refHopsAround.divThreeRef.current).toEqual(thirdDiv); @@ -364,15 +366,20 @@ describe('ref swapping', () => { expect(refCalled).toBe(1); }); - it('coerces numbers to strings', () => { + it('coerces numbers to strings', async () => { class A extends React.Component { render() { return