Convert ReactPureComponent-test to createRoot (#27917)
Convert ReactPureComponent-test to createRoot
Jan Kassens committed
Jan 10, 2024 at 10:17 UTC
08cd087cada28bf05165b87b6e31a97c6ac598b4
1 file changed
+46
-17
packages/react/src/__tests__/ReactPureComponent-test.js
+46
-17
@@ -9,16 +9,20 @@
9
10
'use strict';
11
12
+let act;
13
+
14
let React;
13
-let ReactDOM;
15
+let ReactDOMClient;
16
17
describe('ReactPureComponent', () => {
18
beforeEach(() => {
19
+ act = require('internal-test-utils').act;
20
+
21
React = require('react');
18
- ReactDOM = require('react-dom');
22
+ ReactDOMClient = require('react-dom/client');
23
});
24
21
- it('should render', () => {
25
+ it('should render', async () => {
26
let renders = 0;
27
class Component extends React.PureComponent {
28
constructor() {
@@ -32,36 +36,47 @@ describe('ReactPureComponent', () => {
36
}
37
38
const container = document.createElement('div');
39
+ const root = ReactDOMClient.createRoot(container);
40
let text;
36
- let component;
41
+ const componentRef = React.createRef();
42
43
text = ['porcini'];
39
- component = ReactDOM.render(<Component text={text} />, container);
44
+ await act(() => {
45
+ root.render(<Component ref={componentRef} text={text} />);
46
+ });
47
expect(container.textContent).toBe('porcini');
48
expect(renders).toBe(1);
49
50
text = ['morel'];
44
- component = ReactDOM.render(<Component text={text} />, container);
51
+ await act(() => {
52
+ root.render(<Component ref={componentRef} text={text} />);
53
+ });
54
expect(container.textContent).toBe('morel');
55
expect(renders).toBe(2);
56
57
text[0] = 'portobello';
49
- component = ReactDOM.render(<Component text={text} />, container);
58
+ await act(() => {
59
+ root.render(<Component ref={componentRef} text={text} />);
60
+ });
61
expect(container.textContent).toBe('morel');
62
expect(renders).toBe(2);
63
64
// Setting state without changing it doesn't cause a rerender.
54
- component.setState({type: 'mushrooms'});
65
+ await act(() => {
66
+ componentRef.current.setState({type: 'mushrooms'});
67
+ });
68
expect(container.textContent).toBe('morel');
69
expect(renders).toBe(2);
70
71
// But changing state does.
59
- component.setState({type: 'portobello mushrooms'});
72
+ await act(() => {
73
+ componentRef.current.setState({type: 'portobello mushrooms'});
74
+ });
75
expect(container.textContent).toBe('portobello');
76
expect(renders).toBe(3);
77
});
78
64
- it('can override shouldComponentUpdate', () => {
79
+ it('can override shouldComponentUpdate', async () => {
80
let renders = 0;
81
class Component extends React.PureComponent {
82
render() {
@@ -74,17 +89,24 @@ describe('ReactPureComponent', () => {
89
}
90
91
const container = document.createElement('div');
77
- expect(() => ReactDOM.render(<Component />, container)).toErrorDev(
92
+ const root = ReactDOMClient.createRoot(container);
93
+ await expect(async () => {
94
+ await act(() => {
95
+ root.render(<Component />);
96
+ });
97
+ }).toErrorDev(
98
'Warning: ' +
99
'Component has a method called shouldComponentUpdate(). ' +
100
'shouldComponentUpdate should not be used when extending React.PureComponent. ' +
101
'Please extend React.Component if shouldComponentUpdate is used.',
102
);
83
- ReactDOM.render(<Component />, container);
103
+ await act(() => {
104
+ root.render(<Component />);
105
+ });
106
expect(renders).toBe(2);
107
});
108
87
- it('extends React.Component', () => {
109
+ it('extends React.Component', async () => {
110
let renders = 0;
111
class Component extends React.PureComponent {
112
render() {
@@ -94,11 +116,14 @@ describe('ReactPureComponent', () => {
116
return <div />;
117
}
118
}
97
- ReactDOM.render(<Component />, document.createElement('div'));
119
+ const root = ReactDOMClient.createRoot(document.createElement('div'));
120
+ await act(() => {
121
+ root.render(<Component />);
122
+ });
123
expect(renders).toBe(1);
124
});
125
101
- it('should warn when shouldComponentUpdate is defined on React.PureComponent', () => {
126
+ it('should warn when shouldComponentUpdate is defined on React.PureComponent', async () => {
127
class PureComponent extends React.PureComponent {
128
shouldComponentUpdate() {
129
return true;
@@ -107,8 +132,12 @@ describe('ReactPureComponent', () => {
132
return <div />;
133
}
134
}
110
- const container = document.createElement('div');
111
- expect(() => ReactDOM.render(<PureComponent />, container)).toErrorDev(
135
+ const root = ReactDOMClient.createRoot(document.createElement('div'));
136
+ await expect(async () => {
137
+ await act(() => {
138
+ root.render(<PureComponent />);
139
+ });
140
+ }).toErrorDev(
141
'Warning: ' +
142
'PureComponent has a method called shouldComponentUpdate(). ' +
143
'shouldComponentUpdate should not be used when extending React.PureComponent. ' +