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.