Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

convert ReactElementClone-test from renderIntoDocument #28193

Merged
merged 3 commits into from
Feb 1, 2024
Merged

convert ReactElementClone-test from renderIntoDocument #28193

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1402a52
convert ReactElementClone-test from renderIntoDocument
noahlemen Feb 1, 2024
0ba4287
remove unused ReactTestUtils
noahlemen Feb 1, 2024
ecf8d31
lint fix
noahlemen Feb 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
108 changes: 76 additions & 32 deletions packages/react/src/__tests__/ReactElementClone-test.js
View file
Open in desktop
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