{"patch":"diff --git a\/packages\/react-dom\/src\/events\/plugins\/__tests__\/EnterLeaveEventPlugin-test.js b\/packages\/react-dom\/src\/events\/plugins\/__tests__\/EnterLeaveEventPlugin-test.js\nindex f6a9232e87..569a29a22a 100644\n--- a\/packages\/react-dom\/src\/events\/plugins\/__tests__\/EnterLeaveEventPlugin-test.js\n+++ b\/packages\/react-dom\/src\/events\/plugins\/__tests__\/EnterLeaveEventPlugin-test.js\n@@ -11,6 +11,8 @@\n \n let React;\n let ReactDOM;\n+let ReactDOMClient;\n+let act;\n \n describe('EnterLeaveEventPlugin', () => {\n let container;\n@@ -20,6 +22,8 @@ describe('EnterLeaveEventPlugin', () => {\n \n React = require('react');\n ReactDOM = require('react-dom');\n+ ReactDOMClient = require('react-dom\/client');\n+ act = require('internal-test-utils').act;\n \n \/\/ The container has to be attached for events to fire.\n container = document.createElement('div');\n@@ -31,7 +35,7 @@ describe('EnterLeaveEventPlugin', () => {\n container = null;\n });\n \n- it('should set onMouseLeave relatedTarget properly in iframe', () => {\n+ it('should set onMouseLeave relatedTarget properly in iframe', async () => {\n const iframe = document.createElement('iframe');\n container.appendChild(iframe);\n const iframeDocument = iframe.contentDocument;\n@@ -41,30 +45,36 @@ describe('EnterLeaveEventPlugin', () => {\n iframeDocument.close();\n \n const leaveEvents = [];\n- const node = ReactDOM.render(\n- {\n- e.persist();\n- leaveEvents.push(e);\n- }}\n- \/>,\n+ const root = ReactDOMClient.createRoot(\n iframeDocument.body.getElementsByTagName('div')[0],\n );\n-\n- node.dispatchEvent(\n- new MouseEvent('mouseout', {\n- bubbles: true,\n- cancelable: true,\n- relatedTarget: iframe.contentWindow,\n- }),\n- );\n+ await act(() => {\n+ root.render(\n+ {\n+ e.persist();\n+ leaveEvents.push(e);\n+ }}\n+ \/>,\n+ );\n+ });\n+ const node = iframeDocument.body.getElementsByTagName('div')[0].firstChild;\n+ await act(() => {\n+ node.dispatchEvent(\n+ new MouseEvent('mouseout', {\n+ bubbles: true,\n+ cancelable: true,\n+ relatedTarget: iframe.contentWindow,\n+ }),\n+ );\n+ });\n \n expect(leaveEvents.length).toBe(1);\n expect(leaveEvents[0].target).toBe(node);\n expect(leaveEvents[0].relatedTarget).toBe(iframe.contentWindow);\n });\n \n- it('should set onMouseEnter relatedTarget properly in iframe', () => {\n+ it('should set onMouseEnter relatedTarget properly in iframe', async () => {\n const iframe = document.createElement('iframe');\n container.appendChild(iframe);\n const iframeDocument = iframe.contentDocument;\n@@ -74,23 +84,29 @@ describe('EnterLeaveEventPlugin', () => {\n iframeDocument.close();\n \n const enterEvents = [];\n- const node = ReactDOM.render(\n- {\n- e.persist();\n- enterEvents.push(e);\n- }}\n- \/>,\n+ const root = ReactDOMClient.createRoot(\n iframeDocument.body.getElementsByTagName('div')[0],\n );\n-\n- node.dispatchEvent(\n- new MouseEvent('mouseover', {\n- bubbles: true,\n- cancelable: true,\n- relatedTarget: null,\n- }),\n- );\n+ await act(() => {\n+ root.render(\n+ {\n+ e.persist();\n+ enterEvents.push(e);\n+ }}\n+ \/>,\n+ );\n+ });\n+ const node = iframeDocument.body.getElementsByTagName('div')[0].firstChild;\n+ await act(() => {\n+ node.dispatchEvent(\n+ new MouseEvent('mouseover', {\n+ bubbles: true,\n+ cancelable: true,\n+ relatedTarget: null,\n+ }),\n+ );\n+ });\n \n expect(enterEvents.length).toBe(1);\n expect(enterEvents[0].target).toBe(node);\n@@ -98,7 +114,7 @@ describe('EnterLeaveEventPlugin', () => {\n });\n \n \/\/ Regression test for https:\/\/github.com\/facebook\/react\/issues\/10906.\n- it('should find the common parent after updates', () => {\n+ it('should find the common parent after updates', async () => {\n let parentEnterCalls = 0;\n let childEnterCalls = 0;\n let parent = null;\n@@ -117,18 +133,24 @@ describe('EnterLeaveEventPlugin', () => {\n }\n }\n \n- ReactDOM.render(, container);\n- \/\/ The issue only reproduced on insertion during the first update.\n- ReactDOM.render(, container);\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+ await act(() => {\n+ root.render();\n+ });\n \n \/\/ Enter from parent into the child.\n- parent.dispatchEvent(\n- new MouseEvent('mouseout', {\n- bubbles: true,\n- cancelable: true,\n- relatedTarget: parent.firstChild,\n- }),\n- );\n+ await act(() => {\n+ parent.dispatchEvent(\n+ new MouseEvent('mouseout', {\n+ bubbles: true,\n+ cancelable: true,\n+ relatedTarget: parent.firstChild,\n+ }),\n+ );\n+ });\n \n \/\/ Entering a child should fire on the child, not on the parent.\n expect(childEnterCalls).toBe(1);\n@@ -136,7 +158,7 @@ describe('EnterLeaveEventPlugin', () => {\n });\n \n \/\/ Test for https:\/\/github.com\/facebook\/react\/issues\/16763.\n- it('should call mouseEnter once from sibling rendered inside a rendered component', done => {\n+ it('should call mouseEnter once from sibling rendered inside a rendered component in legacy roots', done => {\n const mockFn = jest.fn();\n \n class Parent extends React.Component {\n@@ -186,7 +208,7 @@ describe('EnterLeaveEventPlugin', () => {\n ReactDOM.render(, container);\n });\n \n- it('should call mouseEnter when pressing a non tracked React node', done => {\n+ it('should call mouseEnter when pressing a non tracked React node in legacy root', done => {\n const mockFn = jest.fn();\n \n class Parent extends React.Component {\n@@ -237,7 +259,7 @@ describe('EnterLeaveEventPlugin', () => {\n ReactDOM.render(, container);\n });\n \n- it('should work with portals outside of the root that has onMouseLeave', () => {\n+ it('should work with portals outside of the root that has onMouseLeave', async () => {\n const divRef = React.createRef();\n const onMouseLeave = jest.fn();\n \n@@ -249,21 +271,27 @@ describe('EnterLeaveEventPlugin', () => {\n );\n }\n \n- ReactDOM.render(, container);\n+ const root = ReactDOMClient.createRoot(container);\n+\n+ await act(() => {\n+ root.render();\n+ });\n \n \/\/ Leave from the portal div\n- divRef.current.dispatchEvent(\n- new MouseEvent('mouseout', {\n- bubbles: true,\n- cancelable: true,\n- relatedTarget: document.body,\n- }),\n- );\n+ await act(() => {\n+ divRef.current.dispatchEvent(\n+ new MouseEvent('mouseout', {\n+ bubbles: true,\n+ cancelable: true,\n+ relatedTarget: document.body,\n+ }),\n+ );\n+ });\n \n expect(onMouseLeave).toHaveBeenCalledTimes(1);\n });\n \n- it('should work with portals that have onMouseEnter outside of the root ', () => {\n+ it('should work with portals that have onMouseEnter outside of the root ', async () => {\n const divRef = React.createRef();\n const otherDivRef = React.createRef();\n const onMouseEnter = jest.fn();\n@@ -279,7 +307,11 @@ describe('EnterLeaveEventPlugin', () => {\n );\n }\n \n- ReactDOM.render(, container);\n+ const root = ReactDOMClient.createRoot(container);\n+\n+ await act(() => {\n+ root.render();\n+ });\n \n \/\/ Leave from the portal div\n divRef.current.dispatchEvent(\n","commit":{"authoredAt":"2024-02-02T09:14:52+01:00","subject":"Convert EnterLeaveEventPlugin to createRoot (#28182)","shortRevision":"796d05e82c","authorEmail":"silbermann.sebastian@gmail.com","authorName":"Sebastian Silbermann","revision":"796d05e82c26d252215d764f2a947f7a11cbcba0"},"parents":["f8b26862d6fdd4708a78638b697f37cebfb074db"],"files":[{"status":"M","path":"packages\/react-dom\/src\/events\/plugins\/__tests__\/EnterLeaveEventPlugin-test.js"}],"body":""}

dillon1000/react

Files changed