Skip to content

Commit

Permalink
Convert ReactElementJSX to createRoot (facebook#28012)
Browse files Browse the repository at this point in the history
  • Loading branch information
@rickhanlonii @AndyPengc12
rickhanlonii authored and AndyPengc12 committed Apr 15, 2024
1 parent 1b0356c commit bf26201
Showing 1 changed file with 67 additions and 40 deletions.
107 changes: 67 additions & 40 deletions packages/react/src/__tests__/ReactElementJSX-test.js
View file
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');

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);
});

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

0 comments on commit bf26201

Please sign in to comment.