Skip to content

Commit

Permalink
chore: add version render implementation for DevTools tests
Browse files Browse the repository at this point in the history
  • Loading branch information
hoxyq committed Feb 5, 2024
1 parent 319ea12 commit 7e6a6b8
Showing 1 changed file with 122 additions and 0 deletions.
122 changes: 122 additions & 0 deletions packages/react-devtools-shared/src/__tests__/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
import type Store from 'react-devtools-shared/src/devtools/store';
import type {ProfilingDataFrontend} from 'react-devtools-shared/src/devtools/views/Profiler/types';
import type {ElementType} from 'react-devtools-shared/src/frontend/types';
import type {Node as ReactNode} from 'react';

import {ReactVersion} from '../../../../ReactVersions';

Expand Down Expand Up @@ -99,6 +100,127 @@ export async function actAsync(
}
}

type RenderImplementation = {
render: (elements: ?ReactNode) => () => void,
unmount: () => void,
createContainer: () => void,
getContainer: () => ?HTMLElement,
};

export function getLegacyRenderImplementation(): RenderImplementation {
let ReactDOM;
let container;
let containersToRemove = [];

beforeEach(() => {
ReactDOM = require('react-dom');

createContainer();
});

afterEach(() => {
containersToRemove.forEach(container =>
document.body.removeChild(container),
);
containersToRemove.splice(0, containersToRemove.length);

ReactDOM = null;
container = null;
});

function render(elements) {
withErrorsOrWarningsIgnored(
['ReactDOM.render is no longer supported in React 18'],
() => {
ReactDOM.render(elements, container);
},
);

return unmount;
}

function unmount() {
ReactDOM.unmountComponentAtNode(container);
}

function createContainer() {
container = document.createElement('div');
document.body.appendChild(container);

containersToRemove.push(container);
}

function getContainer() {
return container;
}

return {
render,
unmount,
createContainer,
getContainer,
};
}

export function getModernRenderImplementation(): RenderImplementation {
let ReactDOMClient;
let container;
let root;
let containersToRemove = [];

beforeEach(() => {
ReactDOMClient = require('react-dom/client');

createContainer();
});

afterEach(() => {
containersToRemove.forEach(container =>
document.body.removeChild(container),
);
containersToRemove.splice(0, containersToRemove.length);

ReactDOMClient = null;
container = null;
root = null;
});

function render(elements) {
root.render(elements);

return unmount;
}

function unmount() {
root.unmount();
}

function createContainer() {
container = document.createElement('div');
document.body.appendChild(container);

root = ReactDOMClient.createRoot(container);

containersToRemove.push(container);
}

function getContainer() {
return container;
}

return {
render,
unmount,
createContainer,
getContainer,
};
}

export const getVersionedRenderImplementation: () => RenderImplementation =
semver.lt(requestedReactVersion, '18.0.0')
? getLegacyRenderImplementation
: getModernRenderImplementation;

export function beforeEachProfiling(): void {
// Mock React's timing information so that test runs are predictable.
jest.mock('scheduler', () => jest.requireActual('scheduler/unstable_mock'));
Expand Down

0 comments on commit 7e6a6b8

Please sign in to comment.