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

Remove ReactTestUtils from refs-test #28336

Merged
merged 1 commit into from
Feb 20, 2024
Merged

Remove ReactTestUtils from refs-test #28336

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: 44 additions & 37 deletions packages/react-dom/src/__tests__/refs-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
let React = require('react');
let ReactDOMClient = require('react-dom/client');
let ReactFeatureFlags = require('shared/ReactFeatureFlags');
let ReactTestUtils = require('react-dom/test-utils');
let act = require('internal-test-utils').act;

// This is testing if string refs are deleted from `instance.refs`
Expand All @@ -26,7 +25,6 @@ describe('reactiverefs', () => {
React = require('react');
ReactDOMClient = require('react-dom/client');
ReactFeatureFlags = require('shared/ReactFeatureFlags');
ReactTestUtils = require('react-dom/test-utils');
act = require('internal-test-utils').act;
});

Expand Down Expand Up @@ -73,10 +71,7 @@ describe('reactiverefs', () => {
}

const expectClickLogsLengthToBe = function (instance, length) {
const clickLogs = ReactTestUtils.scryRenderedDOMComponentsWithClass(
instance,
'clickLogDiv',
);
const clickLogs = instance.container.querySelectorAll('.clickLogDiv');
expect(clickLogs.length).toBe(length);
expect(Object.keys(instance.refs.myCounter.refs).length).toBe(length);
};
Expand All @@ -101,13 +96,14 @@ describe('reactiverefs', () => {
* into a different parent.
*/
class TestRefsComponent extends React.Component {
container = null;
doReset = () => {
this.refs.myCounter.triggerReset();
};

render() {
return (
<div>
<div ref={current => (this.container = current)}>
<div ref="resetDiv" onClick={this.doReset}>
Reset Me By Clicking This.
</div>
Expand Down Expand Up @@ -170,10 +166,8 @@ describe('reactiverefs', () => {
*/
it('Should increase refs with an increase in divs', async () => {
const testRefsComponent = await renderTestRefsComponent();
const clickIncrementer = ReactTestUtils.findRenderedDOMComponentWithClass(
testRefsComponent,
'clickIncrementer',
);
const clickIncrementer =
testRefsComponent.container.querySelector('.clickIncrementer');

expectClickLogsLengthToBe(testRefsComponent, 1);

Expand Down Expand Up @@ -202,7 +196,7 @@ describe('reactiverefs', () => {

if (!ReactFeatureFlags.disableModulePatternComponents) {
describe('factory components', () => {
it('Should correctly get the ref', () => {
it('Should correctly get the ref', async () => {
function Comp() {
return {
elemRef: React.createRef(),
Expand All @@ -213,9 +207,14 @@ if (!ReactFeatureFlags.disableModulePatternComponents) {
}

let inst;
expect(
() => (inst = ReactTestUtils.renderIntoDocument(<Comp />)),
).toErrorDev(
await expect(async () => {
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);

await act(() => {
root.render(<Comp ref={current => (inst = current)} />);
});
}).toErrorDev(
'Warning: The <Comp /> component appears to be a function component that returns a class instance. ' +
'Change Comp to a class that extends React.Component instead. ' +
"If you can't use a class try assigning the prototype on the function as a workaround. " +
Expand All @@ -237,10 +236,10 @@ describe('ref swapping', () => {
React = require('react');
ReactDOMClient = require('react-dom/client');
ReactFeatureFlags = require('shared/ReactFeatureFlags');
ReactTestUtils = require('react-dom/test-utils');
act = require('internal-test-utils').act;

RefHopsAround = class extends React.Component {
container = null;
state = {count: 0};
hopRef = React.createRef();
divOneRef = React.createRef();
Expand All @@ -260,7 +259,7 @@ describe('ref swapping', () => {
* points to the correct divs.
*/
return (
<div>
<div ref={current => (this.container = current)}>
<div
className="first"
ref={count % 3 === 0 ? this.hopRef : this.divOneRef}
Expand All @@ -279,32 +278,33 @@ describe('ref swapping', () => {
};
});

it('Allow refs to hop around children correctly', () => {
const refHopsAround = ReactTestUtils.renderIntoDocument(<RefHopsAround />);
it('Allow refs to hop around children correctly', async () => {
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);

const firstDiv = ReactTestUtils.findRenderedDOMComponentWithClass(
refHopsAround,
'first',
);
const secondDiv = ReactTestUtils.findRenderedDOMComponentWithClass(
refHopsAround,
'second',
);
const thirdDiv = ReactTestUtils.findRenderedDOMComponentWithClass(
refHopsAround,
'third',
);
let refHopsAround;
await act(() => {
root.render(<RefHopsAround ref={current => (refHopsAround = current)} />);
});

const firstDiv = refHopsAround.container.querySelector('.first');
const secondDiv = refHopsAround.container.querySelector('.second');
const thirdDiv = refHopsAround.container.querySelector('.third');

expect(refHopsAround.hopRef.current).toEqual(firstDiv);
expect(refHopsAround.divTwoRef.current).toEqual(secondDiv);
expect(refHopsAround.divThreeRef.current).toEqual(thirdDiv);

refHopsAround.moveRef();
await act(() => {
refHopsAround.moveRef();
});
expect(refHopsAround.divOneRef.current).toEqual(firstDiv);
expect(refHopsAround.hopRef.current).toEqual(secondDiv);
expect(refHopsAround.divThreeRef.current).toEqual(thirdDiv);

refHopsAround.moveRef();
await act(() => {
refHopsAround.moveRef();
});
expect(refHopsAround.divOneRef.current).toEqual(firstDiv);
expect(refHopsAround.divTwoRef.current).toEqual(secondDiv);
expect(refHopsAround.hopRef.current).toEqual(thirdDiv);
Expand All @@ -313,7 +313,9 @@ describe('ref swapping', () => {
* Make sure that after the third, we're back to where we started and the
* refs are completely restored.
*/
refHopsAround.moveRef();
await act(() => {
refHopsAround.moveRef();
});
expect(refHopsAround.hopRef.current).toEqual(firstDiv);
expect(refHopsAround.divTwoRef.current).toEqual(secondDiv);
expect(refHopsAround.divThreeRef.current).toEqual(thirdDiv);
Expand Down Expand Up @@ -364,15 +366,20 @@ describe('ref swapping', () => {
expect(refCalled).toBe(1);
});

it('coerces numbers to strings', () => {
it('coerces numbers to strings', async () => {
class A extends React.Component {
render() {
return <div ref={1} />;
}
}
let a;
expect(() => {
a = ReactTestUtils.renderIntoDocument(<A />);
await expect(async () => {
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);

await act(() => {
root.render(<A ref={current => (a = current)} />);
});
}).toErrorDev([
'Warning: Component "A" contains the string ref "1". ' +
'Support for string refs will be removed in a future major release. ' +
Expand Down