Convert BeforeInputEventPlugin to createRoot (#28199)
Sebastian Silbermann committed
Feb 2, 2024 at 16:52 UTC
b3a79c41339f1aca0e2d9a27b2b32551b07fdcaf
1 file changed
+70
-57
packages/react-dom/src/events/plugins/__tests__/BeforeInputEventPlugin-test.js
+70
-57
@@ -10,17 +10,21 @@
10
'use strict';
11
12
let React;
13
-let ReactDOM;
13
+let ReactDOMClient;
14
+let act;
15
16
describe('BeforeInputEventPlugin', () => {
17
let container;
18
18
- function loadReactDOM(envSimulator) {
19
+ function loadReactDOMClientAndAct(envSimulator) {
20
jest.resetModules();
21
if (envSimulator) {
22
envSimulator();
23
}
23
- return require('react-dom');
24
+ return {
25
+ ReactDOMClient: require('react-dom/client'),
26
+ act: require('internal-test-utils').act,
27
+ };
28
}
29
30
function simulateIE11() {
@@ -724,32 +728,36 @@ describe('BeforeInputEventPlugin', () => {
728
},
729
];
730
727
- const testInputComponent = (env, scenes) => {
731
+ const testInputComponent = async (env, scenes) => {
732
let beforeInputEvent;
733
let compositionStartEvent;
734
let compositionUpdateEvent;
735
let spyOnBeforeInput;
736
let spyOnCompositionStart;
737
let spyOnCompositionUpdate;
734
- ReactDOM = loadReactDOM(env.emulator);
735
- const node = ReactDOM.render(
736
- <input
737
- type="text"
738
- onBeforeInput={e => {
739
- spyOnBeforeInput();
740
- beforeInputEvent = e;
741
- }}
742
- onCompositionStart={e => {
743
- spyOnCompositionStart();
744
- compositionStartEvent = e;
745
- }}
746
- onCompositionUpdate={e => {
747
- spyOnCompositionUpdate();
748
- compositionUpdateEvent = e;
749
- }}
750
- />,
751
- container,
752
- );
738
+ ({ReactDOMClient, act} = loadReactDOMClientAndAct(env.emulator));
739
+ const root = ReactDOMClient.createRoot(container);
740
+ await act(() => {
741
+ root.render(
742
+ <input
743
+ type="text"
744
+ onBeforeInput={e => {
745
+ spyOnBeforeInput();
746
+ beforeInputEvent = e;
747
+ }}
748
+ onCompositionStart={e => {
749
+ spyOnCompositionStart();
750
+ compositionStartEvent = e;
751
+ }}
752
+ onCompositionUpdate={e => {
753
+ spyOnCompositionUpdate();
754
+ compositionUpdateEvent = e;
755
+ }}
756
+ />,
757
+ );
758
+ });
759
+
760
+ const node = container.firstChild;
761
762
scenes.forEach((s, id) => {
763
beforeInputEvent = null;
@@ -770,32 +778,37 @@ describe('BeforeInputEventPlugin', () => {
778
});
779
};
780
773
- const testContentEditableComponent = (env, scenes) => {
781
+ const testContentEditableComponent = async (env, scenes) => {
782
let beforeInputEvent;
783
let compositionStartEvent;
784
let compositionUpdateEvent;
785
let spyOnBeforeInput;
786
let spyOnCompositionStart;
787
let spyOnCompositionUpdate;
780
- ReactDOM = loadReactDOM(env.emulator);
781
- const node = ReactDOM.render(
782
- <div
783
- contentEditable={true}
784
- onBeforeInput={e => {
785
- spyOnBeforeInput();
786
- beforeInputEvent = e;
787
- }}
788
- onCompositionStart={e => {
789
- spyOnCompositionStart();
790
- compositionStartEvent = e;
791
- }}
792
- onCompositionUpdate={e => {
793
- spyOnCompositionUpdate();
794
- compositionUpdateEvent = e;
795
- }}
796
- />,
797
- container,
798
- );
788
+ ({ReactDOMClient, act} = loadReactDOMClientAndAct(env.emulator));
789
+ const root = ReactDOMClient.createRoot(container);
790
+
791
+ await act(() => {
792
+ root.render(
793
+ <div
794
+ contentEditable={true}
795
+ onBeforeInput={e => {
796
+ spyOnBeforeInput();
797
+ beforeInputEvent = e;
798
+ }}
799
+ onCompositionStart={e => {
800
+ spyOnCompositionStart();
801
+ compositionStartEvent = e;
802
+ }}
803
+ onCompositionUpdate={e => {
804
+ spyOnCompositionUpdate();
805
+ compositionUpdateEvent = e;
806
+ }}
807
+ />,
808
+ );
809
+ });
810
+
811
+ const node = container.firstChild;
812
813
scenes.forEach((s, id) => {
814
beforeInputEvent = null;
@@ -816,33 +829,33 @@ describe('BeforeInputEventPlugin', () => {
829
});
830
};
831
819
- it('should extract onBeforeInput when simulating in Webkit on input[type=text]', () => {
820
- testInputComponent(environments[0], scenarios);
832
+ it('should extract onBeforeInput when simulating in Webkit on input[type=text]', async () => {
833
+ await testInputComponent(environments[0], scenarios);
834
});
822
- it('should extract onBeforeInput when simulating in Webkit on contenteditable', () => {
823
- testContentEditableComponent(environments[0], scenarios);
835
+ it('should extract onBeforeInput when simulating in Webkit on contenteditable', async () => {
836
+ await testContentEditableComponent(environments[0], scenarios);
837
});
838
826
- it('should extract onBeforeInput when simulating in IE11 on input[type=text]', () => {
827
- testInputComponent(environments[1], scenarios);
839
+ it('should extract onBeforeInput when simulating in IE11 on input[type=text]', async () => {
840
+ await testInputComponent(environments[1], scenarios);
841
});
829
- it('should extract onBeforeInput when simulating in IE11 on contenteditable', () => {
830
- testContentEditableComponent(environments[1], scenarios);
842
+ it('should extract onBeforeInput when simulating in IE11 on contenteditable', async () => {
843
+ await testContentEditableComponent(environments[1], scenarios);
844
});
845
833
- it('should extract onBeforeInput when simulating in env with no CompositionEvent on input[type=text]', () => {
834
- testInputComponent(environments[2], scenarios);
846
+ it('should extract onBeforeInput when simulating in env with no CompositionEvent on input[type=text]', async () => {
847
+ await testInputComponent(environments[2], scenarios);
848
});
849
850
// in an environment using composition fallback onBeforeInput will not work
851
// as expected on a contenteditable as keydown and keyup events are translated
852
// to keypress events
853
841
- it('should extract onBeforeInput when simulating in env with only CompositionEvent on input[type=text]', () => {
842
- testInputComponent(environments[3], scenarios);
854
+ it('should extract onBeforeInput when simulating in env with only CompositionEvent on input[type=text]', async () => {
855
+ await testInputComponent(environments[3], scenarios);
856
});
857
845
- it('should extract onBeforeInput when simulating in env with only CompositionEvent on contenteditable', () => {
846
- testContentEditableComponent(environments[3], scenarios);
858
+ it('should extract onBeforeInput when simulating in env with only CompositionEvent on contenteditable', async () => {
859
+ await testContentEditableComponent(environments[3], scenarios);
860
});
861
});