{"parents":["3e58b0af0caebf5f1b507ce5f360c85cb57bf528"],"files":[{"status":"M","path":"packages\/react-dom\/src\/__tests__\/refs-test.js"},{"status":"A","path":"packages\/react-dom\/src\/__tests__\/refsLegacy-test.js"}],"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/refs-test.js b\/packages\/react-dom\/src\/__tests__\/refs-test.js\nindex 355ce3d18c..e42661abd5 100644\n--- a\/packages\/react-dom\/src\/__tests__\/refs-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/refs-test.js\n@@ -10,9 +10,10 @@\n 'use strict';\n \n let React = require('react');\n-let ReactDOM = require('react-dom');\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 \/\/ Once support for string refs is removed, this test can be removed.\n@@ -23,9 +24,10 @@ describe('reactiverefs', () => {\n beforeEach(() => {\n jest.resetModules();\n React = require('react');\n- ReactDOM = require('react-dom');\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 afterEach(() => {\n@@ -82,7 +84,7 @@ describe('reactiverefs', () => {\n \/**\n * Render a TestRefsComponent and ensure that the main refs are wired up.\n *\/\n- const renderTestRefsComponent = function () {\n+ const renderTestRefsComponent = async function () {\n \/**\n * Only purpose is to test that refs are tracked even when applied to a\n * component that is injected down several layers. Ref systems are difficult to\n@@ -121,8 +123,17 @@ describe('reactiverefs', () => {\n document.body.appendChild(container);\n \n let testRefsComponent;\n- expect(() => {\n- testRefsComponent = ReactDOM.render(, container);\n+ await expect(async () => {\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(\n+ {\n+ testRefsComponent = current;\n+ }}\n+ \/>,\n+ );\n+ });\n }).toErrorDev([\n 'Warning: Component \"div\" contains the string ref \"resetDiv\". ' +\n 'Support for string refs will be removed in a future major release. ' +\n@@ -157,8 +168,8 @@ describe('reactiverefs', () => {\n * Ensure that for every click log there is a corresponding ref (from the\n * perspective of the injected ClickCounter component.\n *\/\n- it('Should increase refs with an increase in divs', () => {\n- const testRefsComponent = renderTestRefsComponent();\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@@ -171,14 +182,20 @@ describe('reactiverefs', () => {\n expectClickLogsLengthToBe(testRefsComponent, 1);\n \n \/\/ Begin incrementing clicks (and therefore refs).\n- clickIncrementer.click();\n+ await act(() => {\n+ clickIncrementer.click();\n+ });\n expectClickLogsLengthToBe(testRefsComponent, 2);\n \n- clickIncrementer.click();\n+ await act(() => {\n+ clickIncrementer.click();\n+ });\n expectClickLogsLengthToBe(testRefsComponent, 3);\n \n \/\/ Now reset again\n- testRefsComponent.refs.resetDiv.click();\n+ await act(() => {\n+ testRefsComponent.refs.resetDiv.click();\n+ });\n expectClickLogsLengthToBe(testRefsComponent, 1);\n });\n });\n@@ -218,9 +235,10 @@ describe('ref swapping', () => {\n beforeEach(() => {\n jest.resetModules();\n React = require('react');\n- ReactDOM = require('react-dom');\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 state = {count: 0};\n@@ -301,18 +319,23 @@ describe('ref swapping', () => {\n expect(refHopsAround.divThreeRef.current).toEqual(thirdDiv);\n });\n \n- it('always has a value for this.refs', () => {\n+ it('always has a value for this.refs', async () => {\n class Component extends React.Component {\n render() {\n return

;\n }\n }\n \n- const instance = ReactTestUtils.renderIntoDocument();\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ let instance;\n+ await act(() => {\n+ root.render( (instance = current)} \/>);\n+ });\n expect(!!instance.refs).toBe(true);\n });\n \n- it('ref called correctly for stateless component', () => {\n+ it('ref called correctly for stateless component', async () => {\n let refCalled = 0;\n function Inner(props) {\n return ;\n@@ -332,7 +355,12 @@ describe('ref swapping', () => {\n }\n }\n \n- ReactTestUtils.renderIntoDocument();\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+\n expect(refCalled).toBe(1);\n });\n \n@@ -355,58 +383,80 @@ describe('ref swapping', () => {\n expect(a.refs[1].nodeName).toBe('DIV');\n });\n \n- it('provides an error for invalid refs', () => {\n- expect(() => {\n- ReactTestUtils.renderIntoDocument(

);\n- }).toThrow(\n+ it('provides an error for invalid refs', async () => {\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await expect(async () => {\n+ await act(() => {\n+ root.render(

);\n+ });\n+ }).rejects.toThrow(\n 'Expected ref to be a function, a string, an object returned by React.createRef(), or null.',\n );\n- expect(() => {\n- ReactTestUtils.renderIntoDocument(

);\n- }).toThrow(\n+ await expect(async () => {\n+ await act(() => {\n+ root.render(

);\n+ });\n+ }).rejects.toThrow(\n 'Expected ref to be a function, a string, an object returned by React.createRef(), or null.',\n );\n- expect(() => {\n- ReactTestUtils.renderIntoDocument(

);\n- }).toThrow(\n+ await expect(async () => {\n+ await act(() => {\n+ root.render(

);\n+ });\n+ }).rejects.toThrow(\n 'Expected ref to be a function, a string, an object returned by React.createRef(), or null.',\n );\n- \/\/ This works\n- ReactTestUtils.renderIntoDocument(

);\n- ReactTestUtils.renderIntoDocument({\n- $$typeof: Symbol.for('react.element'),\n- type: 'div',\n- props: {},\n- key: null,\n- ref: null,\n+\n+ await act(() => {\n+ root.render(

);\n });\n- \/\/ But this doesn't\n- expect(() => {\n- ReactTestUtils.renderIntoDocument({\n+\n+ await act(() => {\n+ root.render({\n $$typeof: Symbol.for('react.element'),\n type: 'div',\n props: {},\n key: null,\n- ref: undefined,\n+ ref: null,\n+ });\n+ });\n+\n+ \/\/ But this doesn't\n+ await expect(async () => {\n+ await act(() => {\n+ root.render({\n+ $$typeof: Symbol.for('react.element'),\n+ type: 'div',\n+ props: {},\n+ key: null,\n+ ref: undefined,\n+ });\n });\n- }).toThrow(\n+ }).rejects.toThrow(\n 'Expected ref to be a function, a string, an object returned by React.createRef(), or null.',\n );\n });\n });\n \n describe('root level refs', () => {\n- it('attaches and detaches root refs', () => {\n+ it('attaches and detaches root refs', async () => {\n let inst = null;\n \n \/\/ host node\n let ref = jest.fn(value => (inst = value));\n const container = document.createElement('div');\n- let result = ReactDOM.render(

, container);\n+ let root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(

);\n+ });\n+ let result = container.firstChild;\n expect(ref).toHaveBeenCalledTimes(1);\n expect(ref.mock.calls[0][0]).toBeInstanceOf(HTMLDivElement);\n expect(result).toBe(ref.mock.calls[0][0]);\n- ReactDOM.unmountComponentAtNode(container);\n+ await act(() => {\n+ root.unmount();\n+ });\n expect(ref).toHaveBeenCalledTimes(2);\n expect(ref.mock.calls[1][0]).toBe(null);\n \n@@ -422,17 +472,20 @@ describe('root level refs', () => {\n \n inst = null;\n ref = jest.fn(value => (inst = value));\n- result = ReactDOM.render(, container);\n+ root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n \n expect(ref).toHaveBeenCalledTimes(1);\n expect(inst).toBeInstanceOf(Comp);\n- expect(result).toBe(inst);\n \n \/\/ ensure we have the correct instance\n- expect(result.method()).toBe(true);\n expect(inst.method()).toBe(true);\n \n- ReactDOM.unmountComponentAtNode(container);\n+ await act(() => {\n+ root.unmount();\n+ });\n expect(ref).toHaveBeenCalledTimes(2);\n expect(ref.mock.calls[1][0]).toBe(null);\n \n@@ -441,38 +494,45 @@ describe('root level refs', () => {\n ref = jest.fn(value => (inst = value));\n let divInst = null;\n const ref2 = jest.fn(value => (divInst = value));\n- result = ReactDOM.render(\n- [\n+ root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render([\n ,\n 5,\n

{}} \/>, container);\n+ await act(() => {\n+ root.render(

dillon1000/react

Files changed