Skip to content

Commit 2047c90

Browse files
committed
chore: add version render implementation for DevTools tests
1 parent 319ea12 commit 2047c90

File tree

1 file changed

+125
-0
lines changed
  • packages/react-devtools-shared/src/__tests__

1 file changed

+125
-0
lines changed

packages/react-devtools-shared/src/__tests__/utils.js

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,131 @@ export async function actAsync(
9999
}
100100
}
101101

102+
type RenderImplementation = {
103+
render: (elements: React.Node) => () => void,
104+
unmount: () => void,
105+
createContainer: () => void,
106+
getContainer: () => ?HTMLElement,
107+
};
108+
109+
export function getLegacyRenderImplementation(): RenderImplementation {
110+
let ReactDOM;
111+
let container;
112+
let unmounted = false;
113+
114+
beforeEach(() => {
115+
ReactDOM = require('react-dom');
116+
117+
createContainer();
118+
});
119+
120+
afterEach(() => {
121+
if (!unmounted) {
122+
unmount();
123+
}
124+
125+
ReactDOM = null;
126+
container = null;
127+
});
128+
129+
function render(elements: React.Node) {
130+
withErrorsOrWarningsIgnored(
131+
['ReactDOM.render is no longer supported in React 18'],
132+
() => {
133+
ReactDOM.render(elements, container);
134+
},
135+
);
136+
137+
return unmount;
138+
}
139+
140+
function unmount() {
141+
unmounted = true;
142+
143+
ReactDOM.unmountComponentAtNode(container);
144+
document.body.removeChild(container);
145+
}
146+
147+
function createContainer() {
148+
unmounted = false;
149+
150+
container = document.createElement('div');
151+
document.body.appendChild(container);
152+
}
153+
154+
function getContainer() {
155+
return container;
156+
}
157+
158+
return {
159+
render,
160+
unmount,
161+
createContainer,
162+
getContainer,
163+
};
164+
}
165+
166+
export function getModernRenderImplementation(): RenderImplementation {
167+
let ReactDOMClient;
168+
let container;
169+
let root;
170+
let unmounted = false;
171+
172+
beforeEach(() => {
173+
ReactDOMClient = require('react-dom/client');
174+
175+
createContainer();
176+
});
177+
178+
afterEach(() => {
179+
if (!unmounted) {
180+
unmount();
181+
}
182+
183+
ReactDOMClient = null;
184+
container = null;
185+
root = null;
186+
});
187+
188+
function render(elements: React.Node) {
189+
root.render(elements);
190+
191+
return unmount;
192+
}
193+
194+
function unmount() {
195+
unmounted = true;
196+
197+
root.unmount();
198+
document.body.removeChild(container);
199+
}
200+
201+
function createContainer() {
202+
unmounted = false;
203+
204+
container = document.createElement('div');
205+
document.body.appendChild(container);
206+
207+
root = ReactDOMClient.createRoot(container);
208+
}
209+
210+
function getContainer() {
211+
return container;
212+
}
213+
214+
return {
215+
render,
216+
unmount,
217+
createContainer,
218+
getContainer,
219+
};
220+
}
221+
222+
export const getVersionedRenderImplementation: () => RenderImplementation =
223+
semver.lt(requestedReactVersion, '18.0.0')
224+
? getLegacyRenderImplementation
225+
: getModernRenderImplementation;
226+
102227
export function beforeEachProfiling(): void {
103228
// Mock React's timing information so that test runs are predictable.
104229
jest.mock('scheduler', () => jest.requireActual('scheduler/unstable_mock'));

0 commit comments

Comments
 (0)