Convert SyntheticClipboardEvent to createRoot (#28174)
Sebastian Silbermann committed
Feb 2, 2024 at 00:49 UTC
bc219090e3c4e54cc504215db13b08c6e8f1bddb
1 file changed
+40
-24
packages/react-dom/src/events/__tests__/SyntheticClipboardEvent-test.js
+40
-24
@@ -10,14 +10,16 @@
10
'use strict';
11
12
let React;
13
-let ReactDOM;
13
+let ReactDOMClient;
14
+let act;
15
16
describe('SyntheticClipboardEvent', () => {
17
let container;
18
19
beforeEach(() => {
20
React = require('react');
20
- ReactDOM = require('react-dom');
21
+ ReactDOMClient = require('react-dom/client');
22
+ act = require('internal-test-utils').act;
23
24
// The container has to be attached for events to fire.
25
container = document.createElement('div');
@@ -32,7 +34,7 @@ describe('SyntheticClipboardEvent', () => {
34
describe('ClipboardEvent interface', () => {
35
describe('clipboardData', () => {
36
describe('when event has clipboardData', () => {
35
- it("returns event's clipboardData", () => {
37
+ it("returns event's clipboardData", async () => {
38
let expectedCount = 0;
39
40
// Mock clipboardData since jsdom implementation doesn't have a constructor
@@ -47,30 +49,39 @@ describe('SyntheticClipboardEvent', () => {
49
expect(event.clipboardData).toBe(clipboardData);
50
expectedCount++;
51
};
50
- const div = ReactDOM.render(
51
- <div
52
- onCopy={eventHandler}
53
- onCut={eventHandler}
54
- onPaste={eventHandler}
55
- />,
56
- container,
57
- );
52
+ const root = ReactDOMClient.createRoot(container);
53
+ await act(() => {
54
+ root.render(
55
+ <div
56
+ onCopy={eventHandler}
57
+ onCut={eventHandler}
58
+ onPaste={eventHandler}
59
+ />,
60
+ );
61
+ });
62
+
63
+ const div = container.firstChild;
64
65
let event;
66
event = document.createEvent('Event');
67
event.initEvent('copy', true, true);
68
event.clipboardData = clipboardData;
63
- div.dispatchEvent(event);
64
-
69
+ await act(() => {
70
+ div.dispatchEvent(event);
71
+ });
72
event = document.createEvent('Event');
73
event.initEvent('cut', true, true);
74
event.clipboardData = clipboardData;
68
- div.dispatchEvent(event);
75
+ await act(() => {
76
+ div.dispatchEvent(event);
77
+ });
78
79
event = document.createEvent('Event');
80
event.initEvent('paste', true, true);
81
event.clipboardData = clipboardData;
73
- div.dispatchEvent(event);
82
+ await act(() => {
83
+ div.dispatchEvent(event);
84
+ });
85
86
expect(expectedCount).toBe(3);
87
});
@@ -79,7 +90,7 @@ describe('SyntheticClipboardEvent', () => {
90
});
91
92
describe('EventInterface', () => {
82
- it('is able to `preventDefault` and `stopPropagation`', () => {
93
+ it('is able to `preventDefault` and `stopPropagation`', async () => {
94
let expectedCount = 0;
95
96
const eventHandler = event => {
@@ -92,14 +103,19 @@ describe('SyntheticClipboardEvent', () => {
103
expectedCount++;
104
};
105
95
- const div = ReactDOM.render(
96
- <div
97
- onCopy={eventHandler}
98
- onCut={eventHandler}
99
- onPaste={eventHandler}
100
- />,
101
- container,
102
- );
106
+ const root = ReactDOMClient.createRoot(container);
107
+
108
+ await act(() => {
109
+ root.render(
110
+ <div
111
+ onCopy={eventHandler}
112
+ onCut={eventHandler}
113
+ onPaste={eventHandler}
114
+ />,
115
+ );
116
+ });
117
+
118
+ const div = container.firstChild;
119
120
let event;
121
event = document.createEvent('Event');