diff --git a/packages/react-dom/src/events/plugins/__tests__/SelectEventPlugin-test.js b/packages/react-dom/src/events/plugins/__tests__/SelectEventPlugin-test.js
index b21b5e34552ed..6f7943328afc3 100644
--- a/packages/react-dom/src/events/plugins/__tests__/SelectEventPlugin-test.js
+++ b/packages/react-dom/src/events/plugins/__tests__/SelectEventPlugin-test.js
@@ -10,15 +10,16 @@
'use strict';
let React;
-let ReactDOM;
+let ReactDOMClient;
+let act;
describe('SelectEventPlugin', () => {
let container;
beforeEach(() => {
React = require('react');
- ReactDOM = require('react-dom');
-
+ ReactDOMClient = require('react-dom/client');
+ act = require('internal-test-utils').act;
container = document.createElement('div');
document.body.appendChild(container);
});
@@ -29,7 +30,7 @@ describe('SelectEventPlugin', () => {
});
// See https://github.com/facebook/react/pull/3639 for details.
- it('does not get confused when dependent events are registered independently', () => {
+ it('does not get confused when dependent events are registered independently', async () => {
const select = jest.fn();
const onSelect = event => {
expect(typeof event).toBe('object');
@@ -38,11 +39,14 @@ describe('SelectEventPlugin', () => {
select(event.currentTarget);
};
- // Pass `onMouseDown` so React registers a top-level listener.
- const node = ReactDOM.render(
- ,
- container,
- );
+ const root = ReactDOMClient.createRoot(container);
+ const node = await (async function () {
+ await act(() => {
+ // Pass `onMouseDown` so React registers a top-level listener.
+ root.render();
+ });
+ return container.firstChild;
+ })();
// Trigger `mousedown` and `mouseup`. Note that
// React is not currently listening to `mouseup`.
@@ -59,8 +63,10 @@ describe('SelectEventPlugin', () => {
}),
);
- // Now subscribe to `onSelect`.
- ReactDOM.render(, container);
+ await act(() => {
+ // Now subscribe to `onSelect`
+ root.render();
+ });
node.focus();
// This triggers a `select` event in our polyfill.
@@ -74,7 +80,7 @@ describe('SelectEventPlugin', () => {
expect(select).toHaveBeenCalledTimes(1);
});
- it('should fire `onSelect` when a listener is present', () => {
+ it('should fire `onSelect` when a listener is present', async () => {
const select = jest.fn();
const onSelect = event => {
expect(typeof event).toBe('object');
@@ -83,10 +89,14 @@ describe('SelectEventPlugin', () => {
select(event.currentTarget);
};
- const node = ReactDOM.render(
- ,
- container,
- );
+ const node = await (async function () {
+ const root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render();
+ });
+ return container.firstChild;
+ })();
+
node.focus();
let nativeEvent = new MouseEvent('focus', {
@@ -108,7 +118,7 @@ describe('SelectEventPlugin', () => {
expect(select).toHaveBeenCalledTimes(1);
});
- it('should fire `onSelectCapture` when a listener is present', () => {
+ it('should fire `onSelectCapture` when a listener is present', async () => {
const select = jest.fn();
const onSelectCapture = event => {
expect(typeof event).toBe('object');
@@ -117,10 +127,14 @@ describe('SelectEventPlugin', () => {
select(event.currentTarget);
};
- const node = ReactDOM.render(
- ,
- container,
- );
+ const node = await (async function () {
+ const root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render();
+ });
+ return container.firstChild;
+ })();
+
node.focus();
let nativeEvent = new MouseEvent('focus', {
@@ -143,7 +157,7 @@ describe('SelectEventPlugin', () => {
});
// Regression test for https://github.com/facebook/react/issues/11379
- it('should not wait for `mouseup` after receiving `dragend`', () => {
+ it('should not wait for `mouseup` after receiving `dragend`', async () => {
const select = jest.fn();
const onSelect = event => {
expect(typeof event).toBe('object');
@@ -152,10 +166,14 @@ describe('SelectEventPlugin', () => {
select(event.currentTarget);
};
- const node = ReactDOM.render(
- ,
- container,
- );
+ const node = await (async function () {
+ const root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render();
+ });
+ return container.firstChild;
+ })();
+
node.focus();
let nativeEvent = new MouseEvent('focus', {
@@ -177,12 +195,17 @@ describe('SelectEventPlugin', () => {
expect(select).toHaveBeenCalledTimes(1);
});
- it('should handle selectionchange events', function () {
+ it('should handle selectionchange events', async function () {
const onSelect = jest.fn();
- const node = ReactDOM.render(
- ,
- container,
- );
+
+ const node = await (async function () {
+ const root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render();
+ });
+ return container.firstChild;
+ })();
+
node.focus();
// Make sure the event was not called before we emit the selection change event