mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
chore[react-devtools]: drop legacy context tests (#31059)
We've dropped the support for detecting changes in legacy Contexts in https://github.com/facebook/react/pull/30896.
This commit is contained in:
@@ -13,7 +13,6 @@ import type Store from 'react-devtools-shared/src/devtools/store';
|
||||
import {getVersionedRenderImplementation} from './utils';
|
||||
|
||||
describe('ProfilingCache', () => {
|
||||
let PropTypes;
|
||||
let React;
|
||||
let ReactDOM;
|
||||
let ReactDOMClient;
|
||||
@@ -34,7 +33,6 @@ describe('ProfilingCache', () => {
|
||||
store.collapseNodesByDefault = false;
|
||||
store.recordChangeDescriptions = true;
|
||||
|
||||
PropTypes = require('prop-types');
|
||||
React = require('react');
|
||||
ReactDOM = require('react-dom');
|
||||
ReactDOMClient = require('react-dom/client');
|
||||
@@ -309,692 +307,6 @@ describe('ProfilingCache', () => {
|
||||
});
|
||||
});
|
||||
|
||||
// @reactVersion >= 16.9
|
||||
// @reactVersion <= 18.2
|
||||
it('should record changed props/state/context/hooks for React version [16.9; 18.2] with legacy context', () => {
|
||||
let instance = null;
|
||||
|
||||
const ModernContext = React.createContext(0);
|
||||
|
||||
class LegacyContextProvider extends React.Component<any, {count: number}> {
|
||||
static childContextTypes = {
|
||||
count: PropTypes.number,
|
||||
};
|
||||
state = {count: 0};
|
||||
getChildContext() {
|
||||
return this.state;
|
||||
}
|
||||
render() {
|
||||
instance = this;
|
||||
return (
|
||||
<ModernContext.Provider value={this.state.count}>
|
||||
<React.Fragment>
|
||||
<ModernContextConsumer />
|
||||
<LegacyContextConsumer />
|
||||
</React.Fragment>
|
||||
</ModernContext.Provider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const FunctionComponentWithHooks = ({count}) => {
|
||||
React.useMemo(() => count, [count]);
|
||||
return null;
|
||||
};
|
||||
|
||||
class ModernContextConsumer extends React.Component<any> {
|
||||
static contextType = ModernContext;
|
||||
render() {
|
||||
return <FunctionComponentWithHooks count={this.context} />;
|
||||
}
|
||||
}
|
||||
|
||||
class LegacyContextConsumer extends React.Component<any> {
|
||||
static contextTypes = {
|
||||
count: PropTypes.number,
|
||||
};
|
||||
render() {
|
||||
return <FunctionComponentWithHooks count={this.context.count} />;
|
||||
}
|
||||
}
|
||||
|
||||
utils.act(() => store.profilerStore.startProfiling());
|
||||
utils.act(() => render(<LegacyContextProvider />));
|
||||
expect(instance).not.toBeNull();
|
||||
utils.act(() => (instance: any).setState({count: 1}));
|
||||
utils.act(() => render(<LegacyContextProvider foo={123} />));
|
||||
utils.act(() => render(<LegacyContextProvider bar="abc" />));
|
||||
utils.act(() => render(<LegacyContextProvider />));
|
||||
utils.act(() => store.profilerStore.stopProfiling());
|
||||
|
||||
const rootID = store.roots[0];
|
||||
|
||||
let changeDescriptions = store.profilerStore
|
||||
.getDataForRoot(rootID)
|
||||
.commitData.map(commitData => commitData.changeDescriptions);
|
||||
expect(changeDescriptions).toHaveLength(5);
|
||||
expect(changeDescriptions[0]).toMatchInlineSnapshot(`
|
||||
Map {
|
||||
2 => {
|
||||
"context": null,
|
||||
"didHooksChange": false,
|
||||
"isFirstMount": true,
|
||||
"props": null,
|
||||
"state": null,
|
||||
},
|
||||
4 => {
|
||||
"context": null,
|
||||
"didHooksChange": false,
|
||||
"isFirstMount": true,
|
||||
"props": null,
|
||||
"state": null,
|
||||
},
|
||||
5 => {
|
||||
"context": null,
|
||||
"didHooksChange": false,
|
||||
"isFirstMount": true,
|
||||
"props": null,
|
||||
"state": null,
|
||||
},
|
||||
6 => {
|
||||
"context": null,
|
||||
"didHooksChange": false,
|
||||
"isFirstMount": true,
|
||||
"props": null,
|
||||
"state": null,
|
||||
},
|
||||
7 => {
|
||||
"context": null,
|
||||
"didHooksChange": false,
|
||||
"isFirstMount": true,
|
||||
"props": null,
|
||||
"state": null,
|
||||
},
|
||||
}
|
||||
`);
|
||||
expect(changeDescriptions[1]).toMatchInlineSnapshot(`
|
||||
Map {
|
||||
5 => {
|
||||
"context": null,
|
||||
"didHooksChange": false,
|
||||
"hooks": [],
|
||||
"isFirstMount": false,
|
||||
"props": [
|
||||
"count",
|
||||
],
|
||||
"state": null,
|
||||
},
|
||||
4 => {
|
||||
"context": true,
|
||||
"didHooksChange": false,
|
||||
"hooks": null,
|
||||
"isFirstMount": false,
|
||||
"props": [],
|
||||
"state": null,
|
||||
},
|
||||
7 => {
|
||||
"context": null,
|
||||
"didHooksChange": false,
|
||||
"hooks": [],
|
||||
"isFirstMount": false,
|
||||
"props": [
|
||||
"count",
|
||||
],
|
||||
"state": null,
|
||||
},
|
||||
6 => {
|
||||
"context": [
|
||||
"count",
|
||||
],
|
||||
"didHooksChange": false,
|
||||
"hooks": null,
|
||||
"isFirstMount": false,
|
||||
"props": [],
|
||||
"state": null,
|
||||
},
|
||||
2 => {
|
||||
"context": null,
|
||||
"didHooksChange": false,
|
||||
"hooks": [],
|
||||
"isFirstMount": false,
|
||||
"props": [],
|
||||
"state": [
|
||||
"count",
|
||||
],
|
||||
},
|
||||
}
|
||||
`);
|
||||
expect(changeDescriptions[2]).toMatchInlineSnapshot(`
|
||||
Map {
|
||||
5 => {
|
||||
"context": null,
|
||||
"didHooksChange": false,
|
||||
"hooks": [],
|
||||
"isFirstMount": false,
|
||||
"props": [],
|
||||
"state": null,
|
||||
},
|
||||
4 => {
|
||||
"context": false,
|
||||
"didHooksChange": false,
|
||||
"hooks": null,
|
||||
"isFirstMount": false,
|
||||
"props": [],
|
||||
"state": null,
|
||||
},
|
||||
7 => {
|
||||
"context": null,
|
||||
"didHooksChange": false,
|
||||
"hooks": [],
|
||||
"isFirstMount": false,
|
||||
"props": [],
|
||||
"state": null,
|
||||
},
|
||||
6 => {
|
||||
"context": [],
|
||||
"didHooksChange": false,
|
||||
"hooks": null,
|
||||
"isFirstMount": false,
|
||||
"props": [],
|
||||
"state": null,
|
||||
},
|
||||
2 => {
|
||||
"context": null,
|
||||
"didHooksChange": false,
|
||||
"hooks": [],
|
||||
"isFirstMount": false,
|
||||
"props": [
|
||||
"foo",
|
||||
],
|
||||
"state": [],
|
||||
},
|
||||
}
|
||||
`);
|
||||
expect(changeDescriptions[3]).toMatchInlineSnapshot(`
|
||||
Map {
|
||||
5 => {
|
||||
"context": null,
|
||||
"didHooksChange": false,
|
||||
"hooks": [],
|
||||
"isFirstMount": false,
|
||||
"props": [],
|
||||
"state": null,
|
||||
},
|
||||
4 => {
|
||||
"context": false,
|
||||
"didHooksChange": false,
|
||||
"hooks": null,
|
||||
"isFirstMount": false,
|
||||
"props": [],
|
||||
"state": null,
|
||||
},
|
||||
7 => {
|
||||
"context": null,
|
||||
"didHooksChange": false,
|
||||
"hooks": [],
|
||||
"isFirstMount": false,
|
||||
"props": [],
|
||||
"state": null,
|
||||
},
|
||||
6 => {
|
||||
"context": [],
|
||||
"didHooksChange": false,
|
||||
"hooks": null,
|
||||
"isFirstMount": false,
|
||||
"props": [],
|
||||
"state": null,
|
||||
},
|
||||
2 => {
|
||||
"context": null,
|
||||
"didHooksChange": false,
|
||||
"hooks": [],
|
||||
"isFirstMount": false,
|
||||
"props": [
|
||||
"foo",
|
||||
"bar",
|
||||
],
|
||||
"state": [],
|
||||
},
|
||||
}
|
||||
`);
|
||||
expect(changeDescriptions[4]).toMatchInlineSnapshot(`
|
||||
Map {
|
||||
5 => {
|
||||
"context": null,
|
||||
"didHooksChange": false,
|
||||
"hooks": [],
|
||||
"isFirstMount": false,
|
||||
"props": [],
|
||||
"state": null,
|
||||
},
|
||||
4 => {
|
||||
"context": false,
|
||||
"didHooksChange": false,
|
||||
"hooks": null,
|
||||
"isFirstMount": false,
|
||||
"props": [],
|
||||
"state": null,
|
||||
},
|
||||
7 => {
|
||||
"context": null,
|
||||
"didHooksChange": false,
|
||||
"hooks": [],
|
||||
"isFirstMount": false,
|
||||
"props": [],
|
||||
"state": null,
|
||||
},
|
||||
6 => {
|
||||
"context": [],
|
||||
"didHooksChange": false,
|
||||
"hooks": null,
|
||||
"isFirstMount": false,
|
||||
"props": [],
|
||||
"state": null,
|
||||
},
|
||||
2 => {
|
||||
"context": null,
|
||||
"didHooksChange": false,
|
||||
"hooks": [],
|
||||
"isFirstMount": false,
|
||||
"props": [
|
||||
"bar",
|
||||
],
|
||||
"state": [],
|
||||
},
|
||||
}
|
||||
`);
|
||||
|
||||
utils.exportImportHelper(bridge, store);
|
||||
|
||||
const prevChangeDescriptions = [...changeDescriptions];
|
||||
|
||||
changeDescriptions = store.profilerStore
|
||||
.getDataForRoot(rootID)
|
||||
.commitData.map(commitData => commitData.changeDescriptions);
|
||||
expect(changeDescriptions).toHaveLength(5);
|
||||
|
||||
for (let commitIndex = 0; commitIndex < 5; commitIndex++) {
|
||||
expect(changeDescriptions[commitIndex]).toEqual(
|
||||
prevChangeDescriptions[commitIndex],
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
// @reactVersion > 18.2
|
||||
// @gate !disableLegacyContext
|
||||
it('should record changed props/state/context/hooks for React version (18.2; ∞) with legacy context enabled', () => {
|
||||
let instance = null;
|
||||
|
||||
const ModernContext = React.createContext(0);
|
||||
|
||||
class LegacyContextProvider extends React.Component<any, {count: number}> {
|
||||
static childContextTypes = {
|
||||
count: PropTypes.number,
|
||||
};
|
||||
state = {count: 0};
|
||||
getChildContext() {
|
||||
return this.state;
|
||||
}
|
||||
render() {
|
||||
instance = this;
|
||||
return (
|
||||
<ModernContext.Provider value={this.state.count}>
|
||||
<React.Fragment>
|
||||
<ModernContextConsumer />
|
||||
<LegacyContextConsumer />
|
||||
</React.Fragment>
|
||||
</ModernContext.Provider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const FunctionComponentWithHooks = ({count}) => {
|
||||
React.useMemo(() => count, [count]);
|
||||
return null;
|
||||
};
|
||||
|
||||
class ModernContextConsumer extends React.Component<any> {
|
||||
static contextType = ModernContext;
|
||||
render() {
|
||||
return <FunctionComponentWithHooks count={this.context} />;
|
||||
}
|
||||
}
|
||||
|
||||
class LegacyContextConsumer extends React.Component<any> {
|
||||
static contextTypes = {
|
||||
count: PropTypes.number,
|
||||
};
|
||||
render() {
|
||||
return <FunctionComponentWithHooks count={this.context.count} />;
|
||||
}
|
||||
}
|
||||
|
||||
utils.act(() => store.profilerStore.startProfiling());
|
||||
utils.act(() => render(<LegacyContextProvider />));
|
||||
expect(instance).not.toBeNull();
|
||||
utils.act(() => (instance: any).setState({count: 1}));
|
||||
utils.act(() => render(<LegacyContextProvider foo={123} />));
|
||||
utils.act(() => render(<LegacyContextProvider bar="abc" />));
|
||||
utils.act(() => render(<LegacyContextProvider />));
|
||||
utils.act(() => store.profilerStore.stopProfiling());
|
||||
|
||||
const rootID = store.roots[0];
|
||||
|
||||
let changeDescriptions = store.profilerStore
|
||||
.getDataForRoot(rootID)
|
||||
.commitData.map(commitData => commitData.changeDescriptions);
|
||||
expect(changeDescriptions).toHaveLength(5);
|
||||
expect(changeDescriptions[0]).toEqual(
|
||||
new Map([
|
||||
[
|
||||
2,
|
||||
{
|
||||
context: null,
|
||||
didHooksChange: false,
|
||||
isFirstMount: true,
|
||||
props: null,
|
||||
state: null,
|
||||
},
|
||||
],
|
||||
[
|
||||
4,
|
||||
{
|
||||
context: null,
|
||||
didHooksChange: false,
|
||||
isFirstMount: true,
|
||||
props: null,
|
||||
state: null,
|
||||
},
|
||||
],
|
||||
[
|
||||
5,
|
||||
{
|
||||
context: null,
|
||||
didHooksChange: false,
|
||||
isFirstMount: true,
|
||||
props: null,
|
||||
state: null,
|
||||
},
|
||||
],
|
||||
[
|
||||
6,
|
||||
{
|
||||
context: null,
|
||||
didHooksChange: false,
|
||||
isFirstMount: true,
|
||||
props: null,
|
||||
state: null,
|
||||
},
|
||||
],
|
||||
[
|
||||
7,
|
||||
{
|
||||
context: null,
|
||||
didHooksChange: false,
|
||||
isFirstMount: true,
|
||||
props: null,
|
||||
state: null,
|
||||
},
|
||||
],
|
||||
]),
|
||||
);
|
||||
|
||||
expect(changeDescriptions[1]).toEqual(
|
||||
new Map([
|
||||
[
|
||||
5,
|
||||
{
|
||||
context: null,
|
||||
didHooksChange: false,
|
||||
hooks: [],
|
||||
isFirstMount: false,
|
||||
props: ['count'],
|
||||
state: null,
|
||||
},
|
||||
],
|
||||
[
|
||||
4,
|
||||
{
|
||||
context: true,
|
||||
didHooksChange: false,
|
||||
hooks: null,
|
||||
isFirstMount: false,
|
||||
props: [],
|
||||
state: null,
|
||||
},
|
||||
],
|
||||
[
|
||||
7,
|
||||
{
|
||||
context: null,
|
||||
didHooksChange: false,
|
||||
hooks: [],
|
||||
isFirstMount: false,
|
||||
props: ['count'],
|
||||
state: null,
|
||||
},
|
||||
],
|
||||
[
|
||||
6,
|
||||
{
|
||||
context: ['count'],
|
||||
didHooksChange: false,
|
||||
hooks: null,
|
||||
isFirstMount: false,
|
||||
props: [],
|
||||
state: null,
|
||||
},
|
||||
],
|
||||
[
|
||||
2,
|
||||
{
|
||||
context: null,
|
||||
didHooksChange: false,
|
||||
hooks: [],
|
||||
isFirstMount: false,
|
||||
props: [],
|
||||
state: ['count'],
|
||||
},
|
||||
],
|
||||
]),
|
||||
);
|
||||
|
||||
expect(changeDescriptions[2]).toEqual(
|
||||
new Map([
|
||||
[
|
||||
5,
|
||||
{
|
||||
context: null,
|
||||
didHooksChange: false,
|
||||
hooks: [],
|
||||
isFirstMount: false,
|
||||
props: [],
|
||||
state: null,
|
||||
},
|
||||
],
|
||||
[
|
||||
4,
|
||||
{
|
||||
context: false,
|
||||
didHooksChange: false,
|
||||
hooks: null,
|
||||
isFirstMount: false,
|
||||
props: [],
|
||||
state: null,
|
||||
},
|
||||
],
|
||||
[
|
||||
7,
|
||||
{
|
||||
context: null,
|
||||
didHooksChange: false,
|
||||
hooks: [],
|
||||
isFirstMount: false,
|
||||
props: [],
|
||||
state: null,
|
||||
},
|
||||
],
|
||||
[
|
||||
6,
|
||||
{
|
||||
context: [],
|
||||
didHooksChange: false,
|
||||
hooks: null,
|
||||
isFirstMount: false,
|
||||
props: [],
|
||||
state: null,
|
||||
},
|
||||
],
|
||||
[
|
||||
2,
|
||||
{
|
||||
context: null,
|
||||
didHooksChange: false,
|
||||
hooks: [],
|
||||
isFirstMount: false,
|
||||
props: ['foo'],
|
||||
state: [],
|
||||
},
|
||||
],
|
||||
]),
|
||||
);
|
||||
|
||||
expect(changeDescriptions[3]).toEqual(
|
||||
new Map([
|
||||
[
|
||||
5,
|
||||
{
|
||||
context: null,
|
||||
didHooksChange: false,
|
||||
hooks: [],
|
||||
isFirstMount: false,
|
||||
props: [],
|
||||
state: null,
|
||||
},
|
||||
],
|
||||
[
|
||||
4,
|
||||
{
|
||||
context: false,
|
||||
didHooksChange: false,
|
||||
hooks: null,
|
||||
isFirstMount: false,
|
||||
props: [],
|
||||
state: null,
|
||||
},
|
||||
],
|
||||
[
|
||||
7,
|
||||
{
|
||||
context: null,
|
||||
didHooksChange: false,
|
||||
hooks: [],
|
||||
isFirstMount: false,
|
||||
props: [],
|
||||
state: null,
|
||||
},
|
||||
],
|
||||
[
|
||||
6,
|
||||
{
|
||||
context: [],
|
||||
didHooksChange: false,
|
||||
hooks: null,
|
||||
isFirstMount: false,
|
||||
props: [],
|
||||
state: null,
|
||||
},
|
||||
],
|
||||
[
|
||||
2,
|
||||
{
|
||||
context: null,
|
||||
didHooksChange: false,
|
||||
hooks: [],
|
||||
isFirstMount: false,
|
||||
props: ['foo', 'bar'],
|
||||
state: [],
|
||||
},
|
||||
],
|
||||
]),
|
||||
);
|
||||
|
||||
expect(changeDescriptions[4]).toEqual(
|
||||
new Map([
|
||||
[
|
||||
5,
|
||||
{
|
||||
context: null,
|
||||
didHooksChange: false,
|
||||
hooks: [],
|
||||
isFirstMount: false,
|
||||
props: [],
|
||||
state: null,
|
||||
},
|
||||
],
|
||||
[
|
||||
4,
|
||||
{
|
||||
context: false,
|
||||
didHooksChange: false,
|
||||
hooks: null,
|
||||
isFirstMount: false,
|
||||
props: [],
|
||||
state: null,
|
||||
},
|
||||
],
|
||||
[
|
||||
7,
|
||||
{
|
||||
context: null,
|
||||
didHooksChange: false,
|
||||
hooks: [],
|
||||
isFirstMount: false,
|
||||
props: [],
|
||||
state: null,
|
||||
},
|
||||
],
|
||||
[
|
||||
6,
|
||||
{
|
||||
context: [],
|
||||
didHooksChange: false,
|
||||
hooks: null,
|
||||
isFirstMount: false,
|
||||
props: [],
|
||||
state: null,
|
||||
},
|
||||
],
|
||||
[
|
||||
2,
|
||||
{
|
||||
context: null,
|
||||
didHooksChange: false,
|
||||
hooks: [],
|
||||
isFirstMount: false,
|
||||
props: ['bar'],
|
||||
state: [],
|
||||
},
|
||||
],
|
||||
]),
|
||||
);
|
||||
|
||||
utils.exportImportHelper(bridge, store);
|
||||
|
||||
const prevChangeDescriptions = [...changeDescriptions];
|
||||
|
||||
changeDescriptions = store.profilerStore
|
||||
.getDataForRoot(rootID)
|
||||
.commitData.map(commitData => commitData.changeDescriptions);
|
||||
expect(changeDescriptions).toHaveLength(5);
|
||||
|
||||
for (let commitIndex = 0; commitIndex < 5; commitIndex++) {
|
||||
expect(changeDescriptions[commitIndex]).toEqual(
|
||||
prevChangeDescriptions[commitIndex],
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
// @reactVersion >= 18.0
|
||||
it('should properly detect changed hooks', () => {
|
||||
const Context = React.createContext(0);
|
||||
|
||||
Reference in New Issue
Block a user