(this.container = current)}>
Reset Me By Clicking This.
@@ -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);
@@ -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(),
@@ -213,9 +207,14 @@ if (!ReactFeatureFlags.disableModulePatternComponents) {
}
let inst;
- expect(
- () => (inst = ReactTestUtils.renderIntoDocument(
)),
- ).toErrorDev(
+ await expect(async () => {
+ const container = document.createElement('div');
+ const root = ReactDOMClient.createRoot(container);
+
+ await act(() => {
+ root.render(
(inst = current)} />);
+ });
+ }).toErrorDev(
'Warning: The 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. " +
@@ -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();
@@ -260,7 +259,7 @@ describe('ref swapping', () => {
* points to the correct divs.
*/
return (
-
+
(this.container = current)}>
{
};
});
- it('Allow refs to hop around children correctly', () => {
- const refHopsAround = ReactTestUtils.renderIntoDocument(
);
+ 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 = 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);
@@ -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);
@@ -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 ;
}
}
let a;
- expect(() => {
- a = ReactTestUtils.renderIntoDocument();
+ await expect(async () => {
+ const container = document.createElement('div');
+ const root = ReactDOMClient.createRoot(container);
+
+ await act(() => {
+ root.render( (a = current)} />);
+ });
}).toErrorDev([
'Warning: Component "A" contains the string ref "1". ' +
'Support for string refs will be removed in a future major release. ' +