Skip to content

Commit

Permalink
Convert ReactFunctionComponent to createRoot (#27997)
Browse files Browse the repository at this point in the history
  • Loading branch information
rickhanlonii authored Jan 19, 2024
1 parent b300304 commit feed8f3
Showing 1 changed file with 54 additions and 26 deletions.
80 changes: 54 additions & 26 deletions packages/react-dom/src/__tests__/ReactFunctionComponent-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,9 @@

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

function FunctionComponent(props) {
return <div>{props.name}</div>;
Expand All @@ -23,44 +24,58 @@ describe('ReactFunctionComponent', () => {
jest.resetModules();
PropTypes = require('prop-types');
React = require('react');
ReactDOM = require('react-dom');
ReactDOMClient = require('react-dom/client');
act = require('internal-test-utils').act;
ReactTestUtils = require('react-dom/test-utils');
});

it('should render stateless component', () => {
it('should render stateless component', async () => {
const el = document.createElement('div');
ReactDOM.render(<FunctionComponent name="A" />, el);

const root = ReactDOMClient.createRoot(el);
await act(() => {
root.render(<FunctionComponent name="A" />);
});

expect(el.textContent).toBe('A');
});

it('should update stateless component', () => {
it('should update stateless component', async () => {
class Parent extends React.Component {
render() {
return <FunctionComponent {...this.props} />;
}
}

const el = document.createElement('div');
ReactDOM.render(<Parent name="A" />, el);

const root = ReactDOMClient.createRoot(el);
await act(() => {
root.render(<Parent name="A" />);
});
expect(el.textContent).toBe('A');

ReactDOM.render(<Parent name="B" />, el);
await act(() => {
root.render(<Parent name="B" />);
});
expect(el.textContent).toBe('B');
});

it('should unmount stateless component', () => {
it('should unmount stateless component', async () => {
const container = document.createElement('div');

ReactDOM.render(<FunctionComponent name="A" />, container);
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(<FunctionComponent name="A" />);
});
expect(container.textContent).toBe('A');

ReactDOM.unmountComponentAtNode(container);
root.unmount();
expect(container.textContent).toBe('');
});

// @gate !disableLegacyContext
it('should pass context thru stateless component', () => {
it('should pass context thru stateless component', async () => {
class Child extends React.Component {
static contextTypes = {
test: PropTypes.string.isRequired,
Expand Down Expand Up @@ -90,32 +105,41 @@ describe('ReactFunctionComponent', () => {
}

const el = document.createElement('div');
ReactDOM.render(<GrandParent test="test" />, el);

const root = ReactDOMClient.createRoot(el);
await act(() => {
root.render(<GrandParent test="test" />);
});

expect(el.textContent).toBe('test');

ReactDOM.render(<GrandParent test="mest" />, el);
await act(() => {
root.render(<GrandParent test="mest" />);
});

expect(el.textContent).toBe('mest');
});

it('should warn for getDerivedStateFromProps on a function component', () => {
it('should warn for getDerivedStateFromProps on a function component', async () => {
function FunctionComponentWithChildContext() {
return null;
}
FunctionComponentWithChildContext.getDerivedStateFromProps = function () {};

const container = document.createElement('div');

expect(() =>
ReactDOM.render(<FunctionComponentWithChildContext />, container),
).toErrorDev(
await expect(async () => {
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(<FunctionComponentWithChildContext />);
});
}).toErrorDev(
'FunctionComponentWithChildContext: Function ' +
'components do not support getDerivedStateFromProps.',
);
});

it('should warn for childContextTypes on a function component', () => {
it('should warn for childContextTypes on a function component', async () => {
function FunctionComponentWithChildContext(props) {
return <div>{props.name}</div>;
}
Expand All @@ -126,12 +150,12 @@ describe('ReactFunctionComponent', () => {

const container = document.createElement('div');

expect(() =>
ReactDOM.render(
<FunctionComponentWithChildContext name="A" />,
container,
),
).toErrorDev(
await expect(async () => {
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(<FunctionComponentWithChildContext name="A" />);
});
}).toErrorDev(
'FunctionComponentWithChildContext(...): childContextTypes cannot ' +
'be defined on a function component.',
);
Expand Down Expand Up @@ -378,7 +402,7 @@ describe('ReactFunctionComponent', () => {
});

// @gate !disableLegacyContext
it('should receive context', () => {
it('should receive context', async () => {
class Parent extends React.Component {
static childContextTypes = {
lang: PropTypes.string,
Expand All @@ -399,7 +423,11 @@ describe('ReactFunctionComponent', () => {
Child.contextTypes = {lang: PropTypes.string};

const el = document.createElement('div');
ReactDOM.render(<Parent />, el);

const root = ReactDOMClient.createRoot(el);
await act(() => {
root.render(<Parent />);
});
expect(el.textContent).toBe('en');
});

Expand Down

0 comments on commit feed8f3

Please sign in to comment.