Convert SyntheticFocusEvent to createRoot (#28173)
Sebastian Silbermann committed
Feb 2, 2024 at 00:49 UTC
a7f1622117d7bbd9b2f681e962dcfba4aed62456
1 file changed
+42
-30
packages/react-dom/src/events/__tests__/SyntheticFocusEvent-test.js
+42
-30
@@ -9,13 +9,15 @@
9
10
describe('SyntheticFocusEvent', () => {
11
let React;
12
- let ReactDOM;
12
+ let ReactDOMClient;
13
+ let act;
14
let container;
15
16
beforeEach(() => {
17
jest.resetModules();
18
React = require('react');
18
- ReactDOM = require('react-dom');
19
+ ReactDOMClient = require('react-dom/client');
20
+ act = require('internal-test-utils').act;
21
22
container = document.createElement('div');
23
document.body.appendChild(container);
@@ -26,44 +28,54 @@ describe('SyntheticFocusEvent', () => {
28
container = null;
29
});
30
29
- test('onFocus events have the focus type', () => {
31
+ test('onFocus events have the focus type', async () => {
32
const log = [];
31
- ReactDOM.render(
32
- <button
33
- onFocus={event => log.push(`onFocus: ${event.type}`)}
34
- onFocusCapture={event => log.push(`onFocusCapture: ${event.type}`)}
35
- />,
36
- container,
37
- );
33
+ const root = ReactDOMClient.createRoot(container);
34
+ await act(() => {
35
+ root.render(
36
+ <button
37
+ onFocus={event => log.push(`onFocus: ${event.type}`)}
38
+ onFocusCapture={event => log.push(`onFocusCapture: ${event.type}`)}
39
+ />,
40
+ );
41
+ });
42
+
43
const button = container.querySelector('button');
44
40
- button.dispatchEvent(
41
- new FocusEvent('focusin', {
42
- bubbles: true,
43
- cancelable: false,
44
- }),
45
- );
45
+ await act(() => {
46
+ button.dispatchEvent(
47
+ new FocusEvent('focusin', {
48
+ bubbles: true,
49
+ cancelable: false,
50
+ }),
51
+ );
52
+ });
53
54
expect(log).toEqual(['onFocusCapture: focus', 'onFocus: focus']);
55
});
56
50
- test('onBlur events have the blur type', () => {
57
+ test('onBlur events have the blur type', async () => {
58
const log = [];
52
- ReactDOM.render(
53
- <button
54
- onBlur={event => log.push(`onBlur: ${event.type}`)}
55
- onBlurCapture={event => log.push(`onBlurCapture: ${event.type}`)}
56
- />,
57
- container,
58
- );
59
+ const root = ReactDOMClient.createRoot(container);
60
+ await act(() => {
61
+ root.render(
62
+ <button
63
+ onBlur={event => log.push(`onBlur: ${event.type}`)}
64
+ onBlurCapture={event => log.push(`onBlurCapture: ${event.type}`)}
65
+ />,
66
+ );
67
+ });
68
+
69
const button = container.querySelector('button');
70
61
- button.dispatchEvent(
62
- new FocusEvent('focusout', {
63
- bubbles: true,
64
- cancelable: false,
65
- }),
66
- );
71
+ await act(() => {
72
+ button.dispatchEvent(
73
+ new FocusEvent('focusout', {
74
+ bubbles: true,
75
+ cancelable: false,
76
+ }),
77
+ );
78
+ });
79
80
expect(log).toEqual(['onBlurCapture: blur', 'onBlur: blur']);
81
});