maxjhandsome
/
react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

DevTools: Update tests to fix warnings/errors (#21748) 

Some new ones had slipped in (e.g. deprecated ReactDOM.render message from 18)
This commit is contained in:
Brian Vaughn 2021-06-24 22:42:44 -04:00 committed by GitHub
parent 534c9c52ec
commit 73ffce1b6f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 391 additions and 363 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/react-devtools-shared/src/__tests__/FastRefreshDevToolsIntegration-test.js vendored
View File

@ -9,13 +9,13 @@
describe('Fast Refresh', () => {
let React;
let ReactDOM;
let ReactFreshRuntime;
let act;
let babel;
let container;
let exportsObj;
let freshPlugin;
let legacyRender;
let store;
let withErrorsOrWarningsIgnored;
@ -37,10 +37,9 @@ describe('Fast Refresh', () => {
ReactFreshRuntime = require('react-refresh/runtime');
ReactFreshRuntime.injectIntoGlobalHook(global);
ReactDOM = require('react-dom');
const utils = require('./utils');
act = utils.act;
legacyRender = utils.legacyRender;
withErrorsOrWarningsIgnored = utils.withErrorsOrWarningsIgnored;
});
@ -74,7 +73,7 @@ describe('Fast Refresh', () => {
function render(source) {
const Component = execute(source);
act(() => {
ReactDOM.render(<Component />, container);
legacyRender(<Component />, container);
});
// Module initialization shouldn't be counted as a hot update.
expect(ReactFreshRuntime.performReactRefresh()).toBe(null);
@ -99,7 +98,7 @@ describe('Fast Refresh', () => {
// Here, we'll just force a re-render using the newer type to emulate this.
const NextComponent = nextExports.default;
act(() => {
ReactDOM.render(<NextComponent />, container);
legacyRender(<NextComponent />, container);
});
}
act(() => {

8
packages/react-devtools-shared/src/__tests__/componentStacks-test.js vendored
View File

@ -25,8 +25,8 @@ function normalizeCodeLocInfo(str) {
describe('component stack', () => {
let React;
let ReactDOM;
let act;
let legacyRender;
let mockError;
let mockWarn;
@ -44,9 +44,9 @@ describe('component stack', () => {
const utils = require('./utils');
act = utils.act;
legacyRender = utils.legacyRender;
React = require('react');
ReactDOM = require('react-dom');
});
it('should log the current component stack along with an error or warning', () => {
@ -60,7 +60,7 @@ describe('component stack', () => {
const container = document.createElement('div');
act(() => ReactDOM.render(<Grandparent />, container));
act(() => legacyRender(<Grandparent />, container));
expect(mockError).toHaveBeenCalledWith(
'Test error.',
@ -93,7 +93,7 @@ describe('component stack', () => {
};
const container = document.createElement('div');
act(() => ReactDOM.render(<Example test="abc" />, container));
act(() => legacyRender(<Example test="abc" />, container));
expect(useEffectCount).toBe(1);

24
packages/react-devtools-shared/src/__tests__/console-test.js vendored
View File

@ -9,9 +9,9 @@
describe('console', () => {
let React;
let ReactDOM;
let act;
let fakeConsole;
let legacyRender;
let mockError;
let mockInfo;
let mockLog;
@ -58,10 +58,10 @@ describe('console', () => {
};
React = require('react');
ReactDOM = require('react-dom');
const utils = require('./utils');
act = utils.act;
legacyRender = utils.legacyRender;
});
function normalizeCodeLocInfo(str) {
@ -176,7 +176,7 @@ describe('console', () => {
return null;
};
act(() => ReactDOM.render(<Child />, document.createElement('div')));
act(() => legacyRender(<Child />, document.createElement('div')));
expect(mockWarn).toHaveBeenCalledTimes(1);
expect(mockWarn.mock.calls[0]).toHaveLength(1);
@ -203,7 +203,7 @@ describe('console', () => {
return null;
};
act(() => ReactDOM.render(<Parent />, document.createElement('div')));
act(() => legacyRender(<Parent />, document.createElement('div')));
expect(mockLog).toHaveBeenCalledTimes(1);
expect(mockLog.mock.calls[0]).toHaveLength(1);
@ -243,7 +243,7 @@ describe('console', () => {
return null;
};
act(() => ReactDOM.render(<Parent />, document.createElement('div')));
act(() => legacyRender(<Parent />, document.createElement('div')));
expect(mockLog).toHaveBeenCalledTimes(2);
expect(mockLog.mock.calls[0]).toHaveLength(1);
@ -298,8 +298,8 @@ describe('console', () => {
}
const container = document.createElement('div');
act(() => ReactDOM.render(<Parent />, container));
act(() => ReactDOM.render(<Parent />, container));
act(() => legacyRender(<Parent />, container));
act(() => legacyRender(<Parent />, container));
expect(mockLog).toHaveBeenCalledTimes(2);
expect(mockLog.mock.calls[0]).toHaveLength(1);
@ -350,7 +350,7 @@ describe('console', () => {
}
}
act(() => ReactDOM.render(<Parent />, document.createElement('div')));
act(() => legacyRender(<Parent />, document.createElement('div')));
expect(mockLog).toHaveBeenCalledTimes(1);
expect(mockLog.mock.calls[0]).toHaveLength(1);
@ -377,7 +377,7 @@ describe('console', () => {
};
unpatchConsole();
act(() => ReactDOM.render(<Child />, document.createElement('div')));
act(() => legacyRender(<Child />, document.createElement('div')));
expect(mockWarn).toHaveBeenCalledTimes(1);
expect(mockWarn.mock.calls[0]).toHaveLength(1);
@ -391,7 +391,7 @@ describe('console', () => {
breakOnWarn: false,
showInlineWarningsAndErrors: false,
});
act(() => ReactDOM.render(<Child />, document.createElement('div')));
act(() => legacyRender(<Child />, document.createElement('div')));
expect(mockWarn).toHaveBeenCalledTimes(2);
expect(mockWarn.mock.calls[1]).toHaveLength(2);
@ -435,7 +435,7 @@ describe('console', () => {
return null;
};
act(() => ReactDOM.render(<Parent />, document.createElement('div')));
act(() => legacyRender(<Parent />, document.createElement('div')));
expect(mockLog).toHaveBeenCalledTimes(1);
expect(mockLog.mock.calls[0]).toHaveLength(1);
@ -460,7 +460,7 @@ describe('console', () => {
return null;
};
act(() => ReactDOM.render(<Component />, document.createElement('div')));
act(() => legacyRender(<Component />, document.createElement('div')));
expect(mockWarn).toHaveBeenCalledTimes(1);
expect(mockWarn.mock.calls[0][0]).toBe('Symbol:');

13
packages/react-devtools-shared/src/__tests__/editing-test.js vendored
View File

@ -13,8 +13,8 @@ import type Store from 'react-devtools-shared/src/devtools/store';
describe('editing interface', () => {
let PropTypes;
let React;
let ReactDOM;
let bridge: FrontendBridge;
let legacyRender;
let store: Store;
let utils;
@ -25,6 +25,8 @@ describe('editing interface', () => {
beforeEach(() => {
utils = require('./utils');
legacyRender = utils.legacyRender;
bridge = global.bridge;
store = global.store;
store.collapseNodesByDefault = false;
@ -32,7 +34,6 @@ describe('editing interface', () => {
PropTypes = require('prop-types');
React = require('react');
ReactDOM = require('react-dom');
});
describe('props', () => {
@ -67,7 +68,7 @@ describe('editing interface', () => {
const container = document.createElement('div');
await utils.actAsync(() =>
ReactDOM.render(
legacyRender(
<>
<ClassComponent
array={[1, 2, 3]}
@ -435,7 +436,7 @@ describe('editing interface', () => {
const container = document.createElement('div');
await utils.actAsync(() =>
ReactDOM.render(
legacyRender(
<ClassComponent object={{nested: 'initial'}} shallow="initial" />,
container,
),
@ -652,7 +653,7 @@ describe('editing interface', () => {
const container = document.createElement('div');
await utils.actAsync(() =>
ReactDOM.render(<FunctionComponent />, container),
legacyRender(<FunctionComponent />, container),
);
hookID = 0; // index
@ -902,7 +903,7 @@ describe('editing interface', () => {
const container = document.createElement('div');
await utils.actAsync(() =>
ReactDOM.render(
legacyRender(
<LegacyContextProvider>
<ClassComponent />
</LegacyContextProvider>,

89
packages/react-devtools-shared/src/__tests__/inspectedElement-test.js vendored
View File

@ -31,12 +31,15 @@ describe('InspectedElement', () => {
let TestUtilsAct;
let TestRendererAct;
let legacyRender;
let testRendererInstance;
beforeEach(() => {
utils = require('./utils');
utils.beforeEachProfiling();
legacyRender = utils.legacyRender;
bridge = global.bridge;
store = global.store;
store.collapseNodesByDefault = false;
@ -139,7 +142,7 @@ describe('InspectedElement', () => {
const container = document.createElement('div');
await utils.actAsync(() =>
ReactDOM.render(<Example a={1} b="abc" />, container),
legacyRender(<Example a={1} b="abc" />, container),
);
const inspectedElement = await inspectElementAtIndex(0);
@ -209,7 +212,7 @@ describe('InspectedElement', () => {
const container = document.createElement('div');
await utils.actAsync(() =>
ReactDOM.render(
legacyRender(
<React.Fragment>
<LegacyContextProvider>
<LegacyContextConsumer />
@ -270,7 +273,7 @@ describe('InspectedElement', () => {
const container = document.createElement('div');
await utils.actAsync(
() => ReactDOM.render(<Example a={1} b="abc" />, container),
() => legacyRender(<Example a={1} b="abc" />, container),
false,
);
@ -283,7 +286,7 @@ describe('InspectedElement', () => {
`);
await utils.actAsync(
() => ReactDOM.render(<Example a={2} b="def" />, container),
() => legacyRender(<Example a={2} b="def" />, container),
false,
);
@ -319,7 +322,7 @@ describe('InspectedElement', () => {
const container = document.createElement('div');
await utils.actAsync(() =>
ReactDOM.render(
legacyRender(
<Wrapper>
<Target a={1} b="abc" />
</Wrapper>,
@ -349,7 +352,7 @@ describe('InspectedElement', () => {
await utils.actAsync(
() =>
ReactDOM.render(
legacyRender(
<Wrapper>
<Target a={2} b="def" />
</Wrapper>,
@ -416,7 +419,7 @@ describe('InspectedElement', () => {
const container = document.createElement('div');
await utils.actAsync(() =>
ReactDOM.render(
legacyRender(
<Example
boolean_false={false}
boolean_true={true}
@ -505,7 +508,7 @@ describe('InspectedElement', () => {
const container = document.createElement('div');
await utils.actAsync(() =>
ReactDOM.render(
legacyRender(
<Example
anonymous_fn={instance.anonymousFunction}
array_buffer={arrayBuffer}
@ -669,7 +672,7 @@ describe('InspectedElement', () => {
const iterable = generator();
await utils.actAsync(() =>
ReactDOM.render(<Example prop={iterable} />, container),
legacyRender(<Example prop={iterable} />, container),
);
const inspectedElement = await inspectElementAtIndex(0);
@ -693,7 +696,7 @@ describe('InspectedElement', () => {
const container = document.createElement('div');
await utils.actAsync(() =>
ReactDOM.render(<Example object={object} />, container),
legacyRender(<Example object={object} />, container),
);
const inspectedElement = await inspectElementAtIndex(0);
@ -718,7 +721,7 @@ describe('InspectedElement', () => {
const container = document.createElement('div');
await utils.actAsync(() =>
ReactDOM.render(<Example object={object} />, container),
legacyRender(<Example object={object} />, container),
);
const inspectedElement = await inspectElementAtIndex(0);
@ -755,7 +758,7 @@ describe('InspectedElement', () => {
const container = document.createElement('div');
await utils.actAsync(() =>
ReactDOM.render(<Example data={new CustomData()} />, container),
legacyRender(<Example data={new CustomData()} />, container),
);
const inspectedElement = await inspectElementAtIndex(0);
@ -834,7 +837,7 @@ describe('InspectedElement', () => {
const container = document.createElement('div');
await utils.actAsync(() =>
ReactDOM.render(<Example object={object} />, container),
legacyRender(<Example object={object} />, container),
);
const inspectedElement = await inspectElementAtIndex(0);
@ -889,7 +892,7 @@ describe('InspectedElement', () => {
const Example = ({data}) => null;
const container = document.createElement('div');
await utils.actAsync(() =>
ReactDOM.render(<Example data={testData} />, container),
legacyRender(<Example data={testData} />, container),
);
const inspectedElement = await inspectElementAtIndex(0);
@ -920,7 +923,7 @@ describe('InspectedElement', () => {
const container = document.createElement('div');
await utils.actAsync(() =>
ReactDOM.render(
legacyRender(
<Example
nestedObject={{
a: {
@ -1075,7 +1078,7 @@ describe('InspectedElement', () => {
const container = document.createElement('div');
await utils.actAsync(() =>
ReactDOM.render(
legacyRender(
<Example
set_of_sets={new Set([new Set([1, 2, 3]), new Set(['a', 'b', 'c'])])}
/>,
@ -1141,7 +1144,7 @@ describe('InspectedElement', () => {
const container = document.createElement('div');
await utils.actAsync(() =>
ReactDOM.render(
legacyRender(
<Example
nestedObject={{
a: {
@ -1245,7 +1248,7 @@ describe('InspectedElement', () => {
TestRendererAct(() => {
TestUtilsAct(() => {
ReactDOM.render(
legacyRender(
<Example
nestedObject={{
a: {
@ -1304,7 +1307,7 @@ describe('InspectedElement', () => {
const container = document.createElement('div');
await utils.actAsync(() =>
ReactDOM.render(
legacyRender(
<Example
nestedObject={{
a: {
@ -1383,7 +1386,7 @@ describe('InspectedElement', () => {
TestRendererAct(() => {
TestUtilsAct(() => {
ReactDOM.render(
legacyRender(
<Example
nestedObject={{
a: {
@ -1439,7 +1442,7 @@ describe('InspectedElement', () => {
const container = document.createElement('div');
await utils.actAsync(() =>
ReactDOM.render(
legacyRender(
<Example
nestedObject={{
value: 1,
@ -1487,7 +1490,7 @@ describe('InspectedElement', () => {
`);
TestUtilsAct(() => {
ReactDOM.render(
legacyRender(
<Example
nestedObject={{
value: 2,
@ -1529,7 +1532,7 @@ describe('InspectedElement', () => {
const container = document.createElement('div');
await utils.actAsync(() =>
ReactDOM.render(<Example a={1} b="abc" />, container),
legacyRender(<Example a={1} b="abc" />, container),
);
const inspectedElement = await inspectElementAtIndex(0);
@ -1573,7 +1576,7 @@ describe('InspectedElement', () => {
};
await utils.actAsync(() =>
ReactDOM.render(
legacyRender(
<Example nestedObject={nestedObject} />,
document.createElement('div'),
),
@ -1632,7 +1635,7 @@ describe('InspectedElement', () => {
};
await utils.actAsync(() =>
ReactDOM.render(
legacyRender(
<Example nestedObject={nestedObject} />,
document.createElement('div'),
),
@ -1707,7 +1710,7 @@ describe('InspectedElement', () => {
const bigInt = BigInt(123); // eslint-disable-line no-undef
await utils.actAsync(() =>
ReactDOM.render(
legacyRender(
<Example
arrayBuffer={arrayBuffer}
dataView={dataView}
@ -1784,7 +1787,7 @@ describe('InspectedElement', () => {
}
await utils.actAsync(() =>
ReactDOM.render(<DisplayedComplexValue />, container),
legacyRender(<DisplayedComplexValue />, container),
);
const {hooks} = await inspectElementAtIndex(0);
@ -1826,7 +1829,7 @@ describe('InspectedElement', () => {
const container = document.createElement('div');
await utils.actAsync(() =>
ReactDOM.render(<Example proxy={proxy} />, container),
legacyRender(<Example proxy={proxy} />, container),
);
const inspectedElement = await inspectElementAtIndex(0);
@ -1860,7 +1863,7 @@ describe('InspectedElement', () => {
const container = document.createElement('div');
await utils.actAsync(() =>
ReactDOM.render(<Example a={1} b="abc" />, container),
legacyRender(<Example a={1} b="abc" />, container),
);
await inspectElementAtIndex(0);
@ -1893,7 +1896,7 @@ describe('InspectedElement', () => {
const container = document.createElement('div');
await utils.actAsync(() =>
ReactDOM.render(<Example a={1} b="abc" />, container),
legacyRender(<Example a={1} b="abc" />, container),
);
await inspectElementAtIndex(0);
@ -1926,7 +1929,7 @@ describe('InspectedElement', () => {
const container = document.createElement('div');
await utils.actAsync(() =>
ReactDOM.render(<Example a={1} b="abc" />, container),
legacyRender(<Example a={1} b="abc" />, container),
);
await inspectElementAtIndex(0);
@ -1963,7 +1966,7 @@ describe('InspectedElement', () => {
const container = document.createElement('div');
await utils.actAsync(() =>
ReactDOM.render(<Example a={1} b="abc" />, container),
legacyRender(<Example a={1} b="abc" />, container),
);
await inspectElementAtIndex(0);
@ -2030,7 +2033,7 @@ describe('InspectedElement', () => {
await withErrorsOrWarningsIgnored(['test-only: '], async () => {
await utils.actAsync(() =>
ReactDOM.render(<Example repeatWarningCount={1} />, container),
legacyRender(<Example repeatWarningCount={1} />, container),
);
});
@ -2066,7 +2069,7 @@ describe('InspectedElement', () => {
const container = document.createElement('div');
await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {
await utils.actAsync(() =>
ReactDOM.render(<Example repeatWarningCount={1} />, container),
legacyRender(<Example repeatWarningCount={1} />, container),
);
});
const data = await getErrorsAndWarningsForElementAtIndex(0);
@ -2102,7 +2105,7 @@ describe('InspectedElement', () => {
const container = document.createElement('div');
await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {
await utils.actAsync(() =>
ReactDOM.render(<Example repeatWarningCount={1} />, container),
legacyRender(<Example repeatWarningCount={1} />, container),
);
});
@ -2139,7 +2142,7 @@ describe('InspectedElement', () => {
const container = document.createElement('div');
await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {
await utils.actAsync(() =>
ReactDOM.render(<Example repeatWarningCount={1} />, container),
legacyRender(<Example repeatWarningCount={1} />, container),
);
});
@ -2172,7 +2175,7 @@ describe('InspectedElement', () => {
['Warning: Each child in a list should have a unique "key" prop.'],
async () => {
await utils.actAsync(() =>
ReactDOM.render(<Example repeatWarningCount={1} />, container),
legacyRender(<Example repeatWarningCount={1} />, container),
);
},
);
@ -2202,7 +2205,7 @@ describe('InspectedElement', () => {
const container = document.createElement('div');
await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {
await utils.actAsync(() =>
ReactDOM.render(<Example repeatWarningCount={1} />, container),
legacyRender(<Example repeatWarningCount={1} />, container),
);
});
@ -2233,7 +2236,7 @@ describe('InspectedElement', () => {
const container = document.createElement('div');
await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {
await utils.actAsync(() =>
ReactDOM.render(
legacyRender(
<React.Fragment>
<Example id={1} />
<Example id={2} />
@ -2330,7 +2333,7 @@ describe('InspectedElement', () => {
const container = document.createElement('div');
await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {
await utils.actAsync(() =>
ReactDOM.render(
legacyRender(
<React.Fragment>
<Example id={1} />
<Example id={2} />
@ -2433,7 +2436,7 @@ describe('InspectedElement', () => {
const Example = () => 'example';
await utils.actAsync(() =>
ReactDOM.render(
legacyRender(
<ErrorBoundary>
<Example />
</ErrorBoundary>,
@ -2486,7 +2489,9 @@ describe('InspectedElement', () => {
await toggleError(true);
// we are in error state now, <Example /> won't show up
expect(store.getElementIDAtIndex(1)).toBe(null);
withErrorsOrWarningsIgnored(['Invalid index'], () => {
expect(store.getElementIDAtIndex(1)).toBe(null);
});
// Inpsect <ErrorBoundary /> to toggle off the error state
inspectedElement = await inspect(0);

13
packages/react-devtools-shared/src/__tests__/ownersListContext-test.js vendored
View File

@ -14,9 +14,9 @@ import type Store from 'react-devtools-shared/src/devtools/store';
describe('OwnersListContext', () => {
let React;
let ReactDOM;
let TestRenderer: ReactTestRenderer;
let bridge: FrontendBridge;
let legacyRender;
let store: Store;
let utils;
@ -30,12 +30,13 @@ describe('OwnersListContext', () => {
utils = require('./utils');
utils.beforeEachProfiling();
legacyRender = utils.legacyRender;
bridge = global.bridge;
store = global.store;
store.collapseNodesByDefault = false;
React = require('react');
ReactDOM = require('react-dom');
TestRenderer = utils.requireTestRenderer();
BridgeContext = require('react-devtools-shared/src/devtools/views/context')
@ -73,7 +74,7 @@ describe('OwnersListContext', () => {
const Child = () => null;
utils.act(() =>
ReactDOM.render(<Grandparent />, document.createElement('div')),
legacyRender(<Grandparent />, document.createElement('div')),
);
expect(store).toMatchSnapshot('mount');
@ -132,7 +133,7 @@ describe('OwnersListContext', () => {
const Child = () => null;
utils.act(() =>
ReactDOM.render(<Grandparent />, document.createElement('div')),
legacyRender(<Grandparent />, document.createElement('div')),
);
expect(store).toMatchSnapshot('mount');
@ -170,7 +171,7 @@ describe('OwnersListContext', () => {
const Parent = () => null;
utils.act(() =>
ReactDOM.render(<Grandparent />, document.createElement('div')),
legacyRender(<Grandparent />, document.createElement('div')),
);
expect(store).toMatchSnapshot('mount');
@ -211,7 +212,7 @@ describe('OwnersListContext', () => {
};
utils.act(() =>
ReactDOM.render(<Grandparent />, document.createElement('div')),
legacyRender(<Grandparent />, document.createElement('div')),
);
let didFinish = false;

43
packages/react-devtools-shared/src/__tests__/profilerContext-test.js vendored
View File

@ -18,6 +18,7 @@ describe('ProfilerContext', () => {
let ReactDOM;
let TestRenderer: ReactTestRenderer;
let bridge: FrontendBridge;
let legacyRender;
let store: Store;
let utils;
@ -33,6 +34,8 @@ describe('ProfilerContext', () => {
utils = require('./utils');
utils.beforeEachProfiling();
legacyRender = utils.legacyRender;
bridge = global.bridge;
store = global.store;
store.collapseNodesByDefault = false;
@ -96,10 +99,10 @@ describe('ProfilerContext', () => {
const containerA = document.createElement('div');
const containerB = document.createElement('div');
await utils.actAsync(() => ReactDOM.render(<Component />, containerA));
await utils.actAsync(() => legacyRender(<Component />, containerA));
expect(context.supportsProfiling).toBe(true);
await utils.actAsync(() => ReactDOM.render(<Component />, containerB));
await utils.actAsync(() => legacyRender(<Component />, containerB));
await utils.actAsync(() => ReactDOM.unmountComponentAtNode(containerA));
expect(context.supportsProfiling).toBe(true);
@ -110,9 +113,7 @@ describe('ProfilerContext', () => {
it('should gracefully handle an empty profiling session (with no recorded commits)', async () => {
const Example = () => null;
utils.act(() =>
ReactDOM.render(<Example />, document.createElement('div')),
);
utils.act(() => legacyRender(<Example />, document.createElement('div')));
let context: Context = ((null: any): Context);
@ -150,14 +151,14 @@ describe('ProfilerContext', () => {
const containerOne = document.createElement('div');
const containerTwo = document.createElement('div');
utils.act(() => ReactDOM.render(<Parent />, containerOne));
utils.act(() => ReactDOM.render(<Parent />, containerTwo));
utils.act(() => legacyRender(<Parent />, containerOne));
utils.act(() => legacyRender(<Parent />, containerTwo));
expect(store).toMatchSnapshot('mounted');
// Profile and record updates to both roots.
await utils.actAsync(() => store.profilerStore.startProfiling());
await utils.actAsync(() => ReactDOM.render(<Parent />, containerOne));
await utils.actAsync(() => ReactDOM.render(<Parent />, containerTwo));
await utils.actAsync(() => legacyRender(<Parent />, containerOne));
await utils.actAsync(() => legacyRender(<Parent />, containerTwo));
await utils.actAsync(() => store.profilerStore.stopProfiling());
let context: Context = ((null: any): Context);
@ -189,13 +190,13 @@ describe('ProfilerContext', () => {
const containerOne = document.createElement('div');
const containerTwo = document.createElement('div');
utils.act(() => ReactDOM.render(<Parent />, containerOne));
utils.act(() => ReactDOM.render(<Parent />, containerTwo));
utils.act(() => legacyRender(<Parent />, containerOne));
utils.act(() => legacyRender(<Parent />, containerTwo));
expect(store).toMatchSnapshot('mounted');
// Profile and record updates to only the first root.
await utils.actAsync(() => store.profilerStore.startProfiling());
await utils.actAsync(() => ReactDOM.render(<Parent />, containerOne));
await utils.actAsync(() => legacyRender(<Parent />, containerOne));
await utils.actAsync(() => store.profilerStore.stopProfiling());
let context: Context = ((null: any): Context);
@ -228,14 +229,14 @@ describe('ProfilerContext', () => {
const containerA = document.createElement('div');
const containerB = document.createElement('div');
utils.act(() => ReactDOM.render(<Parent />, containerA));
utils.act(() => ReactDOM.render(<Parent />, containerB));
utils.act(() => legacyRender(<Parent />, containerA));
utils.act(() => legacyRender(<Parent />, containerB));
expect(store).toMatchSnapshot('mounted');
// Profile and record updates.
await utils.actAsync(() => store.profilerStore.startProfiling());
await utils.actAsync(() => ReactDOM.render(<Parent />, containerA));
await utils.actAsync(() => ReactDOM.render(<Parent />, containerB));
await utils.actAsync(() => legacyRender(<Parent />, containerA));
await utils.actAsync(() => legacyRender(<Parent />, containerB));
await utils.actAsync(() => store.profilerStore.stopProfiling());
let context: Context = ((null: any): Context);
@ -263,8 +264,8 @@ describe('ProfilerContext', () => {
// Profile and record more updates to both roots
await utils.actAsync(() => store.profilerStore.startProfiling());
await utils.actAsync(() => ReactDOM.render(<Parent />, containerA));
await utils.actAsync(() => ReactDOM.render(<Parent />, containerB));
await utils.actAsync(() => legacyRender(<Parent />, containerA));
await utils.actAsync(() => legacyRender(<Parent />, containerB));
await utils.actAsync(() => store.profilerStore.stopProfiling());
const otherID = ((store.getElementIDAtIndex(0): any): number);
@ -287,7 +288,7 @@ describe('ProfilerContext', () => {
const container = document.createElement('div');
utils.act(() =>
ReactDOM.render(<GrandParent includeChild={true} />, container),
legacyRender(<GrandParent includeChild={true} />, container),
);
expect(store).toMatchSnapshot('mounted');
@ -297,10 +298,10 @@ describe('ProfilerContext', () => {
// Profile and record updates.
await utils.actAsync(() => store.profilerStore.startProfiling());
await utils.actAsync(() =>
ReactDOM.render(<GrandParent includeChild={true} />, container),
legacyRender(<GrandParent includeChild={true} />, container),
);
await utils.actAsync(() =>
ReactDOM.render(<GrandParent includeChild={false} />, container),
legacyRender(<GrandParent includeChild={false} />, container),
);
await utils.actAsync(() => store.profilerStore.stopProfiling());

15
packages/react-devtools-shared/src/__tests__/profilerStore-test.js vendored
View File

@ -12,6 +12,7 @@ import type Store from 'react-devtools-shared/src/devtools/store';
describe('ProfilerStore', () => {
let React;
let ReactDOM;
let legacyRender;
let store: Store;
let utils;
@ -19,6 +20,8 @@ describe('ProfilerStore', () => {
utils = require('./utils');
utils.beforeEachProfiling();
legacyRender = utils.legacyRender;
store = global.store;
store.collapseNodesByDefault = false;
store.recordChangeDescriptions = true;
@ -38,15 +41,15 @@ describe('ProfilerStore', () => {
const containerB = document.createElement('div');
utils.act(() => {
ReactDOM.render(<Parent key="A" count={3} />, containerA);
ReactDOM.render(<Parent key="B" count={2} />, containerB);
legacyRender(<Parent key="A" count={3} />, containerA);
legacyRender(<Parent key="B" count={2} />, containerB);
});
utils.act(() => store.profilerStore.startProfiling());
utils.act(() => {
ReactDOM.render(<Parent key="A" count={4} />, containerA);
ReactDOM.render(<Parent key="B" count={1} />, containerB);
legacyRender(<Parent key="A" count={4} />, containerA);
legacyRender(<Parent key="B" count={1} />, containerB);
});
utils.act(() => store.profilerStore.stopProfiling());
@ -96,7 +99,7 @@ describe('ProfilerStore', () => {
// It's important that this test uses legacy sync mode.
// The root API does not trigger this particular failing case.
ReactDOM.render(<ControlledInput />, container);
legacyRender(<ControlledInput />, container);
utils.act(() => store.profilerStore.startProfiling());
@ -151,7 +154,7 @@ describe('ProfilerStore', () => {
// It's important that this test uses legacy sync mode.
// The root API does not trigger this particular failing case.
ReactDOM.render(<ControlledInput />, container);
legacyRender(<ControlledInput />, container);
utils.act(() => store.profilerStore.startProfiling());
utils.act(() =>

51
packages/react-devtools-shared/src/__tests__/profilingCache-test.js vendored
View File

@ -18,6 +18,7 @@ describe('ProfilingCache', () => {
let Scheduler;
let TestRenderer: ReactTestRenderer;
let bridge: FrontendBridge;
let legacyRender;
let store: Store;
let utils;
@ -25,6 +26,8 @@ describe('ProfilingCache', () => {
utils = require('./utils');
utils.beforeEachProfiling();
legacyRender = utils.legacyRender;
bridge = global.bridge;
store = global.store;
store.collapseNodesByDefault = false;
@ -60,14 +63,14 @@ describe('ProfilingCache', () => {
const containerB = document.createElement('div');
const containerC = document.createElement('div');
utils.act(() => ReactDOM.render(<Parent count={2} />, containerA));
utils.act(() => ReactDOM.render(<Parent count={1} />, containerB));
utils.act(() => legacyRender(<Parent count={2} />, containerA));
utils.act(() => legacyRender(<Parent count={1} />, containerB));
utils.act(() => store.profilerStore.startProfiling());
utils.act(() => ReactDOM.render(<Parent count={3} />, containerA));
utils.act(() => ReactDOM.render(<Parent count={1} />, containerC));
utils.act(() => ReactDOM.render(<Parent count={1} />, containerA));
utils.act(() => legacyRender(<Parent count={3} />, containerA));
utils.act(() => legacyRender(<Parent count={1} />, containerC));
utils.act(() => legacyRender(<Parent count={1} />, containerA));
utils.act(() => ReactDOM.unmountComponentAtNode(containerB));
utils.act(() => ReactDOM.render(<Parent count={0} />, containerA));
utils.act(() => legacyRender(<Parent count={0} />, containerA));
utils.act(() => store.profilerStore.stopProfiling());
const allProfilingDataForRoots = [];
@ -143,10 +146,10 @@ describe('ProfilingCache', () => {
const container = document.createElement('div');
utils.act(() => store.profilerStore.startProfiling());
utils.act(() => ReactDOM.render(<Parent count={2} />, container));
utils.act(() => ReactDOM.render(<Parent count={3} />, container));
utils.act(() => ReactDOM.render(<Parent count={1} />, container));
utils.act(() => ReactDOM.render(<Parent count={0} />, container));
utils.act(() => legacyRender(<Parent count={2} />, container));
utils.act(() => legacyRender(<Parent count={3} />, container));
utils.act(() => legacyRender(<Parent count={1} />, container));
utils.act(() => legacyRender(<Parent count={0} />, container));
utils.act(() => store.profilerStore.stopProfiling());
const allCommitData = [];
@ -248,16 +251,16 @@ describe('ProfilingCache', () => {
const container = document.createElement('div');
utils.act(() => store.profilerStore.startProfiling());
utils.act(() => ReactDOM.render(<LegacyContextProvider />, container));
utils.act(() => legacyRender(<LegacyContextProvider />, container));
expect(instance).not.toBeNull();
utils.act(() => (instance: any).setState({count: 1}));
utils.act(() =>
ReactDOM.render(<LegacyContextProvider foo={123} />, container),
legacyRender(<LegacyContextProvider foo={123} />, container),
);
utils.act(() =>
ReactDOM.render(<LegacyContextProvider bar="abc" />, container),
legacyRender(<LegacyContextProvider bar="abc" />, container),
);
utils.act(() => ReactDOM.render(<LegacyContextProvider />, container));
utils.act(() => legacyRender(<LegacyContextProvider />, container));
utils.act(() => store.profilerStore.stopProfiling());
const allCommitData = [];
@ -346,7 +349,7 @@ describe('ProfilingCache', () => {
utils.act(() => store.profilerStore.startProfiling());
utils.act(() =>
ReactDOM.render(
legacyRender(
<Context.Provider value={true}>
<Component count={1} />
</Context.Provider>,
@ -356,7 +359,7 @@ describe('ProfilingCache', () => {
// Second render has no changed hooks, only changed props.
utils.act(() =>
ReactDOM.render(
legacyRender(
<Context.Provider value={true}>
<Component count={2} />
</Context.Provider>,
@ -373,7 +376,7 @@ describe('ProfilingCache', () => {
// Fifth render has a changed context value, but no changed hook.
// Technically, DevTools will miss this "context" change since it only tracks legacy context.
utils.act(() =>
ReactDOM.render(
legacyRender(
<Context.Provider value={false}>
<Component count={2} />
</Context.Provider>,
@ -453,7 +456,7 @@ describe('ProfilingCache', () => {
utils.act(() => store.profilerStore.startProfiling());
utils.act(() =>
ReactDOM.render(<Grandparent />, document.createElement('div')),
legacyRender(<Grandparent />, document.createElement('div')),
);
utils.act(() => store.profilerStore.stopProfiling());
@ -508,7 +511,7 @@ describe('ProfilingCache', () => {
utils.act(() => store.profilerStore.startProfiling());
await utils.actAsync(() =>
ReactDOM.render(<Parent />, document.createElement('div')),
legacyRender(<Parent />, document.createElement('div')),
);
utils.act(() => store.profilerStore.stopProfiling());
@ -558,9 +561,9 @@ describe('ProfilingCache', () => {
const container = document.createElement('div');
utils.act(() => store.profilerStore.startProfiling());
utils.act(() => ReactDOM.render(<Parent count={1} />, container));
utils.act(() => ReactDOM.render(<Parent count={2} />, container));
utils.act(() => ReactDOM.render(<Parent count={3} />, container));
utils.act(() => legacyRender(<Parent count={1} />, container));
utils.act(() => legacyRender(<Parent count={2} />, container));
utils.act(() => legacyRender(<Parent count={3} />, container));
utils.act(() => store.profilerStore.stopProfiling());
const allFiberCommits = [];
@ -624,7 +627,7 @@ describe('ProfilingCache', () => {
const container = document.createElement('div');
utils.act(() => store.profilerStore.startProfiling());
utils.act(() => ReactDOM.render(<React.Suspense />, container));
utils.act(() => legacyRender(<React.Suspense />, container));
utils.act(() => store.profilerStore.stopProfiling());
function Validator({commitIndex, rootID}) {
@ -721,7 +724,7 @@ describe('ProfilingCache', () => {
const {Simulate} = require('react-dom/test-utils');
const container = document.createElement('div');
utils.act(() => ReactDOM.render(<App />, container));
utils.act(() => legacyRender(<App />, container));
expect(container.textContent).toBe('Home');
utils.act(() => store.profilerStore.startProfiling());
utils.act(() => Simulate.click(linkRef.current));

13
packages/react-devtools-shared/src/__tests__/profilingCharts-test.js vendored
View File

@ -12,9 +12,9 @@ import type Store from 'react-devtools-shared/src/devtools/store';
describe('profiling charts', () => {
let React;
let ReactDOM;
let Scheduler;
let TestRenderer: TestRendererType;
let legacyRender;
let store: Store;
let utils;
@ -22,12 +22,13 @@ describe('profiling charts', () => {
utils = require('./utils');
utils.beforeEachProfiling();
legacyRender = utils.legacyRender;
store = global.store;
store.collapseNodesByDefault = false;
store.recordChangeDescriptions = true;
React = require('react');
ReactDOM = require('react-dom');
Scheduler = require('scheduler');
TestRenderer = utils.requireTestRenderer();
});
@ -54,8 +55,8 @@ describe('profiling charts', () => {
const container = document.createElement('div');
utils.act(() => store.profilerStore.startProfiling());
utils.act(() => ReactDOM.render(<Parent />, container));
utils.act(() => ReactDOM.render(<Parent />, container));
utils.act(() => legacyRender(<Parent />, container));
utils.act(() => legacyRender(<Parent />, container));
utils.act(() => store.profilerStore.stopProfiling());
let renderFinished = false;
@ -120,8 +121,8 @@ describe('profiling charts', () => {
const container = document.createElement('div');
utils.act(() => store.profilerStore.startProfiling());
utils.act(() => ReactDOM.render(<Parent />, container));
utils.act(() => ReactDOM.render(<Parent />, container));
utils.act(() => legacyRender(<Parent />, container));
utils.act(() => legacyRender(<Parent />, container));
utils.act(() => store.profilerStore.stopProfiling());
let renderFinished = false;

31
packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js vendored
View File

@ -15,6 +15,7 @@ describe('commit tree', () => {
let ReactDOM;
let Scheduler;
let TestRenderer: TestRendererType;
let legacyRender;
let store: Store;
let utils;
@ -22,6 +23,8 @@ describe('commit tree', () => {
utils = require('./utils');
utils.beforeEachProfiling();
legacyRender = utils.legacyRender;
store = global.store;
store.collapseNodesByDefault = false;
store.recordChangeDescriptions = true;
@ -47,10 +50,10 @@ describe('commit tree', () => {
const container = document.createElement('div');
utils.act(() => store.profilerStore.startProfiling());
utils.act(() => ReactDOM.render(<Parent count={1} />, container));
utils.act(() => ReactDOM.render(<Parent count={3} />, container));
utils.act(() => ReactDOM.render(<Parent count={2} />, container));
utils.act(() => ReactDOM.render(<Parent count={0} />, container));
utils.act(() => legacyRender(<Parent count={1} />, container));
utils.act(() => legacyRender(<Parent count={3} />, container));
utils.act(() => legacyRender(<Parent count={2} />, container));
utils.act(() => legacyRender(<Parent count={0} />, container));
utils.act(() => store.profilerStore.stopProfiling());
let renderFinished = false;
@ -108,16 +111,10 @@ describe('commit tree', () => {
const container = document.createElement('div');
utils.act(() => store.profilerStore.startProfiling());
utils.act(() =>
ReactDOM.render(<App renderChildren={true} />, container),
);
utils.act(() => legacyRender(<App renderChildren={true} />, container));
await Promise.resolve();
utils.act(() =>
ReactDOM.render(<App renderChildren={true} />, container),
);
utils.act(() =>
ReactDOM.render(<App renderChildren={false} />, container),
);
utils.act(() => legacyRender(<App renderChildren={true} />, container));
utils.act(() => legacyRender(<App renderChildren={false} />, container));
utils.act(() => store.profilerStore.stopProfiling());
let renderFinished = false;
@ -189,12 +186,8 @@ describe('commit tree', () => {
const container = document.createElement('div');
utils.act(() => store.profilerStore.startProfiling());
utils.act(() =>
ReactDOM.render(<App renderChildren={true} />, container),
);
utils.act(() =>
ReactDOM.render(<App renderChildren={false} />, container),
);
utils.act(() => legacyRender(<App renderChildren={true} />, container));
utils.act(() => legacyRender(<App renderChildren={false} />, container));
utils.act(() => store.profilerStore.stopProfiling());
let renderFinished = false;

6
packages/react-devtools-shared/src/__tests__/profilingHostRoot-test.js vendored
View File

@ -11,10 +11,10 @@ describe('profiling HostRoot', () => {
let React;
let ReactDOM;
let Scheduler;
let legacyRender;
let store: Store;
let utils;
let getEffectDurations;
let effectDurations;
let passiveEffectDurations;
@ -22,6 +22,8 @@ describe('profiling HostRoot', () => {
utils = require('./utils');
utils.beforeEachProfiling();
legacyRender = utils.legacyRender;
getEffectDurations = require('../backend/utils').getEffectDurations;
store = global.store;
@ -61,7 +63,7 @@ describe('profiling HostRoot', () => {
utils.act(() => store.profilerStore.startProfiling());
utils.act(() => {
const container = document.createElement('div');
ReactDOM.render(<App />, container);
legacyRender(<App />, container);
});
utils.act(() => store.profilerStore.stopProfiling());

158
packages/react-devtools-shared/src/__tests__/store-test.js vendored
View File

@ -14,6 +14,7 @@ describe('Store', () => {
let act;
let bridge;
let getRendererID;
let legacyRender;
let store;
let withErrorsOrWarningsIgnored;
@ -28,6 +29,7 @@ describe('Store', () => {
const utils = require('./utils');
act = utils.act;
getRendererID = utils.getRendererID;
legacyRender = utils.legacyRender;
withErrorsOrWarningsIgnored = utils.withErrorsOrWarningsIgnored;
});
@ -35,7 +37,7 @@ describe('Store', () => {
const Component = () => <div>Hi</div>;
act(() =>
ReactDOM.render(<Component count={4} />, document.createElement('div')),
legacyRender(<Component count={4} />, document.createElement('div')),
);
expect(store).toMatchSnapshot('1: mount');
@ -53,10 +55,10 @@ describe('Store', () => {
const container = document.createElement('div');
act(() => ReactDOM.render(<Root>{null}</Root>, container));
act(() => legacyRender(<Root>{null}</Root>, container));
expect(store).toMatchSnapshot('1: mount');
act(() => ReactDOM.render(<div />, container));
act(() => legacyRender(<div />, container));
expect(store).toMatchSnapshot('2: add host nodes');
});
@ -81,7 +83,7 @@ describe('Store', () => {
const container = document.createElement('div');
act(() =>
ReactDOM.render(
legacyRender(
<>
<React.Suspense fallback="Loading...">
<Owner />
@ -117,10 +119,10 @@ describe('Store', () => {
const container = document.createElement('div');
act(() => ReactDOM.render(<Grandparent count={4} />, container));
act(() => legacyRender(<Grandparent count={4} />, container));
expect(store).toMatchSnapshot('1: mount');
act(() => ReactDOM.render(<Grandparent count={2} />, container));
act(() => legacyRender(<Grandparent count={2} />, container));
expect(store).toMatchSnapshot('2: update');
act(() => ReactDOM.unmountComponentAtNode(container));
@ -136,14 +138,14 @@ describe('Store', () => {
const containerB = document.createElement('div');
act(() => {
ReactDOM.render(<Parent key="A" count={3} />, containerA);
ReactDOM.render(<Parent key="B" count={2} />, containerB);
legacyRender(<Parent key="A" count={3} />, containerA);
legacyRender(<Parent key="B" count={2} />, containerB);
});
expect(store).toMatchSnapshot('1: mount');
act(() => {
ReactDOM.render(<Parent key="A" count={4} />, containerA);
ReactDOM.render(<Parent key="B" count={1} />, containerB);
legacyRender(<Parent key="A" count={4} />, containerA);
legacyRender(<Parent key="B" count={1} />, containerB);
});
expect(store).toMatchSnapshot('2: update');
@ -171,10 +173,7 @@ describe('Store', () => {
const Child = () => <div>Hi!</div>;
act(() =>
ReactDOM.render(
<Grandparent count={4} />,
document.createElement('div'),
),
legacyRender(<Grandparent count={4} />, document.createElement('div')),
);
expect(store).toMatchSnapshot('1: mount');
});
@ -201,11 +200,11 @@ describe('Store', () => {
);
const container = document.createElement('div');
act(() => ReactDOM.render(<Wrapper shouldSuspense={true} />, container));
act(() => legacyRender(<Wrapper shouldSuspense={true} />, container));
expect(store).toMatchSnapshot('1: loading');
act(() => {
ReactDOM.render(<Wrapper shouldSuspense={false} />, container);
legacyRender(<Wrapper shouldSuspense={false} />, container);
});
expect(store).toMatchSnapshot('2: resolved');
});
@ -251,7 +250,7 @@ describe('Store', () => {
const container = document.createElement('div');
act(() =>
ReactDOM.render(
legacyRender(
<Wrapper
suspendParent={false}
suspendFirst={false}
@ -262,7 +261,7 @@ describe('Store', () => {
);
expect(store).toMatchSnapshot('1: third child is suspended');
act(() =>
ReactDOM.render(
legacyRender(
<Wrapper
suspendParent={false}
suspendFirst={true}
@ -273,7 +272,7 @@ describe('Store', () => {
);
expect(store).toMatchSnapshot('2: first and third child are suspended');
act(() =>
ReactDOM.render(
legacyRender(
<Wrapper
suspendParent={false}
suspendFirst={false}
@ -284,7 +283,7 @@ describe('Store', () => {
);
expect(store).toMatchSnapshot('3: second and third child are suspended');
act(() =>
ReactDOM.render(
legacyRender(
<Wrapper
suspendParent={false}
suspendFirst={true}
@ -295,7 +294,7 @@ describe('Store', () => {
);
expect(store).toMatchSnapshot('4: first and third child are suspended');
act(() =>
ReactDOM.render(
legacyRender(
<Wrapper
suspendParent={true}
suspendFirst={true}
@ -306,7 +305,7 @@ describe('Store', () => {
);
expect(store).toMatchSnapshot('5: parent is suspended');
act(() =>
ReactDOM.render(
legacyRender(
<Wrapper
suspendParent={false}
suspendFirst={true}
@ -317,7 +316,7 @@ describe('Store', () => {
);
expect(store).toMatchSnapshot('6: all children are suspended');
act(() =>
ReactDOM.render(
legacyRender(
<Wrapper
suspendParent={false}
suspendFirst={false}
@ -346,7 +345,7 @@ describe('Store', () => {
);
expect(store).toMatchSnapshot('9: parent is suspended');
act(() =>
ReactDOM.render(
legacyRender(
<Wrapper
suspendParent={false}
suspendFirst={true}
@ -373,7 +372,7 @@ describe('Store', () => {
);
expect(store).toMatchSnapshot('12: all children are suspended');
act(() =>
ReactDOM.render(
legacyRender(
<Wrapper
suspendParent={false}
suspendFirst={false}
@ -430,10 +429,7 @@ describe('Store', () => {
const Child = () => <div>Hi!</div>;
act(() =>
ReactDOM.render(
<Grandparent count={2} />,
document.createElement('div'),
),
legacyRender(<Grandparent count={2} />, document.createElement('div')),
);
expect(store).toMatchSnapshot('1: mount');
@ -468,10 +464,10 @@ describe('Store', () => {
const container = document.createElement('div');
act(() => ReactDOM.render(<Root>{[foo, bar]}</Root>, container));
act(() => legacyRender(<Root>{[foo, bar]}</Root>, container));
expect(store).toMatchSnapshot('1: mount');
act(() => ReactDOM.render(<Root>{[bar, foo]}</Root>, container));
act(() => legacyRender(<Root>{[bar, foo]}</Root>, container));
expect(store).toMatchSnapshot('3: reorder children');
act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));
@ -495,7 +491,7 @@ describe('Store', () => {
const container = document.createElement('div');
act(() =>
ReactDOM.render(
legacyRender(
<React.Fragment>
<Parent count={1} />
<Parent count={3} />
@ -506,7 +502,7 @@ describe('Store', () => {
expect(store).toMatchSnapshot('1: mount');
act(() =>
ReactDOM.render(
legacyRender(
<React.Fragment>
<Parent count={2} />
<Parent count={1} />
@ -529,14 +525,14 @@ describe('Store', () => {
const containerB = document.createElement('div');
act(() => {
ReactDOM.render(<Parent key="A" count={3} />, containerA);
ReactDOM.render(<Parent key="B" count={2} />, containerB);
legacyRender(<Parent key="A" count={3} />, containerA);
legacyRender(<Parent key="B" count={2} />, containerB);
});
expect(store).toMatchSnapshot('1: mount');
act(() => {
ReactDOM.render(<Parent key="A" count={4} />, containerA);
ReactDOM.render(<Parent key="B" count={1} />, containerB);
legacyRender(<Parent key="A" count={4} />, containerA);
legacyRender(<Parent key="B" count={1} />, containerB);
});
expect(store).toMatchSnapshot('2: update');
@ -564,10 +560,7 @@ describe('Store', () => {
const Child = () => <div>Hi!</div>;
act(() =>
ReactDOM.render(
<Grandparent count={4} />,
document.createElement('div'),
),
legacyRender(<Grandparent count={4} />, document.createElement('div')),
);
expect(store).toMatchSnapshot('1: mount');
@ -600,7 +593,7 @@ describe('Store', () => {
);
const container = document.createElement('div');
act(() => ReactDOM.render(<Wrapper shouldSuspense={true} />, container));
act(() => legacyRender(<Wrapper shouldSuspense={true} />, container));
expect(store).toMatchSnapshot('1: loading');
// This test isn't meaningful unless we expand the suspended tree
@ -609,7 +602,7 @@ describe('Store', () => {
expect(store).toMatchSnapshot('2: expand Wrapper and Suspense');
act(() => {
ReactDOM.render(<Wrapper shouldSuspense={false} />, container);
legacyRender(<Wrapper shouldSuspense={false} />, container);
});
expect(store).toMatchSnapshot('2: resolved');
});
@ -626,10 +619,7 @@ describe('Store', () => {
const Child = () => <div>Hi!</div>;
act(() =>
ReactDOM.render(
<Grandparent count={2} />,
document.createElement('div'),
),
legacyRender(<Grandparent count={2} />, document.createElement('div')),
);
expect(store).toMatchSnapshot('1: mount');
@ -671,7 +661,7 @@ describe('Store', () => {
const ref = React.createRef();
act(() =>
ReactDOM.render(
legacyRender(
<Wrapper forwardedRef={ref} />,
document.createElement('div'),
),
@ -711,10 +701,10 @@ describe('Store', () => {
const container = document.createElement('div');
act(() => ReactDOM.render(<Root>{[foo, bar]}</Root>, container));
act(() => legacyRender(<Root>{[foo, bar]}</Root>, container));
expect(store).toMatchSnapshot('1: mount');
act(() => ReactDOM.render(<Root>{[bar, foo]}</Root>, container));
act(() => legacyRender(<Root>{[bar, foo]}</Root>, container));
expect(store).toMatchSnapshot('3: reorder children');
act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
@ -743,9 +733,7 @@ describe('Store', () => {
const Parent = () => <Child />;
const Child = () => null;
act(() =>
ReactDOM.render(<SuspenseTree />, document.createElement('div')),
);
act(() => legacyRender(<SuspenseTree />, document.createElement('div')));
expect(store).toMatchSnapshot('1: mount');
act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
@ -790,9 +778,7 @@ describe('Store', () => {
const Parent = () => <Child />;
const Child = () => null;
act(() =>
ReactDOM.render(<Grandparent />, document.createElement('div')),
);
act(() => legacyRender(<Grandparent />, document.createElement('div')));
for (let i = 0; i < store.numElements; i++) {
expect(store.getIndexOfElementID(store.getElementIDAtIndex(i))).toBe(i);
@ -805,8 +791,8 @@ describe('Store', () => {
const Child = () => null;
act(() => {
ReactDOM.render(<Grandparent />, document.createElement('div'));
ReactDOM.render(<Grandparent />, document.createElement('div'));
legacyRender(<Grandparent />, document.createElement('div'));
legacyRender(<Grandparent />, document.createElement('div'));
});
for (let i = 0; i < store.numElements; i++) {
@ -820,7 +806,7 @@ describe('Store', () => {
const Child = () => null;
act(() =>
ReactDOM.render(
legacyRender(
<React.Fragment>
<Grandparent />
<Grandparent />
@ -840,14 +826,14 @@ describe('Store', () => {
const Child = () => null;
act(() => {
ReactDOM.render(
legacyRender(
<React.Fragment>
<Grandparent />
<Grandparent />
</React.Fragment>,
document.createElement('div'),
);
ReactDOM.render(
legacyRender(
<React.Fragment>
<Grandparent />
<Grandparent />
@ -870,10 +856,10 @@ describe('Store', () => {
expect(store.supportsProfiling).toBe(false);
act(() => ReactDOM.render(<Component />, containerA));
act(() => legacyRender(<Component />, containerA));
expect(store.supportsProfiling).toBe(true);
act(() => ReactDOM.render(<Component />, containerB));
act(() => legacyRender(<Component />, containerB));
act(() => ReactDOM.unmountComponentAtNode(containerA));
expect(store.supportsProfiling).toBe(true);
@ -888,7 +874,7 @@ describe('Store', () => {
// This is pretty hacky.
const fauxElement = Object.assign({}, <Child />, {key: 123});
act(() => ReactDOM.render([fauxElement], document.createElement('div')));
act(() => legacyRender([fauxElement], document.createElement('div')));
expect(store).toMatchSnapshot('1: mount');
});
@ -949,12 +935,12 @@ describe('Store', () => {
const container = document.createElement('div');
// Render once to start fetching the lazy component
act(() => ReactDOM.render(<App />, container));
act(() => legacyRender(<App />, container));
await Promise.resolve();
// Render again after it resolves
act(() => ReactDOM.render(<App />, container));
act(() => legacyRender(<App />, container));
expect(store).toMatchInlineSnapshot(`
[root]
@ -1004,19 +990,19 @@ describe('Store', () => {
const container = document.createElement('div');
// Render once to start fetching the lazy component
act(() => ReactDOM.render(<App renderChildren={true} />, container));
act(() => legacyRender(<App renderChildren={true} />, container));
expect(store).toMatchSnapshot('1: mounted + loading');
await Promise.resolve();
// Render again after it resolves
act(() => ReactDOM.render(<App renderChildren={true} />, container));
act(() => legacyRender(<App renderChildren={true} />, container));
expect(store).toMatchSnapshot('2: mounted + loaded');
// Render again to unmount it
act(() => ReactDOM.render(<App renderChildren={false} />, container));
act(() => legacyRender(<App renderChildren={false} />, container));
expect(store).toMatchSnapshot('3: unmounted');
});
@ -1047,12 +1033,12 @@ describe('Store', () => {
const container = document.createElement('div');
// Render once to start fetching the lazy component
act(() => ReactDOM.render(<App renderChildren={true} />, container));
act(() => legacyRender(<App renderChildren={true} />, container));
expect(store).toMatchSnapshot('1: mounted + loading');
// Render again to unmount it before it finishes loading
act(() => ReactDOM.render(<App renderChildren={false} />, container));
act(() => legacyRender(<App renderChildren={false} />, container));
expect(store).toMatchSnapshot('2: unmounted');
});
@ -1083,7 +1069,7 @@ describe('Store', () => {
const container = document.createElement('div');
withErrorsOrWarningsIgnored(['test-only:'], () => {
act(() => ReactDOM.render(<Example />, container));
act(() => legacyRender(<Example />, container));
});
expect(store).toMatchInlineSnapshot(`
@ -1093,7 +1079,7 @@ describe('Store', () => {
`);
withErrorsOrWarningsIgnored(['test-only:'], () => {
act(() => ReactDOM.render(<Example rerender={1} />, container));
act(() => legacyRender(<Example rerender={1} />, container));
});
expect(store).toMatchInlineSnapshot(`
@ -1114,7 +1100,7 @@ describe('Store', () => {
const container = document.createElement('div');
withErrorsOrWarningsIgnored(['test-only:'], () => {
act(() => ReactDOM.render(<Example />, container));
act(() => legacyRender(<Example />, container));
});
expect(store).toMatchInlineSnapshot(`
@ -1124,7 +1110,7 @@ describe('Store', () => {
`);
withErrorsOrWarningsIgnored(['test-only:'], () => {
act(() => ReactDOM.render(<Example rerender={1} />, container));
act(() => legacyRender(<Example rerender={1} />, container));
});
expect(store).toMatchInlineSnapshot(`
@ -1156,7 +1142,7 @@ describe('Store', () => {
withErrorsOrWarningsIgnored(['test-only:'], () => {
act(() => {
ReactDOM.render(<Example />, container);
legacyRender(<Example />, container);
}, false);
});
flushPendingBridgeOperations();
@ -1194,7 +1180,7 @@ describe('Store', () => {
withErrorsOrWarningsIgnored(['test-only:'], () => {
act(() => {
ReactDOM.render(
legacyRender(
<>
<Example />
</>,
@ -1209,7 +1195,7 @@ describe('Store', () => {
// Before warnings and errors have flushed, flush another commit.
act(() => {
ReactDOM.render(
legacyRender(
<>
<Example />
<Noop />
@ -1252,7 +1238,7 @@ describe('Store', () => {
withErrorsOrWarningsIgnored(
['Warning: Each child in a list should have a unique "key" prop'],
() => {
act(() => ReactDOM.render(<Example />, container));
act(() => legacyRender(<Example />, container));
},
);
@ -1273,7 +1259,7 @@ describe('Store', () => {
const container = document.createElement('div');
withErrorsOrWarningsIgnored(['test-only:'], () => {
act(() =>
ReactDOM.render(
legacyRender(
<React.Fragment>
<Example />
<Example />
@ -1314,7 +1300,7 @@ describe('Store', () => {
const container = document.createElement('div');
withErrorsOrWarningsIgnored(['test-only:'], () => {
act(() =>
ReactDOM.render(
legacyRender(
<React.Fragment>
<Example />
<Example />
@ -1359,7 +1345,7 @@ describe('Store', () => {
const container = document.createElement('div');
withErrorsOrWarningsIgnored(['test-only:'], () => {
act(() =>
ReactDOM.render(
legacyRender(
<React.Fragment>
<Example />
<Example />
@ -1412,7 +1398,7 @@ describe('Store', () => {
const container = document.createElement('div');
withErrorsOrWarningsIgnored(['test-only:'], () => {
act(() =>
ReactDOM.render(
legacyRender(
<React.Fragment>
<ComponentWithError />
<ComponentWithWarning />
@ -1432,7 +1418,7 @@ describe('Store', () => {
withErrorsOrWarningsIgnored(['test-only:'], () => {
act(() =>
ReactDOM.render(
legacyRender(
<React.Fragment>
<ComponentWithWarning />
<ComponentWithWarningAndError />
@ -1450,7 +1436,7 @@ describe('Store', () => {
withErrorsOrWarningsIgnored(['test-only:'], () => {
act(() =>
ReactDOM.render(
legacyRender(
<React.Fragment>
<ComponentWithWarning />
</React.Fragment>,
@ -1465,7 +1451,7 @@ describe('Store', () => {
`);
withErrorsOrWarningsIgnored(['test-only:'], () => {
act(() => ReactDOM.render(<React.Fragment />, container));
act(() => legacyRender(<React.Fragment />, container));
});
expect(store).toMatchInlineSnapshot(`[root]`);
expect(store.errorCount).toBe(0);

31
packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js vendored
View File

@ -12,9 +12,9 @@ import type Store from 'react-devtools-shared/src/devtools/store';
describe('Store component filters', () => {
let React;
let ReactDOM;
let Types;
let bridge: FrontendBridge;
let legacyRender;
let store: Store;
let utils;
let internalAct;
@ -34,10 +34,11 @@ describe('Store component filters', () => {
store.recordChangeDescriptions = true;
React = require('react');
ReactDOM = require('react-dom');
Types = require('react-devtools-shared/src/types');
utils = require('./utils');
internalAct = require('jest-react').act;
legacyRender = utils.legacyRender;
});
it('should throw if filters are updated while profiling', () => {
@ -56,7 +57,7 @@ describe('Store component filters', () => {
const FunctionComponent = () => <div>Hi</div>;
act(() =>
ReactDOM.render(
legacyRender(
<ClassComponent>
<FunctionComponent />
</ClassComponent>,
@ -137,7 +138,7 @@ describe('Store component filters', () => {
it('should ignore invalid ElementTypeRoot filter', () => {
const Component = () => <div>Hi</div>;
act(() => ReactDOM.render(<Component />, document.createElement('div')));
act(() => legacyRender(<Component />, document.createElement('div')));
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Component>
@ -165,7 +166,7 @@ describe('Store component filters', () => {
const Baz = () => <Text label="baz" />;
act(() =>
ReactDOM.render(
legacyRender(
<React.Fragment>
<Foo />
<Bar />
@ -221,7 +222,7 @@ describe('Store component filters', () => {
it('should filter by path', () => {
const Component = () => <div>Hi</div>;
act(() => ReactDOM.render(<Component />, document.createElement('div')));
act(() => legacyRender(<Component />, document.createElement('div')));
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Component>
@ -258,7 +259,7 @@ describe('Store component filters', () => {
const Bar = () => <Foo />;
Bar.displayName = 'Bar(Foo(Component))';
act(() => ReactDOM.render(<Bar />, document.createElement('div')));
act(() => legacyRender(<Bar />, document.createElement('div')));
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Component> [Bar][Foo]
@ -337,7 +338,7 @@ describe('Store component filters', () => {
];
const container = document.createElement('div');
act(() => ReactDOM.render(<Wrapper shouldSuspend={true} />, container));
act(() => legacyRender(<Wrapper shouldSuspend={true} />, container));
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Wrapper>
@ -345,14 +346,14 @@ describe('Store component filters', () => {
<div>
`);
act(() => ReactDOM.render(<Wrapper shouldSuspend={false} />, container));
act(() => legacyRender(<Wrapper shouldSuspend={false} />, container));
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Wrapper>
<Component>
`);
act(() => ReactDOM.render(<Wrapper shouldSuspend={true} />, container));
act(() => legacyRender(<Wrapper shouldSuspend={true} />, container));
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Wrapper>
@ -376,6 +377,14 @@ describe('Store component filters', () => {
console.warn('test-only: render warning');
return null;
}
// HACK This require() is needed (somewhere in the test) for this case to pass.
// Without it, the legacyRender() call below causes this test to fail
// because it requires "react-dom" for the first time,
// which causes the console error() and warn() methods to be overridden again,
// effectively disconnecting the DevTools override in 'react-devtools-shared/src/backend/console'.
require('react-dom');
const container = document.createElement('div');
utils.withErrorsOrWarningsIgnored(['test-only:'], () => {
act(
@ -386,7 +395,7 @@ describe('Store component filters', () => {
]),
);
act(() =>
ReactDOM.render(
legacyRender(
<React.Fragment>
<ComponentWithError />
<ComponentWithWarning />

24
packages/react-devtools-shared/src/__tests__/storeOwners-test.js vendored
View File

@ -11,8 +11,8 @@ const {printOwnersList} = require('../devtools/utils');
describe('Store owners list', () => {
let React;
let ReactDOM;
let act;
let legacyRender;
let store;
beforeEach(() => {
@ -20,8 +20,10 @@ describe('Store owners list', () => {
store.collapseNodesByDefault = false;
React = require('react');
ReactDOM = require('react-dom');
act = require('./utils').act;
const utils = require('./utils');
act = utils.act;
legacyRender = utils.legacyRender;
});
it('should drill through intermediate components', () => {
@ -36,7 +38,7 @@ describe('Store owners list', () => {
const Leaf = () => <div>Leaf</div>;
const Intermediate = ({children}) => <Wrapper>{children}</Wrapper>;
act(() => ReactDOM.render(<Root />, document.createElement('div')));
act(() => legacyRender(<Root />, document.createElement('div')));
expect(store).toMatchSnapshot('1: mount');
const rootID = store.getElementIDAtIndex(0);
@ -64,7 +66,7 @@ describe('Store owners list', () => {
<Wrapper key="wrapper">{children}</Wrapper>,
];
act(() => ReactDOM.render(<Root />, document.createElement('div')));
act(() => legacyRender(<Root />, document.createElement('div')));
expect(store).toMatchSnapshot('1: mount');
const rootID = store.getElementIDAtIndex(0);
@ -96,7 +98,7 @@ describe('Store owners list', () => {
const container = document.createElement('div');
act(() =>
ReactDOM.render(
legacyRender(
<Root includeDirect={false} includeIndirect={true} />,
container,
),
@ -109,7 +111,7 @@ describe('Store owners list', () => {
).toMatchSnapshot('2: components owned by <Root>');
act(() =>
ReactDOM.render(
legacyRender(
<Root includeDirect={true} includeIndirect={true} />,
container,
),
@ -121,7 +123,7 @@ describe('Store owners list', () => {
).toMatchSnapshot('4: components owned by <Root>');
act(() =>
ReactDOM.render(
legacyRender(
<Root includeDirect={true} includeIndirect={false} />,
container,
),
@ -133,7 +135,7 @@ describe('Store owners list', () => {
).toMatchSnapshot('6: components owned by <Root>');
act(() =>
ReactDOM.render(
legacyRender(
<Root includeDirect={false} includeIndirect={false} />,
container,
),
@ -153,7 +155,7 @@ describe('Store owners list', () => {
const Leaf = () => <div>Leaf</div>;
const container = document.createElement('div');
act(() => ReactDOM.render(<Root ascending={true} />, container));
act(() => legacyRender(<Root ascending={true} />, container));
expect(store).toMatchSnapshot('1: mount (ascending)');
const rootID = store.getElementIDAtIndex(0);
@ -161,7 +163,7 @@ describe('Store owners list', () => {
printOwnersList(store.getOwnersListForElement(rootID)),
).toMatchSnapshot('2: components owned by <Root>');
act(() => ReactDOM.render(<Root ascending={false} />, container));
act(() => legacyRender(<Root ascending={false} />, container));
expect(store).toMatchSnapshot('3: update (descending)');
expect(

94
packages/react-devtools-shared/src/__tests__/storeStressSync-test.js vendored
View File

@ -14,6 +14,7 @@ describe('StoreStress (Legacy Mode)', () => {
let bridge;
let store;
let print;
let legacyRender;
beforeEach(() => {
bridge = global.bridge;
@ -22,7 +23,10 @@ describe('StoreStress (Legacy Mode)', () => {
React = require('react');
ReactDOM = require('react-dom');
act = require('./utils').act;
const utils = require('./utils');
act = utils.act;
legacyRender = utils.legacyRender;
print = require('./storeSerializer').print;
});
@ -56,7 +60,7 @@ describe('StoreStress (Legacy Mode)', () => {
// 1. Render a normal version of [a, b, c, d, e].
let container = document.createElement('div');
act(() => ReactDOM.render(<Parent>{[a, b, c, d, e]}</Parent>, container));
act(() => legacyRender(<Parent>{[a, b, c, d, e]}</Parent>, container));
expect(store).toMatchSnapshot('1: abcde');
expect(container.textContent).toMatch('abcde');
const snapshotForABCDE = print(store);
@ -119,7 +123,7 @@ describe('StoreStress (Legacy Mode)', () => {
container = document.createElement('div');
// Verify mounting 'abcde'.
act(() => ReactDOM.render(<Parent>{cases[i]}</Parent>, container));
act(() => legacyRender(<Parent>{cases[i]}</Parent>, container));
expect(container.textContent).toMatch('abcde');
expect(print(store)).toEqual(snapshotForABCDE);
@ -147,7 +151,7 @@ describe('StoreStress (Legacy Mode)', () => {
container = document.createElement('div');
for (let i = 0; i < cases.length; i++) {
// Verify mounting 'abcde'.
act(() => ReactDOM.render(<Parent>{cases[i]}</Parent>, container));
act(() => legacyRender(<Parent>{cases[i]}</Parent>, container));
expect(container.textContent).toMatch('abcde');
expect(print(store)).toEqual(snapshotForABCDE);
@ -210,7 +214,7 @@ describe('StoreStress (Legacy Mode)', () => {
const snapshots = [];
let container = document.createElement('div');
for (let i = 0; i < steps.length; i++) {
act(() => ReactDOM.render(<Root>{steps[i]}</Root>, container));
act(() => legacyRender(<Root>{steps[i]}</Root>, container));
// We snapshot each step once so it doesn't regress.
expect(store).toMatchSnapshot();
snapshots.push(print(store));
@ -222,11 +226,11 @@ describe('StoreStress (Legacy Mode)', () => {
for (let i = 0; i < steps.length; i++) {
for (let j = 0; j < steps.length; j++) {
container = document.createElement('div');
act(() => ReactDOM.render(<Root>{steps[i]}</Root>, container));
act(() => legacyRender(<Root>{steps[i]}</Root>, container));
expect(print(store)).toMatch(snapshots[i]);
act(() => ReactDOM.render(<Root>{steps[j]}</Root>, container));
act(() => legacyRender(<Root>{steps[j]}</Root>, container));
expect(print(store)).toMatch(snapshots[j]);
act(() => ReactDOM.render(<Root>{steps[i]}</Root>, container));
act(() => legacyRender(<Root>{steps[i]}</Root>, container));
expect(print(store)).toMatch(snapshots[i]);
act(() => ReactDOM.unmountComponentAtNode(container));
expect(print(store)).toBe('');
@ -238,7 +242,7 @@ describe('StoreStress (Legacy Mode)', () => {
for (let j = 0; j < steps.length; j++) {
container = document.createElement('div');
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<div>{steps[i]}</div>
</Root>,
@ -247,7 +251,7 @@ describe('StoreStress (Legacy Mode)', () => {
);
expect(print(store)).toMatch(snapshots[i]);
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<div>{steps[j]}</div>
</Root>,
@ -256,7 +260,7 @@ describe('StoreStress (Legacy Mode)', () => {
);
expect(print(store)).toMatch(snapshots[j]);
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<div>{steps[i]}</div>
</Root>,
@ -312,7 +316,7 @@ describe('StoreStress (Legacy Mode)', () => {
let container = document.createElement('div');
for (let i = 0; i < steps.length; i++) {
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<X />
<React.Suspense fallback={z}>{steps[i]}</React.Suspense>
@ -331,7 +335,7 @@ describe('StoreStress (Legacy Mode)', () => {
// 2. Verify check Suspense can render same steps as initial fallback content.
for (let i = 0; i < steps.length; i++) {
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<X />
<React.Suspense fallback={steps[i]}>
@ -355,7 +359,7 @@ describe('StoreStress (Legacy Mode)', () => {
// Always start with a fresh container and steps[i].
container = document.createElement('div');
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<X />
<React.Suspense fallback={z}>{steps[i]}</React.Suspense>
@ -367,7 +371,7 @@ describe('StoreStress (Legacy Mode)', () => {
expect(print(store)).toEqual(snapshots[i]);
// Re-render with steps[j].
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<X />
<React.Suspense fallback={z}>{steps[j]}</React.Suspense>
@ -380,7 +384,7 @@ describe('StoreStress (Legacy Mode)', () => {
expect(print(store)).toEqual(snapshots[j]);
// Check that we can transition back again.
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<X />
<React.Suspense fallback={z}>{steps[i]}</React.Suspense>
@ -402,7 +406,7 @@ describe('StoreStress (Legacy Mode)', () => {
// Always start with a fresh container and steps[i].
container = document.createElement('div');
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<X />
<React.Suspense fallback={steps[i]}>
@ -418,7 +422,7 @@ describe('StoreStress (Legacy Mode)', () => {
expect(print(store)).toEqual(snapshots[i]);
// Re-render with steps[j].
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<X />
<React.Suspense fallback={steps[j]}>
@ -435,7 +439,7 @@ describe('StoreStress (Legacy Mode)', () => {
expect(print(store)).toEqual(snapshots[j]);
// Check that we can transition back again.
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<X />
<React.Suspense fallback={steps[i]}>
@ -461,7 +465,7 @@ describe('StoreStress (Legacy Mode)', () => {
// Always start with a fresh container and steps[i].
container = document.createElement('div');
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<X />
<React.Suspense fallback={z}>{steps[i]}</React.Suspense>
@ -473,7 +477,7 @@ describe('StoreStress (Legacy Mode)', () => {
expect(print(store)).toEqual(snapshots[i]);
// Re-render with steps[j].
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<X />
<React.Suspense fallback={steps[j]}>
@ -490,7 +494,7 @@ describe('StoreStress (Legacy Mode)', () => {
expect(print(store)).toEqual(snapshots[j]);
// Check that we can transition back again.
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<X />
<React.Suspense fallback={z}>{steps[i]}</React.Suspense>
@ -512,7 +516,7 @@ describe('StoreStress (Legacy Mode)', () => {
// Always start with a fresh container and steps[i].
container = document.createElement('div');
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<X />
<React.Suspense fallback={steps[i]}>
@ -528,7 +532,7 @@ describe('StoreStress (Legacy Mode)', () => {
expect(print(store)).toEqual(snapshots[i]);
// Re-render with steps[j].
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<X />
<React.Suspense fallback={z}>{steps[j]}</React.Suspense>
@ -541,7 +545,7 @@ describe('StoreStress (Legacy Mode)', () => {
expect(print(store)).toEqual(snapshots[j]);
// Check that we can transition back again.
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<X />
<React.Suspense fallback={steps[i]}>
@ -567,7 +571,7 @@ describe('StoreStress (Legacy Mode)', () => {
// Always start with a fresh container and steps[i].
container = document.createElement('div');
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<X />
<React.Suspense fallback={steps[j]}>{steps[i]}</React.Suspense>
@ -605,7 +609,7 @@ describe('StoreStress (Legacy Mode)', () => {
// Trigger actual fallback.
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<X />
<React.Suspense fallback={steps[j]}>
@ -633,7 +637,7 @@ describe('StoreStress (Legacy Mode)', () => {
// Switch to primary mode.
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<X />
<React.Suspense fallback={steps[j]}>{steps[i]}</React.Suspense>
@ -723,7 +727,7 @@ describe('StoreStress (Legacy Mode)', () => {
let container = document.createElement('div');
for (let i = 0; i < steps.length; i++) {
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<X />
<React.Suspense fallback={z}>
@ -747,7 +751,7 @@ describe('StoreStress (Legacy Mode)', () => {
const fallbackSnapshots = [];
for (let i = 0; i < steps.length; i++) {
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<X />
<React.Suspense fallback={steps[i]}>
@ -773,7 +777,7 @@ describe('StoreStress (Legacy Mode)', () => {
// Always start with a fresh container and steps[i].
container = document.createElement('div');
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<X />
<React.Suspense fallback={z}>
@ -787,7 +791,7 @@ describe('StoreStress (Legacy Mode)', () => {
expect(print(store)).toEqual(snapshots[i]);
// Re-render with steps[j].
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<X />
<React.Suspense fallback={z}>
@ -802,7 +806,7 @@ describe('StoreStress (Legacy Mode)', () => {
expect(print(store)).toEqual(snapshots[j]);
// Check that we can transition back again.
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<X />
<React.Suspense fallback={z}>
@ -826,7 +830,7 @@ describe('StoreStress (Legacy Mode)', () => {
// Always start with a fresh container and steps[i].
container = document.createElement('div');
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<X />
<React.Suspense fallback={steps[i]}>
@ -845,7 +849,7 @@ describe('StoreStress (Legacy Mode)', () => {
expect(print(store)).toEqual(fallbackSnapshots[i]);
// Re-render with steps[j].
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<X />
<React.Suspense fallback={steps[j]}>
@ -865,7 +869,7 @@ describe('StoreStress (Legacy Mode)', () => {
expect(print(store)).toEqual(fallbackSnapshots[j]);
// Check that we can transition back again.
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<X />
<React.Suspense fallback={steps[i]}>
@ -894,7 +898,7 @@ describe('StoreStress (Legacy Mode)', () => {
// Always start with a fresh container and steps[i].
container = document.createElement('div');
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<X />
<React.Suspense fallback={z}>
@ -908,7 +912,7 @@ describe('StoreStress (Legacy Mode)', () => {
expect(print(store)).toEqual(snapshots[i]);
// Re-render with steps[j].
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<X />
<React.Suspense fallback={steps[j]}>
@ -923,7 +927,7 @@ describe('StoreStress (Legacy Mode)', () => {
expect(print(store)).toEqual(fallbackSnapshots[j]);
// Check that we can transition back again.
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<X />
<React.Suspense fallback={z}>
@ -947,7 +951,7 @@ describe('StoreStress (Legacy Mode)', () => {
// Always start with a fresh container and steps[i].
container = document.createElement('div');
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<X />
<React.Suspense fallback={steps[i]}>
@ -961,7 +965,7 @@ describe('StoreStress (Legacy Mode)', () => {
expect(print(store)).toEqual(fallbackSnapshots[i]);
// Re-render with steps[j].
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<X />
<React.Suspense fallback={steps[i]}>
@ -976,7 +980,7 @@ describe('StoreStress (Legacy Mode)', () => {
expect(print(store)).toEqual(snapshots[j]);
// Check that we can transition back again.
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<X />
<React.Suspense fallback={steps[i]}>
@ -1000,7 +1004,7 @@ describe('StoreStress (Legacy Mode)', () => {
// Always start with a fresh container and steps[i].
container = document.createElement('div');
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<X />
<React.Suspense fallback={steps[j]}>
@ -1040,7 +1044,7 @@ describe('StoreStress (Legacy Mode)', () => {
// Trigger actual fallback.
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<X />
<React.Suspense fallback={steps[j]}>
@ -1066,7 +1070,7 @@ describe('StoreStress (Legacy Mode)', () => {
// Switch to primary mode.
act(() =>
ReactDOM.render(
legacyRender(
<Root>
<X />
<React.Suspense fallback={steps[j]}>

90
packages/react-devtools-shared/src/__tests__/treeContext-test.js vendored
View File

@ -20,6 +20,7 @@ describe('TreeListContext', () => {
let ReactDOM;
let TestRenderer: ReactTestRenderer;
let bridge: FrontendBridge;
let legacyRender;
let store: Store;
let utils;
let withErrorsOrWarningsIgnored;
@ -35,6 +36,7 @@ describe('TreeListContext', () => {
utils = require('./utils');
utils.beforeEachProfiling();
legacyRender = utils.legacyRender;
withErrorsOrWarningsIgnored = utils.withErrorsOrWarningsIgnored;
bridge = global.bridge;
@ -88,7 +90,7 @@ describe('TreeListContext', () => {
const Child = () => null;
utils.act(() =>
ReactDOM.render(<Grandparent />, document.createElement('div')),
legacyRender(<Grandparent />, document.createElement('div')),
);
let renderer;
@ -214,7 +216,7 @@ describe('TreeListContext', () => {
const Child = () => null;
utils.act(() =>
ReactDOM.render(<Grandparent />, document.createElement('div')),
legacyRender(<Grandparent />, document.createElement('div')),
);
let renderer;
@ -300,7 +302,7 @@ describe('TreeListContext', () => {
const Child = () => null;
utils.act(() =>
ReactDOM.render(<Grandparent />, document.createElement('div')),
legacyRender(<Grandparent />, document.createElement('div')),
);
let renderer;
@ -391,7 +393,7 @@ describe('TreeListContext', () => {
const container = document.createElement('div');
utils.act(() =>
ReactDOM.render(
legacyRender(
<Grandparent>
<Parent>
<Child />
@ -425,7 +427,7 @@ describe('TreeListContext', () => {
// Remove the child (which should auto-select the parent)
await utils.actAsync(() =>
ReactDOM.render(
legacyRender(
<Grandparent>
<Parent />
</Grandparent>,
@ -458,7 +460,7 @@ describe('TreeListContext', () => {
const Child = () => null;
utils.act(() =>
ReactDOM.render(<Grandparent />, document.createElement('div')),
legacyRender(<Grandparent />, document.createElement('div')),
);
let renderer;
@ -619,7 +621,7 @@ describe('TreeListContext', () => {
const Child = () => null;
utils.act(() =>
ReactDOM.render(<Grandparent />, document.createElement('div')),
legacyRender(<Grandparent />, document.createElement('div')),
);
let renderer;
@ -918,7 +920,7 @@ describe('TreeListContext', () => {
Qux.displayName = `withHOC(${Qux.name})`;
utils.act(() =>
ReactDOM.render(
legacyRender(
<React.Fragment>
<Foo />
<Bar />
@ -990,7 +992,7 @@ describe('TreeListContext', () => {
const Baz = () => null;
utils.act(() =>
ReactDOM.render(
legacyRender(
<React.Fragment>
<Foo />
<Baz />
@ -1097,7 +1099,7 @@ describe('TreeListContext', () => {
const container = document.createElement('div');
utils.act(() =>
ReactDOM.render(
legacyRender(
<React.Fragment>
<Foo />
<Bar />
@ -1123,7 +1125,7 @@ describe('TreeListContext', () => {
`);
await utils.actAsync(() =>
ReactDOM.render(
legacyRender(
<React.Fragment>
<Foo />
<Bar />
@ -1158,7 +1160,7 @@ describe('TreeListContext', () => {
const container = document.createElement('div');
utils.act(() =>
ReactDOM.render(
legacyRender(
<React.Fragment>
<Foo />
<Bar />
@ -1196,7 +1198,7 @@ describe('TreeListContext', () => {
`);
await utils.actAsync(() =>
ReactDOM.render(
legacyRender(
<React.Fragment>
<Foo />
<Bar />
@ -1242,7 +1244,7 @@ describe('TreeListContext', () => {
const Child = () => null;
utils.act(() =>
ReactDOM.render(<Grandparent />, document.createElement('div')),
legacyRender(<Grandparent />, document.createElement('div')),
);
let renderer;
@ -1283,7 +1285,7 @@ describe('TreeListContext', () => {
const Child = () => null;
const container = document.createElement('div');
utils.act(() => ReactDOM.render(<Grandparent count={2} />, container));
utils.act(() => legacyRender(<Grandparent count={2} />, container));
let renderer;
utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
@ -1306,7 +1308,7 @@ describe('TreeListContext', () => {
`);
await utils.actAsync(() =>
ReactDOM.render(<Grandparent count={1} />, container),
legacyRender(<Grandparent count={1} />, container),
);
expect(state).toMatchInlineSnapshot(`
[owners]
@ -1315,7 +1317,7 @@ describe('TreeListContext', () => {
`);
await utils.actAsync(() =>
ReactDOM.render(<Grandparent count={0} />, container),
legacyRender(<Grandparent count={0} />, container),
);
expect(state).toMatchInlineSnapshot(`
[owners]
@ -1329,7 +1331,7 @@ describe('TreeListContext', () => {
const container = document.createElement('div');
utils.act(() =>
ReactDOM.render(
legacyRender(
<Parent>
<Child />
</Parent>,
@ -1353,7 +1355,7 @@ describe('TreeListContext', () => {
→ <Child>
`);
await utils.actAsync(() => ReactDOM.render(<Parent />, container));
await utils.actAsync(() => legacyRender(<Parent />, container));
expect(state).toMatchInlineSnapshot(`
[root]
→ <Parent>
@ -1386,7 +1388,7 @@ describe('TreeListContext', () => {
);
const container = document.createElement('div');
utils.act(() => ReactDOM.render(<Parent />, container));
utils.act(() => legacyRender(<Parent />, container));
let renderer;
utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
@ -1493,7 +1495,7 @@ describe('TreeListContext', () => {
it('should handle when there are no errors/warnings', () => {
utils.act(() =>
ReactDOM.render(
legacyRender(
<React.Fragment>
<Child />
<Child />
@ -1556,7 +1558,7 @@ describe('TreeListContext', () => {
it('should cycle through the next errors/warnings and wrap around', () => {
withErrorsOrWarningsIgnored(['test-only:'], () =>
utils.act(() =>
ReactDOM.render(
legacyRender(
<React.Fragment>
<Child />
<Child logWarning={true} />
@ -1617,7 +1619,7 @@ describe('TreeListContext', () => {
it('should cycle through the previous errors/warnings and wrap around', () => {
withErrorsOrWarningsIgnored(['test-only:'], () =>
utils.act(() =>
ReactDOM.render(
legacyRender(
<React.Fragment>
<Child />
<Child logWarning={true} />
@ -1678,14 +1680,14 @@ describe('TreeListContext', () => {
it('should cycle through the next errors/warnings and wrap around with multiple roots', () => {
withErrorsOrWarningsIgnored(['test-only:'], () => {
utils.act(() => {
ReactDOM.render(
legacyRender(
<React.Fragment>
<Child />
<Child logWarning={true} />,
</React.Fragment>,
document.createElement('div'),
);
ReactDOM.render(
legacyRender(
<React.Fragment>
<Child />
<Child logError={true} />
@ -1748,14 +1750,14 @@ describe('TreeListContext', () => {
it('should cycle through the previous errors/warnings and wrap around with multiple roots', () => {
withErrorsOrWarningsIgnored(['test-only:'], () => {
utils.act(() => {
ReactDOM.render(
legacyRender(
<React.Fragment>
<Child />
<Child logWarning={true} />,
</React.Fragment>,
document.createElement('div'),
);
ReactDOM.render(
legacyRender(
<React.Fragment>
<Child />
<Child logError={true} />
@ -1818,7 +1820,7 @@ describe('TreeListContext', () => {
it('should select the next or previous element relative to the current selection', () => {
withErrorsOrWarningsIgnored(['test-only:'], () =>
utils.act(() =>
ReactDOM.render(
legacyRender(
<React.Fragment>
<Child />
<Child logWarning={true} />
@ -1880,7 +1882,7 @@ describe('TreeListContext', () => {
it('should update correctly when errors/warnings are cleared for a fiber in the list', () => {
withErrorsOrWarningsIgnored(['test-only:'], () =>
utils.act(() =>
ReactDOM.render(
legacyRender(
<React.Fragment>
<Child logWarning={true} />
<Child logError={true} />
@ -1953,7 +1955,7 @@ describe('TreeListContext', () => {
it('should update correctly when errors/warnings are cleared for the currently selected fiber', () => {
withErrorsOrWarningsIgnored(['test-only:'], () =>
utils.act(() =>
ReactDOM.render(
legacyRender(
<React.Fragment>
<Child logWarning={true} />
<Child logError={true} />
@ -1994,7 +1996,7 @@ describe('TreeListContext', () => {
withErrorsOrWarningsIgnored(['test-only:'], () =>
utils.act(() =>
ReactDOM.render(
legacyRender(
<React.Fragment>
<Child logWarning={true} />
<Child />
@ -2028,7 +2030,7 @@ describe('TreeListContext', () => {
withErrorsOrWarningsIgnored(['test-only:'], () =>
utils.act(() =>
ReactDOM.render(
legacyRender(
<React.Fragment>
<Child />
<Child logWarning={true} />
@ -2074,7 +2076,7 @@ describe('TreeListContext', () => {
it('should update correctly when all errors/warnings are cleared', () => {
withErrorsOrWarningsIgnored(['test-only:'], () =>
utils.act(() =>
ReactDOM.render(
legacyRender(
<React.Fragment>
<Child logWarning={true} />
<Child logError={true} />
@ -2124,7 +2126,7 @@ describe('TreeListContext', () => {
withErrorsOrWarningsIgnored(['test-only:'], () =>
utils.act(() =>
ReactDOM.render(
legacyRender(
<React.Fragment>
<Wrapper>
<Child logWarning={true} />
@ -2174,7 +2176,7 @@ describe('TreeListContext', () => {
withErrorsOrWarningsIgnored(['test-only:'], () =>
utils.act(() =>
ReactDOM.render(
legacyRender(
<React.Fragment>
<Wrapper>
<Child logWarning={true} />
@ -2260,7 +2262,7 @@ describe('TreeListContext', () => {
withErrorsOrWarningsIgnored(['test-only:'], () =>
utils.act(() =>
ReactDOM.render(
legacyRender(
<React.Fragment>
<Wrapper>
<Child logWarning={true} />
@ -2318,7 +2320,7 @@ describe('TreeListContext', () => {
withErrorsOrWarningsIgnored(['test-only:'], () =>
utils.act(() =>
ReactDOM.render(
legacyRender(
<React.Suspense fallback={null}>
<Child logWarning={true} />
<NeverResolves />
@ -2354,7 +2356,7 @@ describe('TreeListContext', () => {
withErrorsOrWarningsIgnored(['test-only:'], () =>
utils.act(() =>
ReactDOM.render(
legacyRender(
<React.Suspense fallback={null}>
<Child logWarning={true} />
<LazyComponent />
@ -2373,7 +2375,7 @@ describe('TreeListContext', () => {
await Promise.resolve();
withErrorsOrWarningsIgnored(['test-only:'], () =>
utils.act(() =>
ReactDOM.render(
legacyRender(
<React.Suspense fallback={null}>
<Child logWarning={true} />
<LazyComponent />
@ -2404,7 +2406,7 @@ describe('TreeListContext', () => {
withErrorsOrWarningsIgnored(['test-only:'], () =>
utils.act(() =>
ReactDOM.render(
legacyRender(
<React.Suspense fallback={<Fallback />}>
<LazyComponent />
</React.Suspense>,
@ -2425,7 +2427,7 @@ describe('TreeListContext', () => {
await Promise.resolve();
withErrorsOrWarningsIgnored(['test-only:'], () =>
utils.act(() =>
ReactDOM.render(
legacyRender(
<React.Suspense fallback={<Fallback />}>
<LazyComponent />
</React.Suspense>,
@ -2469,7 +2471,7 @@ describe('TreeListContext', () => {
['test-only:', 'React will try to recreate this component tree'],
() => {
utils.act(() =>
ReactDOM.render(
legacyRender(
<ErrorBoundary>
<BadRender />
</ErrorBoundary>,
@ -2533,7 +2535,7 @@ describe('TreeListContext', () => {
['test-only:', 'React will try to recreate this component tree'],
() => {
utils.act(() =>
ReactDOM.render(
legacyRender(
<ErrorBoundary>
<LogsWarning />
</ErrorBoundary>,
@ -2592,7 +2594,7 @@ describe('TreeListContext', () => {
['test-only:', 'React will try to recreate this component tree'],
() => {
utils.act(() =>
ReactDOM.render(
legacyRender(
<ErrorBoundary>
<BadRender />
</ErrorBoundary>,

18
packages/react-devtools-shared/src/__tests__/useEditableValue-test.js vendored
View File

@ -10,15 +10,15 @@
describe('useEditableValue', () => {
let act;
let React;
let ReactDOM;
let legacyRender;
let useEditableValue;
beforeEach(() => {
const utils = require('./utils');
act = utils.act;
legacyRender = utils.legacyRender;
React = require('react');
ReactDOM = require('react-dom');
useEditableValue = require('../devtools/views/hooks').useEditableValue;
});
@ -33,7 +33,7 @@ describe('useEditableValue', () => {
}
const container = document.createElement('div');
ReactDOM.render(<Example />, container);
legacyRender(<Example />, container);
expect(state.editableValue).toEqual('NaN');
expect(state.externalValue).toEqual(NaN);
expect(state.parsedValue).toEqual(NaN);
@ -51,7 +51,7 @@ describe('useEditableValue', () => {
}
const container = document.createElement('div');
ReactDOM.render(<Example value={1} />, container);
legacyRender(<Example value={1} />, container);
expect(state.editableValue).toEqual('1');
expect(state.externalValue).toEqual(1);
expect(state.parsedValue).toEqual(1);
@ -60,7 +60,7 @@ describe('useEditableValue', () => {
// If there are NO pending changes,
// an update to the external prop value should override the local/pending value.
ReactDOM.render(<Example value={2} />, container);
legacyRender(<Example value={2} />, container);
expect(state.editableValue).toEqual('2');
expect(state.externalValue).toEqual(2);
expect(state.parsedValue).toEqual(2);
@ -79,7 +79,7 @@ describe('useEditableValue', () => {
}
const container = document.createElement('div');
ReactDOM.render(<Example value={1} />, container);
legacyRender(<Example value={1} />, container);
expect(state.editableValue).toEqual('1');
expect(state.externalValue).toEqual(1);
expect(state.parsedValue).toEqual(1);
@ -102,7 +102,7 @@ describe('useEditableValue', () => {
// If there ARE pending changes,
// an update to the external prop value should NOT override the local/pending value.
ReactDOM.render(<Example value={3} />, container);
legacyRender(<Example value={3} />, container);
expect(state.editableValue).toEqual('2');
expect(state.externalValue).toEqual(3);
expect(state.parsedValue).toEqual(2);
@ -121,7 +121,7 @@ describe('useEditableValue', () => {
}
const container = document.createElement('div');
ReactDOM.render(<Example value={1} />, container);
legacyRender(<Example value={1} />, container);
expect(state.editableValue).toEqual('1');
expect(state.externalValue).toEqual(1);
expect(state.parsedValue).toEqual(1);
@ -154,7 +154,7 @@ describe('useEditableValue', () => {
}
const container = document.createElement('div');
ReactDOM.render(<Example value={1} />, container);
legacyRender(<Example value={1} />, container);
expect(state.editableValue).toEqual('1');
expect(state.externalValue).toEqual(1);
expect(state.parsedValue).toEqual(1);

24
packages/react-devtools-shared/src/__tests__/utils.js vendored
View File

@ -162,6 +162,16 @@ export function getRendererID(): number {
return parseInt(id, 10);
}
export function legacyRender(elements, container) {
const ReactDOM = require('react-dom');
withErrorsOrWarningsIgnored(
['ReactDOM.render is no longer supported in React 18'],
() => {
ReactDOM.render(elements, container);
},
);
}
export function requireTestRenderer(): ReactTestRenderer {
let hook;
try {
@ -228,9 +238,15 @@ export function withErrorsOrWarningsIgnored<T: void | Promise<void>>(
errorOrWarningMessages: string[],
fn: () => T,
): T {
// withErrorsOrWarningsIgnored() may be nested.
const prev = global._ignoredErrorOrWarningMessages || [];
let resetIgnoredErrorOrWarningMessages = true;
try {
global._ignoredErrorOrWarningMessages = errorOrWarningMessages;
global._ignoredErrorOrWarningMessages = [
...prev,
...errorOrWarningMessages,
];
const maybeThenable = fn();
if (
maybeThenable !== undefined &&
@ -239,16 +255,16 @@ export function withErrorsOrWarningsIgnored<T: void | Promise<void>>(
resetIgnoredErrorOrWarningMessages = false;
return maybeThenable.then(
() => {
global._ignoredErrorOrWarningMessages = [];
global._ignoredErrorOrWarningMessages = prev;
},
() => {
global._ignoredErrorOrWarningMessages = [];
global._ignoredErrorOrWarningMessages = prev;
},
);
}
} finally {
if (resetIgnoredErrorOrWarningMessages) {
global._ignoredErrorOrWarningMessages = [];
global._ignoredErrorOrWarningMessages = prev;
}
}
}