Skip to content

Commit

Permalink
chore: use versioned render in profilerStore test (facebook#28238)
Browse files Browse the repository at this point in the history
  • Loading branch information
hoxyq authored and AndyPengc12 committed Apr 15, 2024
1 parent 30cc868 commit 6cf619d
Showing 1 changed file with 20 additions and 41 deletions.
61 changes: 20 additions & 41 deletions packages/react-devtools-shared/src/__tests__/profilerStore-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,27 +9,28 @@

import type Store from 'react-devtools-shared/src/devtools/store';

import {getVersionedRenderImplementation} from './utils';

describe('ProfilerStore', () => {
let React;
let ReactDOM;
let legacyRender;
let store: Store;
let utils;

beforeEach(() => {
utils = require('./utils');
utils.beforeEachProfiling();

legacyRender = utils.legacyRender;

store = global.store;
store.collapseNodesByDefault = false;
store.recordChangeDescriptions = true;

React = require('react');
ReactDOM = require('react-dom');
});

const {render, unmount} = getVersionedRenderImplementation();
const {render: renderOther, unmount: unmountOther} =
getVersionedRenderImplementation();

// @reactVersion >= 16.9
it('should not remove profiling data when roots are unmounted', async () => {
const Parent = ({count}) =>
Expand All @@ -38,32 +39,27 @@ describe('ProfilerStore', () => {
.map((_, index) => <Child key={index} duration={index} />);
const Child = () => <div>Hi!</div>;

const containerA = document.createElement('div');
const containerB = document.createElement('div');

utils.act(() => {
legacyRender(<Parent key="A" count={3} />, containerA);
legacyRender(<Parent key="B" count={2} />, containerB);
render(<Parent key="A" count={3} />);
renderOther(<Parent key="B" count={2} />);
});

utils.act(() => store.profilerStore.startProfiling());

utils.act(() => {
legacyRender(<Parent key="A" count={4} />, containerA);
legacyRender(<Parent key="B" count={1} />, containerB);
render(<Parent key="A" count={4} />);
renderOther(<Parent key="B" count={1} />);
});

utils.act(() => store.profilerStore.stopProfiling());

const rootA = store.roots[0];
const rootB = store.roots[1];

utils.act(() => ReactDOM.unmountComponentAtNode(containerB));

utils.act(() => unmountOther());
expect(store.profilerStore.getDataForRoot(rootA)).not.toBeNull();

utils.act(() => ReactDOM.unmountComponentAtNode(containerA));

utils.act(() => unmount());
expect(store.profilerStore.getDataForRoot(rootB)).not.toBeNull();
});

Expand Down Expand Up @@ -95,14 +91,9 @@ describe('ProfilerStore', () => {
return <input ref={inputRef} value={name} onChange={handleChange} />;
};

const container = document.createElement('div');

// This element has to be in the <body> for the event system to work.
document.body.appendChild(container);

// It's important that this test uses legacy sync mode.
// The root API does not trigger this particular failing case.
legacyRender(<ControlledInput />, container);
utils.act(() => render(<ControlledInput />));

utils.act(() => store.profilerStore.startProfiling());

Expand Down Expand Up @@ -148,14 +139,9 @@ describe('ProfilerStore', () => {
return <input ref={inputRef} onBlur={handleBlur} />;
};

const container = document.createElement('div');

// This element has to be in the <body> for the event system to work.
document.body.appendChild(container);

// It's important that this test uses legacy sync mode.
// The root API does not trigger this particular failing case.
legacyRender(<Example />, container);
utils.act(() => render(<Example />));

expect(commitCount).toBe(1);
commitCount = 0;
Expand All @@ -164,10 +150,10 @@ describe('ProfilerStore', () => {

// Focus and blur.
const target = inputRef.current;
target.focus();
target.blur();
target.focus();
target.blur();
utils.act(() => target.focus());
utils.act(() => target.blur());
utils.act(() => target.focus());
utils.act(() => target.blur());
expect(commitCount).toBe(1);

utils.act(() => store.profilerStore.stopProfiling());
Expand Down Expand Up @@ -204,14 +190,9 @@ describe('ProfilerStore', () => {
return state.hasOwnProperty;
};

const container = document.createElement('div');

// This element has to be in the <body> for the event system to work.
document.body.appendChild(container);

// It's important that this test uses legacy sync mode.
// The root API does not trigger this particular failing case.
legacyRender(<ControlledInput />, container);
utils.act(() => render(<ControlledInput />));

utils.act(() => store.profilerStore.startProfiling());
utils.act(() =>
Expand Down Expand Up @@ -243,9 +224,7 @@ describe('ProfilerStore', () => {
);
};

const container = document.createElement('div');

utils.act(() => legacyRender(<App />, container));
utils.act(() => render(<App />));
utils.act(() => store.profilerStore.startProfiling());
});
});

0 comments on commit 6cf619d

Please sign in to comment.