Skip to content

Commit 0137495

Browse files
STRMLSTRML
committed
fix(test): add nodeRef to browser tests for React 19 compatibility
React 19 removed ReactDOM.findDOMNode, so nodeRef is now required for Draggable components. Updated all browser tests to use the nodeRef pattern to fix test failures.
1 parent 729415f commit 0137495

File tree

1 file changed

+69
-11
lines changed

1 file changed

+69
-11
lines changed

‎test/browser/browser.test.js‎

Lines changed: 69 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,11 @@ describe('Browser Tests', () => {
4444
await page.evaluate(() => {
4545
const { React, ReactDOM, Draggable } = window;
4646
const root = document.getElementById('root');
47+
const ref = React.createRef();
4748
ReactDOM.createRoot(root).render(
48-
React.createElement(Draggable, null,
49+
React.createElement(Draggable, { nodeRef: ref },
4950
React.createElement('div', {
51+
ref: ref,
5052
id: 'draggable-test',
5153
style: { width: '100px', height: '100px', background: 'blue' }
5254
})
@@ -78,9 +80,11 @@ describe('Browser Tests', () => {
7880
await page.evaluate(() => {
7981
const { React, ReactDOM, Draggable } = window;
8082
const root = document.getElementById('root');
83+
const ref = React.createRef();
8184
ReactDOM.createRoot(root).render(
82-
React.createElement(Draggable, { axis: 'x' },
85+
React.createElement(Draggable, { axis: 'x', nodeRef: ref },
8386
React.createElement('div', {
87+
ref: ref,
8488
id: 'draggable-test',
8589
style: { width: '100px', height: '100px', background: 'blue' }
8690
})
@@ -106,9 +110,11 @@ describe('Browser Tests', () => {
106110
await page.evaluate(() => {
107111
const { React, ReactDOM, Draggable } = window;
108112
const root = document.getElementById('root');
113+
const ref = React.createRef();
109114
ReactDOM.createRoot(root).render(
110-
React.createElement(Draggable, { axis: 'y' },
115+
React.createElement(Draggable, { axis: 'y', nodeRef: ref },
111116
React.createElement('div', {
117+
ref: ref,
112118
id: 'draggable-test',
113119
style: { width: '100px', height: '100px', background: 'blue' }
114120
})
@@ -138,12 +144,15 @@ describe('Browser Tests', () => {
138144
const root = document.getElementById('root');
139145

140146
window.stopCalled = false;
147+
const ref = React.createRef();
141148

142149
ReactDOM.createRoot(root).render(
143150
React.createElement(Draggable, {
151+
nodeRef: ref,
144152
onStop: () => { window.stopCalled = true; }
145153
},
146154
React.createElement('div', {
155+
ref: ref,
147156
id: 'draggable-test',
148157
style: { width: '100px', height: '100px', background: 'blue' }
149158
})
@@ -171,12 +180,15 @@ describe('Browser Tests', () => {
171180
await page.evaluate(() => {
172181
const { React, ReactDOM, Draggable } = window;
173182
const root = document.getElementById('root');
183+
const ref = React.createRef();
174184

175185
ReactDOM.createRoot(root).render(
176186
React.createElement(Draggable, {
187+
nodeRef: ref,
177188
bounds: { left: 0, right: 50, top: 0, bottom: 50 }
178189
},
179190
React.createElement('div', {
191+
ref: ref,
180192
id: 'draggable-test',
181193
style: { width: '100px', height: '100px', background: 'blue' }
182194
})
@@ -202,6 +214,7 @@ describe('Browser Tests', () => {
202214
await page.evaluate(() => {
203215
const { React, ReactDOM, Draggable } = window;
204216
const root = document.getElementById('root');
217+
const ref = React.createRef();
205218

206219
ReactDOM.createRoot(root).render(
207220
React.createElement('div', {
@@ -213,8 +226,9 @@ describe('Browser Tests', () => {
213226
background: '#ccc'
214227
}
215228
},
216-
React.createElement(Draggable, { bounds: 'parent' },
229+
React.createElement(Draggable, { bounds: 'parent', nodeRef: ref },
217230
React.createElement('div', {
231+
ref: ref,
218232
id: 'draggable-test',
219233
style: { width: '100px', height: '100px', background: 'blue' }
220234
})
@@ -243,12 +257,15 @@ describe('Browser Tests', () => {
243257
await page.evaluate(() => {
244258
const { React, ReactDOM, Draggable } = window;
245259
const root = document.getElementById('root');
260+
const ref = React.createRef();
246261

247262
ReactDOM.createRoot(root).render(
248263
React.createElement(Draggable, {
264+
nodeRef: ref,
249265
bounds: { left: -50, right: 50, top: -50, bottom: 50 }
250266
},
251267
React.createElement('div', {
268+
ref: ref,
252269
id: 'draggable-test',
253270
style: { width: '100px', height: '100px', background: 'blue' }
254271
})
@@ -277,15 +294,18 @@ describe('Browser Tests', () => {
277294
await page.evaluate(() => {
278295
const { React, ReactDOM, Draggable } = window;
279296
const root = document.getElementById('root');
297+
const ref = React.createRef();
280298

281299
window.lastPosition = null;
282300

283301
ReactDOM.createRoot(root).render(
284302
React.createElement(Draggable, {
303+
nodeRef: ref,
285304
grid: [25, 25],
286305
onDrag: (e, data) => { window.lastPosition = { x: data.x, y: data.y }; }
287306
},
288307
React.createElement('div', {
308+
ref: ref,
289309
id: 'draggable-test',
290310
style: { width: '100px', height: '100px', background: 'blue' }
291311
})
@@ -313,15 +333,18 @@ describe('Browser Tests', () => {
313333
await page.evaluate(() => {
314334
const { React, ReactDOM, Draggable } = window;
315335
const root = document.getElementById('root');
336+
const ref = React.createRef();
316337

317338
window.dragCallCount = 0;
318339

319340
ReactDOM.createRoot(root).render(
320341
React.createElement(Draggable, {
342+
nodeRef: ref,
321343
grid: [50, 50],
322344
onDrag: () => { window.dragCallCount++; }
323345
},
324346
React.createElement('div', {
347+
ref: ref,
325348
id: 'draggable-test',
326349
style: { width: '100px', height: '100px', background: 'blue' }
327350
})
@@ -349,15 +372,18 @@ describe('Browser Tests', () => {
349372
await page.evaluate(() => {
350373
const { React, ReactDOM, Draggable } = window;
351374
const root = document.getElementById('root');
375+
const ref = React.createRef();
352376

353377
window.lastPosition = null;
354378

355379
ReactDOM.createRoot(root).render(
356380
React.createElement(Draggable, {
381+
nodeRef: ref,
357382
grid: [100, 100],
358383
onDrag: (e, data) => { window.lastPosition = { x: data.x, y: data.y }; }
359384
},
360385
React.createElement('div', {
386+
ref: ref,
361387
id: 'draggable-test',
362388
style: { width: '100px', height: '100px', background: 'blue' }
363389
})
@@ -388,15 +414,18 @@ describe('Browser Tests', () => {
388414
await page.evaluate(() => {
389415
const { React, ReactDOM, Draggable } = window;
390416
const root = document.getElementById('root');
417+
const ref = React.createRef();
391418

392419
window.dragData = null;
393420

394421
ReactDOM.createRoot(root).render(
395422
React.createElement(Draggable, {
423+
nodeRef: ref,
396424
scale: 2,
397425
onDrag: (e, data) => { window.dragData = { x: data.x, y: data.y }; }
398426
},
399427
React.createElement('div', {
428+
ref: ref,
400429
id: 'draggable-test',
401430
style: { width: '100px', height: '100px', background: 'blue' }
402431
})
@@ -426,10 +455,12 @@ describe('Browser Tests', () => {
426455
await page.evaluate(() => {
427456
const { React, ReactDOM, Draggable } = window;
428457
const root = document.getElementById('root');
458+
const ref = React.createRef();
429459

430460
ReactDOM.createRoot(root).render(
431-
React.createElement(Draggable, { handle: '.handle' },
461+
React.createElement(Draggable, { handle: '.handle', nodeRef: ref },
432462
React.createElement('div', {
463+
ref: ref,
433464
id: 'draggable-test',
434465
style: { width: '200px', height: '100px', background: 'blue' }
435466
},
@@ -477,10 +508,12 @@ describe('Browser Tests', () => {
477508
await page.evaluate(() => {
478509
const { React, ReactDOM, Draggable } = window;
479510
const root = document.getElementById('root');
511+
const ref = React.createRef();
480512

481513
ReactDOM.createRoot(root).render(
482-
React.createElement(Draggable, { handle: '.handle' },
514+
React.createElement(Draggable, { handle: '.handle', nodeRef: ref },
483515
React.createElement('div', {
516+
ref: ref,
484517
id: 'draggable-test',
485518
style: { width: '200px', height: '100px', background: 'blue' }
486519
},
@@ -516,10 +549,12 @@ describe('Browser Tests', () => {
516549
await page.evaluate(() => {
517550
const { React, ReactDOM, Draggable } = window;
518551
const root = document.getElementById('root');
552+
const ref = React.createRef();
519553

520554
ReactDOM.createRoot(root).render(
521-
React.createElement(Draggable, { cancel: '.cancel' },
555+
React.createElement(Draggable, { cancel: '.cancel', nodeRef: ref },
522556
React.createElement('div', {
557+
ref: ref,
523558
id: 'draggable-test',
524559
style: { width: '200px', height: '100px', background: 'blue' }
525560
},
@@ -584,9 +619,11 @@ describe('Browser Tests', () => {
584619

585620
// Render Draggable into iframe
586621
const iframeRoot = iframeDoc.getElementById('iframe-root');
622+
const ref = React.createRef();
587623
ReactDOM.createRoot(iframeRoot).render(
588-
React.createElement(Draggable, null,
624+
React.createElement(Draggable, { nodeRef: ref },
589625
React.createElement('div', {
626+
ref: ref,
590627
id: 'iframe-draggable',
591628
style: { width: '100px', height: '100px', background: 'blue' }
592629
})
@@ -653,9 +690,11 @@ describe('Browser Tests', () => {
653690
iframe.contentWindow.ReactDOM = ReactDOM;
654691

655692
const iframeRoot = iframeDoc.getElementById('iframe-root');
693+
const ref = React.createRef();
656694
ReactDOM.createRoot(iframeRoot).render(
657-
React.createElement(Draggable, { bounds: 'parent' },
695+
React.createElement(Draggable, { bounds: 'parent', nodeRef: ref },
658696
React.createElement('div', {
697+
ref: ref,
659698
id: 'iframe-draggable-bounds',
660699
style: { width: '100px', height: '100px', background: 'blue' }
661700
})
@@ -690,15 +729,18 @@ describe('Browser Tests', () => {
690729
await page.evaluate(() => {
691730
const { React, ReactDOM, Draggable } = window;
692731
const root = document.getElementById('root');
732+
const ref = React.createRef();
693733

694734
window.dragData = null;
695735

696736
// Create a simple draggable that we can verify drag works
697737
ReactDOM.createRoot(root).render(
698738
React.createElement(Draggable, {
739+
nodeRef: ref,
699740
onDrag: (e, data) => { window.dragData = { x: data.x, y: data.y, deltaX: data.deltaX, deltaY: data.deltaY }; }
700741
},
701742
React.createElement('div', {
743+
ref: ref,
702744
id: 'draggable-test',
703745
style: { width: '100px', height: '100px', background: 'blue' }
704746
})
@@ -746,13 +788,16 @@ describe('Browser Tests', () => {
746788
shadowRoot.appendChild(container);
747789

748790
// Render Draggable into shadow DOM
791+
const ref = React.createRef();
749792
ReactDOM.createRoot(container).render(
750793
React.createElement(Draggable, {
794+
nodeRef: ref,
751795
bounds: 'parent',
752796
defaultPosition: { x: 50, y: 50 },
753797
onDrag: (e, data) => { window.dragData = { x: data.x, y: data.y }; }
754798
},
755799
React.createElement('div', {
800+
ref: ref,
756801
id: 'shadow-draggable',
757802
style: { width: '100px', height: '100px', background: 'blue' }
758803
})
@@ -806,13 +851,16 @@ describe('Browser Tests', () => {
806851
shadowRoot.appendChild(container);
807852

808853
// Render Draggable into shadow DOM with selector bounds
854+
const ref = React.createRef();
809855
ReactDOM.createRoot(container).render(
810856
React.createElement(Draggable, {
857+
nodeRef: ref,
811858
bounds: '#bounds-container',
812859
defaultPosition: { x: 50, y: 50 },
813860
onDrag: (e, data) => { window.dragData = { x: data.x, y: data.y }; }
814861
},
815862
React.createElement('div', {
863+
ref: ref,
816864
id: 'shadow-draggable-2',
817865
style: { width: '100px', height: '100px', background: 'blue' }
818866
})
@@ -858,14 +906,17 @@ describe('Browser Tests', () => {
858906

859907
function App() {
860908
const [visible, setVisible] = React.useState(true);
909+
const ref = React.useRef(null);
861910
window.setVisible = setVisible;
862911

863912
if (!visible) return React.createElement('div', { id: 'unmounted' }, 'Unmounted');
864913

865914
return React.createElement(Draggable, {
915+
nodeRef: ref,
866916
onStop: () => { setVisible(false); }
867917
},
868918
React.createElement('div', {
919+
ref: ref,
869920
id: 'draggable-test',
870921
style: { width: '100px', height: '100px', background: 'blue' }
871922
})
@@ -908,6 +959,7 @@ describe('Browser Tests', () => {
908959

909960
function App() {
910961
const [showDraggable, setShowDraggable] = React.useState(true);
962+
const ref = React.useRef(null);
911963
window.setShowDraggable = setShowDraggable;
912964

913965
return React.createElement('div', null,
@@ -916,8 +968,9 @@ describe('Browser Tests', () => {
916968
type: 'text',
917969
onBlur: () => { window.inputBlurred = true; }
918970
}),
919-
showDraggable && React.createElement(Draggable, null,
971+
showDraggable && React.createElement(Draggable, { nodeRef: ref },
920972
React.createElement('div', {
973+
ref: ref,
921974
id: 'draggable-test',
922975
style: { width: '100px', height: '100px', background: 'blue' }
923976
})
@@ -969,6 +1022,7 @@ describe('Browser Tests', () => {
9691022
await page.evaluate(() => {
9701023
const { React, ReactDOM, Draggable } = window;
9711024
const root = document.getElementById('root');
1025+
const ref = React.createRef();
9721026

9731027
window.inputBlurred = false;
9741028

@@ -980,8 +1034,9 @@ describe('Browser Tests', () => {
9801034
style: { marginBottom: '20px', display: 'block' },
9811035
onBlur: () => { window.inputBlurred = true; }
9821036
}),
983-
React.createElement(Draggable, null,
1037+
React.createElement(Draggable, { nodeRef: ref },
9841038
React.createElement('div', {
1039+
ref: ref,
9851040
id: 'draggable-focus-test',
9861041
style: { width: '100px', height: '100px', background: 'blue' }
9871042
})
@@ -1022,14 +1077,17 @@ describe('Browser Tests', () => {
10221077
await page.evaluate(() => {
10231078
const { React, ReactDOM, Draggable } = window;
10241079
const root = document.getElementById('root');
1080+
const ref = React.createRef();
10251081

10261082
window.dragData = null;
10271083

10281084
ReactDOM.createRoot(root).render(
10291085
React.createElement(Draggable, {
1086+
nodeRef: ref,
10301087
onDrag: (e, data) => { window.dragData = { x: data.x, y: data.y, deltaX: data.deltaX, deltaY: data.deltaY }; }
10311088
},
10321089
React.createElement('div', {
1090+
ref: ref,
10331091
id: 'draggable-test',
10341092
style: { position: 'relative', top: '200px', left: '200px', width: '100px', height: '100px', background: 'blue' }
10351093
})

0 commit comments

Comments
 (0)