Convert EnterLeaveEventPlugin to createRoot (#28182)
Sebastian Silbermann committed
Feb 2, 2024 at 09:14 UTC
796d05e82c26d252215d764f2a947f7a11cbcba0
1 file changed
+88
-56
packages/react-dom/src/events/plugins/__tests__/EnterLeaveEventPlugin-test.js
+88
-56
@@ -11,6 +11,8 @@
11
12
let React;
13
let ReactDOM;
14
+let ReactDOMClient;
15
+let act;
16
17
describe('EnterLeaveEventPlugin', () => {
18
let container;
@@ -20,6 +22,8 @@ describe('EnterLeaveEventPlugin', () => {
22
23
React = require('react');
24
ReactDOM = require('react-dom');
25
+ ReactDOMClient = require('react-dom/client');
26
+ act = require('internal-test-utils').act;
27
28
// The container has to be attached for events to fire.
29
container = document.createElement('div');
@@ -31,7 +35,7 @@ describe('EnterLeaveEventPlugin', () => {
35
container = null;
36
});
37
34
- it('should set onMouseLeave relatedTarget properly in iframe', () => {
38
+ it('should set onMouseLeave relatedTarget properly in iframe', async () => {
39
const iframe = document.createElement('iframe');
40
container.appendChild(iframe);
41
const iframeDocument = iframe.contentDocument;
@@ -41,30 +45,36 @@ describe('EnterLeaveEventPlugin', () => {
45
iframeDocument.close();
46
47
const leaveEvents = [];
44
- const node = ReactDOM.render(
45
- <div
46
- onMouseLeave={e => {
47
- e.persist();
48
- leaveEvents.push(e);
49
- }}
50
- />,
48
+ const root = ReactDOMClient.createRoot(
49
iframeDocument.body.getElementsByTagName('div')[0],
50
);
53
-
54
- node.dispatchEvent(
55
- new MouseEvent('mouseout', {
56
- bubbles: true,
57
- cancelable: true,
58
- relatedTarget: iframe.contentWindow,
59
- }),
60
- );
51
+ await act(() => {
52
+ root.render(
53
+ <div
54
+ onMouseLeave={e => {
55
+ e.persist();
56
+ leaveEvents.push(e);
57
+ }}
58
+ />,
59
+ );
60
+ });
61
+ const node = iframeDocument.body.getElementsByTagName('div')[0].firstChild;
62
+ await act(() => {
63
+ node.dispatchEvent(
64
+ new MouseEvent('mouseout', {
65
+ bubbles: true,
66
+ cancelable: true,
67
+ relatedTarget: iframe.contentWindow,
68
+ }),
69
+ );
70
+ });
71
72
expect(leaveEvents.length).toBe(1);
73
expect(leaveEvents[0].target).toBe(node);
74
expect(leaveEvents[0].relatedTarget).toBe(iframe.contentWindow);
75
});
76
67
- it('should set onMouseEnter relatedTarget properly in iframe', () => {
77
+ it('should set onMouseEnter relatedTarget properly in iframe', async () => {
78
const iframe = document.createElement('iframe');
79
container.appendChild(iframe);
80
const iframeDocument = iframe.contentDocument;
@@ -74,23 +84,29 @@ describe('EnterLeaveEventPlugin', () => {
84
iframeDocument.close();
85
86
const enterEvents = [];
77
- const node = ReactDOM.render(
78
- <div
79
- onMouseEnter={e => {
80
- e.persist();
81
- enterEvents.push(e);
82
- }}
83
- />,
87
+ const root = ReactDOMClient.createRoot(
88
iframeDocument.body.getElementsByTagName('div')[0],
89
);
86
-
87
- node.dispatchEvent(
88
- new MouseEvent('mouseover', {
89
- bubbles: true,
90
- cancelable: true,
91
- relatedTarget: null,
92
- }),
93
- );
90
+ await act(() => {
91
+ root.render(
92
+ <div
93
+ onMouseEnter={e => {
94
+ e.persist();
95
+ enterEvents.push(e);
96
+ }}
97
+ />,
98
+ );
99
+ });
100
+ const node = iframeDocument.body.getElementsByTagName('div')[0].firstChild;
101
+ await act(() => {
102
+ node.dispatchEvent(
103
+ new MouseEvent('mouseover', {
104
+ bubbles: true,
105
+ cancelable: true,
106
+ relatedTarget: null,
107
+ }),
108
+ );
109
+ });
110
111
expect(enterEvents.length).toBe(1);
112
expect(enterEvents[0].target).toBe(node);
@@ -98,7 +114,7 @@ describe('EnterLeaveEventPlugin', () => {
114
});
115
116
// Regression test for https://github.com/facebook/react/issues/10906.
101
- it('should find the common parent after updates', () => {
117
+ it('should find the common parent after updates', async () => {
118
let parentEnterCalls = 0;
119
let childEnterCalls = 0;
120
let parent = null;
@@ -117,18 +133,24 @@ describe('EnterLeaveEventPlugin', () => {
133
}
134
}
135
120
- ReactDOM.render(<Parent />, container);
121
- // The issue only reproduced on insertion during the first update.
122
- ReactDOM.render(<Parent showChild={true} />, container);
136
+ const root = ReactDOMClient.createRoot(container);
137
+ await act(() => {
138
+ root.render(<Parent />);
139
+ });
140
+ await act(() => {
141
+ root.render(<Parent showChild={true} />);
142
+ });
143
144
// Enter from parent into the child.
125
- parent.dispatchEvent(
126
- new MouseEvent('mouseout', {
127
- bubbles: true,
128
- cancelable: true,
129
- relatedTarget: parent.firstChild,
130
- }),
131
- );
145
+ await act(() => {
146
+ parent.dispatchEvent(
147
+ new MouseEvent('mouseout', {
148
+ bubbles: true,
149
+ cancelable: true,
150
+ relatedTarget: parent.firstChild,
151
+ }),
152
+ );
153
+ });
154
155
// Entering a child should fire on the child, not on the parent.
156
expect(childEnterCalls).toBe(1);
@@ -136,7 +158,7 @@ describe('EnterLeaveEventPlugin', () => {
158
});
159
160
// Test for https://github.com/facebook/react/issues/16763.
139
- it('should call mouseEnter once from sibling rendered inside a rendered component', done => {
161
+ it('should call mouseEnter once from sibling rendered inside a rendered component in legacy roots', done => {
162
const mockFn = jest.fn();
163
164
class Parent extends React.Component {
@@ -186,7 +208,7 @@ describe('EnterLeaveEventPlugin', () => {
208
ReactDOM.render(<Parent />, container);
209
});
210
189
- it('should call mouseEnter when pressing a non tracked React node', done => {
211
+ it('should call mouseEnter when pressing a non tracked React node in legacy root', done => {
212
const mockFn = jest.fn();
213
214
class Parent extends React.Component {
@@ -237,7 +259,7 @@ describe('EnterLeaveEventPlugin', () => {
259
ReactDOM.render(<Parent />, container);
260
});
261
240
- it('should work with portals outside of the root that has onMouseLeave', () => {
262
+ it('should work with portals outside of the root that has onMouseLeave', async () => {
263
const divRef = React.createRef();
264
const onMouseLeave = jest.fn();
265
@@ -249,21 +271,27 @@ describe('EnterLeaveEventPlugin', () => {
271
);
272
}
273
252
- ReactDOM.render(<Component />, container);
274
+ const root = ReactDOMClient.createRoot(container);
275
+
276
+ await act(() => {
277
+ root.render(<Component />);
278
+ });
279
280
// Leave from the portal div
255
- divRef.current.dispatchEvent(
256
- new MouseEvent('mouseout', {
257
- bubbles: true,
258
- cancelable: true,
259
- relatedTarget: document.body,
260
- }),
261
- );
281
+ await act(() => {
282
+ divRef.current.dispatchEvent(
283
+ new MouseEvent('mouseout', {
284
+ bubbles: true,
285
+ cancelable: true,
286
+ relatedTarget: document.body,
287
+ }),
288
+ );
289
+ });
290
291
expect(onMouseLeave).toHaveBeenCalledTimes(1);
292
});
293
266
- it('should work with portals that have onMouseEnter outside of the root ', () => {
294
+ it('should work with portals that have onMouseEnter outside of the root ', async () => {
295
const divRef = React.createRef();
296
const otherDivRef = React.createRef();
297
const onMouseEnter = jest.fn();
@@ -279,7 +307,11 @@ describe('EnterLeaveEventPlugin', () => {
307
);
308
}
309
282
- ReactDOM.render(<Component />, container);
310
+ const root = ReactDOMClient.createRoot(container);
311
+
312
+ await act(() => {
313
+ root.render(<Component />);
314
+ });
315
316
// Leave from the portal div
317
divRef.current.dispatchEvent(