Convert SyntheticMouseEvent to createRoot (#28200)
Sebastian Silbermann committed
Feb 2, 2024 at 16:52 UTC
4b2a1115a743fc24d37ae1174d0568e8a3798095
1 file changed
+41
-23
packages/react-dom/src/events/__tests__/SyntheticMouseEvent-test.js
+41
-23
@@ -10,7 +10,8 @@
10
'use strict';
11
12
let React;
13
-let ReactDOM;
13
+let ReactDOMClient;
14
+let act;
15
16
describe('SyntheticMouseEvent', () => {
17
let container;
@@ -18,7 +19,8 @@ describe('SyntheticMouseEvent', () => {
19
beforeEach(() => {
20
jest.resetModules();
21
React = require('react');
21
- ReactDOM = require('react-dom');
22
+ ReactDOMClient = require('react-dom/client');
23
+ act = require('internal-test-utils').act;
24
25
// The container has to be attached for events to fire.
26
container = document.createElement('div');
@@ -30,7 +32,7 @@ describe('SyntheticMouseEvent', () => {
32
container = null;
33
});
34
33
- it('should only use values from movementX/Y when event type is mousemove', () => {
35
+ it('should only use values from movementX/Y when event type is mousemove', async () => {
36
const events = [];
37
const onMouseMove = event => {
38
events.push(event.movementX);
@@ -40,10 +42,11 @@ describe('SyntheticMouseEvent', () => {
42
events.push(event.movementX);
43
};
44
43
- const node = ReactDOM.render(
44
- <div onMouseMove={onMouseMove} onMouseDown={onMouseDown} />,
45
- container,
46
- );
45
+ const root = ReactDOMClient.createRoot(container);
46
+ await act(() => {
47
+ root.render(<div onMouseMove={onMouseMove} onMouseDown={onMouseDown} />);
48
+ });
49
+ const node = container.firstChild;
50
51
let event = new MouseEvent('mousemove', {
52
relatedTarget: null,
@@ -52,7 +55,9 @@ describe('SyntheticMouseEvent', () => {
55
screenY: 2,
56
});
57
55
- node.dispatchEvent(event);
58
+ await act(() => {
59
+ node.dispatchEvent(event);
60
+ });
61
62
event = new MouseEvent('mousemove', {
63
relatedTarget: null,
@@ -61,7 +66,9 @@ describe('SyntheticMouseEvent', () => {
66
screenY: 8,
67
});
68
64
- node.dispatchEvent(event);
69
+ await act(() => {
70
+ node.dispatchEvent(event);
71
+ });
72
73
// Now trigger a mousedown event to see if movementX has changed back to 0
74
event = new MouseEvent('mousedown', {
@@ -71,7 +78,9 @@ describe('SyntheticMouseEvent', () => {
78
screenY: 65,
79
});
80
74
- node.dispatchEvent(event);
81
+ await act(() => {
82
+ node.dispatchEvent(event);
83
+ });
84
85
expect(events.length).toBe(3);
86
expect(events[0]).toBe(0);
@@ -79,7 +88,7 @@ describe('SyntheticMouseEvent', () => {
88
expect(events[2]).toBe(0); // mousedown event should have movementX at 0
89
});
90
82
- it('should correctly calculate movementX/Y for capture phase', () => {
91
+ it('should correctly calculate movementX/Y for capture phase', async () => {
92
const events = [];
93
const onMouseMove = event => {
94
events.push(['move', false, event.movementX, event.movementY]);
@@ -94,15 +103,18 @@ describe('SyntheticMouseEvent', () => {
103
events.push(['down', true, event.movementX, event.movementY]);
104
};
105
97
- const node = ReactDOM.render(
98
- <div
99
- onMouseMove={onMouseMove}
100
- onMouseMoveCapture={onMouseMoveCapture}
101
- onMouseDown={onMouseDown}
102
- onMouseDownCapture={onMouseDownCapture}
103
- />,
104
- container,
105
- );
106
+ const root = ReactDOMClient.createRoot(container);
107
+ await act(() => {
108
+ root.render(
109
+ <div
110
+ onMouseMove={onMouseMove}
111
+ onMouseMoveCapture={onMouseMoveCapture}
112
+ onMouseDown={onMouseDown}
113
+ onMouseDownCapture={onMouseDownCapture}
114
+ />,
115
+ );
116
+ });
117
+ const node = container.firstChild;
118
119
let event = new MouseEvent('mousemove', {
120
relatedTarget: null,
@@ -111,7 +123,9 @@ describe('SyntheticMouseEvent', () => {
123
screenY: 2,
124
});
125
114
- node.dispatchEvent(event);
126
+ await act(() => {
127
+ node.dispatchEvent(event);
128
+ });
129
130
event = new MouseEvent('mousemove', {
131
relatedTarget: null,
@@ -120,7 +134,9 @@ describe('SyntheticMouseEvent', () => {
134
screenY: 9,
135
});
136
123
- node.dispatchEvent(event);
137
+ await act(() => {
138
+ node.dispatchEvent(event);
139
+ });
140
141
// Now trigger a mousedown event to see if movementX has changed back to 0
142
event = new MouseEvent('mousedown', {
@@ -130,7 +146,9 @@ describe('SyntheticMouseEvent', () => {
146
screenY: 65,
147
});
148
133
- node.dispatchEvent(event);
149
+ await act(() => {
150
+ node.dispatchEvent(event);
151
+ });
152
153
expect(events).toEqual([
154
['move', true, 0, 0],