{"body":"","parents":["ee1eb4826f4f7beb4e06f2c15f03145bb5bddf5b"],"files":[{"status":"M","path":"packages\/react-dom\/src\/__tests__\/refs-destruction-test.js"}],"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/refs-destruction-test.js b\/packages\/react-dom\/src\/__tests__\/refs-destruction-test.js\nindex d8a3e750b8..97009c9e77 100644\n--- a\/packages\/react-dom\/src\/__tests__\/refs-destruction-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/refs-destruction-test.js\n@@ -11,9 +11,12 @@\n \n let React;\n let ReactDOM;\n+let ReactDOMClient;\n let ReactTestUtils;\n-\n let TestComponent;\n+let act;\n+let theInnerDivRef;\n+let theInnerClassComponentRef;\n \n describe('refs-destruction', () => {\n beforeEach(() => {\n@@ -21,7 +24,9 @@ describe('refs-destruction', () => {\n \n React = require('react');\n ReactDOM = require('react-dom');\n+ ReactDOMClient = require('react-dom\/client');\n ReactTestUtils = require('react-dom\/test-utils');\n+ act = require('internal-test-utils').act;\n \n class ClassComponent extends React.Component {\n render() {\n@@ -30,8 +35,11 @@ describe('refs-destruction', () => {\n }\n \n TestComponent = class extends React.Component {\n- theInnerDivRef = React.createRef();\n- theInnerClassComponentRef = React.createRef();\n+ constructor(props) {\n+ super(props);\n+ theInnerDivRef = React.createRef();\n+ theInnerClassComponentRef = React.createRef();\n+ }\n \n render() {\n if (this.props.destroy) {\n@@ -46,8 +54,8 @@ describe('refs-destruction', () => {\n } else {\n return (\n

\n-

\n- \n+

\n+ \n <\/div>\n );\n }\n@@ -55,60 +63,79 @@ describe('refs-destruction', () => {\n };\n });\n \n- it('should remove refs when destroying the parent', () => {\n+ afterEach(() => {\n+ theInnerClassComponentRef = null;\n+ theInnerDivRef = null;\n+ });\n+\n+ it('should remove refs when destroying the parent', async () => {\n const container = document.createElement('div');\n- const testInstance = ReactDOM.render(, container);\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render();\n+ });\n \n- expect(\n- ReactTestUtils.isDOMComponent(testInstance.theInnerDivRef.current),\n- ).toBe(true);\n- expect(testInstance.theInnerClassComponentRef.current).toBeTruthy();\n+ expect(ReactTestUtils.isDOMComponent(theInnerDivRef.current)).toBe(true);\n+ expect(theInnerClassComponentRef.current).toBeTruthy();\n \n- ReactDOM.unmountComponentAtNode(container);\n+ root.unmount();\n \n- expect(testInstance.theInnerDivRef.current).toBe(null);\n- expect(testInstance.theInnerClassComponentRef.current).toBe(null);\n+ expect(theInnerDivRef.current).toBe(null);\n+ expect(theInnerClassComponentRef.current).toBe(null);\n });\n \n- it('should remove refs when destroying the child', () => {\n+ it('should remove refs when destroying the child', async () => {\n const container = document.createElement('div');\n- const testInstance = ReactDOM.render(, container);\n- expect(\n- ReactTestUtils.isDOMComponent(testInstance.theInnerDivRef.current),\n- ).toBe(true);\n- expect(testInstance.theInnerClassComponentRef.current).toBeTruthy();\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render();\n+ });\n+\n+ expect(ReactTestUtils.isDOMComponent(theInnerDivRef.current)).toBe(true);\n+ expect(theInnerClassComponentRef.current).toBeTruthy();\n \n- ReactDOM.render(, container);\n+ await act(async () => {\n+ root.render();\n+ });\n \n- expect(testInstance.theInnerDivRef.current).toBe(null);\n- expect(testInstance.theInnerClassComponentRef.current).toBe(null);\n+ expect(theInnerDivRef.current).toBe(null);\n+ expect(theInnerClassComponentRef.current).toBe(null);\n });\n \n- it('should remove refs when removing the child ref attribute', () => {\n+ it('should remove refs when removing the child ref attribute', async () => {\n const container = document.createElement('div');\n- const testInstance = ReactDOM.render(, container);\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render();\n+ });\n \n- expect(\n- ReactTestUtils.isDOMComponent(testInstance.theInnerDivRef.current),\n- ).toBe(true);\n- expect(testInstance.theInnerClassComponentRef.current).toBeTruthy();\n+ expect(ReactTestUtils.isDOMComponent(theInnerDivRef.current)).toBe(true);\n+ expect(theInnerClassComponentRef.current).toBeTruthy();\n \n- ReactDOM.render(, container);\n+ await act(async () => {\n+ root.render();\n+ });\n \n- expect(testInstance.theInnerDivRef.current).toBe(null);\n- expect(testInstance.theInnerClassComponentRef.current).toBe(null);\n+ expect(theInnerDivRef.current).toBe(null);\n+ expect(theInnerClassComponentRef.current).toBe(null);\n });\n \n- it('should not error when destroying child with ref asynchronously', () => {\n+ it('should not error when destroying child with ref asynchronously', async () => {\n+ let nestedRoot;\n class Modal extends React.Component {\n componentDidMount() {\n this.div = document.createElement('div');\n+ nestedRoot = ReactDOMClient.createRoot(this.div);\n document.body.appendChild(this.div);\n this.componentDidUpdate();\n }\n \n componentDidUpdate() {\n- ReactDOM.render(

{this.props.children}<\/div>, this.div);\n+ setTimeout(() => {\n+ ReactDOM.flushSync(() => {\n+ nestedRoot.render(

{this.props.children}<\/div>);\n+ });\n+ }, 0);\n }\n \n componentWillUnmount() {\n@@ -116,7 +143,7 @@ describe('refs-destruction', () => {\n \/\/ some async animation\n setTimeout(function () {\n expect(function () {\n- ReactDOM.unmountComponentAtNode(self.div);\n+ nestedRoot.unmount();\n }).not.toThrow();\n document.body.removeChild(self.div);\n }, 0);\n@@ -144,8 +171,12 @@ describe('refs-destruction', () => {\n }\n \n const container = document.createElement('div');\n- ReactDOM.render(, container);\n- ReactDOM.render(

dillon1000/react

Files changed