{"commit":{"subject":"Remove ReactTestUtils from refs-test (#28336)","shortRevision":"b559f5fefe","authorEmail":"silbermann.sebastian@gmail.com","authorName":"Sebastian Silbermann","revision":"b559f5fefed48a7e95afe3bece9e625d4b4b82a2","authoredAt":"2024-02-20T16:50:17+01:00"},"body":"","files":[{"status":"M","path":"packages\/react-dom\/src\/__tests__\/refs-test.js"}],"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/refs-test.js b\/packages\/react-dom\/src\/__tests__\/refs-test.js\nindex e42661abd5..2018134c32 100644\n--- a\/packages\/react-dom\/src\/__tests__\/refs-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/refs-test.js\n@@ -12,7 +12,6 @@\n let React = require('react');\n let ReactDOMClient = require('react-dom\/client');\n let ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n-let ReactTestUtils = require('react-dom\/test-utils');\n let act = require('internal-test-utils').act;\n \n \/\/ This is testing if string refs are deleted from `instance.refs`\n@@ -26,7 +25,6 @@ describe('reactiverefs', () => {\n React = require('react');\n ReactDOMClient = require('react-dom\/client');\n ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n- ReactTestUtils = require('react-dom\/test-utils');\n act = require('internal-test-utils').act;\n });\n \n@@ -73,10 +71,7 @@ describe('reactiverefs', () => {\n }\n \n const expectClickLogsLengthToBe = function (instance, length) {\n- const clickLogs = ReactTestUtils.scryRenderedDOMComponentsWithClass(\n- instance,\n- 'clickLogDiv',\n- );\n+ const clickLogs = instance.container.querySelectorAll('.clickLogDiv');\n expect(clickLogs.length).toBe(length);\n expect(Object.keys(instance.refs.myCounter.refs).length).toBe(length);\n };\n@@ -101,13 +96,14 @@ describe('reactiverefs', () => {\n * into a different parent.\n *\/\n class TestRefsComponent extends React.Component {\n+ container = null;\n doReset = () => {\n this.refs.myCounter.triggerReset();\n };\n \n render() {\n return (\n-

\n+

(this.container = current)}>\n

\n Reset Me By Clicking This.\n <\/div>\n@@ -170,10 +166,8 @@ describe('reactiverefs', () => {\n *\/\n it('Should increase refs with an increase in divs', async () => {\n const testRefsComponent = await renderTestRefsComponent();\n- const clickIncrementer = ReactTestUtils.findRenderedDOMComponentWithClass(\n- testRefsComponent,\n- 'clickIncrementer',\n- );\n+ const clickIncrementer =\n+ testRefsComponent.container.querySelector('.clickIncrementer');\n \n expectClickLogsLengthToBe(testRefsComponent, 1);\n \n@@ -202,7 +196,7 @@ describe('reactiverefs', () => {\n \n if (!ReactFeatureFlags.disableModulePatternComponents) {\n describe('factory components', () => {\n- it('Should correctly get the ref', () => {\n+ it('Should correctly get the ref', async () => {\n function Comp() {\n return {\n elemRef: React.createRef(),\n@@ -213,9 +207,14 @@ if (!ReactFeatureFlags.disableModulePatternComponents) {\n }\n \n let inst;\n- expect(\n- () => (inst = ReactTestUtils.renderIntoDocument()),\n- ).toErrorDev(\n+ await expect(async () => {\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+\n+ await act(() => {\n+ root.render( (inst = current)} \/>);\n+ });\n+ }).toErrorDev(\n 'Warning: The component appears to be a function component that returns a class instance. ' +\n 'Change Comp to a class that extends React.Component instead. ' +\n \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n@@ -237,10 +236,10 @@ describe('ref swapping', () => {\n React = require('react');\n ReactDOMClient = require('react-dom\/client');\n ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n- ReactTestUtils = require('react-dom\/test-utils');\n act = require('internal-test-utils').act;\n \n RefHopsAround = class extends React.Component {\n+ container = null;\n state = {count: 0};\n hopRef = React.createRef();\n divOneRef = React.createRef();\n@@ -260,7 +259,7 @@ describe('ref swapping', () => {\n * points to the correct divs.\n *\/\n return (\n-

\n+

(this.container = current)}>\n {\n };\n });\n \n- it('Allow refs to hop around children correctly', () => {\n- const refHopsAround = ReactTestUtils.renderIntoDocument();\n+ it('Allow refs to hop around children correctly', async () => {\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n \n- const firstDiv = ReactTestUtils.findRenderedDOMComponentWithClass(\n- refHopsAround,\n- 'first',\n- );\n- const secondDiv = ReactTestUtils.findRenderedDOMComponentWithClass(\n- refHopsAround,\n- 'second',\n- );\n- const thirdDiv = ReactTestUtils.findRenderedDOMComponentWithClass(\n- refHopsAround,\n- 'third',\n- );\n+ let refHopsAround;\n+ await act(() => {\n+ root.render( (refHopsAround = current)} \/>);\n+ });\n+\n+ const firstDiv = refHopsAround.container.querySelector('.first');\n+ const secondDiv = refHopsAround.container.querySelector('.second');\n+ const thirdDiv = refHopsAround.container.querySelector('.third');\n \n expect(refHopsAround.hopRef.current).toEqual(firstDiv);\n expect(refHopsAround.divTwoRef.current).toEqual(secondDiv);\n expect(refHopsAround.divThreeRef.current).toEqual(thirdDiv);\n \n- refHopsAround.moveRef();\n+ await act(() => {\n+ refHopsAround.moveRef();\n+ });\n expect(refHopsAround.divOneRef.current).toEqual(firstDiv);\n expect(refHopsAround.hopRef.current).toEqual(secondDiv);\n expect(refHopsAround.divThreeRef.current).toEqual(thirdDiv);\n \n- refHopsAround.moveRef();\n+ await act(() => {\n+ refHopsAround.moveRef();\n+ });\n expect(refHopsAround.divOneRef.current).toEqual(firstDiv);\n expect(refHopsAround.divTwoRef.current).toEqual(secondDiv);\n expect(refHopsAround.hopRef.current).toEqual(thirdDiv);\n@@ -313,7 +313,9 @@ describe('ref swapping', () => {\n * Make sure that after the third, we're back to where we started and the\n * refs are completely restored.\n *\/\n- refHopsAround.moveRef();\n+ await act(() => {\n+ refHopsAround.moveRef();\n+ });\n expect(refHopsAround.hopRef.current).toEqual(firstDiv);\n expect(refHopsAround.divTwoRef.current).toEqual(secondDiv);\n expect(refHopsAround.divThreeRef.current).toEqual(thirdDiv);\n@@ -364,15 +366,20 @@ describe('ref swapping', () => {\n expect(refCalled).toBe(1);\n });\n \n- it('coerces numbers to strings', () => {\n+ it('coerces numbers to strings', async () => {\n class A extends React.Component {\n render() {\n return

;\n }\n }\n let a;\n- expect(() => {\n- a = ReactTestUtils.renderIntoDocument();\n+ await expect(async () => {\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+\n+ await act(() => {\n+ root.render( (a = current)} \/>);\n+ });\n }).toErrorDev([\n 'Warning: Component \"A\" contains the string ref \"1\". ' +\n 'Support for string refs will be removed in a future major release. ' +\n","parents":["5fb2c93f3924ba980444da5698f60651b5ef0689"]}

dillon1000/react

Files changed