Skip to content

Commit

Permalink
convert ReactElementClone-test from renderIntoDocument (facebook#28193)
Browse files Browse the repository at this point in the history 
## Summary

migrates to createRoot – renderIntoDocument uses ReactDOM.render

## How did you test this change?

yarn test ReactElementClone
  • Loading branch information
@noahlemen @AndyPengc12
noahlemen authored and AndyPengc12 committed Apr 15, 2024
1 parent 8699369 commit c4af3f3
Showing 1 changed file with 76 additions and 32 deletions.
108 changes: 76 additions & 32 deletions packages/react/src/__tests__/ReactElementClone-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,20 @@

'use strict';

let act;
let PropTypes;
let React;
let ReactDOM;
let ReactTestUtils;
let ReactDOMClient;

describe('ReactElementClone', () => {
let ComponentClass;

beforeEach(() => {
act = require('internal-test-utils').act;

PropTypes = require('prop-types');
React = require('react');
ReactDOM = require('react-dom');
ReactTestUtils = require('react-dom/test-utils');
ReactDOMClient = require('react-dom/client');

// NOTE: We're explicitly not using JSX here. This is intended to test
// classic JS without JSX.
Expand All @@ -32,10 +33,15 @@ describe('ReactElementClone', () => {
};
});

it('should clone a DOM component with new props', () => {
it('should clone a DOM component with new props', async () => {
let div;
class Grandparent extends React.Component {
render() {
return <Parent child={<div className="child" />} />;
return (
<Parent
child={<div ref={node => (div = node)} className="child" />}
/>
);
}
}
class Parent extends React.Component {
Expand All @@ -47,14 +53,21 @@ describe('ReactElementClone', () => {
);
}
}
const component = ReactTestUtils.renderIntoDocument(<Grandparent />);
expect(ReactDOM.findDOMNode(component).childNodes[0].className).toBe('xyz');

const root = ReactDOMClient.createRoot(document.createElement('div'));
await act(() => {
root.render(<Grandparent />);
});
expect(div.className).toBe('xyz');
});

it('should clone a composite component with new props', () => {
it('should clone a composite component with new props', async () => {
let div;
class Child extends React.Component {
render() {
return <div className={this.props.className} />;
return (
<div ref={node => (div = node)} className={this.props.className} />
);
}
}
class Grandparent extends React.Component {
Expand All @@ -71,19 +84,27 @@ describe('ReactElementClone', () => {
);
}
}
const component = ReactTestUtils.renderIntoDocument(<Grandparent />);
expect(ReactDOM.findDOMNode(component).childNodes[0].className).toBe('xyz');
const root = ReactDOMClient.createRoot(document.createElement('div'));
await act(() => {
root.render(<Grandparent />);
});
expect(div.className).toBe('xyz');
});

it('does not fail if config has no prototype', () => {
const config = Object.create(null, {foo: {value: 1, enumerable: true}});
React.cloneElement(<div />, config);
});

it('should keep the original ref if it is not overridden', () => {
it('should keep the original ref if it is not overridden', async () => {
let component;
class Grandparent extends React.Component {
yoloRef = React.createRef();

componentDidMount() {
component = this;
}

render() {
return <Parent child={<div ref={this.yoloRef} />} />;
}
Expand All @@ -97,7 +118,11 @@ describe('ReactElementClone', () => {
}
}

const component = ReactTestUtils.renderIntoDocument(<Grandparent />);
const root = ReactDOMClient.createRoot(document.createElement('div'));
await act(() => {
root.render(<Grandparent />);
});

expect(component.yoloRef.current.tagName).toBe('DIV');
});

Expand All @@ -111,30 +136,32 @@ describe('ReactElementClone', () => {
expect(clone.key).toBe('xyz');
});

it('should transfer children', () => {
it('should transfer children', async () => {
class Component extends React.Component {
render() {
expect(this.props.children).toBe('xyz');
return <div />;
}
}

ReactTestUtils.renderIntoDocument(
React.cloneElement(<Component />, {children: 'xyz'}),
);
const root = ReactDOMClient.createRoot(document.createElement('div'));
await act(() => {
root.render(React.cloneElement(<Component />, {children: 'xyz'}));
});
});

it('should shallow clone children', () => {
it('should shallow clone children', async () => {
class Component extends React.Component {
render() {
expect(this.props.children).toBe('xyz');
return <div />;
}
}

ReactTestUtils.renderIntoDocument(
React.cloneElement(<Component>xyz</Component>, {}),
);
const root = ReactDOMClient.createRoot(document.createElement('div'));
await act(() => {
root.render(React.cloneElement(<Component>xyz</Component>, {}));
});
});

it('should accept children as rest arguments', () => {
Expand Down Expand Up @@ -174,7 +201,8 @@ describe('ReactElementClone', () => {
expect(element2.props.children).toBe(undefined);
});

it('should support keys and refs', () => {
it('should support keys and refs', async () => {
let component;
class Parent extends React.Component {
xyzRef = React.createRef();

Expand All @@ -192,6 +220,10 @@ describe('ReactElementClone', () => {
class Grandparent extends React.Component {
parentRef = React.createRef();

componentDidMount() {
component = this;
}

render() {
return (
<Parent ref={this.parentRef}>
Expand All @@ -201,11 +233,13 @@ describe('ReactElementClone', () => {
}
}

const component = ReactTestUtils.renderIntoDocument(<Grandparent />);
const root = ReactDOMClient.createRoot(document.createElement('div'));
await act(() => root.render(<Grandparent />));
expect(component.parentRef.current.xyzRef.current.tagName).toBe('SPAN');
});

it('should steal the ref if a new ref is specified', () => {
it('should steal the ref if a new ref is specified', async () => {
let component;
class Parent extends React.Component {
xyzRef = React.createRef();

Expand All @@ -221,6 +255,10 @@ describe('ReactElementClone', () => {
parentRef = React.createRef();
childRef = React.createRef();

componentDidMount() {
component = this;
}

render() {
return (
<Parent ref={this.parentRef}>
Expand All @@ -230,21 +268,25 @@ describe('ReactElementClone', () => {
}
}

const component = ReactTestUtils.renderIntoDocument(<Grandparent />);
const root = ReactDOMClient.createRoot(document.createElement('div'));
await act(() => root.render(<Grandparent />));
expect(component.childRef).toEqual({current: null});
expect(component.parentRef.current.xyzRef.current.tagName).toBe('SPAN');
});

it('should overwrite props', () => {
it('should overwrite props', async () => {
class Component extends React.Component {
render() {
expect(this.props.myprop).toBe('xyz');
return <div />;
}
}

ReactTestUtils.renderIntoDocument(
React.cloneElement(<Component myprop="abc" />, {myprop: 'xyz'}),
const root = ReactDOMClient.createRoot(document.createElement('div'));
await act(() =>
root.render(
React.cloneElement(<Component myprop="abc" />, {myprop: 'xyz'}),
),
);
});

Expand Down Expand Up @@ -287,7 +329,7 @@ describe('ReactElementClone', () => {
React.cloneElement(<div />, null, [{}, {}]);
});

it('should check declared prop types after clone', () => {
it('should check declared prop types after clone', async () => {
class Component extends React.Component {
static propTypes = {
color: PropTypes.string.isRequired,
Expand All @@ -308,8 +350,10 @@ describe('ReactElementClone', () => {
});
}
}
expect(() =>
ReactTestUtils.renderIntoDocument(React.createElement(GrandParent)),
const root = ReactDOMClient.createRoot(document.createElement('div'));
await expect(
async () =>
await act(() => root.render(React.createElement(GrandParent))),
).toErrorDev(
'Warning: Failed prop type: ' +
'Invalid prop `color` of type `number` supplied to `Component`, ' +
Expand Down

0 comments on commit c4af3f3

Please sign in to comment.