Skip to content

Commit

Permalink
Remove ReactTestUtils from ReactDOM-test (#28377)
Browse files Browse the repository at this point in the history
  • Loading branch information
@eps1lon
eps1lon authored Feb 20, 2024
1 parent 3c9560b commit 7b196be
Showing 1 changed file with 86 additions and 47 deletions.
133 changes: 86 additions & 47 deletions packages/react-dom/src/__tests__/ReactDOM-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ let React;
let ReactDOM;
let ReactDOMClient;
let ReactDOMServer;
let ReactTestUtils;

let act;

Expand All @@ -24,7 +23,6 @@ describe('ReactDOM', () => {
ReactDOM = require('react-dom');
ReactDOMClient = require('react-dom/client');
ReactDOMServer = require('react-dom/server');
ReactTestUtils = require('react-dom/test-utils');

act = require('internal-test-utils').act;
});
Expand Down Expand Up @@ -68,69 +66,105 @@ describe('ReactDOM', () => {
}
});

it('allows a DOM element to be used with a string', () => {
it('allows a DOM element to be used with a string', async () => {
const element = React.createElement('div', {className: 'foo'});
const node = ReactTestUtils.renderIntoDocument(element);
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(element);
});

const node = container.firstChild;
expect(node.tagName).toBe('DIV');
});

it('should allow children to be passed as an argument', () => {
const argNode = ReactTestUtils.renderIntoDocument(
React.createElement('div', null, 'child'),
);
it('should allow children to be passed as an argument', async () => {
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(React.createElement('div', null, 'child'));
});

const argNode = container.firstChild;
expect(argNode.innerHTML).toBe('child');
});

it('should overwrite props.children with children argument', () => {
const conflictNode = ReactTestUtils.renderIntoDocument(
React.createElement('div', {children: 'fakechild'}, 'child'),
);
it('should overwrite props.children with children argument', async () => {
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(React.createElement('div', {children: 'fakechild'}, 'child'));
});

const conflictNode = container.firstChild;
expect(conflictNode.innerHTML).toBe('child');
});

/**
* We need to make sure that updates occur to the actual node that's in the
* DOM, instead of a stale cache.
*/
it('should purge the DOM cache when removing nodes', () => {
let myDiv = ReactTestUtils.renderIntoDocument(
<div>
<div key="theDog" className="dog" />,
<div key="theBird" className="bird" />
</div>,
);
it('should purge the DOM cache when removing nodes', async () => {
let container = document.createElement('div');
let root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(
<div>
<div key="theDog" className="dog" />,
<div key="theBird" className="bird" />
</div>,
);
});
// Warm the cache with theDog
myDiv = ReactTestUtils.renderIntoDocument(
<div>
<div key="theDog" className="dogbeforedelete" />,
<div key="theBird" className="bird" />,
</div>,
);
container = document.createElement('div');
root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(
<div>
<div key="theDog" className="dogbeforedelete" />,
<div key="theBird" className="bird" />,
</div>,
);
});
// Remove theDog - this should purge the cache
myDiv = ReactTestUtils.renderIntoDocument(
<div>
<div key="theBird" className="bird" />,
</div>,
);
container = document.createElement('div');
root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(
<div>
<div key="theBird" className="bird" />,
</div>,
);
});
// Now, put theDog back. It's now a different DOM node.
myDiv = ReactTestUtils.renderIntoDocument(
<div>
<div key="theDog" className="dog" />,
<div key="theBird" className="bird" />,
</div>,
);
container = document.createElement('div');
root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(
<div>
<div key="theDog" className="dog" />,
<div key="theBird" className="bird" />,
</div>,
);
});
// Change the className of theDog. It will use the same element
myDiv = ReactTestUtils.renderIntoDocument(
<div>
<div key="theDog" className="bigdog" />,
<div key="theBird" className="bird" />,
</div>,
);
container = document.createElement('div');
root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(
<div>
<div key="theDog" className="bigdog" />,
<div key="theBird" className="bird" />,
</div>,
);
});

const myDiv = container.firstChild;
const dog = myDiv.childNodes[0];
expect(dog.className).toBe('bigdog');
});

it('throws in render() if the mount callback is not a function', () => {
it('throws in render() if the mount callback in legacy roots is not a function', async () => {
function Foo() {
this.a = 1;
this.b = 2;
Expand Down Expand Up @@ -182,7 +216,7 @@ describe('ReactDOM', () => {
);
});

it('throws in render() if the update callback is not a function', () => {
it('throws in render() if the update callback in legacy roots is not a function', async () => {
function Foo() {
this.a = 1;
this.b = 2;
Expand Down Expand Up @@ -411,21 +445,26 @@ describe('ReactDOM', () => {
});

it('should not crash calling findDOMNode inside a function component', async () => {
const root = ReactDOMClient.createRoot(document.createElement('div'));

class Component extends React.Component {
render() {
return <div />;
}
}

const instance = ReactTestUtils.renderIntoDocument(<Component />);
const container = document.createElement('div');
let root = ReactDOMClient.createRoot(container);
let instance;
await act(() => {
root.render(<Component ref={current => (instance = current)} />);
});

const App = () => {
ReactDOM.findDOMNode(instance);
return <div />;
};

if (__DEV__) {
root = ReactDOMClient.createRoot(document.createElement('div'));
await act(() => {
root.render(<App />);
});
Expand Down

0 comments on commit 7b196be

Please sign in to comment.