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 ReactElementJSX to createRoot #28012

Merged
merged 1 commit into from
Jan 22, 2024
Merged

Convert ReactElementJSX to createRoot #28012

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 67 additions & 40 deletions packages/react/src/__tests__/ReactElementJSX-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,11 @@

let React;
let ReactDOM;
let ReactDOMClient;
let ReactTestUtils;
let JSXRuntime;
let JSXDEVRuntime;
let act;

// NOTE: We're explicitly not using JSX here. This is intended to test
// a new React.jsx api which does not have a JSX transformer yet.
Expand All @@ -27,7 +29,9 @@ describe('ReactElement.jsx', () => {
JSXRuntime = require('react/jsx-runtime');
JSXDEVRuntime = require('react/jsx-dev-runtime');
ReactDOM = require('react-dom');
ReactDOMClient = require('react-dom/client');
ReactTestUtils = require('react-dom/test-utils');
act = require('internal-test-utils').act;
});

it('allows static methods to be called using the type property', () => {
Expand All @@ -48,23 +52,25 @@ describe('ReactElement.jsx', () => {
expect(element.constructor).toBe(object.constructor);
});

it('should use default prop value when removing a prop', () => {
it('should use default prop value when removing a prop', async () => {
class Component extends React.Component {
render() {
return JSXRuntime.jsx('span', {});
return JSXRuntime.jsx('span', {children: [this.props.fruit]});
}
}
Component.defaultProps = {fruit: 'persimmon'};

const container = document.createElement('div');
const instance = ReactDOM.render(
JSXRuntime.jsx(Component, {fruit: 'mango'}),
container,
);
expect(instance.props.fruit).toBe('mango');
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(JSXRuntime.jsx(Component, {fruit: 'mango'}));
});
expect(container.firstChild.textContent).toBe('mango');
rickhanlonii marked this conversation as resolved.
Show resolved Hide resolved

ReactDOM.render(JSXRuntime.jsx(Component, {}), container);
expect(instance.props.fruit).toBe('persimmon');
await act(() => {
root.render(JSXRuntime.jsx(Component, {}));
});
expect(container.firstChild.textContent).toBe('persimmon');
});

it('should normalize props with default values', () => {
Expand Down Expand Up @@ -114,7 +120,7 @@ describe('ReactElement.jsx', () => {
}
});

it('throws when adding a prop (in dev) after element creation', () => {
it('throws when adding a prop (in dev) after element creation', async () => {
const container = document.createElement('div');
class Outer extends React.Component {
render() {
Expand All @@ -134,12 +140,15 @@ describe('ReactElement.jsx', () => {
}
}
Outer.defaultProps = {sound: 'meow'};
const outer = ReactDOM.render(JSXRuntime.jsx(Outer, {}), container);
expect(ReactDOM.findDOMNode(outer).textContent).toBe('meow');
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(JSXRuntime.jsx(Outer, {}));
});
expect(container.firstChild.textContent).toBe('meow');
if (__DEV__) {
expect(ReactDOM.findDOMNode(outer).className).toBe('');
expect(container.firstChild.className).toBe('');
} else {
expect(ReactDOM.findDOMNode(outer).className).toBe('quack');
expect(container.firstChild.className).toBe('quack');
}
});

Expand All @@ -155,7 +164,7 @@ describe('ReactElement.jsx', () => {
expect(test.props.value).toBeNaN();
});

it('should warn when `key` is being accessed on composite element', () => {
it('should warn when `key` is being accessed on composite element', async () => {
const container = document.createElement('div');
class Child extends React.Component {
render() {
Expand All @@ -173,24 +182,27 @@ describe('ReactElement.jsx', () => {
});
}
}
expect(() =>
ReactDOM.render(JSXRuntime.jsx(Parent, {}), container),
).toErrorDev(
await expect(async () => {
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(JSXRuntime.jsx(Parent, {}));
});
}).toErrorDev(
'Child: `key` is not a prop. Trying to access it will result ' +
'in `undefined` being returned. If you need to access the same ' +
'value within the child component, you should pass it as a different ' +
'prop. (https://reactjs.org/link/special-props)',
);
});

it('warns when a jsxs is passed something that is not an array', () => {
it('warns when a jsxs is passed something that is not an array', async () => {
const container = document.createElement('div');
expect(() =>
ReactDOM.render(
JSXRuntime.jsxs('div', {children: 'foo'}, null),
container,
),
).toErrorDev(
await expect(async () => {
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(JSXRuntime.jsxs('div', {children: 'foo'}, null));
});
}).toErrorDev(
'React.jsx: Static children should always be an array. ' +
'You are likely explicitly calling React.jsxs or React.jsxDEV. ' +
'Use the Babel transform instead.',
Expand All @@ -209,7 +221,7 @@ describe('ReactElement.jsx', () => {
);
});

it('should warn when `ref` is being accessed', () => {
it('should warn when `ref` is being accessed', async () => {
const container = document.createElement('div');
class Child extends React.Component {
render() {
Expand All @@ -223,17 +235,20 @@ describe('ReactElement.jsx', () => {
});
}
}
expect(() =>
ReactDOM.render(JSXRuntime.jsx(Parent, {}), container),
).toErrorDev(
await expect(async () => {
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(JSXRuntime.jsx(Parent, {}));
});
}).toErrorDev(
'Child: `ref` is not a prop. Trying to access it will result ' +
'in `undefined` being returned. If you need to access the same ' +
'value within the child component, you should pass it as a different ' +
'prop. (https://reactjs.org/link/special-props)',
);
});

it('should warn when unkeyed children are passed to jsx', () => {
it('should warn when unkeyed children are passed to jsx', async () => {
const container = document.createElement('div');

class Child extends React.Component {
Expand All @@ -252,17 +267,20 @@ describe('ReactElement.jsx', () => {
});
}
}
expect(() =>
ReactDOM.render(JSXRuntime.jsx(Parent, {}), container),
).toErrorDev(
await expect(async () => {
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(JSXRuntime.jsx(Parent, {}));
});
}).toErrorDev(
'Warning: Each child in a list should have a unique "key" prop.\n\n' +
'Check the render method of `Parent`. See https://reactjs.org/link/warning-keys for more information.\n' +
' in Child (at **)\n' +
' in Parent (at **)',
);
});

it('should warn when keys are passed as part of props', () => {
it('should warn when keys are passed as part of props', async () => {
const container = document.createElement('div');
class Child extends React.Component {
render() {
Expand All @@ -276,9 +294,12 @@ describe('ReactElement.jsx', () => {
});
}
}
expect(() =>
ReactDOM.render(JSXRuntime.jsx(Parent, {}), container),
).toErrorDev(
await expect(async () => {
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(JSXRuntime.jsx(Parent, {}));
});
}).toErrorDev(
'Warning: A props object containing a "key" prop is being spread into JSX:\n' +
' let props = {key: someKey, prop: ...};\n' +
' <Child {...props} />\n' +
Expand All @@ -288,7 +309,7 @@ describe('ReactElement.jsx', () => {
);
});

it('should not warn when unkeyed children are passed to jsxs', () => {
it('should not warn when unkeyed children are passed to jsxs', async () => {
const container = document.createElement('div');
class Child extends React.Component {
render() {
Expand All @@ -306,8 +327,14 @@ describe('ReactElement.jsx', () => {
});
}
}
// TODO: an explicit expect for no warning?
ReactDOM.render(JSXRuntime.jsx(Parent, {}), container);

const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(JSXRuntime.jsx(Parent, {}));
});

// Test shouldn't throw any errors.
expect(true).toBe(true);
rickhanlonii marked this conversation as resolved.
Show resolved Hide resolved
});

it('does not call lazy initializers eagerly', () => {
Expand Down