diff --git a/packages/react-dom/src/__tests__/ReactEventIndependence-test.js b/packages/react-dom/src/__tests__/ReactEventIndependence-test.js index 71974fbdd57b7..05cbca61752f6 100644 --- a/packages/react-dom/src/__tests__/ReactEventIndependence-test.js +++ b/packages/react-dom/src/__tests__/ReactEventIndependence-test.js @@ -10,68 +10,75 @@ 'use strict'; let React; -let ReactDOM; +let ReactDOMClient; +let act; describe('ReactEventIndependence', () => { beforeEach(() => { jest.resetModules(); React = require('react'); - ReactDOM = require('react-dom'); + ReactDOMClient = require('react-dom/client'); + act = require('internal-test-utils').act; }); - it('does not crash with other react inside', () => { + it('does not crash with other react inside', async () => { let clicks = 0; const container = document.createElement('div'); document.body.appendChild(container); + const root = ReactDOMClient.createRoot(container); try { - const div = ReactDOM.render( -
clicks++} - dangerouslySetInnerHTML={{ - __html: '
', - }} - />, - container, - ); + await act(() => { + root.render( +
clicks++} + dangerouslySetInnerHTML={{ + __html: '
', + }} + />, + ); + }); - div.firstChild.click(); + container.firstElementChild.click(); expect(clicks).toBe(1); } finally { document.body.removeChild(container); } }); - it('does not crash with other react outside', () => { + it('does not crash with other react outside', async () => { let clicks = 0; const outer = document.createElement('div'); document.body.appendChild(outer); + const root = ReactDOMClient.createRoot(outer); try { outer.setAttribute('data-reactid', '.z'); - const inner = ReactDOM.render( - , - outer, - ); - inner.click(); + await act(() => { + root.render(); + }); + outer.firstElementChild.click(); expect(clicks).toBe(1); } finally { document.body.removeChild(outer); } }); - it('does not when event fired on unmounted tree', () => { + it('does not when event fired on unmounted tree', async () => { let clicks = 0; const container = document.createElement('div'); document.body.appendChild(container); try { - const button = ReactDOM.render( - , - container, - ); + const root = ReactDOMClient.createRoot(container); + + await act(() => { + root.render(); + }); + + const button = container.firstChild; // Now we unmount the component, as if caused by a non-React event handler // for the same click we're about to simulate, like closing a layer: - ReactDOM.unmountComponentAtNode(container); + root.unmount(); button.click(); // Since the tree is unmounted, we don't dispatch the click event.