mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
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:
+4
-5
@@ -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(() => {
|
||||
|
||||
@@ -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);
|
||||
|
||||
|
||||
+12
-12
@@ -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,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>,
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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());
|
||||
|
||||
|
||||
@@ -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(() =>
|
||||
|
||||
@@ -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));
|
||||
|
||||
@@ -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;
|
||||
|
||||
+12
-19
@@ -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;
|
||||
|
||||
@@ -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());
|
||||
|
||||
|
||||
+72
-86
@@ -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);
|
||||
|
||||
+20
-11
@@ -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 />
|
||||
|
||||
@@ -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(
|
||||
|
||||
@@ -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]}>
|
||||
|
||||
@@ -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>,
|
||||
|
||||
@@ -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);
|
||||
|
||||
+20
-4
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user