Skip to content

Commit

Permalink
Convert createReactClassIntegration to createRoot (#28196)
Browse files Browse the repository at this point in the history
  • Loading branch information
@eps1lon @gaearon
eps1lon authored and gaearon committed Feb 3, 2024
1 parent 348cc74 commit 84a1a0c
Showing 1 changed file with 55 additions and 26 deletions.
81 changes: 55 additions & 26 deletions packages/react/src/__tests__/createReactClassIntegration-test.js
View file
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

0 comments on commit 84a1a0c

Please sign in to comment.