diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.internal.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.internal.js
index 326e3c39bf..63ec249079 100644
--- a/packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.internal.js
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.internal.js
@@ -25,11 +25,7 @@ describe('ReactHooksInspection', () => {
ReactDebugTools = require('react-debug-tools');
});
- if (!__EXPERIMENTAL__) {
- it("empty test so Jest doesn't complain", () => {});
- return;
- }
-
+ // @gate experimental
it('should inspect a simple useResponder hook', () => {
const TestResponder = React.DEPRECATED_createResponder('TestResponder', {});
@@ -51,6 +47,7 @@ describe('ReactHooksInspection', () => {
]);
});
+ // @gate experimental
it('should inspect a simple ReactDOM.useEvent hook', () => {
let clickHandle;
let ref;
diff --git a/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js b/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js
index b972cf3177..360b78a3ad 100644
--- a/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js
+++ b/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js
@@ -27,6 +27,7 @@ describe('StoreStressConcurrent', () => {
print = require('./storeSerializer').print;
});
+ // TODO: Remove this in favor of @gate pragma
if (!__EXPERIMENTAL__) {
it("empty test so Jest doesn't complain", () => {});
return;
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 10cd143c54..773ab3232a 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -87,11 +87,7 @@ describe('ReactDOMServerPartialHydration', () => {
SuspenseList = React.SuspenseList;
});
- if (!__EXPERIMENTAL__) {
- it("empty test so Jest doesn't complain", () => {});
- return;
- }
-
+ // @gate experimental
it('hydrates a parent even if a child Suspense boundary is blocked', async () => {
let suspend = false;
let resolve;
@@ -150,6 +146,7 @@ describe('ReactDOMServerPartialHydration', () => {
expect(ref.current).toBe(span);
});
+ // @gate experimental
it('calls the hydration callbacks after hydration or deletion', async () => {
let suspend = false;
let resolve;
@@ -240,6 +237,7 @@ describe('ReactDOMServerPartialHydration', () => {
expect(deleted.length).toBe(1);
});
+ // @gate experimental
it('calls the onDeleted hydration callback if the parent gets deleted', async () => {
let suspend = false;
const promise = new Promise(() => {});
@@ -297,6 +295,7 @@ describe('ReactDOMServerPartialHydration', () => {
expect(deleted.length).toBe(1);
});
+ // @gate experimental || www
it('warns and replaces the boundary content in legacy mode', async () => {
let suspend = false;
let resolve;
@@ -368,6 +367,7 @@ describe('ReactDOMServerPartialHydration', () => {
expect(container.textContent).toBe('Hello');
});
+ // @gate experimental
it('can insert siblings before the dehydrated boundary', () => {
let suspend = false;
const promise = new Promise(() => {});
@@ -426,6 +426,7 @@ describe('ReactDOMServerPartialHydration', () => {
expect(container.firstChild.firstChild.textContent).toBe('First');
});
+ // @gate experimental
it('can delete the dehydrated boundary before it is hydrated', () => {
let suspend = false;
const promise = new Promise(() => {});
@@ -482,6 +483,7 @@ describe('ReactDOMServerPartialHydration', () => {
expect(container.firstChild.children[1].textContent).toBe('After');
});
+ // @gate experimental
it('blocks updates to hydrate the content first if props have changed', async () => {
let suspend = false;
let resolve;
@@ -553,6 +555,7 @@ describe('ReactDOMServerPartialHydration', () => {
expect(span.className).toBe('hi');
});
+ // @gate experimental
it('shows the fallback if props have changed before hydration completes and is still suspended', async () => {
let suspend = false;
let resolve;
@@ -622,6 +625,7 @@ describe('ReactDOMServerPartialHydration', () => {
expect(container.textContent).toBe('Hi');
});
+ // @gate experimental
it('shows the fallback of the outer if fallback is missing', async () => {
// This is the same exact test as above but with a nested Suspense without a fallback.
// This should be a noop.
@@ -695,6 +699,7 @@ describe('ReactDOMServerPartialHydration', () => {
expect(container.textContent).toBe('Hi');
});
+ // @gate experimental
it('clears nested suspense boundaries if they did not hydrate yet', async () => {
let suspend = false;
let resolve;
@@ -767,6 +772,7 @@ describe('ReactDOMServerPartialHydration', () => {
expect(container.textContent).toBe('Hi Hi');
});
+ // @gate experimental
it('hydrates first if props changed but we are able to resolve within a timeout', async () => {
let suspend = false;
let resolve;
@@ -847,6 +853,7 @@ describe('ReactDOMServerPartialHydration', () => {
expect(span.className).toBe('hi');
});
+ // @gate experimental
it('blocks the update to hydrate first if context has changed', async () => {
let suspend = false;
let resolve;
@@ -931,6 +938,7 @@ describe('ReactDOMServerPartialHydration', () => {
expect(span.className).toBe('hi');
});
+ // @gate experimental
it('shows the fallback if context has changed before hydration completes and is still suspended', async () => {
let suspend = false;
let resolve;
@@ -1014,6 +1022,7 @@ describe('ReactDOMServerPartialHydration', () => {
expect(container.textContent).toBe('Hi');
});
+ // @gate experimental
it('replaces the fallback with client content if it is not rendered by the server', async () => {
let suspend = false;
const promise = new Promise(resolvePromise => {});
@@ -1062,6 +1071,7 @@ describe('ReactDOMServerPartialHydration', () => {
expect(ref.current).toBe(span);
});
+ // @gate experimental
it('replaces the fallback within the suspended time if there is a nested suspense', async () => {
let suspend = false;
const promise = new Promise(resolvePromise => {});
@@ -1121,6 +1131,7 @@ describe('ReactDOMServerPartialHydration', () => {
expect(ref.current).toBe(span);
});
+ // @gate experimental
it('replaces the fallback within the suspended time if there is a nested suspense in a nested suspense', async () => {
let suspend = false;
const promise = new Promise(resolvePromise => {});
@@ -1182,6 +1193,7 @@ describe('ReactDOMServerPartialHydration', () => {
expect(ref.current).toBe(span);
});
+ // @gate experimental
it('waits for pending content to come in from the server and then hydrates it', async () => {
let suspend = false;
const promise = new Promise(resolvePromise => {});
@@ -1269,6 +1281,7 @@ describe('ReactDOMServerPartialHydration', () => {
expect(ref.current).toBe(span);
});
+ // @gate experimental
it('handles an error on the client if the server ends up erroring', async () => {
let suspend = false;
const promise = new Promise(resolvePromise => {});
@@ -1363,6 +1376,7 @@ describe('ReactDOMServerPartialHydration', () => {
expect(ref.current).toBe(div);
});
+ // @gate experimental
it('shows inserted items in a SuspenseList before content is hydrated', async () => {
let suspend = false;
let resolve;
@@ -1448,6 +1462,7 @@ describe('ReactDOMServerPartialHydration', () => {
expect(ref.current).toBe(spanB);
});
+ // @gate experimental
it('shows is able to hydrate boundaries even if others in a list are pending', async () => {
let suspend = false;
let resolve;
@@ -1522,6 +1537,7 @@ describe('ReactDOMServerPartialHydration', () => {
expect(container.textContent).toBe('ALoading B');
});
+ // @gate experimental
it('shows inserted items before pending in a SuspenseList as fallbacks', async () => {
let suspend = false;
let resolve;
@@ -1613,6 +1629,7 @@ describe('ReactDOMServerPartialHydration', () => {
expect(container.textContent).toBe('ABC');
});
+ // @gate experimental
it('can client render nested boundaries', async () => {
let suspend = false;
const promise = new Promise(() => {});
@@ -1667,6 +1684,7 @@ describe('ReactDOMServerPartialHydration', () => {
expect(container.lastChild.data).toBe('unrelated comment');
});
+ // @gate experimental
it('can hydrate TWO suspense boundaries', async () => {
const ref1 = React.createRef();
const ref2 = React.createRef();
@@ -1706,6 +1724,7 @@ describe('ReactDOMServerPartialHydration', () => {
expect(ref2.current).toBe(span2);
});
+ // @gate experimental
it('regenerates if it cannot hydrate before changes to props/context expire', async () => {
let suspend = false;
const promise = new Promise(resolvePromise => {});
@@ -1787,6 +1806,7 @@ describe('ReactDOMServerPartialHydration', () => {
expect(newSpan.className).toBe('hi');
});
+ // @gate experimental
it('does not invoke an event on a hydrated node until it commits', async () => {
let suspend = false;
let resolve;
@@ -1868,6 +1888,7 @@ describe('ReactDOMServerPartialHydration', () => {
document.body.removeChild(container);
});
+ // @gate experimental
it('does not invoke an event on a hydrated EventResponder until it commits', async () => {
let suspend = false;
let resolve;
@@ -1949,6 +1970,7 @@ describe('ReactDOMServerPartialHydration', () => {
document.body.removeChild(container);
});
+ // @gate experimental
it('invokes discrete events on nested suspense boundaries in a root (legacy system)', async () => {
let suspend = false;
let resolve;
@@ -2028,6 +2050,7 @@ describe('ReactDOMServerPartialHydration', () => {
document.body.removeChild(container);
});
+ // @gate experimental
it('invokes discrete events on nested suspense boundaries in a root (responder system)', async () => {
let suspend = false;
let resolve;
@@ -2110,6 +2133,7 @@ describe('ReactDOMServerPartialHydration', () => {
document.body.removeChild(container);
});
+ // @gate experimental
it('does not invoke the parent of dehydrated boundary event', async () => {
let suspend = false;
let resolve;
@@ -2184,6 +2208,7 @@ describe('ReactDOMServerPartialHydration', () => {
document.body.removeChild(container);
});
+ // @gate experimental
it('does not invoke an event on a parent tree when a subtree is dehydrated', async () => {
let suspend = false;
let resolve;
@@ -2261,6 +2286,7 @@ describe('ReactDOMServerPartialHydration', () => {
document.body.removeChild(parentContainer);
});
+ // @gate experimental
it('blocks only on the last continuous event (legacy system)', async () => {
let suspend1 = false;
let resolve1;
@@ -2365,129 +2391,125 @@ describe('ReactDOMServerPartialHydration', () => {
document.body.removeChild(container);
});
- if (__EXPERIMENTAL__) {
- it('blocks only on the last continuous event (Responder system)', async () => {
- useHover = require('react-interactions/events/hover').useHover;
+ // @gate experimental
+ it('blocks only on the last continuous event (Responder system)', async () => {
+ useHover = require('react-interactions/events/hover').useHover;
- let suspend1 = false;
- let resolve1;
- const promise1 = new Promise(
- resolvePromise => (resolve1 = resolvePromise),
- );
- let suspend2 = false;
- let resolve2;
- const promise2 = new Promise(
- resolvePromise => (resolve2 = resolvePromise),
- );
+ let suspend1 = false;
+ let resolve1;
+ const promise1 = new Promise(resolvePromise => (resolve1 = resolvePromise));
+ let suspend2 = false;
+ let resolve2;
+ const promise2 = new Promise(resolvePromise => (resolve2 = resolvePromise));
- function First({text}) {
- if (suspend1) {
- throw promise1;
- } else {
- return 'Hello';
- }
+ function First({text}) {
+ if (suspend1) {
+ throw promise1;
+ } else {
+ return 'Hello';
}
+ }
- function Second({text}) {
- if (suspend2) {
- throw promise2;
- } else {
- return 'World';
- }
+ function Second({text}) {
+ if (suspend2) {
+ throw promise2;
+ } else {
+ return 'World';
}
+ }
- const ops = [];
+ const ops = [];
- function App() {
- const listener1 = useHover({
- onHoverStart() {
- ops.push('Hover Start First');
- },
- onHoverEnd() {
- ops.push('Hover End First');
- },
- });
- const listener2 = useHover({
- onHoverStart() {
- ops.push('Hover Start Second');
- },
- onHoverEnd() {
- ops.push('Hover End Second');
- },
- });
- return (
-
-
-
+
+
-
-
-
-
-
- );
- }
+
+
+
+
+
+
{text} ;
+ return {text} ;
+ }
+
+ function App() {
+ Scheduler.unstable_yieldValue('App');
+ return (
+
+
+
+
+
+
+ );
+ }
+
+ const finalHTML = ReactDOMServer.renderToString(
-
-
-
-
-
- );
+ const listener = usePress({
+ onPress() {
+ Scheduler.unstable_yieldValue('Clicked ' + text);
+ },
+ });
+ return {text} ;
+ }
+
+ function App() {
+ Scheduler.unstable_yieldValue('App');
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ const finalHTML = ReactDOMServer.renderToString({text} ;
+ }
- expect(Scheduler).toHaveYielded(['App', 'A', 'B']);
+ function App() {
+ Scheduler.unstable_yieldValue('App');
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+ }
- const container = document.createElement('div');
- // We need this to be in the document since we'll dispatch events on it.
- document.body.appendChild(container);
+ const finalHTML = ReactDOMServer.renderToString({text} ;
- }
-
- function App() {
- Scheduler.unstable_yieldValue('App');
- return (
-
-
-
-
-
-
-
-
-
-
- );
- }
-
- const finalHTML = ReactDOMServer.renderToString({text} ;
- }
-
- function App() {
- Scheduler.unstable_yieldValue('App');
- return (
-
-
-
-
-
-
-
-
-
-
- );
- }
-
- const finalHTML = ReactDOMServer.renderToString({props.text}
;
}
@@ -57,6 +52,7 @@ describe('ReactDOMServerSuspense', () => {
throw new Promise(() => {});
}
+ // @gate experimental || www
it('should render the children when no promise is thrown', async () => {
const c = await serverRender(
@@ -71,6 +67,7 @@ describe('ReactDOMServerSuspense', () => {
expect(e.textContent).toBe('Children');
});
+ // @gate experimental || www
it('should render the fallback when a promise thrown', async () => {
const c = await serverRender(
@@ -85,6 +82,7 @@ describe('ReactDOMServerSuspense', () => {
expect(e.textContent).toBe('Fallback');
});
+ // @gate experimental || www
it('should work with nested suspense components', async () => {
const c = await serverRender(
@@ -105,6 +103,7 @@ describe('ReactDOMServerSuspense', () => {
);
});
+ // @gate experimental
it('server renders a SuspenseList component and its children', async () => {
const example = (
@@ -137,33 +136,36 @@ describe('ReactDOMServerSuspense', () => {
expect(divB).toBe(divB2);
});
- itThrowsWhenRendering(
- 'a suspending component outside a Suspense node',
- async render => {
- await render(
- ,
- 1,
- );
- },
- 'Add a component higher in the tree',
- );
+ // TODO: Remove this in favor of @gate pragma
+ if (__EXPERIMENTAL__) {
+ itThrowsWhenRendering(
+ 'a suspending component outside a Suspense node',
+ async render => {
+ await render(
+ ,
+ 1,
+ );
+ },
+ 'Add a component higher in the tree',
+ );
- itThrowsWhenRendering(
- 'a suspending component without a Suspense above',
- async render => {
- await render(
- ,
- 1,
- );
- },
- 'Add a component higher in the tree',
- );
+ itThrowsWhenRendering(
+ 'a suspending component without a Suspense above',
+ async render => {
+ await render(
+ ,
+ 1,
+ );
+ },
+ 'Add a component higher in the tree',
+ );
+ }
it('does not get confused by throwing null', () => {
function Bad() {
diff --git a/packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js b/packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js
index 678f96de9f..99d1bd92e4 100644
--- a/packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js
+++ b/packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js
@@ -18,324 +18,315 @@ const renderSubtreeIntoContainer = require('react-dom')
const ReactFeatureFlags = require('shared/ReactFeatureFlags');
-// Once this flag is always true, we should delete this test file
-if (__EXPERIMENTAL__) {
- describe('renderSubtreeIntoContainer', () => {
- it('empty test', () => {
- // Empty test to prevent "Your test suite must contain at least one test." error.
- });
+describe('renderSubtreeIntoContainer', () => {
+ it('should pass context when rendering subtree elsewhere', () => {
+ const portal = document.createElement('div');
+
+ class Component extends React.Component {
+ static contextTypes = {
+ foo: PropTypes.string.isRequired,
+ };
+
+ render() {
+ return {this.context.foo}
;
+ }
+ }
+
+ class Parent extends React.Component {
+ static childContextTypes = {
+ foo: PropTypes.string.isRequired,
+ };
+
+ getChildContext() {
+ return {
+ foo: 'bar',
+ };
+ }
+
+ render() {
+ return null;
+ }
+
+ componentDidMount() {
+ if (ReactFeatureFlags.warnUnstableRenderSubtreeIntoContainer) {
+ expect(
+ function() {
+ renderSubtreeIntoContainer(this, {this.context.foo}
;
- }
+ class Component extends React.Component {
+ static contextTypes = {
+ foo: PropTypes.string.isRequired,
+ };
+
+ render() {
+ return {this.context.foo}
;
}
+ }
- class Parent extends React.Component {
- static childContextTypes = {
- foo: PropTypes.string.isRequired,
- };
+ // ESLint is confused here and thinks Parent is unused, presumably because
+ // it is only used inside of the class body?
+ // eslint-disable-next-line no-unused-vars
+ class Parent extends React.Component {
+ static childContextTypes = {
+ foo: PropTypes.string.isRequired,
+ };
- getChildContext() {
- return {
- foo: 'bar',
- };
- }
-
- render() {
- return null;
- }
-
- componentDidMount() {
- if (ReactFeatureFlags.warnUnstableRenderSubtreeIntoContainer) {
- expect(
- function() {
- renderSubtreeIntoContainer(this, {this.context.foo}
;
- }
- }
-
- // ESLint is confused here and thinks Parent is unused, presumably because
- // it is only used inside of the class body?
- // eslint-disable-next-line no-unused-vars
- class Parent extends React.Component {
- static childContextTypes = {
- foo: PropTypes.string.isRequired,
- };
-
- getChildContext() {
- return {
- foo: 'bar',
- };
- }
-
- render() {
- return null;
- }
-
- componentDidMount() {
- expect(function() {
- renderSubtreeIntoContainer({this.context.foo + '-' + this.context.getFoo()}
;
- }
- }
-
- class Parent extends React.Component {
- static childContextTypes = {
- foo: PropTypes.string.isRequired,
- getFoo: PropTypes.func.isRequired,
- };
-
- state = {
- bar: 'initial',
- };
-
- getChildContext() {
- return {
- foo: this.state.bar,
- getFoo: () => this.state.bar,
- };
- }
-
- render() {
- return null;
- }
-
- componentDidMount() {
- renderSubtreeIntoContainer(this, {this.context.foo + '-' + this.context.getFoo()}
;
- }
- }
-
- class Parent extends React.Component {
- static childContextTypes = {
- foo: PropTypes.string.isRequired,
- getFoo: PropTypes.func.isRequired,
- };
-
- getChildContext() {
- return {
- foo: this.props.bar,
- getFoo: () => this.props.bar,
- };
- }
-
- render() {
- return null;
- }
-
- componentDidMount() {
- renderSubtreeIntoContainer(this, hello
, portal);
- }
- }
-
- ReactDOM.render({this.context.value}
;
- }
+ componentDidMount() {
+ expect(function() {
+ renderSubtreeIntoContainer({this.context.value}
;
- }
- }
-
- ReactDOM.render(
;
- }
- }
- const c = ReactDOM.render({this.context.foo + '-' + this.context.getFoo()}
;
+ }
+ }
+
+ class Parent extends React.Component {
+ static childContextTypes = {
+ foo: PropTypes.string.isRequired,
+ getFoo: PropTypes.func.isRequired,
+ };
+
+ state = {
+ bar: 'initial',
+ };
+
+ getChildContext() {
+ return {
+ foo: this.state.bar,
+ getFoo: () => this.state.bar,
+ };
+ }
+
+ render() {
+ return null;
+ }
+
+ componentDidMount() {
+ renderSubtreeIntoContainer(this, {this.context.foo + '-' + this.context.getFoo()}
;
+ }
+ }
+
+ class Parent extends React.Component {
+ static childContextTypes = {
+ foo: PropTypes.string.isRequired,
+ getFoo: PropTypes.func.isRequired,
+ };
+
+ getChildContext() {
+ return {
+ foo: this.props.bar,
+ getFoo: () => this.props.bar,
+ };
+ }
+
+ render() {
+ return null;
+ }
+
+ componentDidMount() {
+ renderSubtreeIntoContainer(this, hello
, portal);
+ }
+ }
+
+ ReactDOM.render({this.context.value}
;
+ }
+ }
+
+ ReactDOM.render({this.context.value}
;
+ }
+ }
+
+ ReactDOM.render(
;
+ }
+ }
+ const c = ReactDOM.render(Hello world
`);
});
+ // @gate experimental
it('can render correctly with the ReactDOMServer hydration', () => {
const clickEvent = jest.fn();
const spanRef = React.createRef();
@@ -1164,6 +1162,7 @@ describe('DOMModernPluginEventSystem', () => {
expect(clickEvent).toHaveBeenCalledTimes(1);
});
+ // @gate experimental
it('should correctly work for a basic "click" listener', () => {
let log = [];
const clickEvent = jest.fn(event => {
@@ -1272,6 +1271,7 @@ describe('DOMModernPluginEventSystem', () => {
expect(clickEvent2).toBeCalledTimes(1);
});
+ // @gate experimental
it('should correctly work for setting and clearing a basic "click" listener', () => {
const clickEvent = jest.fn();
const divRef = React.createRef();
@@ -1315,6 +1315,7 @@ describe('DOMModernPluginEventSystem', () => {
expect(clickEvent).toBeCalledTimes(0);
});
+ // @gate experimental
it('should handle the target being a text node', () => {
const clickEvent = jest.fn();
const buttonRef = React.createRef();
@@ -1337,6 +1338,7 @@ describe('DOMModernPluginEventSystem', () => {
expect(clickEvent).toBeCalledTimes(1);
});
+ // @gate experimental
it('handle propagation of click events', () => {
const buttonRef = React.createRef();
const divRef = React.createRef();
@@ -1390,6 +1392,7 @@ describe('DOMModernPluginEventSystem', () => {
expect(log[3]).toEqual(['bubble', buttonElement]);
});
+ // @gate experimental
it('handle propagation of click events mixed with onClick events', () => {
const buttonRef = React.createRef();
const divRef = React.createRef();
@@ -1442,6 +1445,7 @@ describe('DOMModernPluginEventSystem', () => {
expect(log[5]).toEqual(['bubble', buttonElement]);
});
+ // @gate experimental
it('should correctly work for a basic "click" listener on the outer target', () => {
const log = [];
const clickEvent = jest.fn(event => {
@@ -1507,6 +1511,7 @@ describe('DOMModernPluginEventSystem', () => {
expect(clickEvent).toBeCalledTimes(2);
});
+ // @gate experimental
it('should correctly handle many nested target listeners', () => {
const buttonRef = React.createRef();
const targetListener1 = jest.fn();
@@ -1572,6 +1577,7 @@ describe('DOMModernPluginEventSystem', () => {
expect(targetListener4).toHaveBeenCalledTimes(2);
});
+ // @gate experimental
it('should correctly handle stopPropagation corrrectly for target events', () => {
const buttonRef = React.createRef();
const divRef = React.createRef();
@@ -1605,6 +1611,7 @@ describe('DOMModernPluginEventSystem', () => {
expect(clickEvent).toHaveBeenCalledTimes(0);
});
+ // @gate experimental
it('should correctly handle stopPropagation corrrectly for many target events', () => {
const buttonRef = React.createRef();
const targetListerner1 = jest.fn(e => e.stopPropagation());
@@ -1639,6 +1646,7 @@ describe('DOMModernPluginEventSystem', () => {
expect(targetListerner4).toHaveBeenCalledTimes(1);
});
+ // @gate experimental
it('should correctly handle stopPropagation for mixed capture/bubbling target listeners', () => {
const buttonRef = React.createRef();
const targetListerner1 = jest.fn(e => e.stopPropagation());
@@ -1725,6 +1733,7 @@ describe('DOMModernPluginEventSystem', () => {
expect(log).toEqual([{counter: 1}]);
});
+ // @gate experimental
it('should correctly work for a basic "click" listener that upgrades', () => {
const clickEvent = jest.fn();
const buttonRef = React.createRef();
@@ -1776,6 +1785,7 @@ describe('DOMModernPluginEventSystem', () => {
expect(clickEvent).toHaveBeenCalledTimes(1);
});
+ // @gate experimental
it('should correctly work for a basic "click" listener that upgrades #2', () => {
const clickEvent = jest.fn();
const buttonRef = React.createRef();
@@ -1827,6 +1837,7 @@ describe('DOMModernPluginEventSystem', () => {
expect(clickEvent).toHaveBeenCalledTimes(1);
});
+ // @gate experimental
it('should correctly work for a basic "click" window listener', () => {
const log = [];
const clickEvent = jest.fn(event => {
@@ -1878,6 +1889,7 @@ describe('DOMModernPluginEventSystem', () => {
expect(clickEvent).toBeCalledTimes(2);
});
+ // @gate experimental
it('handle propagation of click events on the window', () => {
const buttonRef = React.createRef();
const divRef = React.createRef();
@@ -1937,6 +1949,7 @@ describe('DOMModernPluginEventSystem', () => {
expect(log[5]).toEqual(['bubble', window]);
});
+ // @gate experimental
it('should correctly handle stopPropagation for mixed listeners', () => {
const buttonRef = React.createRef();
const rootListerner1 = jest.fn(e => e.stopPropagation());
@@ -1975,6 +1988,7 @@ describe('DOMModernPluginEventSystem', () => {
expect(rootListerner2).toHaveBeenCalledTimes(0);
});
+ // @gate experimental
it('should correctly handle stopPropagation for delegated listeners', () => {
const buttonRef = React.createRef();
const rootListerner1 = jest.fn(e => e.stopPropagation());
@@ -2014,6 +2028,7 @@ describe('DOMModernPluginEventSystem', () => {
expect(rootListerner4).toHaveBeenCalledTimes(0);
});
+ // @gate experimental
it('handle propagation of click events on the window and document', () => {
const buttonRef = React.createRef();
const divRef = React.createRef();
@@ -2079,6 +2094,7 @@ describe('DOMModernPluginEventSystem', () => {
expect(log[7]).toEqual(['bubble', window]);
});
+ // @gate experimental
it('handles propagation of custom user events', () => {
const buttonRef = React.createRef();
const divRef = React.createRef();
@@ -2153,6 +2169,7 @@ describe('DOMModernPluginEventSystem', () => {
expect(log[5]).toEqual(['bubble', buttonElement]);
});
+ // @gate experimental
it('beforeblur and afterblur are called after a focused element is unmounted', () => {
const log = [];
// We have to persist here because we want to read relatedTarget later.
@@ -2202,6 +2219,7 @@ describe('DOMModernPluginEventSystem', () => {
expect(log).toEqual(['beforeblur', 'afterblur']);
});
+ // @gate experimental
it('beforeblur and afterblur are called after a nested focused element is unmounted', () => {
const log = [];
// We have to persist here because we want to read relatedTarget later.
@@ -2346,6 +2364,7 @@ describe('DOMModernPluginEventSystem', () => {
ReactDOMServer = require('react-dom/server');
});
+ // @gate experimental
it('handle propagation of click events on a scope', () => {
const buttonRef = React.createRef();
const log = [];
@@ -2390,6 +2409,7 @@ describe('DOMModernPluginEventSystem', () => {
]);
});
+ // @gate experimental
it('handle mixed propagation of click events on a scope', () => {
const buttonRef = React.createRef();
const divRef = React.createRef();
@@ -2464,6 +2484,7 @@ describe('DOMModernPluginEventSystem', () => {
]);
});
+ // @gate experimental
it('should not handle the target being a dangling text node within a scope', () => {
const clickEvent = jest.fn();
const buttonRef = React.createRef();
@@ -2495,6 +2516,7 @@ describe('DOMModernPluginEventSystem', () => {
expect(clickEvent).toBeCalledTimes(0);
});
+ // @gate experimental
it('handle stopPropagation (inner) correctly between scopes', () => {
const buttonRef = React.createRef();
const outerOnClick = jest.fn();
@@ -2531,6 +2553,7 @@ describe('DOMModernPluginEventSystem', () => {
expect(outerOnClick).toHaveBeenCalledTimes(0);
});
+ // @gate experimental
it('handle stopPropagation (outer) correctly between scopes', () => {
const buttonRef = React.createRef();
const outerOnClick = jest.fn(e => e.stopPropagation());
@@ -2567,6 +2590,8 @@ describe('DOMModernPluginEventSystem', () => {
expect(outerOnClick).toHaveBeenCalledTimes(1);
});
+ // @gate experimental
+
it('handle stopPropagation (inner and outer) correctly between scopes', () => {
const buttonRef = React.createRef();
const onClick = jest.fn(e => e.stopPropagation());
diff --git a/packages/react-dom/src/events/__tests__/DeprecatedDOMEventResponderSystem-test.internal.js b/packages/react-dom/src/events/__tests__/DeprecatedDOMEventResponderSystem-test.internal.js
index 932bc4e990..9c57ac6531 100644
--- a/packages/react-dom/src/events/__tests__/DeprecatedDOMEventResponderSystem-test.internal.js
+++ b/packages/react-dom/src/events/__tests__/DeprecatedDOMEventResponderSystem-test.internal.js
@@ -66,11 +66,6 @@ function dispatchClickEvent(element) {
describe('DOMEventResponderSystem', () => {
let container;
- if (!__EXPERIMENTAL__) {
- it("empty test so Jest doesn't complain", () => {});
- return;
- }
-
beforeEach(() => {
jest.resetModules();
ReactFeatureFlags = require('shared/ReactFeatureFlags');
@@ -89,6 +84,7 @@ describe('DOMEventResponderSystem', () => {
container = null;
});
+ // @gate experimental
it('can mount and render correctly with the ReactTestRenderer', () => {
jest.resetModules();
ReactFeatureFlags = require('shared/ReactFeatureFlags');
@@ -106,6 +102,7 @@ describe('DOMEventResponderSystem', () => {
expect(renderer).toMatchRenderedOutput(Hello world
);
});
+ // @gate experimental
it('can render correctly with the ReactDOMServer', () => {
const TestResponder = createEventResponder({});
@@ -118,6 +115,7 @@ describe('DOMEventResponderSystem', () => {
expect(output).toBe(`Hello world
`);
});
+ // @gate experimental
it('can render correctly with the ReactDOMServer hydration', () => {
const onEvent = jest.fn();
const TestResponder = createEventResponder({
@@ -147,6 +145,7 @@ describe('DOMEventResponderSystem', () => {
expect(onEvent).toHaveBeenCalledTimes(1);
});
+ // @gate experimental
it('the event responders should fire on click event', () => {
let eventResponderFiredCount = 0;
const eventLog = [];
@@ -202,6 +201,7 @@ describe('DOMEventResponderSystem', () => {
expect(eventResponderFiredCount).toBe(2);
});
+ // @gate experimental
it('the event responders should fire on click event (passive events forced)', () => {
// JSDOM does not support passive events, so this manually overrides the value to be true
const checkPassiveEvents = require('react-dom/src/events/checkPassiveEvents');
@@ -246,6 +246,7 @@ describe('DOMEventResponderSystem', () => {
]);
});
+ // @gate experimental
it('nested event responders should not fire multiple times', () => {
let eventResponderFiredCount = 0;
let eventLog = [];
@@ -327,6 +328,7 @@ describe('DOMEventResponderSystem', () => {
]);
});
+ // @gate experimental
it('nested event responders should fire in the correct order', () => {
let eventLog = [];
const buttonRef = React.createRef();
@@ -390,6 +392,7 @@ describe('DOMEventResponderSystem', () => {
expect(eventLog).toEqual(['B [bubble]', 'A [bubble]']);
});
+ // @gate experimental
it('nested event responders should fire in the correct order #2', () => {
const eventLog = [];
const buttonRef = React.createRef();
@@ -426,6 +429,7 @@ describe('DOMEventResponderSystem', () => {
expect(eventLog).toEqual(['B [bubble]']);
});
+ // @gate experimental
it('custom event dispatching for click -> magicClick works', () => {
const eventLog = [];
const buttonRef = React.createRef();
@@ -472,6 +476,7 @@ describe('DOMEventResponderSystem', () => {
expect(eventLog).toEqual(['magic event fired', 'magicclick', 'bubble']);
});
+ // @gate experimental
it('the event responder onMount() function should fire', () => {
let onMountFired = 0;
@@ -505,6 +510,7 @@ describe('DOMEventResponderSystem', () => {
expect(onMountFired).toEqual(2);
});
+ // @gate experimental
it('the event responder onUnmount() function should fire', () => {
let onUnmountFired = 0;
@@ -551,6 +557,7 @@ describe('DOMEventResponderSystem', () => {
expect(onUnmountFired).toEqual(4);
});
+ // @gate experimental
it('the event responder onUnmount() function should fire using scopes', () => {
let onUnmountFired = 0;
@@ -598,6 +605,7 @@ describe('DOMEventResponderSystem', () => {
expect(onUnmountFired).toEqual(4);
});
+ // @gate experimental
it('the event responder onUnmount() function should fire with state', () => {
let counter = 0;
@@ -621,6 +629,7 @@ describe('DOMEventResponderSystem', () => {
expect(counter).toEqual(5);
});
+ // @gate experimental
it('the event responder target listeners should correctly fire for only their events', () => {
let clickEventComponent1Fired = 0;
let clickEventComponent2Fired = 0;
@@ -682,6 +691,7 @@ describe('DOMEventResponderSystem', () => {
]);
});
+ // @gate experimental
it('the event responder system should warn on accessing invalid properties', () => {
const TestResponder = createEventResponder({
targetEventTypes: ['click'],
@@ -747,6 +757,7 @@ describe('DOMEventResponderSystem', () => {
expect(container.innerHTML).toBe('Click me! ');
});
+ // @gate experimental
it('should work with event responder hooks', () => {
const buttonRef = React.createRef();
const eventLogs = [];
@@ -839,6 +850,7 @@ describe('DOMEventResponderSystem', () => {
expect(log).toEqual([{counter: 1}]);
});
+ // @gate experimental
it('should correctly pass through event properties', () => {
const timeStamps = [];
const ref = React.createRef();
@@ -903,6 +915,7 @@ describe('DOMEventResponderSystem', () => {
]);
});
+ // @gate experimental
it('should not propagate target events through portals by default', () => {
const buttonRef = React.createRef();
const onEvent = jest.fn();
@@ -926,6 +939,7 @@ describe('DOMEventResponderSystem', () => {
expect(onEvent).not.toBeCalled();
});
+ // @gate experimental
it('should propagate target events through portals when enabled', () => {
const buttonRef = React.createRef();
const onEvent = jest.fn();
@@ -950,6 +964,7 @@ describe('DOMEventResponderSystem', () => {
expect(onEvent).toBeCalled();
});
+ // @gate experimental
it('event upgrading should work correctly', () => {
let eventResponderFiredCount = 0;
const buttonRef = React.createRef();
diff --git a/packages/react-interactions/events/src/dom/__tests__/ContextMenu-test.internal.js b/packages/react-interactions/events/src/dom/__tests__/ContextMenu-test.internal.js
index affcf8e6fb..379203bf33 100644
--- a/packages/react-interactions/events/src/dom/__tests__/ContextMenu-test.internal.js
+++ b/packages/react-interactions/events/src/dom/__tests__/ContextMenu-test.internal.js
@@ -28,8 +28,13 @@ function initializeModules(hasPointerEvents) {
ReactFeatureFlags.enableDeprecatedFlareAPI = true;
React = require('react');
ReactDOM = require('react-dom');
- useContextMenu = require('react-interactions/events/context-menu')
- .useContextMenu;
+
+ // TODO: This import throws outside of experimental mode. Figure out better
+ // strategy for gated imports.
+ if (__EXPERIMENTAL__) {
+ useContextMenu = require('react-interactions/events/context-menu')
+ .useContextMenu;
+ }
}
const forcePointerEvents = true;
@@ -38,11 +43,6 @@ const table = [[forcePointerEvents], [!forcePointerEvents]];
describe.each(table)('ContextMenu responder', hasPointerEvents => {
let container;
- if (!__EXPERIMENTAL__) {
- it("empty test so Jest doesn't complain", () => {});
- return;
- }
-
beforeEach(() => {
initializeModules(hasPointerEvents);
container = document.createElement('div');
@@ -56,6 +56,7 @@ describe.each(table)('ContextMenu responder', hasPointerEvents => {
});
describe('all platforms', () => {
+ // @gate experimental
it('mouse right-click', () => {
const onContextMenu = jest.fn();
const preventDefault = jest.fn();
@@ -79,6 +80,7 @@ describe.each(table)('ContextMenu responder', hasPointerEvents => {
);
});
+ // @gate experimental
it('touch long-press', () => {
const onContextMenu = jest.fn();
const preventDefault = jest.fn();
@@ -102,6 +104,7 @@ describe.each(table)('ContextMenu responder', hasPointerEvents => {
);
});
+ // @gate experimental
it('"disabled" is true', () => {
const onContextMenu = jest.fn();
const ref = React.createRef();
@@ -119,6 +122,7 @@ describe.each(table)('ContextMenu responder', hasPointerEvents => {
expect(onContextMenu).toHaveBeenCalledTimes(0);
});
+ // @gate experimental
it('"preventDefault" is false', () => {
const preventDefault = jest.fn();
const onContextMenu = jest.fn();
@@ -149,6 +153,7 @@ describe.each(table)('ContextMenu responder', hasPointerEvents => {
platform.clear();
});
+ // @gate experimental
it('mouse modified left-click', () => {
const onContextMenu = jest.fn();
const ref = React.createRef();
@@ -181,6 +186,7 @@ describe.each(table)('ContextMenu responder', hasPointerEvents => {
platform.clear();
});
+ // @gate experimental
it('mouse modified left-click', () => {
const onContextMenu = jest.fn();
const ref = React.createRef();
diff --git a/packages/react-interactions/events/src/dom/__tests__/Focus-test.internal.js b/packages/react-interactions/events/src/dom/__tests__/Focus-test.internal.js
index 0b751d5c06..162e752a85 100644
--- a/packages/react-interactions/events/src/dom/__tests__/Focus-test.internal.js
+++ b/packages/react-interactions/events/src/dom/__tests__/Focus-test.internal.js
@@ -28,8 +28,13 @@ function initializeModules(hasPointerEvents) {
ReactFeatureFlags.enableDeprecatedFlareAPI = true;
React = require('react');
ReactDOM = require('react-dom');
- FocusResponder = require('react-interactions/events/focus').FocusResponder;
- useFocus = require('react-interactions/events/focus').useFocus;
+
+ // TODO: This import throws outside of experimental mode. Figure out better
+ // strategy for gated imports.
+ if (__EXPERIMENTAL__) {
+ FocusResponder = require('react-interactions/events/focus').FocusResponder;
+ useFocus = require('react-interactions/events/focus').useFocus;
+ }
}
const forcePointerEvents = true;
@@ -38,11 +43,6 @@ const table = [[forcePointerEvents], [!forcePointerEvents]];
describe.each(table)('Focus responder', hasPointerEvents => {
let container;
- if (!__EXPERIMENTAL__) {
- it("empty test so Jest doesn't complain", () => {});
- return;
- }
-
beforeEach(() => {
initializeModules(hasPointerEvents);
container = document.createElement('div');
@@ -58,7 +58,7 @@ describe.each(table)('Focus responder', hasPointerEvents => {
describe('disabled', () => {
let onBlur, onFocus, ref;
- beforeEach(() => {
+ const componentInit = () => {
onBlur = jest.fn();
onFocus = jest.fn();
ref = React.createRef();
@@ -71,9 +71,11 @@ describe.each(table)('Focus responder', hasPointerEvents => {
return
;
};
ReactDOM.render(
;
};
ReactDOM.render(
;
};
ReactDOM.render(
;
};
ReactDOM.render(
;
};
ReactDOM.render(
;
};
ReactDOM.render(
;
};
ReactDOM.render(
;
};
ReactDOM.render(
;
};
ReactDOM.render(
;
};
ReactDOM.render(
;
};
ReactDOM.render(
;
};
ReactDOM.render(
;
};
ReactDOM.render(
-
+ });
+ expect(onTapEnd).toHaveBeenCalledTimes(1);
+ expect(onTapEnd).toHaveBeenCalledWith(
+ expect.objectContaining({
+ altKey: false,
+ ctrlKey: false,
+ height: pointerType === 'mouse' ? 1 : 23,
+ metaKey: false,
+ pageX: 10,
+ pageY: 10,
+ pointerType,
+ pressure: 0,
+ screenX: 10,
+ screenY: 60,
+ shiftKey: false,
+ tangentialPressure: 0,
+ target: target.node,
+ tiltX: 0,
+ tiltY: 0,
+ timeStamp: expect.any(Number),
+ twist: 0,
+ type: 'tap:end',
+ width: pointerType === 'mouse' ? 1 : 23,
+ x: 10,
+ y: 10,
+ }),
);
- };
- ReactDOM.render(
+
+ );
+ };
+ ReactDOM.render(Hello world again
');
});
+ // @gate experimental
it('should render a simple fundamental component without reconcileChildren', () => {
const FundamentalComponent = createReactFundamentalComponent({
reconcileChildren: false,
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.internal.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.internal.js
index dfe89a510b..84ddb0c0dc 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.internal.js
@@ -1121,384 +1121,380 @@ describe('ReactHooksWithNoopRenderer', () => {
},
);
- if (
- require('shared/ReactFeatureFlags')
- .deferPassiveEffectCleanupDuringUnmount &&
- require('shared/ReactFeatureFlags')
- .runAllPassiveEffectDestroysBeforeCreates
- ) {
- it('defers passive effect destroy functions during unmount', () => {
- function Child({bar, foo}) {
- React.useEffect(() => {
- Scheduler.unstable_yieldValue('passive bar create');
- return () => {
- Scheduler.unstable_yieldValue('passive bar destroy');
- };
- }, [bar]);
- React.useLayoutEffect(() => {
- Scheduler.unstable_yieldValue('layout bar create');
- return () => {
- Scheduler.unstable_yieldValue('layout bar destroy');
- };
- }, [bar]);
- React.useEffect(() => {
- Scheduler.unstable_yieldValue('passive foo create');
- return () => {
- Scheduler.unstable_yieldValue('passive foo destroy');
- };
- }, [foo]);
- React.useLayoutEffect(() => {
- Scheduler.unstable_yieldValue('layout foo create');
- return () => {
- Scheduler.unstable_yieldValue('layout foo destroy');
- };
- }, [foo]);
- Scheduler.unstable_yieldValue('render');
- return null;
- }
+ // @gate deferPassiveEffectCleanupDuringUnmount && runAllPassiveEffectDestroysBeforeCreates
+ it('defers passive effect destroy functions during unmount', () => {
+ function Child({bar, foo}) {
+ React.useEffect(() => {
+ Scheduler.unstable_yieldValue('passive bar create');
+ return () => {
+ Scheduler.unstable_yieldValue('passive bar destroy');
+ };
+ }, [bar]);
+ React.useLayoutEffect(() => {
+ Scheduler.unstable_yieldValue('layout bar create');
+ return () => {
+ Scheduler.unstable_yieldValue('layout bar destroy');
+ };
+ }, [bar]);
+ React.useEffect(() => {
+ Scheduler.unstable_yieldValue('passive foo create');
+ return () => {
+ Scheduler.unstable_yieldValue('passive foo destroy');
+ };
+ }, [foo]);
+ React.useLayoutEffect(() => {
+ Scheduler.unstable_yieldValue('layout foo create');
+ return () => {
+ Scheduler.unstable_yieldValue('layout foo destroy');
+ };
+ }, [foo]);
+ Scheduler.unstable_yieldValue('render');
+ return null;
+ }
- act(() => {
- ReactNoop.render({children} ;
@@ -137,6 +136,7 @@ describe('ReactSuspenseList', () => {
]);
});
+ // @gate experimental
it('warns if a single fragment is passed to a "backwards" list', () => {
function Foo() {
return (
@@ -157,6 +157,7 @@ describe('ReactSuspenseList', () => {
]);
});
+ // @gate experimental
it('warns if a nested array is passed to a "forwards" list', () => {
function Foo({items}) {
return (
@@ -184,6 +185,7 @@ describe('ReactSuspenseList', () => {
]);
});
+ // @gate experimental
it('shows content independently by default', async () => {
const A = createAsyncText('A');
const B = createAsyncText('B');
@@ -250,6 +252,7 @@ describe('ReactSuspenseList', () => {
);
});
+ // @gate experimental
it('shows content independently in legacy mode regardless of option', async () => {
const A = createAsyncText('A');
const B = createAsyncText('B');
@@ -322,6 +325,7 @@ describe('ReactSuspenseList', () => {
);
});
+ // @gate experimental
it('displays all "together"', async () => {
const A = createAsyncText('A');
const B = createAsyncText('B');
@@ -391,6 +395,7 @@ describe('ReactSuspenseList', () => {
);
});
+ // @gate experimental
it('displays all "together" even when nested as siblings', async () => {
const A = createAsyncText('A');
const B = createAsyncText('B');
@@ -476,6 +481,7 @@ describe('ReactSuspenseList', () => {
);
});
+ // @gate experimental
it('displays all "together" in nested SuspenseLists', async () => {
const A = createAsyncText('A');
const B = createAsyncText('B');
@@ -537,6 +543,7 @@ describe('ReactSuspenseList', () => {
);
});
+ // @gate experimental
it('displays all "together" in nested SuspenseLists where the inner is default', async () => {
const A = createAsyncText('A');
const B = createAsyncText('B');
@@ -596,6 +603,7 @@ describe('ReactSuspenseList', () => {
);
});
+ // @gate experimental
it('displays all "together" during an update', async () => {
const A = createAsyncText('A');
const B = createAsyncText('B');
@@ -680,6 +688,7 @@ describe('ReactSuspenseList', () => {
);
});
+ // @gate experimental
it('avoided boundaries can be coordinate with SuspenseList', async () => {
const A = createAsyncText('A');
const B = createAsyncText('B');
@@ -778,6 +787,7 @@ describe('ReactSuspenseList', () => {
);
});
+ // @gate experimental
it('displays each items in "forwards" order', async () => {
const A = createAsyncText('A');
const B = createAsyncText('B');
@@ -843,6 +853,7 @@ describe('ReactSuspenseList', () => {
);
});
+ // @gate experimental
it('displays each items in "backwards" order', async () => {
const A = createAsyncText('A');
const B = createAsyncText('B');
@@ -908,6 +919,7 @@ describe('ReactSuspenseList', () => {
);
});
+ // @gate experimental
it('displays added row at the top "together" and the bottom in "forwards" order', async () => {
const A = createAsyncText('A');
const B = createAsyncText('B');
@@ -1062,6 +1074,7 @@ describe('ReactSuspenseList', () => {
);
});
+ // @gate experimental
it('displays added row at the top "together" and the bottom in "backwards" order', async () => {
const A = createAsyncText('A');
const B = createAsyncText('B');
@@ -1246,6 +1259,7 @@ describe('ReactSuspenseList', () => {
);
});
+ // @gate experimental
it('switches to rendering fallbacks if the tail takes long CPU time', async () => {
function Foo() {
return (
@@ -1308,6 +1322,7 @@ describe('ReactSuspenseList', () => {
);
});
+ // @gate experimental
it('only shows one loading state at a time for "collapsed" tail insertions', async () => {
const A = createAsyncText('A');
const B = createAsyncText('B');
@@ -1377,6 +1392,7 @@ describe('ReactSuspenseList', () => {
);
});
+ // @gate experimental
it('warns if an unsupported tail option is used', () => {
function Foo() {
return (
@@ -1397,6 +1413,7 @@ describe('ReactSuspenseList', () => {
]);
});
+ // @gate experimental
it('warns if a tail option is used with "together"', () => {
function Foo() {
return (
@@ -1417,6 +1434,7 @@ describe('ReactSuspenseList', () => {
]);
});
+ // @gate experimental
it('renders one "collapsed" fallback even if CPU time elapsed', async () => {
function Foo() {
return (
@@ -1483,6 +1501,7 @@ describe('ReactSuspenseList', () => {
);
});
+ // @gate experimental
it('adding to the middle does not collapse insertions (forwards)', async () => {
const A = createAsyncText('A');
const B = createAsyncText('B');
@@ -1625,6 +1644,7 @@ describe('ReactSuspenseList', () => {
);
});
+ // @gate experimental
it('adding to the middle does not collapse insertions (backwards)', async () => {
const A = createAsyncText('A');
const B = createAsyncText('B');
@@ -1772,6 +1792,7 @@ describe('ReactSuspenseList', () => {
);
});
+ // @gate experimental
it('adding to the middle of committed tail does not collapse insertions', async () => {
const A = createAsyncText('A');
const B = createAsyncText('B');
@@ -1929,6 +1950,7 @@ describe('ReactSuspenseList', () => {
);
});
+ // @gate experimental
it('only shows no initial loading state "hidden" tail insertions', async () => {
const A = createAsyncText('A');
const B = createAsyncText('B');
@@ -1992,6 +2014,7 @@ describe('ReactSuspenseList', () => {
);
});
+ // @gate experimental
it('eventually resolves a nested forwards suspense list', async () => {
const B = createAsyncText('B');
@@ -2054,6 +2077,7 @@ describe('ReactSuspenseList', () => {
);
});
+ // @gate experimental
it('eventually resolves a nested forwards suspense list with a hidden tail', async () => {
const B = createAsyncText('B');
@@ -2100,6 +2124,7 @@ describe('ReactSuspenseList', () => {
);
});
+ // @gate experimental
it('eventually resolves two nested forwards suspense lists with a hidden tail', async () => {
const B = createAsyncText('B');
@@ -2167,6 +2192,7 @@ describe('ReactSuspenseList', () => {
);
});
+ // @gate experimental
it('can do unrelated adjacent updates', async () => {
let updateAdjacent;
function Adjacent() {
@@ -2213,6 +2239,7 @@ describe('ReactSuspenseList', () => {
);
});
+ // @gate experimental
it('is able to re-suspend the last rows during an update with hidden', async () => {
const AsyncB = createAsyncText('B');
@@ -2301,6 +2328,7 @@ describe('ReactSuspenseList', () => {
expect(previousInst).toBe(setAsyncB);
});
+ // @gate experimental
it('is able to re-suspend the last rows during an update with hidden', async () => {
const AsyncB = createAsyncText('B');
@@ -2389,6 +2417,7 @@ describe('ReactSuspenseList', () => {
expect(previousInst).toBe(setAsyncB);
});
+ // @gate experimental
it('is able to interrupt a partially rendered tree and continue later', async () => {
const AsyncA = createAsyncText('A');
@@ -2486,6 +2515,7 @@ describe('ReactSuspenseList', () => {
);
});
+ // @gate experimental
it('can resume class components when revealed together', async () => {
const A = createAsyncText('A');
const B = createAsyncText('B');
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.internal.js
index 511777a9ea..b9520351c4 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.internal.js
@@ -11,11 +11,6 @@ let resolveText;
let rejectText;
describe('ReactSuspenseWithNoopRenderer', () => {
- if (!__EXPERIMENTAL__) {
- it("empty test so Jest doesn't complain", () => {});
- return;
- }
-
beforeEach(() => {
jest.resetModules();
@@ -922,6 +917,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
expect(ReactNoop.getChildren()).toEqual([span('Async')]);
});
+ // @gate experimental
it('starts working on an update even if its priority falls between two suspended levels', async () => {
function App(props) {
return (
@@ -2331,6 +2327,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
timeoutMs: 2000,
};
+ // @gate experimental
it('top level render', async () => {
function App({page}) {
return (
@@ -2385,6 +2382,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
expect(ReactNoop.getChildren()).toEqual([span('B')]);
});
+ // @gate experimental
it('hooks', async () => {
let transitionToPage;
function App() {
@@ -2452,6 +2450,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
expect(ReactNoop.getChildren()).toEqual([span('B')]);
});
+ // @gate experimental
it('classes', async () => {
let transitionToPage;
class App extends React.Component {
@@ -2523,6 +2522,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
});
});
+ // @gate experimental
it('disables suspense config when nothing is passed to withSuspenseConfig', async () => {
function App({page}) {
return (
@@ -2597,6 +2597,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
]);
});
+ // @gate experimental
it('withSuspenseConfig timeout applies when we use an updated avoided boundary', async () => {
function App({page}) {
return (
@@ -2645,6 +2646,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
]);
});
+ // @gate experimental
it('withSuspenseConfig timeout applies when we use a newly created avoided boundary', async () => {
function App({page}) {
return (
@@ -2692,6 +2694,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
]);
});
+ // @gate experimental
it('supports delaying a busy spinner from disappearing', async () => {
const SUSPENSE_CONFIG = {
timeoutMs: 10000,
@@ -2854,6 +2857,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
expect(root).toMatchRenderedOutput({`${label}:${snapshot}`}
;
}
- if (!__EXPERIMENTAL__) {
- it("empty test so Jest doesn't complain", () => {});
- } else {
- beforeEach(loadModules);
+ beforeEach(loadModules);
- it('should subscribe to a source and schedule updates when it changes', () => {
- const source = createSource('one');
- const mutableSource = createMutableSource(source);
+ // @gate experimental
+ it('should subscribe to a source and schedule updates when it changes', () => {
+ const source = createSource('one');
+ const mutableSource = createMutableSource(source);
- act(() => {
- ReactNoop.renderToRootWithID(
- <>
-
);
- expect(Scheduler).toFlushAndYield([]);
- });
- });
-
- it('should not throw if the new getSnapshot returns the same snapshot value', () => {
- const source = createSource('one');
- const mutableSource = createMutableSource(source);
-
- const onRenderA = jest.fn();
- const onRenderB = jest.fn();
-
- let updateGetSnapshot;
-
- function WrapperWithState() {
- const tuple = React.useState(() => defaultGetSnapshot);
- updateGetSnapshot = tuple[1];
- return (
-
-
-
- ,
- () => Scheduler.unstable_yieldValue('Sync effect'),
- );
- expect(Scheduler).toFlushAndYield(['a:one', 'b:one', 'Sync effect']);
- ReactNoop.flushPassiveEffects();
- expect(onRenderA).toHaveBeenCalledTimes(1);
- expect(onRenderB).toHaveBeenCalledTimes(1);
-
- // If B's getSnapshot function updates, but the snapshot it returns is the same,
- // only B should re-render (to update its state).
- updateGetSnapshot(() => s => defaultGetSnapshot(s));
- expect(Scheduler).toFlushAndYield(['b:one']);
- ReactNoop.flushPassiveEffects();
- expect(onRenderA).toHaveBeenCalledTimes(1);
- expect(onRenderB).toHaveBeenCalledTimes(2);
- });
- });
-
- it('should not throw if getSnapshot changes but the source can be safely read from anyway', () => {
- const source = createSource('one');
- const mutableSource = createMutableSource(source);
-
- const newGetSnapshot = s => 'new:' + defaultGetSnapshot(s);
-
- let updateGetSnapshot;
-
- function WrapperWithState() {
- const tuple = React.useState(() => defaultGetSnapshot);
- updateGetSnapshot = tuple[1];
- return (
-
- {friends.map(friend => (
-
- );
- }
-
- function Friend({id}) {
- const getSnapshot = React.useCallback(
- ({value}) => {
- // This selector is intentionally written in a way that will throw
- // if no matching friend exists in the store.
- return value.friends.find(friend => friend.id === id).name;
- },
- [id],
- );
- const name = useMutableSource(
- mutableSource,
- getSnapshot,
- defaultSubscribe,
- );
- Scheduler.unstable_yieldValue(`${id}:${name}`);
- return {name} ;
- }
-
- act(() => {
- ReactNoop.render(
);
+ expect(Scheduler).toFlushAndYield([]);
+ });
+ });
+
+ // @gate experimental
+ it('should not throw if the new getSnapshot returns the same snapshot value', () => {
+ const source = createSource('one');
+ const mutableSource = createMutableSource(source);
+
+ const onRenderA = jest.fn();
+ const onRenderB = jest.fn();
+
+ let updateGetSnapshot;
+
+ function WrapperWithState() {
+ const tuple = React.useState(() => defaultGetSnapshot);
+ updateGetSnapshot = tuple[1];
+ return (
+
+
+
+
+ ,
+ () => Scheduler.unstable_yieldValue('Sync effect'),
+ );
+ expect(Scheduler).toFlushAndYield(['a:one', 'b:one', 'Sync effect']);
+ ReactNoop.flushPassiveEffects();
+ expect(onRenderA).toHaveBeenCalledTimes(1);
+ expect(onRenderB).toHaveBeenCalledTimes(1);
+
+ // If B's getSnapshot function updates, but the snapshot it returns is the same,
+ // only B should re-render (to update its state).
+ updateGetSnapshot(() => s => defaultGetSnapshot(s));
+ expect(Scheduler).toFlushAndYield(['b:one']);
+ ReactNoop.flushPassiveEffects();
+ expect(onRenderA).toHaveBeenCalledTimes(1);
+ expect(onRenderB).toHaveBeenCalledTimes(2);
+ });
+ });
+
+ // @gate experimental
+ it('should not throw if getSnapshot changes but the source can be safely read from anyway', () => {
+ const source = createSource('one');
+ const mutableSource = createMutableSource(source);
+
+ const newGetSnapshot = s => 'new:' + defaultGetSnapshot(s);
+
+ let updateGetSnapshot;
+
+ function WrapperWithState() {
+ const tuple = React.useState(() => defaultGetSnapshot);
+ updateGetSnapshot = tuple[1];
+ return (
+
+ {friends.map(friend => (
+
+ );
+ }
+
+ function Friend({id}) {
+ const getSnapshot = React.useCallback(
+ ({value}) => {
+ // This selector is intentionally written in a way that will throw
+ // if no matching friend exists in the store.
+ return value.friends.find(friend => friend.id === id).name;
+ },
+ [id],
+ );
+ const name = useMutableSource(
+ mutableSource,
+ getSnapshot,
+ defaultSubscribe,
+ );
+ Scheduler.unstable_yieldValue(`${id}:${name}`);
+ return {name} ;
+ }
+
+ act(() => {
+ ReactNoop.render({`a:${snapshot}`}
;
- }
- function ComponentB() {
- const snapshot = useMutableSource(
- mutableSource,
- defaultGetSnapshot,
- defaultSubscribe,
- );
- Scheduler.unstable_yieldValue(`b:${snapshot}`);
- React.useEffect(() => {
- committedB = snapshot;
- }, [snapshot]);
- return {`b:${snapshot}`}
;
+ // @gate experimental
+ it('should not tear with newly mounted component when updates were scheduled at a lower priority', async () => {
+ const source = createSource('one');
+ const mutableSource = createMutableSource(source);
+
+ let committedA = null;
+ let committedB = null;
+
+ const onRender = () => {
+ if (committedB !== null) {
+ expect(committedA).toBe(committedB);
}
+ };
- // Mount ComponentA with data version 1
- act(() => {
- ReactNoop.render(
-
- ,
- () => Scheduler.unstable_yieldValue('Sync effect'),
- );
- });
- expect(Scheduler).toHaveYielded(['a:one', 'Sync effect']);
+ function ComponentA() {
+ const snapshot = useMutableSource(
+ mutableSource,
+ defaultGetSnapshot,
+ defaultSubscribe,
+ );
+ Scheduler.unstable_yieldValue(`a:${snapshot}`);
+ React.useEffect(() => {
+ committedA = snapshot;
+ }, [snapshot]);
+ return {`a:${snapshot}`}
;
+ }
+ function ComponentB() {
+ const snapshot = useMutableSource(
+ mutableSource,
+ defaultGetSnapshot,
+ defaultSubscribe,
+ );
+ Scheduler.unstable_yieldValue(`b:${snapshot}`);
+ React.useEffect(() => {
+ committedB = snapshot;
+ }, [snapshot]);
+ return {`b:${snapshot}`}
;
+ }
+
+ // Mount ComponentA with data version 1
+ act(() => {
+ ReactNoop.render(
+
+ ,
+ () => Scheduler.unstable_yieldValue('Sync effect'),
+ );
+ });
+ expect(Scheduler).toHaveYielded(['a:one', 'Sync effect']);
+ expect(source.listenerCount).toBe(1);
+
+ // Mount ComponentB with version 1 (but don't commit it)
+ act(() => {
+ ReactNoop.render(
+
+ ,
+ () => Scheduler.unstable_yieldValue('Sync effect'),
+ );
+ expect(Scheduler).toFlushAndYieldThrough([
+ 'a:one',
+ 'b:one',
+ 'Sync effect',
+ ]);
expect(source.listenerCount).toBe(1);
- // Mount ComponentB with version 1 (but don't commit it)
- act(() => {
- ReactNoop.render(
-
- ,
- () => Scheduler.unstable_yieldValue('Sync effect'),
- );
- expect(Scheduler).toFlushAndYieldThrough([
- 'a:one',
- 'b:one',
- 'Sync effect',
- ]);
- expect(source.listenerCount).toBe(1);
+ // Mutate -> schedule update for ComponentA
+ Scheduler.unstable_runWithPriority(
+ Scheduler.unstable_IdlePriority,
+ () => {
+ source.value = 'two';
+ },
+ );
- // Mutate -> schedule update for ComponentA
- Scheduler.unstable_runWithPriority(
- Scheduler.unstable_IdlePriority,
- () => {
- source.value = 'two';
- },
- );
+ // Commit ComponentB -> notice the change and schedule an update for ComponentB
+ expect(Scheduler).toFlushAndYield(['a:two', 'b:two']);
+ expect(source.listenerCount).toBe(2);
+ });
+ });
- // Commit ComponentB -> notice the change and schedule an update for ComponentB
- expect(Scheduler).toFlushAndYield(['a:two', 'b:two']);
- expect(source.listenerCount).toBe(2);
+ if (__DEV__) {
+ describe('dev warnings', () => {
+ // @gate experimental
+ it('should warn if the subscribe function does not return an unsubscribe function', () => {
+ const source = createSource('one');
+ const mutableSource = createMutableSource(source);
+
+ const brokenSubscribe = () => {};
+
+ expect(() => {
+ act(() => {
+ ReactNoop.render(
+