diff --git a/packages/react-dom/src/events/__tests__/SyntheticClipboardEvent-test.js b/packages/react-dom/src/events/__tests__/SyntheticClipboardEvent-test.js index 30064ecad99d8..aae6b02239eba 100644 --- a/packages/react-dom/src/events/__tests__/SyntheticClipboardEvent-test.js +++ b/packages/react-dom/src/events/__tests__/SyntheticClipboardEvent-test.js @@ -10,14 +10,16 @@ 'use strict'; let React; -let ReactDOM; +let ReactDOMClient; +let act; describe('SyntheticClipboardEvent', () => { let container; beforeEach(() => { React = require('react'); - ReactDOM = require('react-dom'); + ReactDOMClient = require('react-dom/client'); + act = require('internal-test-utils').act; // The container has to be attached for events to fire. container = document.createElement('div'); @@ -32,7 +34,7 @@ describe('SyntheticClipboardEvent', () => { describe('ClipboardEvent interface', () => { describe('clipboardData', () => { describe('when event has clipboardData', () => { - it("returns event's clipboardData", () => { + it("returns event's clipboardData", async () => { let expectedCount = 0; // Mock clipboardData since jsdom implementation doesn't have a constructor @@ -47,30 +49,39 @@ describe('SyntheticClipboardEvent', () => { expect(event.clipboardData).toBe(clipboardData); expectedCount++; }; - const div = ReactDOM.render( -
, - container, - ); + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render( +
, + ); + }); + + const div = container.firstChild; let event; event = document.createEvent('Event'); event.initEvent('copy', true, true); event.clipboardData = clipboardData; - div.dispatchEvent(event); - + await act(() => { + div.dispatchEvent(event); + }); event = document.createEvent('Event'); event.initEvent('cut', true, true); event.clipboardData = clipboardData; - div.dispatchEvent(event); + await act(() => { + div.dispatchEvent(event); + }); event = document.createEvent('Event'); event.initEvent('paste', true, true); event.clipboardData = clipboardData; - div.dispatchEvent(event); + await act(() => { + div.dispatchEvent(event); + }); expect(expectedCount).toBe(3); }); @@ -79,7 +90,7 @@ describe('SyntheticClipboardEvent', () => { }); describe('EventInterface', () => { - it('is able to `preventDefault` and `stopPropagation`', () => { + it('is able to `preventDefault` and `stopPropagation`', async () => { let expectedCount = 0; const eventHandler = event => { @@ -92,14 +103,19 @@ describe('SyntheticClipboardEvent', () => { expectedCount++; }; - const div = ReactDOM.render( -
, - container, - ); + const root = ReactDOMClient.createRoot(container); + + await act(() => { + root.render( +
, + ); + }); + + const div = container.firstChild; let event; event = document.createEvent('Event');