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 createReactClassIntegration to createRoot #28196

Merged
merged 1 commit into from
Feb 2, 2024
Merged

Convert createReactClassIntegration to createRoot #28196

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
81 changes: 55 additions & 26 deletions packages/react/src/__tests__/createReactClassIntegration-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ let act;
let PropTypes;
let React;
let ReactDOMClient;
let ReactTestUtils;
let createReactClass;

describe('create-react-class-integration', () => {
Expand All @@ -24,7 +23,6 @@ describe('create-react-class-integration', () => {
PropTypes = require('prop-types');
React = require('react');
ReactDOMClient = require('react-dom/client');
ReactTestUtils = require('react-dom/test-utils');
createReactClass = require('create-react-class/factory')(
React.Component,
React.isValidElement,
Expand Down Expand Up @@ -231,7 +229,7 @@ describe('create-react-class-integration', () => {
]);
});

it('should support statics', () => {
it('should support statics', async () => {
const Component = createReactClass({
statics: {
abc: 'def',
Expand All @@ -247,8 +245,13 @@ describe('create-react-class-integration', () => {
return <span />;
},
});
let instance = <Component />;
instance = ReactTestUtils.renderIntoDocument(instance);
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
let instance;
await act(() => {
root.render(<Component ref={current => (instance = current)} />);
});

expect(instance.constructor.abc).toBe('def');
expect(Component.abc).toBe('def');
expect(instance.constructor.def).toBe(0);
Expand All @@ -261,7 +264,7 @@ describe('create-react-class-integration', () => {
expect(Component.pqr()).toBe(Component);
});

it('should work with object getInitialState() return values', () => {
it('should work with object getInitialState() return values', async () => {
const Component = createReactClass({
getInitialState: function () {
return {
Expand All @@ -272,12 +275,17 @@ describe('create-react-class-integration', () => {
return <span />;
},
});
let instance = <Component />;
instance = ReactTestUtils.renderIntoDocument(instance);
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
let instance;
await act(() => {
root.render(<Component ref={current => (instance = current)} />);
});

expect(instance.state.occupation).toEqual('clown');
});

it('should work with getDerivedStateFromProps() return values', () => {
it('should work with getDerivedStateFromProps() return values', async () => {
const Component = createReactClass({
getInitialState() {
return {};
Expand All @@ -289,8 +297,12 @@ describe('create-react-class-integration', () => {
Component.getDerivedStateFromProps = () => {
return {occupation: 'clown'};
};
let instance = <Component />;
instance = ReactTestUtils.renderIntoDocument(instance);
let instance;
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(<Component ref={current => (instance = current)} />);
});
expect(instance.state.occupation).toEqual('clown');
});

Expand Down Expand Up @@ -328,8 +340,9 @@ describe('create-react-class-integration', () => {
expect(container.firstChild.className).toBe('foo');
});

it('should throw with non-object getInitialState() return values', () => {
[['an array'], 'a string', 1234].forEach(function (state) {
it('should throw with non-object getInitialState() return values', async () => {
// eslint-disable-next-line no-for-of-loops/no-for-of-loops
for (const state of [['an array'], 'a string', 1234]) {
const Component = createReactClass({
getInitialState: function () {
return state;
Expand All @@ -338,16 +351,19 @@ describe('create-react-class-integration', () => {
return <span />;
},
});
let instance = <Component />;
expect(function () {
instance = ReactTestUtils.renderIntoDocument(instance);
}).toThrowError(
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await expect(
act(() => {
root.render(<Component />);
}),
).rejects.toThrowError(
'Component.getInitialState(): must return an object or null',
);
});
}
});

it('should work with a null getInitialState() return value', () => {
it('should work with a null getInitialState() return value', async () => {
const Component = createReactClass({
getInitialState: function () {
return null;
Expand All @@ -356,9 +372,13 @@ describe('create-react-class-integration', () => {
return <span />;
},
});
expect(() =>
ReactTestUtils.renderIntoDocument(<Component />),
).not.toThrow();
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await expect(
act(() => {
root.render(<Component />);
}),
).resolves.not.toThrow();
});

it('should throw when using legacy factories', () => {
Expand All @@ -375,7 +395,7 @@ describe('create-react-class-integration', () => {
);
});

it('replaceState and callback works', () => {
it('replaceState and callback works', async () => {
const ops = [];
const Component = createReactClass({
getInitialState() {
Expand All @@ -387,10 +407,19 @@ describe('create-react-class-integration', () => {
},
});

const instance = ReactTestUtils.renderIntoDocument(<Component />);
instance.replaceState({step: 1}, () => {
ops.push('Callback: ' + instance.state.step);
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
let instance;
await act(() => {
root.render(<Component ref={current => (instance = current)} />);
});

await act(() => {
instance.replaceState({step: 1}, () => {
ops.push('Callback: ' + instance.state.step);
});
});

expect(ops).toEqual(['Render: 0', 'Render: 1', 'Callback: 1']);
});

Expand Down