Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Upgrade ESLint so we can use JSX Fragment syntax (#16328)

Browse Source 
Now that we're using Babel 7, this is the last blocker.
This commit is contained in:
Andrew Clark
2019-08-09 12:59:02 -07:00
committed by GitHub
parent 07d062dea8
commit 0bd0c5269f
40 changed files with 830 additions and 681 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintrc.js
+22 -17
View File
@@ -12,18 +12,13 @@ module.exports = {
extends: 'fbjs',
// Stop ESLint from looking for a configuration file in parent folders
'root': true,
root: true,
plugins: [
'jest',
'no-for-of-loops',
'react',
'react-internal',
],
plugins: ['jest', 'no-for-of-loops', 'react', 'react-internal'],
parser: 'espree',
parser: 'babel-eslint',
parserOptions: {
ecmaVersion: 2017,
ecmaVersion: 8,
sourceType: 'script',
ecmaFeatures: {
experimentalObjectRestSpread: true,
@@ -40,8 +35,8 @@ module.exports = {
'dot-location': [ERROR, 'property'],
'dot-notation': ERROR,
'eol-last': ERROR,
'eqeqeq': [ERROR, 'allow-null'],
'indent': OFF,
eqeqeq: [ERROR, 'allow-null'],
indent: OFF,
'jsx-quotes': [ERROR, 'prefer-double'],
'keyword-spacing': [ERROR, {after: true, before: true}],
'no-bitwise': OFF,
@@ -51,9 +46,9 @@ module.exports = {
'no-shadow': ERROR,
'no-unused-expressions': ERROR,
'no-unused-vars': [ERROR, {args: 'none'}],
'no-use-before-define': [ERROR, {functions: false, variables: false}],
'no-use-before-define': OFF,
'no-useless-concat': OFF,
'quotes': [ERROR, 'single', {avoidEscape: true, allowTemplateLiterals: true }],
quotes: [ERROR, 'single', {avoidEscape: true, allowTemplateLiterals: true}],
'space-before-blocks': ERROR,
'space-before-function-paren': OFF,
'valid-typeof': [ERROR, {requireStringLiterals: true}],
@@ -65,6 +60,12 @@ module.exports = {
'no-var': ERROR,
strict: ERROR,
// Enforced by Prettier
// TODO: Prettier doesn't handle long strings or long comments. Not a big
// deal. But I turned it off because loading the plugin causes some obscure
// syntax error and it didn't seem worth investigating.
'max-len': OFF,
// React & JSX
// Our transforms set this automatically
'react/jsx-boolean-value': [ERROR, 'always'],
@@ -78,7 +79,10 @@ module.exports = {
'react/react-in-jsx-scope': ERROR,
'react/self-closing-comp': ERROR,
// We don't care to do this
'react/jsx-wrap-multilines': [ERROR, {declaration: false, assignment: false}],
'react/jsx-wrap-multilines': [
ERROR,
{declaration: false, assignment: false},
],
// Prevent for...of loops because they require a Symbol polyfill.
// You can disable this rule for code that isn't shipped (e.g. build scripts and tests).
@@ -112,6 +116,7 @@ module.exports = {
files: esNextPaths,
parser: 'babel-eslint',
parserOptions: {
ecmaVersion: 8,
sourceType: 'module',
},
rules: {
@@ -124,14 +129,14 @@ module.exports = {
rules: {
// https://github.com/jest-community/eslint-plugin-jest
'jest/no-focused-tests': ERROR,
}
},
},
{
files: ['packages/react-native-renderer/**/*.js'],
globals: {
nativeFabricUIManager: true,
}
}
},
},
],
globals: {
fixtures/dom/src/components/fixtures/suspense/index.js
+6 -6
View File
@@ -46,7 +46,7 @@ class SuspendyTreeChild extends React.Component {
render() {
return (
<React.Fragment>
<>
<Suspense fallback={<div>(display: none)</div>}>
<div>
<AsyncStep text={`${this.state.step} + ${this.id}`} ms={500} />
@@ -54,7 +54,7 @@ class SuspendyTreeChild extends React.Component {
</div>
</Suspense>
<button onClick={this.increment}>Hide</button>
</React.Fragment>
</>
);
}
}
@@ -86,22 +86,22 @@ class SuspendyTree extends React.Component {
};
render() {
return (
<React.Fragment>
<>
<div ref={this.parentContainer}>
<div ref={this.container} />
</div>
<div>
{this.container.current !== null
? ReactDOM.createPortal(
<React.Fragment>
<>
<SuspendyTreeChild>{this.props.children}</SuspendyTreeChild>
<button onClick={this.removeAndRestore}>Remove</button>
</React.Fragment>,
</>,
this.container.current
)
: null}
</div>
</React.Fragment>
</>
);
}
}
package.json
+2 -2
View File
@@ -45,12 +45,12 @@
"cross-env": "^5.1.1",
"danger": "^3.0.4",
"error-stack-parser": "^2.0.2",
"eslint": "^4.1.0",
"eslint": "^6.1.0",
"eslint-config-fbjs": "^1.1.1",
"eslint-plugin-babel": "^3.3.0",
"eslint-plugin-flowtype": "^2.25.0",
"eslint-plugin-jest": "^21.6.1",
"eslint-plugin-no-for-of-loops": "^1.0.0",
"eslint-plugin-babel": "^5.3.0",
"eslint-plugin-react": "^6.7.1",
"eslint-plugin-react-internal": "link:./scripts/eslint-rules",
"fbjs-scripts": "^0.8.3",
packages/react-dom/src/__tests__/ReactDOMFiber-test.js
Vendored
+5 -5
View File
@@ -178,11 +178,11 @@ describe('ReactDOMFiber', () => {
it('renders an empty fragment', () => {
const Div = () => <div />;
const EmptyFragment = () => <React.Fragment />;
const EmptyFragment = () => <></>;
const NonEmptyFragment = () => (
<React.Fragment>
<>
<Div />
</React.Fragment>
</>
);
ReactDOM.render(<EmptyFragment />, container);
@@ -475,10 +475,10 @@ describe('ReactDOMFiber', () => {
return (
<div>
{this.state.show && (
<React.Fragment>
<>
{ReactDOM.createPortal(null, portalContainer)}
<div>child</div>
</React.Fragment>
</>
)}
<div>parent</div>
</div>
packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.internal.js
+2 -2
View File
@@ -581,11 +581,11 @@ describe('ReactDOMFiberAsync', () => {
}
root.render(
<React.Fragment>
<>
<Text text="A" />
<Text text="B" />
<Text text="C" />
</React.Fragment>,
</>,
);
// Nothing should have rendered yet
packages/react-dom/src/__tests__/ReactDOMHooks-test.js
Vendored
+4 -4
View File
@@ -82,10 +82,10 @@ describe('ReactDOMHooks', () => {
});
return (
<React.Fragment>
<>
<input ref={inputRef} onInput={handleInput} />
<label ref={labelRef}>{text}</label>
</React.Fragment>
</>
);
};
@@ -115,10 +115,10 @@ describe('ReactDOMHooks', () => {
});
return (
<React.Fragment>
<>
<input ref={inputRef} onInput={handleInput} />
<label ref={labelRef}>{text}</label>
</React.Fragment>
</>
);
};
packages/react-dom/src/__tests__/ReactDOMServerIntegrationClassContextType-test.js
Vendored
+2 -2
View File
@@ -240,12 +240,12 @@ describe('ReactDOMServerIntegration', () => {
</Theme.Provider>
<LanguageConsumer>
{language => (
<React.Fragment>
<>
<ThemeConsumer>
{theme => <div id="theme3">{theme}</div>}
</ThemeConsumer>
<div id="language2">{language}</div>
</React.Fragment>
</>
)}
</LanguageConsumer>
</Theme.Provider>
packages/react-dom/src/__tests__/ReactDOMServerIntegrationFragment-test.js
Vendored
+16 -16
View File
@@ -42,9 +42,9 @@ describe('ReactDOMServerIntegration', () => {
describe('React.Fragment', () => {
itRenders('a fragment with one child', async render => {
let e = await render(
<React.Fragment>
<>
<div>text1</div>
</React.Fragment>,
</>,
);
let parent = e.parentNode;
expect(parent.childNodes[0].tagName).toBe('DIV');
@@ -56,19 +56,19 @@ describe('ReactDOMServerIntegration', () => {
};
let Footer = props => {
return (
<React.Fragment>
<>
<h2>footer</h2>
<h3>about</h3>
</React.Fragment>
</>
);
};
let e = await render(
<React.Fragment>
<>
<div>text1</div>
<span>text2</span>
<Header />
<Footer />
</React.Fragment>,
</>,
);
let parent = e.parentNode;
expect(parent.childNodes[0].tagName).toBe('DIV');
@@ -80,21 +80,21 @@ describe('ReactDOMServerIntegration', () => {
itRenders('a nested fragment', async render => {
let e = await render(
<React.Fragment>
<React.Fragment>
<>
<>
<div>text1</div>
</React.Fragment>
</>
<span>text2</span>
<React.Fragment>
<React.Fragment>
<React.Fragment>
<>
<>
<>
{null}
<p />
</React.Fragment>
</>
{false}
</React.Fragment>
</React.Fragment>
</React.Fragment>,
</>
</>
</>,
);
let parent = e.parentNode;
expect(parent.childNodes[0].tagName).toBe('DIV');
packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js
Vendored
+2 -2
View File
@@ -270,12 +270,12 @@ describe('ReactDOMServerIntegration', () => {
</Theme.Provider>
<Language.Consumer>
{language => (
<React.Fragment>
<>
<Theme.Consumer>
{theme => <div id="theme3">{theme}</div>}
</Theme.Consumer>
<div id="language2">{language}</div>
</React.Fragment>
</>
)}
</Language.Consumer>
</Theme.Provider>
packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+4 -4
View File
@@ -157,10 +157,10 @@ describe('ReactDOMServerPartialHydration', () => {
throw promise;
} else {
return (
<React.Fragment>
<>
<div>Middle</div>
Some text
</React.Fragment>
</>
);
}
}
@@ -1022,12 +1022,12 @@ describe('ReactDOMServerPartialHydration', () => {
<div>
<Suspense
fallback={
<React.Fragment>
<>
<Suspense fallback="Loading...">
<Child />
</Suspense>
<span>Inner Sibling</span>
</React.Fragment>
</>
}>
<Child />
</Suspense>
packages/react-reconciler/src/__tests__/ReactBatchedMode-test.internal.js
+6 -6
View File
@@ -53,11 +53,11 @@ describe('ReactBatchedMode', () => {
const root = ReactNoop.createSyncRoot();
root.render(
<React.Fragment>
<>
<Text text="A" />
<Text text="B" />
<Text text="C" />
</React.Fragment>,
</>,
);
// Nothing should have rendered yet
@@ -112,11 +112,11 @@ describe('ReactBatchedMode', () => {
expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
expect(Scheduler).toFlushExpired(['A', 'B', 'C']);
expect(root).toMatchRenderedOutput(
<React.Fragment>
<>
<span>A</span>
<span>B</span>
<span>C</span>
</React.Fragment>,
</>,
);
});
@@ -133,10 +133,10 @@ describe('ReactBatchedMode', () => {
const foo1 = React.createRef(null);
const foo2 = React.createRef(null);
root.render(
<React.Fragment>
<>
<Foo label="A" ref={foo1} />
<Foo label="B" ref={foo2} />
</React.Fragment>,
</>,
);
// Mount
packages/react-reconciler/src/__tests__/ReactExpiration-test.internal.js
+2 -2
View File
@@ -207,12 +207,12 @@ describe('ReactExpiration', () => {
function App() {
return (
<React.Fragment>
<>
<Connected label="A" />
<Connected label="B" />
<Connected label="C" />
<Connected label="D" />
</React.Fragment>
</>
);
}
packages/react-reconciler/src/__tests__/ReactFragment-test.js
Vendored
+58 -60
View File
@@ -39,9 +39,9 @@ describe('ReactFragment', () => {
it('should render a single child via noop renderer', () => {
const element = (
<React.Fragment>
<>
<span>foo</span>
</React.Fragment>
</>
);
ReactNoop.render(element);
@@ -61,9 +61,9 @@ describe('ReactFragment', () => {
it('should render multiple children via noop renderer', () => {
const element = (
<React.Fragment>
<>
hello <span>world</span>
</React.Fragment>
</>
);
ReactNoop.render(element);
@@ -74,9 +74,7 @@ describe('ReactFragment', () => {
it('should render an iterable via noop renderer', () => {
const element = (
<React.Fragment>
{new Set([<span key="a">hi</span>, <span key="b">bye</span>])}
</React.Fragment>
<>{new Set([<span key="a">hi</span>, <span key="b">bye</span>])}</>
);
ReactNoop.render(element);
@@ -102,10 +100,10 @@ describe('ReactFragment', () => {
return condition ? (
<Stateful key="a" />
) : (
<React.Fragment>
<>
<Stateful key="a" />
<div key="b">World</div>
</React.Fragment>
</>
);
}
@@ -140,13 +138,13 @@ describe('ReactFragment', () => {
function Foo({condition}) {
return condition ? (
<React.Fragment>
<>
<Stateful />
</React.Fragment>
</>
) : (
<React.Fragment>
<>
<Stateful />
</React.Fragment>
</>
);
}
@@ -181,22 +179,22 @@ describe('ReactFragment', () => {
function Foo({condition}) {
return condition ? (
<React.Fragment>
<React.Fragment>
<React.Fragment>
<>
<>
<>
<Stateful key="a" />
</React.Fragment>
</React.Fragment>
</React.Fragment>
</>
</>
</>
) : (
<React.Fragment>
<React.Fragment>
<React.Fragment>
<>
<>
<>
<div />
<Stateful key="a" />
</React.Fragment>
</React.Fragment>
</React.Fragment>
</>
</>
</>
);
}
@@ -231,15 +229,15 @@ describe('ReactFragment', () => {
function Foo({condition}) {
return condition ? (
<React.Fragment>
<React.Fragment>
<>
<>
<Stateful key="a" />
</React.Fragment>
</React.Fragment>
</>
</>
) : (
<React.Fragment>
<>
<Stateful key="a" />
</React.Fragment>
</>
);
}
@@ -276,11 +274,11 @@ describe('ReactFragment', () => {
return condition ? (
<Stateful key="a" />
) : (
<React.Fragment>
<React.Fragment>
<>
<>
<Stateful key="a" />
</React.Fragment>
</React.Fragment>
</>
</>
);
}
@@ -317,12 +315,12 @@ describe('ReactFragment', () => {
return condition ? (
<Stateful key="a" />
) : (
<React.Fragment>
<React.Fragment>
<>
<>
<Stateful key="a" />
</React.Fragment>
</>
<div />
</React.Fragment>
</>
);
}
@@ -357,11 +355,11 @@ describe('ReactFragment', () => {
function Foo({condition}) {
return condition ? (
<React.Fragment>
<>
<Stateful key="a" />
</React.Fragment>
</>
) : (
<React.Fragment>{[<Stateful key="a" />]}</React.Fragment>
<>{[<Stateful key="a" />]}</>
);
}
@@ -398,9 +396,9 @@ describe('ReactFragment', () => {
return condition ? (
[<Stateful key="a" />]
) : (
<React.Fragment>
<>
<Stateful key="a" />
</React.Fragment>
</>
);
}
@@ -435,13 +433,13 @@ describe('ReactFragment', () => {
function Foo({condition}) {
return condition ? (
<React.Fragment>{[<Stateful key="a" />]}</React.Fragment>
<>{[<Stateful key="a" />]}</>
) : (
<React.Fragment>
<React.Fragment>
<>
<>
<Stateful key="a" />
</React.Fragment>
</React.Fragment>
</>
</>
);
}
@@ -476,7 +474,7 @@ describe('ReactFragment', () => {
function Foo({condition}) {
return condition ? (
<React.Fragment>{[<Stateful key="a" />]}</React.Fragment>
<>{[<Stateful key="a" />]}</>
) : (
[[<Stateful key="a" />]]
);
@@ -513,11 +511,11 @@ describe('ReactFragment', () => {
function Foo({condition}) {
return condition ? (
<React.Fragment>
<React.Fragment>
<>
<>
<Stateful key="a" />
</React.Fragment>
</React.Fragment>
</>
</>
) : (
[[<Stateful key="a" />]]
);
@@ -600,9 +598,9 @@ describe('ReactFragment', () => {
<Stateful />
</React.Fragment>
) : (
<React.Fragment>
<>
<Stateful />
</React.Fragment>
</>
);
}
@@ -741,15 +739,15 @@ describe('ReactFragment', () => {
return condition
? [
<span />,
<React.Fragment>
<>
<Stateful />
</React.Fragment>,
</>,
]
: [
<span />,
<React.Fragment>
<>
<Stateful />
</React.Fragment>,
</>,
];
}
packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js
+4 -4
View File
@@ -1077,10 +1077,10 @@ describe('ReactHooks', () => {
expect(() =>
ReactTestRenderer.create(
<React.Fragment>
<>
<Fn />
<Cls />
</React.Fragment>,
</>,
),
).toWarnDev(['Context can only be read while React is rendering']);
});
@@ -1753,10 +1753,10 @@ describe('ReactHooks', () => {
expect(() =>
ReactTestRenderer.create(
<React.Fragment>
<>
<A />
<B />
</React.Fragment>,
</>,
),
).toThrow('Hello');
});
packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.internal.js
+2 -2
View File
@@ -1596,10 +1596,10 @@ describe('ReactHooksWithNoopRenderer', () => {
incrementBy,
]);
return (
<React.Fragment>
<>
<IncrementButton increment={increment} ref={button} />
<Text text={'Count: ' + count} />
</React.Fragment>
</>
);
}
packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
+2 -2
View File
@@ -320,10 +320,10 @@ describe('ReactIncrementalErrorHandling', () => {
function Parent() {
Scheduler.unstable_yieldValue('Parent');
return (
<React.Fragment>
<>
<BadRender />
<Sibling />
</React.Fragment>
</>
);
}
packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.internal.js
+2 -2
View File
@@ -420,10 +420,10 @@ describe('ReactIncrementalUpdates', () => {
render() {
foo = this;
return (
<React.Fragment>
<>
<span prop={this.state.value} />
<Bar />
</React.Fragment>
</>
);
}
}
packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
+2 -2
View File
@@ -301,10 +301,10 @@ describe('ReactLazy', () => {
function LazyImpl(props) {
Scheduler.unstable_yieldValue('Lazy');
return (
<React.Fragment>
<>
<Text text={props.siblingText} />
{props.children}
</React.Fragment>
</>
);
}
LazyImpl.defaultProps = {siblingText: 'Sibling'};
packages/react-reconciler/src/__tests__/ReactNewContext-test.internal.js
+24 -25
View File
@@ -361,7 +361,7 @@ describe('ReactNewContext', () => {
};
ReactNoop.render(
<React.Fragment>
<>
<BarContext.Provider value={{value: 'bar-updated'}}>
<BarConsumer>
{({value}) => <Verify actual={value} expected="bar-updated" />}
@@ -382,7 +382,7 @@ describe('ReactNewContext', () => {
<BarConsumer>
{({value}) => <Verify actual={value} expected="bar-initial" />}
</BarConsumer>
</React.Fragment>,
</>,
);
expect(Scheduler).toFlushWithoutYielding();
});
@@ -559,7 +559,7 @@ describe('ReactNewContext', () => {
function App(props) {
return (
<React.Fragment>
<>
<Context.Provider value="Does not unwind">
<ErrorBoundary>
<Context.Provider value="Unwinds after BadRender throws">
@@ -568,7 +568,7 @@ describe('ReactNewContext', () => {
</ErrorBoundary>
<Consumer />
</Context.Provider>
</React.Fragment>
</>
);
}
@@ -706,10 +706,10 @@ describe('ReactNewContext', () => {
{value => {
Scheduler.unstable_yieldValue('Foo');
return (
<React.Fragment>
<>
<span prop={'Foo: ' + value.foo} />
{props.children && props.children()}
</React.Fragment>
</>
);
}}
</Consumer>
@@ -722,10 +722,10 @@ describe('ReactNewContext', () => {
{value => {
Scheduler.unstable_yieldValue('Bar');
return (
<React.Fragment>
<>
<span prop={'Bar: ' + value.bar} />
{props.children && props.children()}
</React.Fragment>
</>
);
}}
</Consumer>
@@ -866,10 +866,10 @@ describe('ReactNewContext', () => {
render() {
Scheduler.unstable_yieldValue('PureIndirection');
return (
<React.Fragment>
<>
<ChildWithInlineRenderCallback />
<ChildWithCachedRenderCallback />
</React.Fragment>
</>
);
}
}
@@ -1001,12 +1001,12 @@ describe('ReactNewContext', () => {
class StaticContent extends React.PureComponent {
render() {
return (
<React.Fragment>
<React.Fragment>
<>
<>
<span prop="static 1" />
<span prop="static 2" />
</React.Fragment>
</React.Fragment>
</>
</>
);
}
}
@@ -1622,7 +1622,6 @@ describe('ReactNewContext', () => {
});
describe('fuzz test', () => {
const Fragment = React.Fragment;
const contextKeys = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
const FLUSH_ALL = 'FLUSH_ALL';
@@ -1714,14 +1713,14 @@ describe('ReactNewContext', () => {
return (
<Context.Consumer key={i}>
{value => (
<Fragment>
<>
<span prop={`${randomKey}:${value}`} />
<ConsumerTree
rand={this.props.rand}
depth={this.props.depth + 1}
maxDepth={this.props.maxDepth}
/>
</Fragment>
</>
)}
</Context.Consumer>
);
@@ -1837,13 +1836,13 @@ Context fuzz tester error! Copy and paste the following line into the test suite
function Component() {
return (
<React.Fragment>
<>
<BarContext.Provider value={{value: 'bar-updated'}}>
<BarConsumer>
{({value}) => <div actual={value} expected="bar-updated" />}
</BarConsumer>
</BarContext.Provider>
</React.Fragment>
</>
);
}
@@ -1864,13 +1863,13 @@ Context fuzz tester error! Copy and paste the following line into the test suite
function Component() {
return (
<React.Fragment>
<>
<BarContext.Provider value={{value: 'bar-updated'}}>
<BarContext.Consumer>
{({value}) => <div actual={value} expected="bar-updated" />}
</BarContext.Consumer>
</BarContext.Provider>
</React.Fragment>
</>
);
}
@@ -1884,13 +1883,13 @@ Context fuzz tester error! Copy and paste the following line into the test suite
function Component() {
return (
<React.Fragment>
<>
<BarContext.Provider value={{value: 'bar-updated'}}>
<BarConsumer.Consumer.Consumer>
{({value}) => <div actual={value} expected="bar-updated" />}
</BarConsumer.Consumer.Consumer>
</BarContext.Provider>
</React.Fragment>
</>
);
}
@@ -1908,13 +1907,13 @@ Context fuzz tester error! Copy and paste the following line into the test suite
function Component() {
return (
<React.Fragment>
<>
<BarContext.Consumer.Provider value={{value: 'bar-updated'}}>
<BarContext.Consumer>
{({value}) => <div actual={value} expected="bar-updated" />}
</BarContext.Consumer>
</BarContext.Consumer.Provider>
</React.Fragment>
</>
);
}
packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.internal.js
+2 -2
View File
@@ -97,11 +97,11 @@ describe('ReactSchedulerIntegration', () => {
runWithPriority(UserBlockingPriority, () => {
ReactNoop.render(
<React.Fragment>
<>
<ReadPriority />
<ReadPriority />
<ReadPriority />
</React.Fragment>,
</>,
);
});
packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
+6 -6
View File
@@ -152,14 +152,14 @@ describe('ReactSuspense', () => {
it('suspends siblings and later recovers each independently', () => {
// Render two sibling Suspense components
const root = ReactTestRenderer.create(
<React.Fragment>
<>
<Suspense fallback={<Text text="Loading A..." />}>
<AsyncText text="A" ms={5000} />
</Suspense>
<Suspense fallback={<Text text="Loading B..." />}>
<AsyncText text="B" ms={6000} />
</Suspense>
</React.Fragment>,
</>,
{
unstable_isConcurrent: true,
},
@@ -219,10 +219,10 @@ describe('ReactSuspense', () => {
}
const root = ReactTestRenderer.create(
<React.Fragment>
<>
<Suspense fallback={<Text text="Loading..." />} />
<Text text="Initial" />
</React.Fragment>,
</>,
{
unstable_isConcurrent: true,
},
@@ -232,13 +232,13 @@ describe('ReactSuspense', () => {
// The update will suspend.
root.update(
<React.Fragment>
<>
<Suspense fallback={<Text text="Loading..." />}>
<Async />
</Suspense>
<Text text="After Suspense" />
<Text text="Sibling" />
</React.Fragment>,
</>,
);
// Yield past the Suspense boundary but don't complete the last sibling.
packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js
+6 -6
View File
@@ -354,7 +354,7 @@ Random seed is ${SEED}
it('1', () => {
const {Text, testResolvedOutput} = createFuzzer();
testResolvedOutput(
<React.Fragment>
<>
<Text
initialDelay={20}
text="A"
@@ -368,14 +368,14 @@ Random seed is ${SEED}
/>
<Text text="C" />
</Suspense>
</React.Fragment>,
</>,
);
});
it('2', () => {
const {Text, Container, testResolvedOutput} = createFuzzer();
testResolvedOutput(
<React.Fragment>
<>
<Suspense fallback="Loading...">
<Text initialDelay={7200} text="A" />
</Suspense>
@@ -386,14 +386,14 @@ Random seed is ${SEED}
<Text initialDelay={9000} text="D" />
</Container>
</Suspense>
</React.Fragment>,
</>,
);
});
it('3', () => {
const {Text, Container, testResolvedOutput} = createFuzzer();
testResolvedOutput(
<React.Fragment>
<>
<Suspense fallback="Loading...">
<Text
initialDelay={3183}
@@ -420,7 +420,7 @@ Random seed is ${SEED}
/>
<Text initialDelay={6732} text="D" />
</Container>
</React.Fragment>,
</>,
);
});
});
packages/react-reconciler/src/__tests__/ReactSuspenseList-test.internal.js
+125 -127
View File
@@ -1,6 +1,5 @@
let React;
let ReactFeatureFlags;
let Fragment;
let ReactNoop;
let Scheduler;
let Suspense;
@@ -13,7 +12,6 @@ describe('ReactSuspenseList', () => {
ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
ReactFeatureFlags.replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
React = require('react');
Fragment = React.Fragment;
ReactNoop = require('react-noop-renderer');
Scheduler = require('scheduler');
Suspense = React.Suspense;
@@ -137,7 +135,7 @@ describe('ReactSuspenseList', () => {
function Foo() {
return (
<SuspenseList revealOrder="backwards">
<Fragment>{[]}</Fragment>
<>{[]}</>
</SuspenseList>
);
}
@@ -214,11 +212,11 @@ describe('ReactSuspenseList', () => {
]);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>Loading B</span>
<span>Loading C</span>
</Fragment>,
</>,
);
await C.resolve();
@@ -226,11 +224,11 @@ describe('ReactSuspenseList', () => {
expect(Scheduler).toFlushAndYield(['C']);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>Loading B</span>
<span>C</span>
</Fragment>,
</>,
);
await B.resolve();
@@ -238,11 +236,11 @@ describe('ReactSuspenseList', () => {
expect(Scheduler).toFlushAndYield(['B']);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>B</span>
<span>C</span>
</Fragment>,
</>,
);
});
@@ -280,11 +278,11 @@ describe('ReactSuspenseList', () => {
]);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>Loading B</span>
<span>Loading C</span>
</Fragment>,
</>,
);
await C.resolve();
@@ -292,11 +290,11 @@ describe('ReactSuspenseList', () => {
expect(Scheduler).toFlushAndYield(['C']);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>Loading B</span>
<span>C</span>
</Fragment>,
</>,
);
await B.resolve();
@@ -304,11 +302,11 @@ describe('ReactSuspenseList', () => {
expect(Scheduler).toFlushAndYield(['B']);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>B</span>
<span>C</span>
</Fragment>,
</>,
);
});
@@ -349,11 +347,11 @@ describe('ReactSuspenseList', () => {
]);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>Loading A</span>
<span>Loading B</span>
<span>Loading C</span>
</Fragment>,
</>,
);
await B.resolve();
@@ -361,11 +359,11 @@ describe('ReactSuspenseList', () => {
expect(Scheduler).toFlushAndYield(['A', 'B', 'Suspend! [C]']);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>Loading A</span>
<span>Loading B</span>
<span>Loading C</span>
</Fragment>,
</>,
);
await C.resolve();
@@ -373,11 +371,11 @@ describe('ReactSuspenseList', () => {
expect(Scheduler).toFlushAndYield(['A', 'B', 'C']);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>B</span>
<span>C</span>
</Fragment>,
</>,
);
});
@@ -422,7 +420,7 @@ describe('ReactSuspenseList', () => {
]);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<div>
<span>Loading A</span>
<span>Loading B</span>
@@ -430,7 +428,7 @@ describe('ReactSuspenseList', () => {
<div>
<span>Loading C</span>
</div>
</Fragment>,
</>,
);
await B.resolve();
@@ -438,7 +436,7 @@ describe('ReactSuspenseList', () => {
expect(Scheduler).toFlushAndYield(['A', 'B', 'Suspend! [C]']);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<div>
<span>Loading A</span>
<span>Loading B</span>
@@ -446,7 +444,7 @@ describe('ReactSuspenseList', () => {
<div>
<span>Loading C</span>
</div>
</Fragment>,
</>,
);
await C.resolve();
@@ -454,7 +452,7 @@ describe('ReactSuspenseList', () => {
expect(Scheduler).toFlushAndYield(['A', 'B', 'C']);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<div>
<span>A</span>
<span>B</span>
@@ -462,7 +460,7 @@ describe('ReactSuspenseList', () => {
<div>
<span>C</span>
</div>
</Fragment>,
</>,
);
});
@@ -507,11 +505,11 @@ describe('ReactSuspenseList', () => {
]);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>Loading A</span>
<span>Loading B</span>
<span>Loading C</span>
</Fragment>,
</>,
);
await C.resolve();
@@ -519,11 +517,11 @@ describe('ReactSuspenseList', () => {
expect(Scheduler).toFlushAndYield(['A', 'B', 'C']);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>B</span>
<span>C</span>
</Fragment>,
</>,
);
});
@@ -566,11 +564,11 @@ describe('ReactSuspenseList', () => {
]);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>Loading A</span>
<span>Loading B</span>
<span>Loading C</span>
</Fragment>,
</>,
);
await C.resolve();
@@ -578,11 +576,11 @@ describe('ReactSuspenseList', () => {
expect(Scheduler).toFlushAndYield(['A', 'B', 'C']);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>B</span>
<span>C</span>
</Fragment>,
</>,
);
});
@@ -601,7 +599,7 @@ describe('ReactSuspenseList', () => {
<A />
</Suspense>
{showMore ? (
<Fragment>
<>
<Suspense
unstable_avoidThisFallback={true}
fallback={<Text text="Loading B" />}>
@@ -612,7 +610,7 @@ describe('ReactSuspenseList', () => {
fallback={<Text text="Loading C" />}>
<C />
</Suspense>
</Fragment>
</>
) : null}
</SuspenseList>
</Suspense>
@@ -651,11 +649,11 @@ describe('ReactSuspenseList', () => {
// A is already showing content so it doesn't turn into a fallback.
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>Loading B</span>
<span>Loading C</span>
</Fragment>,
</>,
);
await B.resolve();
@@ -664,11 +662,11 @@ describe('ReactSuspenseList', () => {
// Even though we could now show B, we're still waiting on C.
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>Loading B</span>
<span>Loading C</span>
</Fragment>,
</>,
);
await C.resolve();
@@ -676,11 +674,11 @@ describe('ReactSuspenseList', () => {
expect(Scheduler).toFlushAndYield(['B', 'C']);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>B</span>
<span>C</span>
</Fragment>,
</>,
);
});
@@ -717,11 +715,11 @@ describe('ReactSuspenseList', () => {
]);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>Loading A</span>
<span>Loading B</span>
<span>Loading C</span>
</Fragment>,
</>,
);
await A.resolve();
@@ -729,11 +727,11 @@ describe('ReactSuspenseList', () => {
expect(Scheduler).toFlushAndYield(['A', 'Suspend! [B]']);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>Loading B</span>
<span>Loading C</span>
</Fragment>,
</>,
);
await B.resolve();
@@ -741,11 +739,11 @@ describe('ReactSuspenseList', () => {
expect(Scheduler).toFlushAndYield(['B', 'C']);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>B</span>
<span>C</span>
</Fragment>,
</>,
);
});
@@ -782,11 +780,11 @@ describe('ReactSuspenseList', () => {
]);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>Loading A</span>
<span>Loading B</span>
<span>Loading C</span>
</Fragment>,
</>,
);
await C.resolve();
@@ -794,11 +792,11 @@ describe('ReactSuspenseList', () => {
expect(Scheduler).toFlushAndYield(['C', 'Suspend! [B]']);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>Loading A</span>
<span>Loading B</span>
<span>C</span>
</Fragment>,
</>,
);
await B.resolve();
@@ -806,11 +804,11 @@ describe('ReactSuspenseList', () => {
expect(Scheduler).toFlushAndYield(['B', 'A']);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>B</span>
<span>C</span>
</Fragment>,
</>,
);
});
@@ -842,10 +840,10 @@ describe('ReactSuspenseList', () => {
expect(Scheduler).toFlushAndYield(['B', 'D']);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>B</span>
<span>D</span>
</Fragment>,
</>,
);
// Insert items in the beginning, middle and end.
@@ -871,14 +869,14 @@ describe('ReactSuspenseList', () => {
]);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>Loading A</span>
<span>B</span>
<span>Loading C</span>
<span>D</span>
<span>Loading E</span>
<span>Loading F</span>
</Fragment>,
</>,
);
await A.resolve();
@@ -888,14 +886,14 @@ describe('ReactSuspenseList', () => {
// Even though we could show A, it is still in a fallback state because
// C is not yet resolved. We need to resolve everything in the head first.
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>Loading A</span>
<span>B</span>
<span>Loading C</span>
<span>D</span>
<span>Loading E</span>
<span>Loading F</span>
</Fragment>,
</>,
);
await C.resolve();
@@ -904,14 +902,14 @@ describe('ReactSuspenseList', () => {
// We can now resolve the full head.
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<span>Loading E</span>
<span>Loading F</span>
</Fragment>,
</>,
);
await E.resolve();
@@ -920,14 +918,14 @@ describe('ReactSuspenseList', () => {
// In the tail we can resolve one-by-one.
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<span>E</span>
<span>Loading F</span>
</Fragment>,
</>,
);
await F.resolve();
@@ -938,11 +936,11 @@ describe('ReactSuspenseList', () => {
expect(Scheduler).toFlushAndYield(['D', 'E', 'F']);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>D</span>
<span>E</span>
<span>F</span>
</Fragment>,
</>,
);
});
@@ -992,14 +990,14 @@ describe('ReactSuspenseList', () => {
);
expect(Scheduler).toFlushAndYield(['F', 'E', 'D', 'C', 'B', 'A']);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<span>E</span>
<span>F</span>
</Fragment>,
</>,
);
// Update items in the beginning, middle and end to start suspending.
@@ -1037,7 +1035,7 @@ describe('ReactSuspenseList', () => {
jest.advanceTimersByTime(500);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span hidden={true}>A</span>
<span>Loading A</span>
<span hidden={true}>B</span>
@@ -1048,7 +1046,7 @@ describe('ReactSuspenseList', () => {
<span>E</span>
<span hidden={true}>F</span>
<span>Loading F</span>
</Fragment>,
</>,
);
await F.resolve();
@@ -1058,7 +1056,7 @@ describe('ReactSuspenseList', () => {
// Even though we could show F, it is still in a fallback state because
// E is not yet resolved. We need to resolve everything in the head first.
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span hidden={true}>A</span>
<span>Loading A</span>
<span hidden={true}>B</span>
@@ -1069,7 +1067,7 @@ describe('ReactSuspenseList', () => {
<span>E</span>
<span hidden={true}>F</span>
<span>Loading F</span>
</Fragment>,
</>,
);
await D.resolve();
@@ -1078,7 +1076,7 @@ describe('ReactSuspenseList', () => {
// We can now resolve the full head.
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span hidden={true}>A</span>
<span>Loading A</span>
<span hidden={true}>B</span>
@@ -1087,7 +1085,7 @@ describe('ReactSuspenseList', () => {
<span>D</span>
<span>E</span>
<span>F</span>
</Fragment>,
</>,
);
await B.resolve();
@@ -1096,7 +1094,7 @@ describe('ReactSuspenseList', () => {
// In the tail we can resolve one-by-one.
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span hidden={true}>A</span>
<span>Loading A</span>
<span>B</span>
@@ -1104,7 +1102,7 @@ describe('ReactSuspenseList', () => {
<span>D</span>
<span>E</span>
<span>F</span>
</Fragment>,
</>,
);
await A.resolve();
@@ -1112,14 +1110,14 @@ describe('ReactSuspenseList', () => {
expect(Scheduler).toFlushAndYield(['A']);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<span>E</span>
<span>F</span>
</Fragment>,
</>,
);
});
@@ -1166,22 +1164,22 @@ describe('ReactSuspenseList', () => {
]);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>B</span>
<span>Loading C</span>
</Fragment>,
</>,
);
// Then we do a second pass to commit the last item.
expect(Scheduler).toFlushAndYield([]);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>B</span>
<span>C</span>
</Fragment>,
</>,
);
});
@@ -1220,10 +1218,10 @@ describe('ReactSuspenseList', () => {
jest.advanceTimersByTime(500);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>Loading B</span>
</Fragment>,
</>,
);
await B.resolve();
@@ -1234,11 +1232,11 @@ describe('ReactSuspenseList', () => {
jest.advanceTimersByTime(500);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>B</span>
<span>Loading C</span>
</Fragment>,
</>,
);
await C.resolve();
@@ -1246,11 +1244,11 @@ describe('ReactSuspenseList', () => {
expect(Scheduler).toFlushAndYield(['C']);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>B</span>
<span>C</span>
</Fragment>,
</>,
);
});
@@ -1340,23 +1338,23 @@ describe('ReactSuspenseList', () => {
]);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>B</span>
<span>Loading C</span>
</Fragment>,
</>,
);
// Then we do a second pass to commit the last two items.
expect(Scheduler).toFlushAndYield(['D']);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
</Fragment>,
</>,
);
});
@@ -1389,10 +1387,10 @@ describe('ReactSuspenseList', () => {
// First render commits A and D.
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>D</span>
</Fragment>,
</>,
);
// For the second render, we're going to insert items in the middle and end.
@@ -1418,13 +1416,13 @@ describe('ReactSuspenseList', () => {
// B and C don't get collapsed, but F gets collapsed with E.
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>Loading B</span>
<span>Loading C</span>
<span>D</span>
<span>Loading E</span>
</Fragment>,
</>,
);
await B.resolve();
@@ -1437,13 +1435,13 @@ describe('ReactSuspenseList', () => {
// Even though B is unsuspended, it's still in loading state because
// it is blocked by C.
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>Loading B</span>
<span>Loading C</span>
<span>D</span>
<span>Loading E</span>
</Fragment>,
</>,
);
await C.resolve();
@@ -1460,14 +1458,14 @@ describe('ReactSuspenseList', () => {
jest.advanceTimersByTime(500);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<span>E</span>
<span>Loading F</span>
</Fragment>,
</>,
);
await F.resolve();
@@ -1477,14 +1475,14 @@ describe('ReactSuspenseList', () => {
jest.advanceTimersByTime(500);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<span>E</span>
<span>F</span>
</Fragment>,
</>,
);
});
@@ -1517,10 +1515,10 @@ describe('ReactSuspenseList', () => {
// First render commits C and F.
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>C</span>
<span>F</span>
</Fragment>,
</>,
);
// For the second render, we're going to insert items in the middle and end.
@@ -1546,13 +1544,13 @@ describe('ReactSuspenseList', () => {
// D and E don't get collapsed, but A gets collapsed with B.
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>Loading B</span>
<span>C</span>
<span>Loading D</span>
<span>Loading E</span>
<span>F</span>
</Fragment>,
</>,
);
await D.resolve();
@@ -1565,13 +1563,13 @@ describe('ReactSuspenseList', () => {
// Even though D is unsuspended, it's still in loading state because
// it is blocked by E.
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>Loading B</span>
<span>C</span>
<span>Loading D</span>
<span>Loading E</span>
<span>F</span>
</Fragment>,
</>,
);
await C.resolve();
@@ -1593,14 +1591,14 @@ describe('ReactSuspenseList', () => {
jest.advanceTimersByTime(500);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>Loading A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<span>E</span>
<span>F</span>
</Fragment>,
</>,
);
await A.resolve();
@@ -1610,14 +1608,14 @@ describe('ReactSuspenseList', () => {
jest.advanceTimersByTime(500);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<span>E</span>
<span>F</span>
</Fragment>,
</>,
);
});
@@ -1653,10 +1651,10 @@ describe('ReactSuspenseList', () => {
// First render commits A and D.
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>D</span>
</Fragment>,
</>,
);
// For the second render, we're going to insert items in the middle and end.
@@ -1690,14 +1688,14 @@ describe('ReactSuspenseList', () => {
// Even though everything in the bottom of the list is suspended, we don't
// collapse them because D was an update. Not an insertion.
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>Loading B</span>
<span>Loading C</span>
<span hidden={true}>D</span>
<span>Loading D</span>
<span>Loading E</span>
</Fragment>,
</>,
);
await B.resolve();
@@ -1711,14 +1709,14 @@ describe('ReactSuspenseList', () => {
// If D was still visible it wouldn't be part of the tail
// and would be blocked on C like in the other test.
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>B</span>
<span>Loading C</span>
<span hidden={true}>D</span>
<span>Loading D</span>
<span>Loading E</span>
</Fragment>,
</>,
);
await C.resolve();
@@ -1736,14 +1734,14 @@ describe('ReactSuspenseList', () => {
jest.advanceTimersByTime(500);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<span>E</span>
<span>Loading F</span>
</Fragment>,
</>,
);
await F.resolve();
@@ -1753,14 +1751,14 @@ describe('ReactSuspenseList', () => {
jest.advanceTimersByTime(500);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<span>E</span>
<span>F</span>
</Fragment>,
</>,
);
});
@@ -1808,10 +1806,10 @@ describe('ReactSuspenseList', () => {
jest.advanceTimersByTime(500);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>B</span>
</Fragment>,
</>,
);
await C.resolve();
@@ -1819,11 +1817,11 @@ describe('ReactSuspenseList', () => {
expect(Scheduler).toFlushAndYield(['C']);
expect(ReactNoop).toMatchRenderedOutput(
<Fragment>
<>
<span>A</span>
<span>B</span>
<span>C</span>
</Fragment>,
</>,
);
});
packages/react-reconciler/src/__tests__/ReactSuspensePlaceholder-test.internal.js
+12 -12
View File
@@ -134,11 +134,11 @@ describe('ReactSuspensePlaceholder', () => {
expect(Scheduler).toFlushAndYield(['A', 'B', 'C']);
expect(ReactNoop).toMatchRenderedOutput(
<React.Fragment>
<>
<span hidden={true}>A</span>
<span>B</span>
<span>C</span>
</React.Fragment>,
</>,
);
// Update
@@ -149,12 +149,12 @@ describe('ReactSuspensePlaceholder', () => {
jest.advanceTimersByTime(750);
expect(Scheduler).toFlushAndYield([]);
expect(ReactNoop).toMatchRenderedOutput(
<React.Fragment>
<>
<span hidden={true}>A</span>
<span hidden={true}>B</span>
<span hidden={true}>C</span>
Loading...
</React.Fragment>,
</>,
);
// Resolve the promise
@@ -165,11 +165,11 @@ describe('ReactSuspensePlaceholder', () => {
// Render the final update. A should still be hidden, because it was
// given a `hidden` prop.
expect(ReactNoop).toMatchRenderedOutput(
<React.Fragment>
<>
<span hidden={true}>A</span>
<span>B2</span>
<span>C</span>
</React.Fragment>,
</>,
);
});
@@ -436,10 +436,10 @@ describe('ReactSuspensePlaceholder', () => {
it('properly accounts for base durations when a suspended times out in a concurrent tree', () => {
ReactNoop.render(
<React.Fragment>
<>
<App shouldSuspend={false} textRenderDuration={5} />
<Suspense fallback={null} />
</React.Fragment>,
</>,
);
expect(Scheduler).toFlushAndYield(['App', 'Text']);
@@ -452,10 +452,10 @@ describe('ReactSuspensePlaceholder', () => {
expect(onRender.mock.calls[0][3]).toBe(5);
ReactNoop.render(
<React.Fragment>
<>
<App shouldSuspend={true} textRenderDuration={5} />
<Suspense fallback={null} />
</React.Fragment>,
</>,
);
expect(Scheduler).toFlushAndYield([
'App',
@@ -484,12 +484,12 @@ describe('ReactSuspensePlaceholder', () => {
// suspending in the case that we already timed out. To simulate the old
// behavior, we add a different suspending boundary as a sibling.
ReactNoop.render(
<React.Fragment>
<>
<App shouldSuspend={true} text="New" textRenderDuration={6} />
<Suspense fallback={null}>
<AsyncText ms={100} text="Sibling" fakeRenderDuration={1} />
</Suspense>
</React.Fragment>,
</>,
);
expect(Scheduler).toFlushAndYield([
'App',
packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.internal.js
+22 -22
View File
@@ -115,7 +115,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
function Foo() {
Scheduler.unstable_yieldValue('Foo');
return (
<React.Fragment>
<>
<Suspense fallback={<Text text="Loading..." />}>
<Bar>
<AsyncText text="A" ms={100} />
@@ -124,7 +124,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
</Suspense>
<Text text="C" />
<Text text="D" />
</React.Fragment>
</>
);
}
@@ -729,18 +729,18 @@ describe('ReactSuspenseWithNoopRenderer', () => {
it('resolves successfully even if fallback render is pending', async () => {
ReactNoop.render(
<React.Fragment>
<>
<Suspense fallback={<Text text="Loading..." />} />
</React.Fragment>,
</>,
);
expect(Scheduler).toFlushAndYield([]);
expect(ReactNoop.getChildren()).toEqual([]);
ReactNoop.render(
<React.Fragment>
<>
<Suspense fallback={<Text text="Loading..." />}>
<AsyncText text="Async" ms={3000} />
</Suspense>
</React.Fragment>,
</>,
);
expect(ReactNoop.flushNextYield()).toEqual(['Suspend! [Async]']);
await advanceTimers(1500);
@@ -965,11 +965,11 @@ describe('ReactSuspenseWithNoopRenderer', () => {
expect(Scheduler).toFlushAndYield(['A', 'B', 'C']);
expect(ReactNoop).toMatchRenderedOutput(
<React.Fragment>
<>
<span prop="A" />
<span prop="B" />
<span prop="C" />
</React.Fragment>,
</>,
);
});
@@ -1037,10 +1037,10 @@ describe('ReactSuspenseWithNoopRenderer', () => {
]);
expect(Scheduler).toFlushExpired(['Step: 1']);
expect(ReactNoop).toMatchRenderedOutput(
<React.Fragment>
<>
<span prop="Step: 1" />
<span prop="Sibling" />
</React.Fragment>,
</>,
);
// Update.
@@ -1056,23 +1056,23 @@ describe('ReactSuspenseWithNoopRenderer', () => {
'Update did commit',
]);
expect(ReactNoop).toMatchRenderedOutput(
<React.Fragment>
<>
<span hidden={true} prop="Step: 1" />
<span hidden={true} prop="Sibling" />
<span prop="Loading (1)" />
<span prop="Loading (2)" />
<span prop="Loading (3)" />
</React.Fragment>,
</>,
);
await advanceTimers(100);
expect(Scheduler).toHaveYielded(['Promise resolved [Step: 2]']);
expect(Scheduler).toFlushExpired(['Step: 2']);
expect(ReactNoop).toMatchRenderedOutput(
<React.Fragment>
<>
<span prop="Step: 2" />
<span prop="Sibling" />
</React.Fragment>,
</>,
);
});
@@ -1128,12 +1128,12 @@ describe('ReactSuspenseWithNoopRenderer', () => {
'Commit root',
]);
expect(ReactNoop).toMatchRenderedOutput(
<React.Fragment>
<>
<span hidden={true} prop="A" />
<span hidden={true} prop="C" />
<span prop="Loading..." />
</React.Fragment>,
</>,
);
ReactNoop.expire(1000);
@@ -1142,11 +1142,11 @@ describe('ReactSuspenseWithNoopRenderer', () => {
expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
expect(Scheduler).toFlushExpired(['B']);
expect(ReactNoop).toMatchRenderedOutput(
<React.Fragment>
<>
<span prop="A" />
<span prop="B" />
<span prop="C" />
</React.Fragment>,
</>,
);
});
@@ -1273,10 +1273,10 @@ describe('ReactSuspenseWithNoopRenderer', () => {
'Suspend! [Hi]',
'Loading...',
// The child should have already been hidden
<React.Fragment>
<>
<span hidden={true} />
<span prop="Loading..." />
</React.Fragment>,
</>,
]);
await advanceTimers(1000);
@@ -1400,11 +1400,11 @@ describe('ReactSuspenseWithNoopRenderer', () => {
'Commit root',
]);
expect(ReactNoop).toMatchRenderedOutput(
<React.Fragment>
<>
<span hidden={true} prop="A" />
<span hidden={true} prop="C" />
<span prop="Loading..." />
</React.Fragment>,
</>,
);
});
packages/react-refresh/src/__tests__/ReactFresh-test.js
Vendored
+16 -16
View File
@@ -1818,9 +1818,9 @@ describe('ReactFresh', () => {
<span />
</HelloV1>,
<HelloV1>
<React.Fragment>
<>
<HelloV1 />
</React.Fragment>
</>
</HelloV1>,
</div>,
<HelloV1>
@@ -2111,9 +2111,9 @@ describe('ReactFresh', () => {
if (__DEV__) {
testRemountingWithWrapper(Hello => {
const child = (
<React.Fragment>
<>
<Hello />
</React.Fragment>
</>
);
return function Wrapper() {
return child;
@@ -2126,13 +2126,13 @@ describe('ReactFresh', () => {
if (__DEV__) {
testRemountingWithWrapper(Hello => {
const child = (
<React.Fragment>
<React.Fragment>
<>
<>
<React.Fragment />
</React.Fragment>
</>
<Hello />
<React.Fragment />
</React.Fragment>
</>
);
return function Wrapper() {
return child;
@@ -2471,13 +2471,13 @@ describe('ReactFresh', () => {
function App() {
return (
<React.Fragment>
<>
<p>A</p>
<Boundary>
<Hello />
</Boundary>
<p>B</p>
</React.Fragment>
</>
);
}
@@ -2549,13 +2549,13 @@ describe('ReactFresh', () => {
function App() {
return (
<React.Fragment>
<>
<p>A</p>
<Boundary>
<Hello />
</Boundary>
<p>B</p>
</React.Fragment>
</>
);
}
@@ -2630,13 +2630,13 @@ describe('ReactFresh', () => {
function App() {
return (
<React.Fragment>
<>
<p>A</p>
<Boundary>
<Hello />
</Boundary>
<p>B</p>
</React.Fragment>
</>
);
}
@@ -3183,14 +3183,14 @@ describe('ReactFresh', () => {
function Frag() {
return (
<React.Fragment>
<>
<div className="Frag">
<div />
</div>
<div className="Frag">
<div />
</div>
</React.Fragment>
</>
);
}
$RefreshReg$(Frag, 'Frag');
packages/react-test-renderer/src/__tests__/ReactShallowRenderer-test.js
Vendored
+4 -4
View File
@@ -433,22 +433,22 @@ describe('ReactShallowRenderer', () => {
class Fragment extends React.Component {
render() {
return (
<React.Fragment>
<>
<div />
<span />
<SomeComponent />
</React.Fragment>
</>
);
}
}
const shallowRenderer = createRenderer();
const result = shallowRenderer.render(<Fragment />);
expect(result).toEqual(
<React.Fragment>
<>
<div />
<span />
<SomeComponent />
</React.Fragment>,
</>,
);
});
packages/react-test-renderer/src/__tests__/ReactShallowRendererMemo-test.js
Vendored
+4 -4
View File
@@ -436,22 +436,22 @@ describe('ReactShallowRendererMemo', () => {
class Fragment extends React.Component {
render() {
return (
<React.Fragment>
<>
<div />
<span />
<SomeComponent />
</React.Fragment>
</>
);
}
}
const shallowRenderer = createRenderer();
const result = shallowRenderer.render(<Fragment />);
expect(result).toEqual(
<React.Fragment>
<>
<div />
<span />
<SomeComponent />
</React.Fragment>,
</>,
);
});
packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.internal.js
+9 -9
View File
@@ -544,9 +544,9 @@ describe('ReactTestRenderer', () => {
it('toTree() handles nested Fragments', () => {
const Foo = () => (
<React.Fragment>
<React.Fragment>foo</React.Fragment>
</React.Fragment>
<>
<>foo</>
</>
);
const renderer = ReactTestRenderer.create(<Foo />);
const tree = renderer.toTree();
@@ -707,16 +707,16 @@ describe('ReactTestRenderer', () => {
it('toTree() handles complicated tree of fragments', () => {
const renderer = ReactTestRenderer.create(
<React.Fragment>
<React.Fragment>
<>
<>
<div>One</div>
<div>Two</div>
<React.Fragment>
<>
<div>Three</div>
</React.Fragment>
</React.Fragment>
</>
</>
<div>Four</div>
</React.Fragment>,
</>,
);
const tree = renderer.toTree();
packages/react-test-renderer/src/__tests__/ReactTestRendererAsync-test.js
Vendored
+6 -6
View File
@@ -53,11 +53,11 @@ describe('ReactTestRendererAsync', () => {
}
function Parent(props) {
return (
<React.Fragment>
<>
<Child>{'A:' + props.step}</Child>
<Child>{'B:' + props.step}</Child>
<Child>{'C:' + props.step}</Child>
</React.Fragment>
</>
);
}
const renderer = ReactTestRenderer.create(<Parent step={1} />, {
@@ -79,11 +79,11 @@ describe('ReactTestRendererAsync', () => {
}
function Parent(props) {
return (
<React.Fragment>
<>
<Child>{'A:' + props.step}</Child>
<Child>{'B:' + props.step}</Child>
<Child>{'C:' + props.step}</Child>
</React.Fragment>
</>
);
}
const renderer = ReactTestRenderer.create(<Parent step={1} />, {
@@ -115,10 +115,10 @@ describe('ReactTestRendererAsync', () => {
}
render() {
return (
<React.Fragment>
<>
<Child>{'A:' + this.props.step}</Child>
<Child>{'B:' + this.props.step}</Child>
</React.Fragment>
</>
);
}
}
packages/react-test-renderer/src/__tests__/ReactTestRendererTraversal-test.js
Vendored
+6 -6
View File
@@ -42,17 +42,17 @@ describe('ReactTestRendererTraversal', () => {
<React.Profiler id="test" onRender={() => {}}>
<ExampleForwardRef qux="qux" />
</React.Profiler>
<React.Fragment>
<React.Fragment>
<>
<>
<Context.Provider value={null}>
<Context.Consumer>
{() => <View nested={true} />}
</Context.Consumer>
</Context.Provider>
</React.Fragment>
</>
<View nested={true} />
<View nested={true} />
</React.Fragment>
</>
</View>
</View>
);
@@ -212,10 +212,10 @@ describe('ReactTestRendererTraversal', () => {
).toBe(2);
expect(
ReactTestRenderer.create(
<React.Fragment>
<>
<div />
<div />
</React.Fragment>,
</>,
).root.findAllByType('div').length,
).toBe(2);
expect(
packages/react/src/__tests__/ReactDOMTracing-test.internal.js
+4 -4
View File
@@ -325,10 +325,10 @@ describe('ReactDOMTracing', () => {
});
return (
<React.Fragment>
<>
<WithHiddenWork />
<Updater />
</React.Fragment>
</>
);
};
@@ -429,10 +429,10 @@ describe('ReactDOMTracing', () => {
});
return (
<React.Fragment>
<>
<MaybeHiddenWork />
<Updater />
</React.Fragment>
</>
);
};
packages/react/src/__tests__/ReactJSXElementValidator-test.js
+4 -4
View File
@@ -391,21 +391,21 @@ describe('ReactJSXElementValidator', () => {
it('does not warn for fragments of multiple elements without keys', () => {
ReactTestUtils.renderIntoDocument(
<React.Fragment>
<>
<span>1</span>
<span>2</span>
</React.Fragment>,
</>,
);
});
it('warns for fragments of multiple elements with same key', () => {
expect(() =>
ReactTestUtils.renderIntoDocument(
<React.Fragment>
<>
<span key="a">1</span>
<span key="a">2</span>
<span key="b">3</span>
</React.Fragment>,
</>,
),
).toWarnDev('Encountered two children with the same key, `a`.', {
withoutStack: true,
packages/react/src/__tests__/ReactProfiler-test.internal.js
+10 -10
View File
@@ -381,7 +381,7 @@ describe('Profiler', () => {
Scheduler.unstable_advanceTime(5); // 0 -> 5
ReactTestRenderer.create(
<React.Fragment>
<>
<React.Profiler id="parent" onRender={callback}>
<AdvanceTime byAmount={10}>
<React.Profiler id="child" onRender={callback}>
@@ -389,7 +389,7 @@ describe('Profiler', () => {
</React.Profiler>
</AdvanceTime>
</React.Profiler>
</React.Fragment>,
</>,
);
expect(callback).toHaveBeenCalledTimes(2);
@@ -416,14 +416,14 @@ describe('Profiler', () => {
Scheduler.unstable_advanceTime(5); // 0 -> 5
ReactTestRenderer.create(
<React.Fragment>
<>
<React.Profiler id="first" onRender={callback}>
<AdvanceTime byAmount={20} />
</React.Profiler>
<React.Profiler id="second" onRender={callback}>
<AdvanceTime byAmount={5} />
</React.Profiler>
</React.Fragment>,
</>,
);
expect(callback).toHaveBeenCalledTimes(2);
@@ -449,13 +449,13 @@ describe('Profiler', () => {
Scheduler.unstable_advanceTime(5); // 0 -> 5
ReactTestRenderer.create(
<React.Fragment>
<>
<AdvanceTime byAmount={20} />
<React.Profiler id="test" onRender={callback}>
<AdvanceTime byAmount={5} />
</React.Profiler>
<AdvanceTime byAmount={20} />
</React.Fragment>,
</>,
);
expect(callback).toHaveBeenCalledTimes(1);
@@ -1225,10 +1225,10 @@ describe('Profiler', () => {
render() {
const {duration, id} = this.props;
return (
<React.Fragment>
<>
<Child duration={duration} id={id} />
<Child duration={duration} id={id} />
</React.Fragment>
</>
);
}
}
@@ -1529,11 +1529,11 @@ describe('Profiler', () => {
render() {
instance = this;
return (
<React.Fragment>
<>
<Yield value="first" />
{this.state.count}
<Yield value="last" />
</React.Fragment>
</>
);
}
}
packages/react/src/__tests__/forwardRef-test.js
+3 -2
View File
@@ -171,8 +171,9 @@ describe('forwardRef', () => {
});
it('should not warn if the render function provided does not use any parameter', () => {
const arityOfZero = () => <div ref={arguments[1]} />;
React.forwardRef(arityOfZero);
React.forwardRef(function arityOfZero() {
return <div ref={arguments[1]} />;
});
});
it('should warn if the render function provided does not use the forwarded ref parameter', () => {
scripts/rollup/validate/eslintrc.cjs.js
+5
View File
@@ -30,4 +30,9 @@ module.exports = {
'no-undef': 'error',
'no-shadow-restricted-names': 'error',
},
// These plugins aren't used, but eslint complains if an eslint-ignore comment
// references unused plugins. An alternate approach could be to strip
// eslint-ignore comments as part of the build.
plugins: ['jest', 'no-for-of-loops', 'react', 'react-internal'],
};
scripts/rollup/validate/eslintrc.fb.js
+5
View File
@@ -31,4 +31,9 @@ module.exports = {
'no-undef': 'error',
'no-shadow-restricted-names': 'error',
},
// These plugins aren't used, but eslint complains if an eslint-ignore comment
// references unused plugins. An alternate approach could be to strip
// eslint-ignore comments as part of the build.
plugins: ['jest', 'no-for-of-loops', 'react', 'react-internal'],
};
scripts/rollup/validate/eslintrc.rn.js
+5
View File
@@ -30,4 +30,9 @@ module.exports = {
'no-undef': 'error',
'no-shadow-restricted-names': 'error',
},
// These plugins aren't used, but eslint complains if an eslint-ignore comment
// references unused plugins. An alternate approach could be to strip
// eslint-ignore comments as part of the build.
plugins: ['jest', 'no-for-of-loops', 'react', 'react-internal'],
};
scripts/rollup/validate/eslintrc.umd.js
+5
View File
@@ -33,4 +33,9 @@ module.exports = {
'no-undef': 'error',
'no-shadow-restricted-names': 'error',
},
// These plugins aren't used, but eslint complains if an eslint-ignore comment
// references unused plugins. An alternate approach could be to strip
// eslint-ignore comments as part of the build.
plugins: ['jest', 'no-for-of-loops', 'react', 'react-internal'],
};
yarn.lock
+404 -276
View File
File diff suppressed because it is too large Load Diff