Remove ReactTestUtils from ReactUpdates (#28378)
Sebastian Silbermann committed
Feb 20, 2024 at 16:52 UTC
48ca0e82985a1f0cdd2787a281166a59af4b88d0
1 file changed
+98
-33
packages/react-dom/src/__tests__/ReactUpdates-test.js
+98
-33
@@ -12,7 +12,6 @@
12
let React;
13
let ReactDOM;
14
let ReactDOMClient;
15
-let ReactTestUtils;
15
let act;
16
let Scheduler;
17
let waitForAll;
@@ -25,7 +24,6 @@ describe('ReactUpdates', () => {
24
React = require('react');
25
ReactDOM = require('react-dom');
26
ReactDOMClient = require('react-dom/client');
28
- ReactTestUtils = require('react-dom/test-utils');
27
act = require('internal-test-utils').act;
28
Scheduler = require('scheduler');
29
@@ -832,7 +830,7 @@ describe('ReactUpdates', () => {
830
expect(updates).toEqual([0, 1, 2, 0, 1, 2]);
831
});
832
835
- it('should queue nested updates', () => {
833
+ it('should queue nested updates', async () => {
834
// See https://github.com/facebook/react/issues/1147
835
836
class X extends React.Component {
@@ -877,11 +875,25 @@ describe('ReactUpdates', () => {
875
}
876
}
877
880
- const x = ReactTestUtils.renderIntoDocument(<X />);
881
- const y = ReactTestUtils.renderIntoDocument(<Y />);
878
+ let container = document.createElement('div');
879
+ let root = ReactDOMClient.createRoot(container);
880
+ let x;
881
+ await act(() => {
882
+ root.render(<X ref={current => (x = current)} />);
883
+ });
884
+
885
+ container = document.createElement('div');
886
+ root = ReactDOMClient.createRoot(container);
887
+ let y;
888
+ await act(() => {
889
+ root.render(<Y ref={current => (y = current)} />);
890
+ });
891
+
892
expect(ReactDOM.findDOMNode(x).textContent).toBe('0');
893
884
- y.forceUpdate();
894
+ await act(() => {
895
+ y.forceUpdate();
896
+ });
897
expect(ReactDOM.findDOMNode(x).textContent).toBe('1');
898
});
899
@@ -1004,7 +1016,7 @@ describe('ReactUpdates', () => {
1016
assertLog([]);
1017
});
1018
1007
- it('throws in setState if the update callback is not a function', () => {
1019
+ it('throws in setState if the update callback is not a function', async () => {
1020
function Foo() {
1021
this.a = 1;
1022
this.b = 2;
@@ -1018,36 +1030,62 @@ describe('ReactUpdates', () => {
1030
}
1031
}
1032
1021
- let component = ReactTestUtils.renderIntoDocument(<A />);
1033
+ let container = document.createElement('div');
1034
+ let root = ReactDOMClient.createRoot(container);
1035
+ let component;
1036
+ await act(() => {
1037
+ root.render(<A ref={current => (component = current)} />);
1038
+ });
1039
1023
- expect(() => {
1024
- expect(() => component.setState({}, 'no')).toErrorDev(
1040
+ await expect(
1041
+ expect(async () => {
1042
+ await act(() => {
1043
+ component.setState({}, 'no');
1044
+ });
1045
+ }).toErrorDev(
1046
'setState(...): Expected the last optional `callback` argument to be ' +
1047
'a function. Instead received: no.',
1027
- );
1028
- }).toThrowError(
1048
+ ),
1049
+ ).rejects.toThrowError(
1050
'Invalid argument passed as callback. Expected a function. Instead ' +
1051
'received: no',
1052
);
1032
- component = ReactTestUtils.renderIntoDocument(<A />);
1033
- expect(() => {
1034
- expect(() => component.setState({}, {foo: 'bar'})).toErrorDev(
1053
+ container = document.createElement('div');
1054
+ root = ReactDOMClient.createRoot(container);
1055
+ await act(() => {
1056
+ root.render(<A ref={current => (component = current)} />);
1057
+ });
1058
+
1059
+ await expect(
1060
+ expect(async () => {
1061
+ await act(() => {
1062
+ component.setState({}, {foo: 'bar'});
1063
+ });
1064
+ }).toErrorDev(
1065
'setState(...): Expected the last optional `callback` argument to be ' +
1066
'a function. Instead received: [object Object].',
1037
- );
1038
- }).toThrowError(
1067
+ ),
1068
+ ).rejects.toThrowError(
1069
'Invalid argument passed as callback. Expected a function. Instead ' +
1070
'received: [object Object]',
1071
);
1042
- // Make sure the warning is deduplicated and doesn't fire again
1043
- component = ReactTestUtils.renderIntoDocument(<A />);
1044
- expect(() => component.setState({}, new Foo())).toThrowError(
1072
+ container = document.createElement('div');
1073
+ root = ReactDOMClient.createRoot(container);
1074
+ await act(() => {
1075
+ root.render(<A ref={current => (component = current)} />);
1076
+ });
1077
+
1078
+ await expect(
1079
+ act(() => {
1080
+ component.setState({}, new Foo());
1081
+ }),
1082
+ ).rejects.toThrowError(
1083
'Invalid argument passed as callback. Expected a function. Instead ' +
1084
'received: [object Object]',
1085
);
1086
});
1087
1050
- it('throws in forceUpdate if the update callback is not a function', () => {
1088
+ it('throws in forceUpdate if the update callback is not a function', async () => {
1089
function Foo() {
1090
this.a = 1;
1091
this.b = 2;
@@ -1061,30 +1099,57 @@ describe('ReactUpdates', () => {
1099
}
1100
}
1101
1064
- let component = ReactTestUtils.renderIntoDocument(<A />);
1102
+ let container = document.createElement('div');
1103
+ let root = ReactDOMClient.createRoot(container);
1104
+ let component;
1105
+ await act(() => {
1106
+ root.render(<A ref={current => (component = current)} />);
1107
+ });
1108
1066
- expect(() => {
1067
- expect(() => component.forceUpdate('no')).toErrorDev(
1109
+ await expect(
1110
+ expect(async () => {
1111
+ await act(() => {
1112
+ component.forceUpdate('no');
1113
+ });
1114
+ }).toErrorDev(
1115
'forceUpdate(...): Expected the last optional `callback` argument to be ' +
1116
'a function. Instead received: no.',
1070
- );
1071
- }).toThrowError(
1117
+ ),
1118
+ ).rejects.toThrowError(
1119
'Invalid argument passed as callback. Expected a function. Instead ' +
1120
'received: no',
1121
);
1075
- component = ReactTestUtils.renderIntoDocument(<A />);
1076
- expect(() => {
1077
- expect(() => component.forceUpdate({foo: 'bar'})).toErrorDev(
1122
+ container = document.createElement('div');
1123
+ root = ReactDOMClient.createRoot(container);
1124
+ await act(() => {
1125
+ root.render(<A ref={current => (component = current)} />);
1126
+ });
1127
+
1128
+ await expect(
1129
+ expect(async () => {
1130
+ await act(() => {
1131
+ component.forceUpdate({foo: 'bar'});
1132
+ });
1133
+ }).toErrorDev(
1134
'forceUpdate(...): Expected the last optional `callback` argument to be ' +
1135
'a function. Instead received: [object Object].',
1080
- );
1081
- }).toThrowError(
1136
+ ),
1137
+ ).rejects.toThrowError(
1138
'Invalid argument passed as callback. Expected a function. Instead ' +
1139
'received: [object Object]',
1140
);
1141
// Make sure the warning is deduplicated and doesn't fire again
1086
- component = ReactTestUtils.renderIntoDocument(<A />);
1087
- expect(() => component.forceUpdate(new Foo())).toThrowError(
1142
+ container = document.createElement('div');
1143
+ root = ReactDOMClient.createRoot(container);
1144
+ await act(() => {
1145
+ root.render(<A ref={current => (component = current)} />);
1146
+ });
1147
+
1148
+ await expect(
1149
+ act(() => {
1150
+ component.forceUpdate(new Foo());
1151
+ }),
1152
+ ).rejects.toThrowError(
1153
'Invalid argument passed as callback. Expected a function. Instead ' +
1154
'received: [object Object]',
1155
);