convert ReactElement-test from renderIntoDocument (#28161)
## Summary refactors ReactElement-test to use `createRoot` instead of `renderIntoDocument`, which uses `ReactDOM.render` under the hood ## How did you test this change? `yarn test ReactElement`
Noah Lemen committed
Feb 1, 2024 at 14:49 UTC
4dd475c97799f3fb83bdd2fff2d028e0e30041cf
1 file changed
+29
-17
packages/react/src/__tests__/ReactElement-test.js
+29
-17
@@ -13,7 +13,6 @@ let act;
13
14
let React;
15
let ReactDOMClient;
16
-let ReactTestUtils;
16
17
describe('ReactElement', () => {
18
let ComponentClass;
@@ -25,7 +24,6 @@ describe('ReactElement', () => {
24
25
React = require('react');
26
ReactDOMClient = require('react-dom/client');
28
- ReactTestUtils = require('react-dom/test-utils');
27
// NOTE: We're explicitly not using JSX here. This is intended to test
28
// classic JS without JSX.
29
ComponentClass = class extends React.Component {
@@ -223,19 +221,21 @@ describe('ReactElement', () => {
221
expect(element.props).toEqual({foo: '56'});
222
});
223
226
- it('preserves the owner on the element', () => {
224
+ it('preserves the owner on the element', async () => {
225
let element;
226
+ let instance;
227
228
class Wrapper extends React.Component {
229
+ componentDidMount() {
230
+ instance = this;
231
+ }
232
render() {
233
element = React.createElement(ComponentClass);
234
return element;
235
}
236
}
235
-
236
- const instance = ReactTestUtils.renderIntoDocument(
237
- React.createElement(Wrapper),
238
- );
237
+ const root = ReactDOMClient.createRoot(document.createElement('div'));
238
+ await act(() => root.render(React.createElement(Wrapper)));
239
expect(element._owner.stateNode).toBe(instance);
240
});
241
@@ -327,23 +327,28 @@ describe('ReactElement', () => {
327
328
// NOTE: We're explicitly not using JSX here. This is intended to test
329
// classic JS without JSX.
330
- it('should normalize props with default values', () => {
330
+ it('should normalize props with default values', async () => {
331
+ let instance;
332
class Component extends React.Component {
333
+ componentDidMount() {
334
+ instance = this;
335
+ }
336
render() {
337
return React.createElement('span', null, this.props.prop);
338
}
339
}
340
Component.defaultProps = {prop: 'testKey'};
341
338
- const instance = ReactTestUtils.renderIntoDocument(
339
- React.createElement(Component),
340
- );
342
+ const root = ReactDOMClient.createRoot(document.createElement('div'));
343
+ await act(() => {
344
+ root.render(React.createElement(Component));
345
+ });
346
expect(instance.props.prop).toBe('testKey');
347
343
- const inst2 = ReactTestUtils.renderIntoDocument(
344
- React.createElement(Component, {prop: null}),
345
- );
346
- expect(inst2.props.prop).toBe(null);
348
+ await act(() => {
349
+ root.render(React.createElement(Component, {prop: null}));
350
+ });
351
+ expect(instance.props.prop).toBe(null);
352
});
353
354
it('throws when changing a prop (in dev) after element creation', async () => {
@@ -410,13 +415,20 @@ describe('ReactElement', () => {
415
}
416
});
417
413
- it('does not warn for NaN props', () => {
418
+ it('does not warn for NaN props', async () => {
419
+ let test;
420
class Test extends React.Component {
421
+ componentDidMount() {
422
+ test = this;
423
+ }
424
render() {
425
return <div />;
426
}
427
}
419
- const test = ReactTestUtils.renderIntoDocument(<Test value={+undefined} />);
428
+ const root = ReactDOMClient.createRoot(document.createElement('div'));
429
+ await act(() => {
430
+ root.render(<Test value={+undefined} />);
431
+ });
432
expect(test.props.value).toBeNaN();
433
});
434
});