diff --git a/src/isomorphic/children/__tests__/ReactChildren-test.js b/src/isomorphic/children/__tests__/ReactChildren-test.js
index ad92430e622..88c68fe0aac 100644
--- a/src/isomorphic/children/__tests__/ReactChildren-test.js
+++ b/src/isomorphic/children/__tests__/ReactChildren-test.js
@@ -9,8 +9,6 @@
'use strict';
-const ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
-
describe('ReactChildren', () => {
var React;
var ReactTestUtils;
@@ -878,52 +876,50 @@ describe('ReactChildren', () => {
);
});
- if (ReactDOMFeatureFlags.useFiber) {
- describe('with fragments enabled', () => {
- it('warns for keys for arrays of elements in a fragment', () => {
- spyOn(console, 'error');
- class ComponentReturningArray extends React.Component {
- render() {
- return [, ];
- }
+ describe('with fragments enabled', () => {
+ it('warns for keys for arrays of elements in a fragment', () => {
+ spyOn(console, 'error');
+ class ComponentReturningArray extends React.Component {
+ render() {
+ return [, ];
}
+ }
- ReactTestUtils.renderIntoDocument();
+ ReactTestUtils.renderIntoDocument();
- expectDev(console.error.calls.count()).toBe(1);
- expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe(
- 'Warning: ' +
- 'Each child in an array or iterator should have a unique "key" prop.' +
- ' See https://fb.me/react-warning-keys for more information.' +
- '\n in ComponentReturningArray (at **)',
- );
- });
+ expectDev(console.error.calls.count()).toBe(1);
+ expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe(
+ 'Warning: ' +
+ 'Each child in an array or iterator should have a unique "key" prop.' +
+ ' See https://fb.me/react-warning-keys for more information.' +
+ '\n in ComponentReturningArray (at **)',
+ );
+ });
- it('does not warn when there are keys on elements in a fragment', () => {
- spyOn(console, 'error');
- class ComponentReturningArray extends React.Component {
- render() {
- return [, ];
- }
+ it('does not warn when there are keys on elements in a fragment', () => {
+ spyOn(console, 'error');
+ class ComponentReturningArray extends React.Component {
+ render() {
+ return [, ];
}
+ }
- ReactTestUtils.renderIntoDocument();
+ ReactTestUtils.renderIntoDocument();
- expectDev(console.error.calls.count()).toBe(0);
- });
+ expectDev(console.error.calls.count()).toBe(0);
+ });
- it('warns for keys for arrays at the top level', () => {
- spyOn(console, 'error');
+ it('warns for keys for arrays at the top level', () => {
+ spyOn(console, 'error');
- ReactTestUtils.renderIntoDocument([, ]);
+ ReactTestUtils.renderIntoDocument([, ]);
- expectDev(console.error.calls.count()).toBe(1);
- expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe(
- 'Warning: ' +
- 'Each child in an array or iterator should have a unique "key" prop.' +
- ' See https://fb.me/react-warning-keys for more information.',
- );
- });
+ expectDev(console.error.calls.count()).toBe(1);
+ expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe(
+ 'Warning: ' +
+ 'Each child in an array or iterator should have a unique "key" prop.' +
+ ' See https://fb.me/react-warning-keys for more information.',
+ );
});
- }
+ });
});
diff --git a/src/isomorphic/classic/element/__tests__/ReactElement-test.js b/src/isomorphic/classic/element/__tests__/ReactElement-test.js
index 935937836ac..8a296917c03 100644
--- a/src/isomorphic/classic/element/__tests__/ReactElement-test.js
+++ b/src/isomorphic/classic/element/__tests__/ReactElement-test.js
@@ -12,7 +12,6 @@
var React;
var ReactDOM;
var ReactTestUtils;
-var ReactDOMFeatureFlags;
describe('ReactElement', () => {
var ComponentClass;
@@ -29,7 +28,6 @@ describe('ReactElement', () => {
React = require('react');
ReactDOM = require('react-dom');
ReactTestUtils = require('react-dom/test-utils');
- ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
// NOTE: We're explicitly not using JSX here. This is intended to test
// classic JS without JSX.
ComponentClass = class extends React.Component {
@@ -235,12 +233,7 @@ describe('ReactElement', () => {
var instance = ReactTestUtils.renderIntoDocument(
React.createElement(Wrapper),
);
-
- if (ReactDOMFeatureFlags.useFiber) {
- expect(element._owner.stateNode).toBe(instance);
- } else {
- expect(element._owner.getPublicInstance()).toBe(instance);
- }
+ expect(element._owner.stateNode).toBe(instance);
});
it('merges an additional argument onto the children prop', () => {
diff --git a/src/renderers/__tests__/EventPluginHub-test.js b/src/renderers/__tests__/EventPluginHub-test.js
index ea4accef400..74421573dc3 100644
--- a/src/renderers/__tests__/EventPluginHub-test.js
+++ b/src/renderers/__tests__/EventPluginHub-test.js
@@ -14,13 +14,11 @@ jest.mock('isEventSupported');
describe('EventPluginHub', () => {
var React;
var ReactTestUtils;
- var ReactDOMFeatureFlags;
beforeEach(() => {
jest.resetModules();
React = require('react');
ReactTestUtils = require('react-dom/test-utils');
- ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
});
it('should prevent non-function listeners, at dispatch', () => {
@@ -33,14 +31,10 @@ describe('EventPluginHub', () => {
}).toThrowError(
'Expected `onClick` listener to be a function, instead got a value of `string` type.',
);
- if (ReactDOMFeatureFlags.useFiber) {
- expectDev(console.error.calls.count()).toBe(1);
- expectDev(console.error.calls.argsFor(0)[0]).toContain(
- 'Expected `onClick` listener to be a function, instead got a value of `string` type.',
- );
- } else {
- expectDev(console.error.calls.count()).toBe(0);
- }
+ expectDev(console.error.calls.count()).toBe(1);
+ expectDev(console.error.calls.argsFor(0)[0]).toContain(
+ 'Expected `onClick` listener to be a function, instead got a value of `string` type.',
+ );
});
it('should not prevent null listeners, at dispatch', () => {
diff --git a/src/renderers/__tests__/ReactComponent-test.js b/src/renderers/__tests__/ReactComponent-test.js
index f0db215a0ad..86a22155f36 100644
--- a/src/renderers/__tests__/ReactComponent-test.js
+++ b/src/renderers/__tests__/ReactComponent-test.js
@@ -14,8 +14,6 @@ var ReactDOM;
var ReactDOMServer;
var ReactTestUtils;
-var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
-
describe('ReactComponent', () => {
function normalizeCodeLocInfo(str) {
return str && str.replace(/\(at .+?:\d+\)/g, '(at **)');
@@ -297,21 +295,11 @@ describe('ReactComponent', () => {
'outer componentDidMount',
'start update',
// Previous (equivalent) refs get cleared
- ...(ReactDOMFeatureFlags.useFiber
- ? [
- // Fiber renders first, resets refs later
- 'inner 1 render',
- 'inner 2 render',
- 'ref 1 got null',
- 'ref 2 got null',
- ]
- : [
- // Stack resets refs before rendering
- 'ref 1 got null',
- 'inner 1 render',
- 'ref 2 got null',
- 'inner 2 render',
- ]),
+ // Fiber renders first, resets refs later
+ 'inner 1 render',
+ 'inner 2 render',
+ 'ref 1 got null',
+ 'ref 2 got null',
'inner 1 componentDidUpdate',
'ref 1 got instance 1',
'inner 2 componentDidUpdate',
@@ -406,8 +394,7 @@ describe('ReactComponent', () => {
'Objects are not valid as a React child (found: object with keys ' +
'{x, y, z}). If you meant to render a collection of children, use ' +
'an array instead.' +
- // Fiber gives a slightly better stack with the nearest host components
- (ReactDOMFeatureFlags.useFiber ? '\n in div (at **)' : ''),
+ '\n in div (at **)',
);
});
@@ -434,8 +421,7 @@ describe('ReactComponent', () => {
'Objects are not valid as a React child (found: object with keys ' +
'{a, b, c}). If you meant to render a collection of children, use ' +
'an array instead.\n' +
- // Fiber gives a slightly better stack with the nearest host components
- (ReactDOMFeatureFlags.useFiber ? ' in div (at **)\n' : '') +
+ ' in div (at **)\n' +
' in Foo (at **)',
);
});
@@ -458,8 +444,7 @@ describe('ReactComponent', () => {
'Objects are not valid as a React child (found: object with keys ' +
'{x, y, z}). If you meant to render a collection of children, use ' +
'an array instead.' +
- // Fiber gives a slightly better stack with the nearest host components
- (ReactDOMFeatureFlags.useFiber ? '\n in div (at **)' : ''),
+ '\n in div (at **)',
);
});
@@ -486,79 +471,76 @@ describe('ReactComponent', () => {
'Objects are not valid as a React child (found: object with keys ' +
'{a, b, c}). If you meant to render a collection of children, use ' +
'an array instead.\n' +
- // Fiber gives a slightly better stack with the nearest host components
- (ReactDOMFeatureFlags.useFiber ? ' in div (at **)\n' : '') +
+ ' in div (at **)\n' +
' in Foo (at **)',
);
});
- if (ReactDOMFeatureFlags.useFiber) {
- describe('with new features', () => {
- it('warns on function as a return value from a function', () => {
- function Foo() {
- return Foo;
- }
- spyOn(console, 'error');
- var container = document.createElement('div');
- ReactDOM.render(, container);
- expectDev(console.error.calls.count()).toBe(1);
- expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe(
- 'Warning: Functions are not valid as a React child. This may happen if ' +
- 'you return a Component instead of from render. ' +
- 'Or maybe you meant to call this function rather than return it.\n' +
- ' in Foo (at **)',
- );
- });
+ describe('with new features', () => {
+ it('warns on function as a return value from a function', () => {
+ function Foo() {
+ return Foo;
+ }
+ spyOn(console, 'error');
+ var container = document.createElement('div');
+ ReactDOM.render(, container);
+ expectDev(console.error.calls.count()).toBe(1);
+ expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe(
+ 'Warning: Functions are not valid as a React child. This may happen if ' +
+ 'you return a Component instead of from render. ' +
+ 'Or maybe you meant to call this function rather than return it.\n' +
+ ' in Foo (at **)',
+ );
+ });
- it('warns on function as a return value from a class', () => {
- class Foo extends React.Component {
- render() {
- return Foo;
- }
+ it('warns on function as a return value from a class', () => {
+ class Foo extends React.Component {
+ render() {
+ return Foo;
}
- spyOn(console, 'error');
- var container = document.createElement('div');
- ReactDOM.render(, container);
- expectDev(console.error.calls.count()).toBe(1);
- expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe(
- 'Warning: Functions are not valid as a React child. This may happen if ' +
- 'you return a Component instead of from render. ' +
- 'Or maybe you meant to call this function rather than return it.\n' +
- ' in Foo (at **)',
- );
- });
+ }
+ spyOn(console, 'error');
+ var container = document.createElement('div');
+ ReactDOM.render(, container);
+ expectDev(console.error.calls.count()).toBe(1);
+ expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe(
+ 'Warning: Functions are not valid as a React child. This may happen if ' +
+ 'you return a Component instead of from render. ' +
+ 'Or maybe you meant to call this function rather than return it.\n' +
+ ' in Foo (at **)',
+ );
+ });
- it('warns on function as a child to host component', () => {
- function Foo() {
- return
{Foo}
;
- }
- spyOn(console, 'error');
- var container = document.createElement('div');
- ReactDOM.render(, container);
- expectDev(console.error.calls.count()).toBe(1);
- expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe(
- 'Warning: Functions are not valid as a React child. This may happen if ' +
- 'you return a Component instead of from render. ' +
- 'Or maybe you meant to call this function rather than return it.\n' +
- ' in span (at **)\n' +
- ' in div (at **)\n' +
- ' in Foo (at **)',
- );
- });
+ it('warns on function as a child to host component', () => {
+ function Foo() {
+ return
{Foo}
;
+ }
+ spyOn(console, 'error');
+ var container = document.createElement('div');
+ ReactDOM.render(, container);
+ expectDev(console.error.calls.count()).toBe(1);
+ expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe(
+ 'Warning: Functions are not valid as a React child. This may happen if ' +
+ 'you return a Component instead of from render. ' +
+ 'Or maybe you meant to call this function rather than return it.\n' +
+ ' in span (at **)\n' +
+ ' in div (at **)\n' +
+ ' in Foo (at **)',
+ );
+ });
- it('does not warn for function-as-a-child that gets resolved', () => {
- function Bar(props) {
- return props.children();
- }
- function Foo() {
- return {() => 'Hello'};
- }
- spyOn(console, 'error');
- var container = document.createElement('div');
- ReactDOM.render(, container);
- expect(container.innerHTML).toBe('Hello');
- expectDev(console.error.calls.count()).toBe(0);
- });
+ it('does not warn for function-as-a-child that gets resolved', () => {
+ function Bar(props) {
+ return props.children();
+ }
+ function Foo() {
+ return {() => 'Hello'};
+ }
+ spyOn(console, 'error');
+ var container = document.createElement('div');
+ ReactDOM.render(, container);
+ expect(container.innerHTML).toBe('Hello');
+ expectDev(console.error.calls.count()).toBe(0);
});
- }
+ });
});
diff --git a/src/renderers/__tests__/ReactComponentTreeHook-test.js b/src/renderers/__tests__/ReactComponentTreeHook-test.js
index 76a55135497..06b1fe07a7c 100644
--- a/src/renderers/__tests__/ReactComponentTreeHook-test.js
+++ b/src/renderers/__tests__/ReactComponentTreeHook-test.js
@@ -9,13 +9,9 @@
'use strict';
-var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
-var describeStack = ReactDOMFeatureFlags.useFiber ? describe.skip : describe;
-
-describe('ReactComponentTreeHook', () => {
+describe.skip('ReactComponentTreeHook', () => {
var React;
var ReactDOM;
- var ReactDOMServer;
var ReactInstanceMap;
var ReactComponentTreeHook;
var ReactDebugCurrentFiber;
@@ -26,7 +22,6 @@ describe('ReactComponentTreeHook', () => {
React = require('react');
ReactDOM = require('react-dom');
- ReactDOMServer = require('react-dom/server');
ReactInstanceMap = require('ReactInstanceMap');
ReactDebugCurrentFiber = require('ReactDebugCurrentFiber');
ReactComponentTreeHook = require('ReactComponentTreeHook');
@@ -37,9 +32,8 @@ describe('ReactComponentTreeHook', () => {
describe('stack addenda', () => {
it('gets created', () => {
function getAddendum(element) {
- var addendum = ReactDOMFeatureFlags.useFiber
- ? ReactDebugCurrentFiber.getCurrentFiberStackAddendum() || ''
- : ReactComponentTreeHook.getCurrentStackAddendum();
+ var addendum =
+ ReactDebugCurrentFiber.getCurrentFiberStackAddendum() || '';
return addendum.replace(/\(at .+?:\d+\)/g, '(at **)');
}
@@ -107,68 +101,6 @@ describe('ReactComponentTreeHook', () => {
// Make sure owner is fetched for the top element too.
// expectDev(getAddendum(rOwnedByQ)).toBe('\n in R (created by Q)');
});
-
- // These are features and regression tests that only affect
- // the Stack implementation of the stack addendum.
- if (!ReactDOMFeatureFlags.useFiber) {
- it('can be retrieved by ID', () => {
- function getAddendum(id) {
- var addendum = ReactComponentTreeHook.getStackAddendumByID(id);
- return addendum.replace(/\(at .+?:\d+\)/g, '(at **)');
- }
-
- class Q extends React.Component {
- render() {
- return null;
- }
- }
-
- var q = ReactDOM.render(, document.createElement('div'));
- expectDev(getAddendum(ReactInstanceMap.get(q)._debugID)).toBe(
- '\n in Q (at **)',
- );
-
- spyOn(console, 'error');
- getAddendum(-17);
- expectDev(console.error.calls.count()).toBe(1);
- expectDev(console.error.calls.argsFor(0)[0]).toBe(
- 'Warning: ReactComponentTreeHook: Missing React element for ' +
- 'debugID -17 when building stack',
- );
- });
-
- it('is created during mounting', () => {
- // https://github.com/facebook/react/issues/7187
- var el = document.createElement('div');
- var portalEl = document.createElement('div');
- class Foo extends React.Component {
- componentWillMount() {
- ReactDOM.render(, portalEl);
- }
- render() {
- return
;
- }
- }
- ReactDOM.render(, el);
- });
-
- it('is created when calling renderToString during render', () => {
- // https://github.com/facebook/react/issues/7190
- var el = document.createElement('div');
- class Foo extends React.Component {
- render() {
- return (
-
-
- {ReactDOMServer.renderToString()}
-
-
- );
- }
- }
- ReactDOM.render(, el);
- });
- }
});
// The rest of this file is not relevant for Fiber.
@@ -227,7 +159,7 @@ describe('ReactComponentTreeHook', () => {
expectWrapperTreeToEqual(null);
}
- describeStack('mount', () => {
+ describe('mount', () => {
it('uses displayName or Unknown for classic components', () => {
class Foo extends React.Component {
render() {
@@ -699,7 +631,7 @@ describe('ReactComponentTreeHook', () => {
});
});
- describeStack('update', () => {
+ describe('update', () => {
describe('host component', () => {
it('updates text of a single text child', () => {
var elementBefore =
Hi.
;
@@ -1919,7 +1851,7 @@ describe('ReactComponentTreeHook', () => {
});
});
- describeStack('misc', () => {
+ describe('misc', () => {
it('tracks owner correctly', () => {
class Foo extends React.Component {
render() {
@@ -2089,7 +2021,7 @@ describe('ReactComponentTreeHook', () => {
});
});
- describeStack('in environment without Map, Set and Array.from', () => {
+ describe('in environment without Map, Set and Array.from', () => {
var realMap;
var realSet;
var realArrayFrom;
@@ -2107,7 +2039,6 @@ describe('ReactComponentTreeHook', () => {
React = require('react');
ReactDOM = require('react-dom');
- ReactDOMServer = require('react-dom/server');
ReactInstanceMap = require('ReactInstanceMap');
ReactComponentTreeHook = require('ReactComponentTreeHook');
ReactComponentTreeTestUtils = require('ReactComponentTreeTestUtils');
diff --git a/src/renderers/__tests__/ReactCompositeComponent-test.js b/src/renderers/__tests__/ReactCompositeComponent-test.js
index 2fb20852167..75f3e8060f3 100644
--- a/src/renderers/__tests__/ReactCompositeComponent-test.js
+++ b/src/renderers/__tests__/ReactCompositeComponent-test.js
@@ -13,7 +13,6 @@ var ChildUpdates;
var MorphingComponent;
var React;
var ReactDOM;
-var ReactDOMFeatureFlags;
var ReactDOMServer;
var ReactCurrentOwner;
var ReactTestUtils;
@@ -26,7 +25,6 @@ describe('ReactCompositeComponent', () => {
jest.resetModules();
React = require('react');
ReactDOM = require('react-dom');
- ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
ReactDOMServer = require('react-dom/server');
ReactCurrentOwner = require('react')
.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner;
@@ -123,25 +121,19 @@ describe('ReactCompositeComponent', () => {
var container = document.createElement('div');
container.innerHTML = markup;
ReactDOM.render(, container);
- if (ReactDOMFeatureFlags.useFiber) {
- expectDev(console.warn.calls.count()).toBe(1);
- expectDev(console.warn.calls.argsFor(0)[0]).toContain(
- 'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' +
- 'will stop working in React v17. Replace the ReactDOM.render() call ' +
- 'with ReactDOM.hydrate() if you want React to attach to the server HTML.',
- );
- } else {
- expectDev(console.warn.calls.count()).toBe(0);
- }
+ expectDev(console.warn.calls.count()).toBe(1);
+ expectDev(console.warn.calls.argsFor(0)[0]).toContain(
+ 'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' +
+ 'will stop working in React v17. Replace the ReactDOM.render() call ' +
+ 'with ReactDOM.hydrate() if you want React to attach to the server HTML.',
+ );
// New explicit API
console.warn.calls.reset();
- if (ReactDOMFeatureFlags.useFiber) {
- container = document.createElement('div');
- container.innerHTML = markup;
- ReactDOM.hydrate(, container);
- expectDev(console.warn.calls.count()).toBe(0);
- }
+ container = document.createElement('div');
+ container.innerHTML = markup;
+ ReactDOM.hydrate(, container);
+ expectDev(console.warn.calls.count()).toBe(0);
});
it('should react to state changes from callbacks', () => {
diff --git a/src/renderers/__tests__/ReactCompositeComponentState-test.js b/src/renderers/__tests__/ReactCompositeComponentState-test.js
index 277dd119cab..e2e04fa70fe 100644
--- a/src/renderers/__tests__/ReactCompositeComponentState-test.js
+++ b/src/renderers/__tests__/ReactCompositeComponentState-test.js
@@ -11,7 +11,6 @@
var React;
var ReactDOM;
-var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
var TestComponent;
@@ -179,17 +178,9 @@ describe('ReactCompositeComponent-state', () => {
// setState({color:'green'}) only enqueues a pending state.
['componentWillReceiveProps-end', 'yellow'],
// pending state queue is processed
- ];
-
- if (ReactDOMFeatureFlags.useFiber) {
- // In Stack, this is never called because replaceState drops all updates
- // from the queue. In Fiber, we keep updates in the queue to support
+ // We keep updates in the queue to support
// replaceState(prevState => newState).
- // TODO: Fix Stack to match Fiber.
- expected.push(['before-setState-receiveProps', 'yellow']);
- }
-
- expected.push(
+ ['before-setState-receiveProps', 'yellow'],
['before-setState-again-receiveProps', undefined],
['after-setState-receiveProps', 'green'],
['shouldComponentUpdate-currentState', 'yellow'],
@@ -220,7 +211,7 @@ describe('ReactCompositeComponent-state', () => {
// unmountComponent()
// state is available within `componentWillUnmount()`
['componentWillUnmount', 'blue'],
- );
+ ];
expect(stateListener.mock.calls.join('\n')).toEqual(expected.join('\n'));
});
@@ -289,20 +280,7 @@ describe('ReactCompositeComponent-state', () => {
child.setState({bar: false});
});
// We expect the same thing to happen if we bail out in the middle.
- expect(ops).toEqual(
- ReactDOMFeatureFlags.useFiber
- ? [
- // Fiber works as expected
- 'child did update',
- 'parent did update',
- ]
- : [
- // Stack treats these as two separate updates and therefore the order
- // is inverse.
- 'parent did update',
- 'child did update',
- ],
- );
+ expect(ops).toEqual(['child did update', 'parent did update']);
});
it('should batch unmounts', () => {
@@ -445,45 +423,43 @@ describe('ReactCompositeComponent-state', () => {
);
});
- if (ReactDOMFeatureFlags.useFiber) {
- it('should treat assigning to this.state inside cWM as a replaceState, with a warning', () => {
- spyOn(console, 'error');
-
- let ops = [];
- class Test extends React.Component {
- state = {step: 1, extra: true};
- componentWillMount() {
- this.setState({step: 2}, () => {
- // Tests that earlier setState callbacks are not dropped
- ops.push(
- `callback -- step: ${this.state.step}, extra: ${!!this.state.extra}`,
- );
- });
- // Treat like replaceState
- this.state = {step: 3};
- }
- render() {
+ it('should treat assigning to this.state inside cWM as a replaceState, with a warning', () => {
+ spyOn(console, 'error');
+
+ let ops = [];
+ class Test extends React.Component {
+ state = {step: 1, extra: true};
+ componentWillMount() {
+ this.setState({step: 2}, () => {
+ // Tests that earlier setState callbacks are not dropped
ops.push(
- `render -- step: ${this.state.step}, extra: ${!!this.state.extra}`,
+ `callback -- step: ${this.state.step}, extra: ${!!this.state.extra}`,
);
- return null;
- }
+ });
+ // Treat like replaceState
+ this.state = {step: 3};
}
+ render() {
+ ops.push(
+ `render -- step: ${this.state.step}, extra: ${!!this.state.extra}`,
+ );
+ return null;
+ }
+ }
- // Mount
- const container = document.createElement('div');
- ReactDOM.render(, container);
-
- expect(ops).toEqual([
- 'render -- step: 3, extra: false',
- 'callback -- step: 3, extra: false',
- ]);
- expect(console.error.calls.count()).toEqual(1);
- expect(console.error.calls.argsFor(0)[0]).toEqual(
- 'Warning: Test.componentWillMount(): Assigning directly to ' +
- "this.state is deprecated (except inside a component's constructor). " +
- 'Use setState instead.',
- );
- });
- }
+ // Mount
+ const container = document.createElement('div');
+ ReactDOM.render(, container);
+
+ expect(ops).toEqual([
+ 'render -- step: 3, extra: false',
+ 'callback -- step: 3, extra: false',
+ ]);
+ expect(console.error.calls.count()).toEqual(1);
+ expect(console.error.calls.argsFor(0)[0]).toEqual(
+ 'Warning: Test.componentWillMount(): Assigning directly to ' +
+ "this.state is deprecated (except inside a component's constructor). " +
+ 'Use setState instead.',
+ );
+ });
});
diff --git a/src/renderers/__tests__/ReactEmptyComponent-test.js b/src/renderers/__tests__/ReactEmptyComponent-test.js
index d911008ba00..e8a61a6833f 100644
--- a/src/renderers/__tests__/ReactEmptyComponent-test.js
+++ b/src/renderers/__tests__/ReactEmptyComponent-test.js
@@ -14,8 +14,6 @@ var ReactDOM;
var ReactTestUtils;
var TogglingComponent;
-var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
-
var log;
describe('ReactEmptyComponent', () => {
@@ -69,20 +67,18 @@ describe('ReactEmptyComponent', () => {
expect(container2.children.length).toBe(0);
});
- if (ReactDOMFeatureFlags.useFiber) {
- it('should still throw when rendering to undefined', () => {
- class Component extends React.Component {
- render() {}
- }
+ it('should still throw when rendering to undefined', () => {
+ class Component extends React.Component {
+ render() {}
+ }
- expect(function() {
- ReactTestUtils.renderIntoDocument();
- }).toThrowError(
- 'Component(...): Nothing was returned from render. This usually means a return statement is missing. ' +
- 'Or, to render nothing, return null.',
- );
- });
- }
+ expect(function() {
+ ReactTestUtils.renderIntoDocument();
+ }).toThrowError(
+ 'Component(...): Nothing was returned from render. This usually means a return statement is missing. ' +
+ 'Or, to render nothing, return null.',
+ );
+ });
it('should be able to switch between rendering null and a normal tag', () => {
var instance1 = (
@@ -233,15 +229,8 @@ describe('ReactEmptyComponent', () => {
it('can render null at the top level', () => {
var div = document.createElement('div');
- if (ReactDOMFeatureFlags.useFiber) {
- ReactDOM.render(null, div);
- expect(div.innerHTML).toBe('');
- } else {
- // Stack does not implement this.
- expect(function() {
- ReactDOM.render(null, div);
- }).toThrowError('ReactDOM.render(): Invalid component element.');
- }
+ ReactDOM.render(null, div);
+ expect(div.innerHTML).toBe('');
});
it('does not break when updating during mount', () => {
@@ -293,21 +282,11 @@ describe('ReactEmptyComponent', () => {
ReactDOM.render(, container);
var noscript1 = container.firstChild;
- if (ReactDOMFeatureFlags.useFiber) {
- expect(noscript1).toBe(null);
- } else {
- expect(noscript1.nodeName).toBe('#comment');
- }
+ expect(noscript1).toBe(null);
// This update shouldn't create a DOM node
ReactDOM.render(, container);
var noscript2 = container.firstChild;
- if (ReactDOMFeatureFlags.useFiber) {
- expect(noscript1).toBe(null);
- } else {
- expect(noscript2.nodeName).toBe('#comment');
- }
-
- expect(noscript1).toBe(noscript2);
+ expect(noscript2).toBe(null);
});
});
diff --git a/src/renderers/__tests__/ReactErrorBoundaries-test.js b/src/renderers/__tests__/ReactErrorBoundaries-test.js
index 826faf37f9d..0442b570ef8 100644
--- a/src/renderers/__tests__/ReactErrorBoundaries-test.js
+++ b/src/renderers/__tests__/ReactErrorBoundaries-test.js
@@ -9,8 +9,6 @@
'use strict';
-var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
-
var PropTypes;
var React;
var ReactDOM;
@@ -399,12 +397,7 @@ describe('ReactErrorBoundaries', () => {
log.push('NoopErrorBoundary componentWillUnmount');
}
componentDidCatch() {
- if (ReactDOMFeatureFlags.useFiber) {
- log.push('NoopErrorBoundary componentDidCatch');
- } else {
- // In Stack, not calling setState() is treated as a rethrow.
- log.push('NoopErrorBoundary componentDidCatch [*]');
- }
+ log.push('NoopErrorBoundary componentDidCatch');
}
};
@@ -507,14 +500,9 @@ describe('ReactErrorBoundaries', () => {
log.push('RetryErrorBoundary componentWillUnmount');
}
componentDidCatch(error) {
- if (ReactDOMFeatureFlags.useFiber) {
- log.push('RetryErrorBoundary componentDidCatch [!]');
- // In Fiber, calling setState() (and failing) is treated as a rethrow.
- this.setState({});
- } else {
- log.push('RetryErrorBoundary componentDidCatch [*]');
- // In Stack, not calling setState() is treated as a rethrow.
- }
+ log.push('RetryErrorBoundary componentDidCatch [!]');
+ // In Fiber, calling setState() (and failing) is treated as a rethrow.
+ this.setState({});
}
};
@@ -639,22 +627,13 @@ describe('ReactErrorBoundaries', () => {
'BrokenRender constructor',
'BrokenRender componentWillMount',
'BrokenRender render [!]',
- ...(ReactDOMFeatureFlags.useFiber
- ? [
- // Fiber mounts with null children before capturing error
- 'ErrorBoundary componentDidMount',
- // Catch and render an error message
- 'ErrorBoundary componentDidCatch',
- 'ErrorBoundary componentWillUpdate',
- 'ErrorBoundary render error',
- 'ErrorBoundary componentDidUpdate',
- ]
- : [
- // Catch and render an error message
- 'ErrorBoundary componentDidCatch',
- 'ErrorBoundary render error',
- 'ErrorBoundary componentDidMount',
- ]),
+ // Fiber mounts with null children before capturing error
+ 'ErrorBoundary componentDidMount',
+ // Catch and render an error message
+ 'ErrorBoundary componentDidCatch',
+ 'ErrorBoundary componentWillUpdate',
+ 'ErrorBoundary render error',
+ 'ErrorBoundary componentDidUpdate',
]);
log.length = 0;
@@ -676,22 +655,13 @@ describe('ReactErrorBoundaries', () => {
'ErrorBoundary componentWillMount',
'ErrorBoundary render success',
'BrokenConstructor constructor [!]',
- ...(ReactDOMFeatureFlags.useFiber
- ? [
- // Fiber mounts with null children before capturing error
- 'ErrorBoundary componentDidMount',
- // Catch and render an error message
- 'ErrorBoundary componentDidCatch',
- 'ErrorBoundary componentWillUpdate',
- 'ErrorBoundary render error',
- 'ErrorBoundary componentDidUpdate',
- ]
- : [
- // Catch and render an error message
- 'ErrorBoundary componentDidCatch',
- 'ErrorBoundary render error',
- 'ErrorBoundary componentDidMount',
- ]),
+ // Fiber mounts with null children before capturing error
+ 'ErrorBoundary componentDidMount',
+ // Catch and render an error message
+ 'ErrorBoundary componentDidCatch',
+ 'ErrorBoundary componentWillUpdate',
+ 'ErrorBoundary render error',
+ 'ErrorBoundary componentDidUpdate',
]);
log.length = 0;
@@ -714,20 +684,11 @@ describe('ReactErrorBoundaries', () => {
'ErrorBoundary render success',
'BrokenComponentWillMount constructor',
'BrokenComponentWillMount componentWillMount [!]',
- ...(ReactDOMFeatureFlags.useFiber
- ? [
- 'ErrorBoundary componentDidMount',
- 'ErrorBoundary componentDidCatch',
- 'ErrorBoundary componentWillUpdate',
- 'ErrorBoundary render error',
- 'ErrorBoundary componentDidUpdate',
- ]
- : [
- // Catch and render an error message
- 'ErrorBoundary componentDidCatch',
- 'ErrorBoundary render error',
- 'ErrorBoundary componentDidMount',
- ]),
+ 'ErrorBoundary componentDidMount',
+ 'ErrorBoundary componentDidCatch',
+ 'ErrorBoundary componentWillUpdate',
+ 'ErrorBoundary render error',
+ 'ErrorBoundary componentDidUpdate',
]);
log.length = 0;
@@ -806,29 +767,15 @@ describe('ReactErrorBoundaries', () => {
'BrokenRender constructor',
'BrokenRender componentWillMount',
'BrokenRender render [!]',
- ...(ReactDOMFeatureFlags.useFiber
- ? [
- 'ErrorBoundary componentDidMount',
- 'ErrorBoundary componentDidCatch',
- 'ErrorBoundary componentWillUpdate',
- 'ErrorBoundary render error',
- 'ErrorMessage constructor',
- 'ErrorMessage componentWillMount',
- 'ErrorMessage render',
- 'ErrorMessage componentDidMount',
- 'ErrorBoundary componentDidUpdate',
- ]
- : [
- // Handle the error:
- 'ErrorBoundary componentDidCatch',
- 'ErrorBoundary render error',
- // Mount the error message:
- 'ErrorMessage constructor',
- 'ErrorMessage componentWillMount',
- 'ErrorMessage render',
- 'ErrorMessage componentDidMount',
- 'ErrorBoundary componentDidMount',
- ]),
+ 'ErrorBoundary componentDidMount',
+ 'ErrorBoundary componentDidCatch',
+ 'ErrorBoundary componentWillUpdate',
+ 'ErrorBoundary render error',
+ 'ErrorMessage constructor',
+ 'ErrorMessage componentWillMount',
+ 'ErrorMessage render',
+ 'ErrorMessage componentDidMount',
+ 'ErrorBoundary componentDidUpdate',
]);
log.length = 0;
@@ -860,39 +807,22 @@ describe('ReactErrorBoundaries', () => {
'BrokenRender constructor',
'BrokenRender componentWillMount',
'BrokenRender render [!]',
- ...(ReactDOMFeatureFlags.useFiber
- ? [
- // In Fiber, failed error boundaries render null before attempting to recover
- 'RetryErrorBoundary componentDidMount',
- 'RetryErrorBoundary componentDidCatch [!]',
- 'ErrorBoundary componentDidMount',
- // Retry
- 'RetryErrorBoundary render',
- 'BrokenRender constructor',
- 'BrokenRender componentWillMount',
- 'BrokenRender render [!]',
- // This time, the error propagates to the higher boundary
- 'RetryErrorBoundary componentWillUnmount',
- 'ErrorBoundary componentDidCatch',
- // Render the error
- 'ErrorBoundary componentWillUpdate',
- 'ErrorBoundary render error',
- 'ErrorBoundary componentDidUpdate',
- ]
- : [
- // The first error boundary catches the error.
- // However, it doesn't adjust its state so next render will also fail.
- 'RetryErrorBoundary componentDidCatch [*]',
- 'RetryErrorBoundary render',
- 'BrokenRender constructor',
- 'BrokenRender componentWillMount',
- 'BrokenRender render [!]',
- // This time, the error propagates to the higher boundary
- 'ErrorBoundary componentDidCatch',
- // Render the error
- 'ErrorBoundary render error',
- 'ErrorBoundary componentDidMount',
- ]),
+ // In Fiber, failed error boundaries render null before attempting to recover
+ 'RetryErrorBoundary componentDidMount',
+ 'RetryErrorBoundary componentDidCatch [!]',
+ 'ErrorBoundary componentDidMount',
+ // Retry
+ 'RetryErrorBoundary render',
+ 'BrokenRender constructor',
+ 'BrokenRender componentWillMount',
+ 'BrokenRender render [!]',
+ // This time, the error propagates to the higher boundary
+ 'RetryErrorBoundary componentWillUnmount',
+ 'ErrorBoundary componentDidCatch',
+ // Render the error
+ 'ErrorBoundary componentWillUpdate',
+ 'ErrorBoundary render error',
+ 'ErrorBoundary componentDidUpdate',
]);
log.length = 0;
@@ -916,20 +846,11 @@ describe('ReactErrorBoundaries', () => {
'BrokenComponentWillMountErrorBoundary constructor',
'BrokenComponentWillMountErrorBoundary componentWillMount [!]',
// The error propagates to the higher boundary
- ...(ReactDOMFeatureFlags.useFiber
- ? [
- 'ErrorBoundary componentDidMount',
- 'ErrorBoundary componentDidCatch',
- 'ErrorBoundary componentWillUpdate',
- 'ErrorBoundary render error',
- 'ErrorBoundary componentDidUpdate',
- ]
- : [
- 'ErrorBoundary componentDidCatch',
- // Render the error
- 'ErrorBoundary render error',
- 'ErrorBoundary componentDidMount',
- ]),
+ 'ErrorBoundary componentDidMount',
+ 'ErrorBoundary componentDidCatch',
+ 'ErrorBoundary componentWillUpdate',
+ 'ErrorBoundary render error',
+ 'ErrorBoundary componentDidUpdate',
]);
log.length = 0;
@@ -960,31 +881,19 @@ describe('ReactErrorBoundaries', () => {
'BrokenRender render [!]',
// The first error boundary catches the error
// It adjusts state but throws displaying the message
- ...(ReactDOMFeatureFlags.useFiber
- ? [
- // Finish mounting with null children
- 'BrokenRenderErrorBoundary componentDidMount',
- // Attempt to handle the error
- 'BrokenRenderErrorBoundary componentDidCatch',
- 'ErrorBoundary componentDidMount',
- 'BrokenRenderErrorBoundary render error [!]',
- // Boundary fails with new error, propagate to next boundary
- 'BrokenRenderErrorBoundary componentWillUnmount',
- // Attempt to handle the error again
- 'ErrorBoundary componentDidCatch',
- 'ErrorBoundary componentWillUpdate',
- 'ErrorBoundary render error',
- 'ErrorBoundary componentDidUpdate',
- ]
- : [
- 'BrokenRenderErrorBoundary componentDidCatch',
- 'BrokenRenderErrorBoundary render error [!]',
- // The error propagates to the higher boundary
- 'ErrorBoundary componentDidCatch',
- // Render the error
- 'ErrorBoundary render error',
- 'ErrorBoundary componentDidMount',
- ]),
+ // Finish mounting with null children
+ 'BrokenRenderErrorBoundary componentDidMount',
+ // Attempt to handle the error
+ 'BrokenRenderErrorBoundary componentDidCatch',
+ 'ErrorBoundary componentDidMount',
+ 'BrokenRenderErrorBoundary render error [!]',
+ // Boundary fails with new error, propagate to next boundary
+ 'BrokenRenderErrorBoundary componentWillUnmount',
+ // Attempt to handle the error again
+ 'ErrorBoundary componentDidCatch',
+ 'ErrorBoundary componentWillUpdate',
+ 'ErrorBoundary render error',
+ 'ErrorBoundary componentDidUpdate',
]);
log.length = 0;
@@ -1015,23 +924,14 @@ describe('ReactErrorBoundaries', () => {
'BrokenRender constructor',
'BrokenRender componentWillMount',
'BrokenRender render [!]',
- ...(ReactDOMFeatureFlags.useFiber
- ? [
- // Finish mounting with null children
- 'ErrorBoundary componentDidMount',
- // Handle the error
- 'ErrorBoundary componentDidCatch',
- // Render the error message
- 'ErrorBoundary componentWillUpdate',
- 'ErrorBoundary render error',
- 'ErrorBoundary componentDidUpdate',
- ]
- : [
- 'ErrorBoundary componentDidCatch',
- // Render the error message
- 'ErrorBoundary render error',
- 'ErrorBoundary componentDidMount',
- ]),
+ // Finish mounting with null children
+ 'ErrorBoundary componentDidMount',
+ // Handle the error
+ 'ErrorBoundary componentDidCatch',
+ // Render the error message
+ 'ErrorBoundary componentWillUpdate',
+ 'ErrorBoundary render error',
+ 'ErrorBoundary componentDidUpdate',
]);
log.length = 0;
@@ -1064,28 +964,15 @@ describe('ReactErrorBoundaries', () => {
'BrokenRender componentWillMount',
'BrokenRender render [!]',
// Handle error:
- ...(ReactDOMFeatureFlags.useFiber
- ? [
- // Finish mounting with null children
- 'ErrorBoundary componentDidMount',
- // Handle the error
- 'ErrorBoundary componentDidCatch',
- // Render the error message
- 'ErrorBoundary componentWillUpdate',
- 'ErrorBoundary render error',
- 'Error message ref is set to [object HTMLDivElement]',
- 'ErrorBoundary componentDidUpdate',
- ]
- : [
- 'ErrorBoundary componentDidCatch',
- // Stack reconciler resets ref on update, as it doesn't know ref was never set.
- // This is unnecessary, and Fiber doesn't do it:
- 'Child ref is set to null',
- 'ErrorBoundary render error',
- // Ref to error message should get set:
- 'Error message ref is set to [object HTMLDivElement]',
- 'ErrorBoundary componentDidMount',
- ]),
+ // Finish mounting with null children
+ 'ErrorBoundary componentDidMount',
+ // Handle the error
+ 'ErrorBoundary componentDidCatch',
+ // Render the error message
+ 'ErrorBoundary componentWillUpdate',
+ 'ErrorBoundary render error',
+ 'Error message ref is set to [object HTMLDivElement]',
+ 'ErrorBoundary componentDidUpdate',
]);
log.length = 0;
@@ -1149,26 +1036,15 @@ describe('ReactErrorBoundaries', () => {
'Normal2 render',
// BrokenConstructor will abort rendering:
'BrokenConstructor constructor [!]',
- ...(ReactDOMFeatureFlags.useFiber
- ? [
- // Finish updating with null children
- 'Normal componentWillUnmount',
- 'ErrorBoundary componentDidUpdate',
- // Handle the error
- 'ErrorBoundary componentDidCatch',
- // Render the error message
- 'ErrorBoundary componentWillUpdate',
- 'ErrorBoundary render error',
- 'ErrorBoundary componentDidUpdate',
- ]
- : [
- 'ErrorBoundary componentDidCatch',
- // Stack unmounts first, then renders:
- 'Normal componentWillUnmount',
- 'ErrorBoundary render error',
- // Normal2 does not get lifefycle because it was never mounted
- 'ErrorBoundary componentDidUpdate',
- ]),
+ // Finish updating with null children
+ 'Normal componentWillUnmount',
+ 'ErrorBoundary componentDidUpdate',
+ // Handle the error
+ 'ErrorBoundary componentDidCatch',
+ // Render the error message
+ 'ErrorBoundary componentWillUpdate',
+ 'ErrorBoundary render error',
+ 'ErrorBoundary componentDidUpdate',
]);
log.length = 0;
@@ -1209,26 +1085,15 @@ describe('ReactErrorBoundaries', () => {
// BrokenComponentWillMount will abort rendering:
'BrokenComponentWillMount constructor',
'BrokenComponentWillMount componentWillMount [!]',
- ...(ReactDOMFeatureFlags.useFiber
- ? [
- // Finish updating with null children
- 'Normal componentWillUnmount',
- 'ErrorBoundary componentDidUpdate',
- // Handle the error
- 'ErrorBoundary componentDidCatch',
- // Render the error message
- 'ErrorBoundary componentWillUpdate',
- 'ErrorBoundary render error',
- 'ErrorBoundary componentDidUpdate',
- ]
- : [
- 'ErrorBoundary componentDidCatch',
- // Stack unmounts first, then renders:
- 'Normal componentWillUnmount',
- 'ErrorBoundary render error',
- // Normal2 does not get lifefycle because it was never mounted
- 'ErrorBoundary componentDidUpdate',
- ]),
+ // Finish updating with null children
+ 'Normal componentWillUnmount',
+ 'ErrorBoundary componentDidUpdate',
+ // Handle the error
+ 'ErrorBoundary componentDidCatch',
+ // Render the error message
+ 'ErrorBoundary componentWillUpdate',
+ 'ErrorBoundary render error',
+ 'ErrorBoundary componentDidUpdate',
]);
log.length = 0;
@@ -1264,26 +1129,15 @@ describe('ReactErrorBoundaries', () => {
'Normal render',
// BrokenComponentWillReceiveProps will abort rendering:
'BrokenComponentWillReceiveProps componentWillReceiveProps [!]',
- ...(ReactDOMFeatureFlags.useFiber
- ? [
- // Finish updating with null children
- 'Normal componentWillUnmount',
- 'BrokenComponentWillReceiveProps componentWillUnmount',
- 'ErrorBoundary componentDidUpdate',
- // Handle the error
- 'ErrorBoundary componentDidCatch',
- 'ErrorBoundary componentWillUpdate',
- 'ErrorBoundary render error',
- 'ErrorBoundary componentDidUpdate',
- ]
- : [
- 'ErrorBoundary componentDidCatch',
- // Stack unmounts first, then renders:
- 'Normal componentWillUnmount',
- 'BrokenComponentWillReceiveProps componentWillUnmount',
- 'ErrorBoundary render error',
- 'ErrorBoundary componentDidUpdate',
- ]),
+ // Finish updating with null children
+ 'Normal componentWillUnmount',
+ 'BrokenComponentWillReceiveProps componentWillUnmount',
+ 'ErrorBoundary componentDidUpdate',
+ // Handle the error
+ 'ErrorBoundary componentDidCatch',
+ 'ErrorBoundary componentWillUpdate',
+ 'ErrorBoundary render error',
+ 'ErrorBoundary componentDidUpdate',
]);
log.length = 0;
@@ -1320,26 +1174,15 @@ describe('ReactErrorBoundaries', () => {
// BrokenComponentWillUpdate will abort rendering:
'BrokenComponentWillUpdate componentWillReceiveProps',
'BrokenComponentWillUpdate componentWillUpdate [!]',
- ...(ReactDOMFeatureFlags.useFiber
- ? [
- // Finish updating with null children
- 'Normal componentWillUnmount',
- 'BrokenComponentWillUpdate componentWillUnmount',
- 'ErrorBoundary componentDidUpdate',
- // Handle the error
- 'ErrorBoundary componentDidCatch',
- 'ErrorBoundary componentWillUpdate',
- 'ErrorBoundary render error',
- 'ErrorBoundary componentDidUpdate',
- ]
- : [
- 'ErrorBoundary componentDidCatch',
- // Stack unmounts first, then renders:
- 'Normal componentWillUnmount',
- 'BrokenComponentWillUpdate componentWillUnmount',
- 'ErrorBoundary render error',
- 'ErrorBoundary componentDidUpdate',
- ]),
+ // Finish updating with null children
+ 'Normal componentWillUnmount',
+ 'BrokenComponentWillUpdate componentWillUnmount',
+ 'ErrorBoundary componentDidUpdate',
+ // Handle the error
+ 'ErrorBoundary componentDidCatch',
+ 'ErrorBoundary componentWillUpdate',
+ 'ErrorBoundary render error',
+ 'ErrorBoundary componentDidUpdate',
]);
log.length = 0;
@@ -1381,25 +1224,14 @@ describe('ReactErrorBoundaries', () => {
'BrokenRender constructor',
'BrokenRender componentWillMount',
'BrokenRender render [!]',
- ...(ReactDOMFeatureFlags.useFiber
- ? [
- // Finish updating with null children
- 'Normal componentWillUnmount',
- 'ErrorBoundary componentDidUpdate',
- // Handle the error
- 'ErrorBoundary componentDidCatch',
- 'ErrorBoundary componentWillUpdate',
- 'ErrorBoundary render error',
- 'ErrorBoundary componentDidUpdate',
- ]
- : [
- 'ErrorBoundary componentDidCatch',
- // Stack unmounts first, then renders:
- 'Normal componentWillUnmount',
- 'ErrorBoundary render error',
- // Normal2 does not get lifefycle because it was never mounted
- 'ErrorBoundary componentDidUpdate',
- ]),
+ // Finish updating with null children
+ 'Normal componentWillUnmount',
+ 'ErrorBoundary componentDidUpdate',
+ // Handle the error
+ 'ErrorBoundary componentDidCatch',
+ 'ErrorBoundary componentWillUpdate',
+ 'ErrorBoundary render error',
+ 'ErrorBoundary componentDidUpdate',
]);
log.length = 0;
@@ -1451,22 +1283,13 @@ describe('ReactErrorBoundaries', () => {
'BrokenRender constructor',
'BrokenRender componentWillMount',
'BrokenRender render [!]',
- ...(ReactDOMFeatureFlags.useFiber
- ? [
- // Finish updating with null children
- 'Child1 ref is set to null',
- 'ErrorBoundary componentDidUpdate',
- // Handle the error
- 'ErrorBoundary componentDidCatch',
- 'ErrorBoundary componentWillUpdate',
- 'ErrorBoundary render error',
- ]
- : [
- 'ErrorBoundary componentDidCatch',
- // Stack resets ref first, renders later
- 'Child1 ref is set to null',
- 'ErrorBoundary render error',
- ]),
+ // Finish updating with null children
+ 'Child1 ref is set to null',
+ 'ErrorBoundary componentDidUpdate',
+ // Handle the error
+ 'ErrorBoundary componentDidCatch',
+ 'ErrorBoundary componentWillUpdate',
+ 'ErrorBoundary render error',
'Error message ref is set to [object HTMLDivElement]',
// Child2 ref is never set because its mounting aborted
'ErrorBoundary componentDidUpdate',
@@ -1509,35 +1332,22 @@ describe('ReactErrorBoundaries', () => {
'BrokenComponentWillUnmount render',
// Unmounting throws:
'BrokenComponentWillUnmount componentWillUnmount [!]',
- ...(ReactDOMFeatureFlags.useFiber
- ? [
- // Fiber proceeds with lifecycles despite errors
- 'Normal componentWillUnmount',
- // The components have updated in this phase
- 'BrokenComponentWillUnmount componentDidUpdate',
- 'ErrorBoundary componentDidUpdate',
- // Now that commit phase is done, Fiber unmounts the boundary's children
- 'BrokenComponentWillUnmount componentWillUnmount [!]',
- 'ErrorBoundary componentDidCatch',
- // The initial render was aborted, so
- // Fiber retries from the root.
- 'ErrorBoundary componentWillUpdate',
- // Render an error now (stack will do it later)
- 'ErrorBoundary render error',
- // Attempt to unmount previous child:
- // Done
- 'ErrorBoundary componentDidUpdate',
- ]
- : [
- // Stack will handle error immediately
- 'ErrorBoundary componentDidCatch',
- // Attempt to unmount previous children:
- 'BrokenComponentWillUnmount componentWillUnmount [!]',
- 'Normal componentWillUnmount',
- // Render an error now (Fiber will do it earlier)
- 'ErrorBoundary render error',
- 'ErrorBoundary componentDidUpdate',
- ]),
+ // Fiber proceeds with lifecycles despite errors
+ 'Normal componentWillUnmount',
+ // The components have updated in this phase
+ 'BrokenComponentWillUnmount componentDidUpdate',
+ 'ErrorBoundary componentDidUpdate',
+ // Now that commit phase is done, Fiber unmounts the boundary's children
+ 'BrokenComponentWillUnmount componentWillUnmount [!]',
+ 'ErrorBoundary componentDidCatch',
+ // The initial render was aborted, so
+ // Fiber retries from the root.
+ 'ErrorBoundary componentWillUpdate',
+ // Render an error now (stack will do it later)
+ 'ErrorBoundary render error',
+ // Attempt to unmount previous child:
+ // Done
+ 'ErrorBoundary componentDidUpdate',
]);
log.length = 0;
@@ -1580,33 +1390,21 @@ describe('ReactErrorBoundaries', () => {
'BrokenComponentWillUnmount render',
// Unmounting throws:
'BrokenComponentWillUnmount componentWillUnmount [!]',
- ...(ReactDOMFeatureFlags.useFiber
- ? [
- // Fiber proceeds with lifecycles despite errors
- 'BrokenComponentWillUnmount componentDidUpdate',
- 'Normal componentDidUpdate',
- 'ErrorBoundary componentDidUpdate',
- 'Normal componentWillUnmount',
- 'BrokenComponentWillUnmount componentWillUnmount [!]',
- // Now that commit phase is done, Fiber handles errors
- 'ErrorBoundary componentDidCatch',
- // The initial render was aborted, so
- // Fiber retries from the root.
- 'ErrorBoundary componentWillUpdate',
- // Render an error now (stack will do it later)
- 'ErrorBoundary render error',
- // Done
- 'ErrorBoundary componentDidUpdate',
- ]
- : [
- 'ErrorBoundary componentDidCatch',
- // Attempt to unmount previous children:
- 'Normal componentWillUnmount',
- 'BrokenComponentWillUnmount componentWillUnmount [!]',
- // Stack calls lifecycles first, then renders.
- 'ErrorBoundary render error',
- 'ErrorBoundary componentDidUpdate',
- ]),
+ // Fiber proceeds with lifecycles despite errors
+ 'BrokenComponentWillUnmount componentDidUpdate',
+ 'Normal componentDidUpdate',
+ 'ErrorBoundary componentDidUpdate',
+ 'Normal componentWillUnmount',
+ 'BrokenComponentWillUnmount componentWillUnmount [!]',
+ // Now that commit phase is done, Fiber handles errors
+ 'ErrorBoundary componentDidCatch',
+ // The initial render was aborted, so
+ // Fiber retries from the root.
+ 'ErrorBoundary componentWillUpdate',
+ // Render an error now (stack will do it later)
+ 'ErrorBoundary render error',
+ // Done
+ 'ErrorBoundary componentDidUpdate',
]);
log.length = 0;
@@ -1660,31 +1458,19 @@ describe('ReactErrorBoundaries', () => {
'InnerErrorBoundary render success',
// Try unmounting child
'BrokenComponentWillUnmount componentWillUnmount [!]',
- ...(ReactDOMFeatureFlags.useFiber
- ? [
- // Fiber proceeds with lifecycles despite errors
- // Inner and outer boundaries have updated in this phase
- 'InnerErrorBoundary componentDidUpdate',
- 'OuterErrorBoundary componentDidUpdate',
- // Now that commit phase is done, Fiber handles errors
- // Only inner boundary receives the error:
- 'InnerErrorBoundary componentDidCatch',
- 'InnerErrorBoundary componentWillUpdate',
- // Render an error now
- 'InnerErrorBoundary render error',
- // In Fiber, this was a local update to the
- // inner boundary so only its hook fires
- 'InnerErrorBoundary componentDidUpdate',
- ]
- : [
- // Stack will handle error immediately
- 'InnerErrorBoundary componentDidCatch',
- 'InnerErrorBoundary render error',
- // In stack, this was a part of the update to the
- // outer boundary so both lifecycles fire
- 'InnerErrorBoundary componentDidUpdate',
- 'OuterErrorBoundary componentDidUpdate',
- ]),
+ // Fiber proceeds with lifecycles despite errors
+ // Inner and outer boundaries have updated in this phase
+ 'InnerErrorBoundary componentDidUpdate',
+ 'OuterErrorBoundary componentDidUpdate',
+ // Now that commit phase is done, Fiber handles errors
+ // Only inner boundary receives the error:
+ 'InnerErrorBoundary componentDidCatch',
+ 'InnerErrorBoundary componentWillUpdate',
+ // Render an error now
+ 'InnerErrorBoundary render error',
+ // In Fiber, this was a local update to the
+ // inner boundary so only its hook fires
+ 'InnerErrorBoundary componentDidUpdate',
]);
log.length = 0;
@@ -1856,374 +1642,371 @@ describe('ReactErrorBoundaries', () => {
expect(log).toEqual(['ErrorBoundary componentWillUnmount']);
});
- // The tests below implement new features in Fiber.
- if (ReactDOMFeatureFlags.useFiber) {
- it('catches errors originating downstream', () => {
- var fail = false;
- class Stateful extends React.Component {
- state = {shouldThrow: false};
+ it('catches errors originating downstream', () => {
+ var fail = false;
+ class Stateful extends React.Component {
+ state = {shouldThrow: false};
- render() {
- if (fail) {
- log.push('Stateful render [!]');
- throw new Error('Hello');
- }
- return
{this.props.children}
;
+ render() {
+ if (fail) {
+ log.push('Stateful render [!]');
+ throw new Error('Hello');
}
+ return
+ We should never catch our own error: {error.message}.
+
+ )}
+ />
+ ,
+ container,
+ );
+ expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
+ expect(log).toEqual([
+ 'ErrorBoundary constructor',
+ 'ErrorBoundary componentWillMount',
+ 'ErrorBoundary render success',
+ 'BrokenComponentDidMountErrorBoundary constructor',
+ 'BrokenComponentDidMountErrorBoundary componentWillMount',
+ 'BrokenComponentDidMountErrorBoundary render success',
+ 'BrokenComponentDidMountErrorBoundary componentDidMount [!]',
+ // Fiber proceeds with the hooks
+ 'ErrorBoundary componentDidMount',
+ 'BrokenComponentDidMountErrorBoundary componentWillUnmount',
+ // The error propagates to the higher boundary
+ 'ErrorBoundary componentDidCatch',
+ // Fiber retries from the root
+ 'ErrorBoundary componentWillUpdate',
+ 'ErrorBoundary render error',
+ 'ErrorBoundary componentDidUpdate',
+ ]);
+
+ log.length = 0;
+ ReactDOM.unmountComponentAtNode(container);
+ expect(log).toEqual(['ErrorBoundary componentWillUnmount']);
+ });
+
+ it('lets different boundaries catch their own first errors', () => {
+ function renderUnmountError(error) {
+ return
Caught an unmounting error: {error.message}.
;
+ }
+ function renderUpdateError(error) {
+ return
Caught an updating error: {error.message}.
;
+ }
+
+ var container = document.createElement('div');
+ ReactDOM.render(
+
+
+
+
+
+
+
+
+
+ ,
+ container,
+ );
+
+ log.length = 0;
+ ReactDOM.render(
+
+
+
+
+
+
+ ,
+ container,
+ );
+
+ expect(container.firstChild.textContent).toBe(
+ 'Caught an unmounting error: E1.' + 'Caught an updating error: E3.',
+ );
+ expect(log).toEqual([
+ // Begin update phase
+ 'OuterErrorBoundary componentWillReceiveProps',
+ 'OuterErrorBoundary componentWillUpdate',
+ 'OuterErrorBoundary render success',
+ 'InnerUnmountBoundary componentWillReceiveProps',
+ 'InnerUnmountBoundary componentWillUpdate',
+ 'InnerUnmountBoundary render success',
+ 'InnerUpdateBoundary componentWillReceiveProps',
+ 'InnerUpdateBoundary componentWillUpdate',
+ 'InnerUpdateBoundary render success',
+ // First come the updates
+ 'BrokenComponentDidUpdate componentWillReceiveProps',
+ 'BrokenComponentDidUpdate componentWillUpdate',
+ 'BrokenComponentDidUpdate render',
+ 'BrokenComponentDidUpdate componentWillReceiveProps',
+ 'BrokenComponentDidUpdate componentWillUpdate',
+ 'BrokenComponentDidUpdate render',
+ // We're in commit phase now, deleting
+ 'BrokenComponentWillUnmount componentWillUnmount [!]',
+ 'BrokenComponentWillUnmount componentWillUnmount [!]',
+ // Continue despite errors, handle them after commit is done
+ 'InnerUnmountBoundary componentDidUpdate',
+ // We're still in commit phase, now calling update lifecycles
+ 'BrokenComponentDidUpdate componentDidUpdate [!]',
+ // Again, continue despite errors, we'll handle them later
+ 'BrokenComponentDidUpdate componentDidUpdate [!]',
+ 'InnerUpdateBoundary componentDidUpdate',
+ 'OuterErrorBoundary componentDidUpdate',
+ // After the commit phase, attempt to recover from any errors that
+ // were captured
+ 'BrokenComponentDidUpdate componentWillUnmount',
+ 'BrokenComponentDidUpdate componentWillUnmount',
+ 'InnerUnmountBoundary componentDidCatch',
+ 'InnerUpdateBoundary componentDidCatch',
+ 'InnerUnmountBoundary componentWillUpdate',
+ 'InnerUnmountBoundary render error',
+ 'InnerUpdateBoundary componentWillUpdate',
+ 'InnerUpdateBoundary render error',
+ 'InnerUnmountBoundary componentDidUpdate',
+ 'InnerUpdateBoundary componentDidUpdate',
+ ]);
+
+ log.length = 0;
+ ReactDOM.unmountComponentAtNode(container);
+ expect(log).toEqual([
+ 'OuterErrorBoundary componentWillUnmount',
+ 'InnerUnmountBoundary componentWillUnmount',
+ 'InnerUpdateBoundary componentWillUnmount',
+ ]);
+ });
+
+ it('discards a bad root if the root component fails', () => {
+ spyOn(console, 'error');
+
+ const X = null;
+ const Y = undefined;
+ let err1;
+ let err2;
+
+ try {
+ let container = document.createElement('div');
+ ReactDOM.render(, container);
+ } catch (err) {
+ err1 = err;
+ }
+ try {
+ let container = document.createElement('div');
+ ReactDOM.render(, container);
+ } catch (err) {
+ err2 = err;
+ }
+
+ expect(err1.message).toMatch(/got: null/);
+ expect(err2.message).toMatch(/got: undefined/);
+ });
+
+ it('renders empty output if error boundary does not handle the error', () => {
+ var container = document.createElement('div');
+ ReactDOM.render(
+
+ Sibling
+
+
+
+
,
+ container,
+ );
+ expect(container.firstChild.textContent).toBe('Sibling');
+ expect(log).toEqual([
+ 'NoopErrorBoundary constructor',
+ 'NoopErrorBoundary componentWillMount',
+ 'NoopErrorBoundary render',
+ 'BrokenRender constructor',
+ 'BrokenRender componentWillMount',
+ 'BrokenRender render [!]',
+ // In Fiber, noop error boundaries render null
+ 'NoopErrorBoundary componentDidMount',
+ 'NoopErrorBoundary componentDidCatch',
+ // Nothing happens.
+ ]);
+
+ log.length = 0;
+ ReactDOM.unmountComponentAtNode(container);
+ expect(log).toEqual(['NoopErrorBoundary componentWillUnmount']);
+ });
+
+ it('passes first error when two errors happen in commit', () => {
+ const errors = [];
+ let caughtError;
+ class Parent extends React.Component {
+ render() {
+ return ;
}
- class Child extends React.Component {
- render() {
- return ;
- }
- componentDidMount() {
- errors.push('child sad');
- throw new Error('child sad');
- }
+ componentDidMount() {
+ errors.push('parent sad');
+ throw new Error('parent sad');
}
-
- var container = document.createElement('div');
- try {
- // Here, we test the behavior where there is no error boundary and we
- // delegate to the host root.
- ReactDOM.render(, container);
- } catch (e) {
- if (e.message !== 'parent sad' && e.message !== 'child sad') {
- throw e;
- }
- caughtError = e;
+ }
+ class Child extends React.Component {
+ render() {
+ return ;
+ }
+ componentDidMount() {
+ errors.push('child sad');
+ throw new Error('child sad');
}
+ }
- expect(errors).toEqual(['child sad', 'parent sad']);
- // Error should be the first thrown
- expect(caughtError.message).toBe('child sad');
- });
- }
+ var container = document.createElement('div');
+ try {
+ // Here, we test the behavior where there is no error boundary and we
+ // delegate to the host root.
+ ReactDOM.render(, container);
+ } catch (e) {
+ if (e.message !== 'parent sad' && e.message !== 'child sad') {
+ throw e;
+ }
+ caughtError = e;
+ }
+
+ expect(errors).toEqual(['child sad', 'parent sad']);
+ // Error should be the first thrown
+ expect(caughtError.message).toBe('child sad');
+ });
});
diff --git a/src/renderers/__tests__/ReactHostOperationHistoryHook-test.js b/src/renderers/__tests__/ReactHostOperationHistoryHook-test.js
index 9eb0d4b6ea3..891144b92a8 100644
--- a/src/renderers/__tests__/ReactHostOperationHistoryHook-test.js
+++ b/src/renderers/__tests__/ReactHostOperationHistoryHook-test.js
@@ -9,12 +9,9 @@
'use strict';
-var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
-var describeStack = ReactDOMFeatureFlags.useFiber ? describe.skip : describe;
-
// This is only used by ReactPerf which is currently not supported on Fiber.
// Use browser timeline integration instead.
-describeStack('ReactHostOperationHistoryHook', () => {
+describe.skip('ReactHostOperationHistoryHook', () => {
var React;
var ReactPerf;
var ReactDOM;
diff --git a/src/renderers/__tests__/ReactMultiChild-test.js b/src/renderers/__tests__/ReactMultiChild-test.js
index 4217a63561c..960e513dcfe 100644
--- a/src/renderers/__tests__/ReactMultiChild-test.js
+++ b/src/renderers/__tests__/ReactMultiChild-test.js
@@ -16,13 +16,11 @@ describe('ReactMultiChild', () => {
var React;
var ReactDOM;
- var ReactDOMFeatureFlags;
beforeEach(() => {
jest.resetModules();
React = require('react');
ReactDOM = require('react-dom');
- ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
});
describe('reconciliation', () => {
@@ -280,8 +278,7 @@ describe('ReactMultiChild', () => {
'Warning: Using Maps as children is unsupported and will likely yield ' +
'unexpected results. Convert it to a sequence/iterable of keyed ' +
'ReactElements instead.\n' +
- // Fiber gives a slightly better stack with the nearest host components
- (ReactDOMFeatureFlags.useFiber ? ' in div (at **)\n' : '') +
+ ' in div (at **)\n' +
' in Parent (at **)',
);
});
@@ -368,23 +365,12 @@ describe('ReactMultiChild', () => {
'oneA componentDidMount',
'twoA componentDidMount',
- ...(ReactDOMFeatureFlags.useFiber
- ? [
- 'oneB componentWillMount',
- 'oneB render',
- 'twoB componentWillMount',
- 'twoB render',
- 'oneA componentWillUnmount',
- 'twoA componentWillUnmount',
- ]
- : [
- 'oneB componentWillMount',
- 'oneB render',
- 'oneA componentWillUnmount',
- 'twoB componentWillMount',
- 'twoB render',
- 'twoA componentWillUnmount',
- ]),
+ 'oneB componentWillMount',
+ 'oneB render',
+ 'twoB componentWillMount',
+ 'twoB render',
+ 'oneA componentWillUnmount',
+ 'twoA componentWillUnmount',
'oneB componentDidMount',
'twoB componentDidMount',
diff --git a/src/renderers/__tests__/ReactMultiChildText-test.js b/src/renderers/__tests__/ReactMultiChildText-test.js
index 850c16bb140..2d35886b472 100644
--- a/src/renderers/__tests__/ReactMultiChildText-test.js
+++ b/src/renderers/__tests__/ReactMultiChildText-test.js
@@ -11,7 +11,6 @@
var React = require('react');
var ReactDOM = require('react-dom');
-var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
var ReactTestUtils = require('react-dom/test-utils');
// Helpers
@@ -48,43 +47,16 @@ var expectChildren = function(container, children) {
expect(textNode.data).toBe('' + children);
}
} else {
- var openingCommentNode;
- var closingCommentNode;
var mountIndex = 0;
for (var i = 0; i < children.length; i++) {
var child = children[i];
if (typeof child === 'string') {
- if (ReactDOMFeatureFlags.useFiber) {
- textNode = outerNode.childNodes[mountIndex];
- expect(textNode.nodeType).toBe(3);
- expect(textNode.data).toBe('' + child);
- mountIndex++;
- } else {
- openingCommentNode = outerNode.childNodes[mountIndex];
-
- expect(openingCommentNode.nodeType).toBe(8);
- expect(openingCommentNode.nodeValue).toMatch(/ react-text: [0-9]+ /);
-
- if (child === '') {
- textNode = null;
- closingCommentNode = openingCommentNode.nextSibling;
- mountIndex += 2;
- } else {
- textNode = openingCommentNode.nextSibling;
- closingCommentNode = textNode.nextSibling;
- mountIndex += 3;
- }
-
- if (textNode) {
- expect(textNode.nodeType).toBe(3);
- expect(textNode.data).toBe('' + child);
- }
-
- expect(closingCommentNode.nodeType).toBe(8);
- expect(closingCommentNode.nodeValue).toBe(' /react-text ');
- }
+ textNode = outerNode.childNodes[mountIndex];
+ expect(textNode.nodeType).toBe(3);
+ expect(textNode.data).toBe('' + child);
+ mountIndex++;
} else {
var elementDOMNode = outerNode.childNodes[mountIndex];
expect(elementDOMNode.tagName).toBe('DIV');
@@ -189,20 +161,14 @@ describe('ReactMultiChildText', () => {
[true,
{1.2}{''}{}{'foo'}
, true, 1.2], [, '1.2'],
['', 'foo',
{true}{}{1.2}{''}
, 'foo'], ['', 'foo', , 'foo'],
]);
- if (ReactDOMFeatureFlags.useFiber) {
- expectDev(console.error.calls.count()).toBe(2);
- expectDev(console.error.calls.argsFor(0)[0]).toContain(
- 'Warning: Each child in an array or iterator should have a unique "key" prop.',
- );
- expectDev(console.error.calls.argsFor(1)[0]).toContain(
- 'Warning: Each child in an array or iterator should have a unique "key" prop.',
- );
- } else {
- expectDev(console.error.calls.count()).toBe(1);
- expectDev(console.error.calls.argsFor(0)[0]).toContain(
- 'Warning: Each child in an array or iterator should have a unique "key" prop.',
- );
- }
+
+ expectDev(console.error.calls.count()).toBe(2);
+ expectDev(console.error.calls.argsFor(0)[0]).toContain(
+ 'Warning: Each child in an array or iterator should have a unique "key" prop.',
+ );
+ expectDev(console.error.calls.argsFor(1)[0]).toContain(
+ 'Warning: Each child in an array or iterator should have a unique "key" prop.',
+ );
});
it('should throw if rendering both HTML and children', () => {
diff --git a/src/renderers/__tests__/ReactPerf-test.js b/src/renderers/__tests__/ReactPerf-test.js
index ac222c0e19e..b09519a1982 100644
--- a/src/renderers/__tests__/ReactPerf-test.js
+++ b/src/renderers/__tests__/ReactPerf-test.js
@@ -9,12 +9,9 @@
'use strict';
-var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
-var describeStack = ReactDOMFeatureFlags.useFiber ? describe.skip : describe;
-
// ReactPerf is currently not supported on Fiber.
// Use browser timeline integration instead.
-describeStack('ReactPerf', () => {
+describe.skip('ReactPerf', () => {
var React;
var ReactDOM;
var ReactPerf;
diff --git a/src/renderers/__tests__/ReactStatelessComponent-test.js b/src/renderers/__tests__/ReactStatelessComponent-test.js
index 92811c618f9..c8d67c7bbfc 100644
--- a/src/renderers/__tests__/ReactStatelessComponent-test.js
+++ b/src/renderers/__tests__/ReactStatelessComponent-test.js
@@ -14,8 +14,6 @@ var React;
var ReactDOM;
var ReactTestUtils;
-var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
-
function StatelessComponent(props) {
return
{props.name}
;
}
@@ -118,54 +116,22 @@ describe('ReactStatelessComponent', () => {
ReactDOM.render(, container);
- // Stack and Fiber differ in terms of they show warnings
- if (ReactDOMFeatureFlags.useFiber) {
- expectDev(console.error.calls.count()).toBe(1);
- expectDev(console.error.calls.argsFor(0)[0]).toContain(
- 'StatelessComponentWithChildContext(...): childContextTypes cannot ' +
- 'be defined on a functional component.',
- );
- } else {
- expectDev(console.error.calls.count()).toBe(2);
- expectDev(console.error.calls.argsFor(0)[0]).toContain(
- 'StatelessComponentWithChildContext(...): childContextTypes cannot ' +
- 'be defined on a functional component.',
- );
- expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(1)[0])).toBe(
- 'Warning: StatelessComponentWithChildContext.childContextTypes is specified ' +
- 'but there is no getChildContext() method on the instance. You can either ' +
- 'define getChildContext() on StatelessComponentWithChildContext or remove ' +
- 'childContextTypes from it.',
- );
- }
+ expectDev(console.error.calls.count()).toBe(1);
+ expectDev(console.error.calls.argsFor(0)[0]).toContain(
+ 'StatelessComponentWithChildContext(...): childContextTypes cannot ' +
+ 'be defined on a functional component.',
+ );
});
- if (!ReactDOMFeatureFlags.useFiber) {
- // Stack doesn't support fragments
- it('should throw when stateless component returns array', () => {
- function NotAComponent() {
- return [, ];
- }
- expect(function() {
- ReactTestUtils.renderIntoDocument(
);
- }).toThrowError(
- 'NotAComponent(...): A valid React element (or null) must be returned. ' +
- 'You may have returned undefined, an array or some other invalid object.',
- );
- });
- }
-
- if (ReactDOMFeatureFlags.useFiber) {
- it('should throw when stateless component returns undefined', () => {
- function NotAComponent() {}
- expect(function() {
- ReactTestUtils.renderIntoDocument(
);
- }).toThrowError(
- 'NotAComponent(...): Nothing was returned from render. ' +
- 'This usually means a return statement is missing. Or, to render nothing, return null.',
- );
- });
- }
+ it('should throw when stateless component returns undefined', () => {
+ function NotAComponent() {}
+ expect(function() {
+ ReactTestUtils.renderIntoDocument(
);
+ }).toThrowError(
+ 'NotAComponent(...): Nothing was returned from render. ' +
+ 'This usually means a return statement is missing. Or, to render nothing, return null.',
+ );
+ });
it('should throw on string refs in pure functions', () => {
function Child() {
diff --git a/src/renderers/__tests__/ReactUpdates-test.js b/src/renderers/__tests__/ReactUpdates-test.js
index 0124b20e049..fdfb92c5327 100644
--- a/src/renderers/__tests__/ReactUpdates-test.js
+++ b/src/renderers/__tests__/ReactUpdates-test.js
@@ -12,13 +12,11 @@
var React;
var ReactDOM;
var ReactTestUtils;
-var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
describe('ReactUpdates', () => {
beforeEach(() => {
React = require('react');
ReactDOM = require('react-dom');
- ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
ReactTestUtils = require('react-dom/test-utils');
});
@@ -519,9 +517,7 @@ describe('ReactUpdates', () => {
render() {
var portal = null;
// If we're using Fiber, we use Portals instead to achieve this.
- if (ReactDOMFeatureFlags.useFiber) {
- portal = ReactDOM.createPortal( (b = n)} />, bContainer);
- }
+ portal = ReactDOM.createPortal( (b = n)} />, bContainer);
return
A{this.state.x}{portal}
;
}
}
@@ -535,10 +531,6 @@ describe('ReactUpdates', () => {
}
a = ReactTestUtils.renderIntoDocument();
- if (!ReactDOMFeatureFlags.useFiber) {
- ReactDOM.render( (b = n)} />, bContainer);
- }
-
ReactDOM.unstable_batchedUpdates(function() {
a.setState({x: 1});
b.setState({x: 1});
@@ -1178,35 +1170,33 @@ describe('ReactUpdates', () => {
}).toThrow('Maximum');
});
- if (ReactDOMFeatureFlags.useFiber) {
- it('does not fall into an infinite error loop', () => {
- function BadRender() {
- throw new Error('error');
- }
+ it('does not fall into an infinite error loop', () => {
+ function BadRender() {
+ throw new Error('error');
+ }
- class ErrorBoundary extends React.Component {
- componentDidCatch() {
- this.props.parent.remount();
- }
- render() {
- return ;
- }
+ class ErrorBoundary extends React.Component {
+ componentDidCatch() {
+ this.props.parent.remount();
+ }
+ render() {
+ return ;
}
+ }
- class NonTerminating extends React.Component {
- state = {step: 0};
- remount() {
- this.setState(state => ({step: state.step + 1}));
- }
- render() {
- return ;
- }
+ class NonTerminating extends React.Component {
+ state = {step: 0};
+ remount() {
+ this.setState(state => ({step: state.step + 1}));
+ }
+ render() {
+ return ;
}
+ }
- const container = document.createElement('div');
- expect(() => {
- ReactDOM.render(, container);
- }).toThrow('Maximum');
- });
- }
+ const container = document.createElement('div');
+ expect(() => {
+ ReactDOM.render(, container);
+ }).toThrow('Maximum');
+ });
});
diff --git a/src/renderers/__tests__/multiple-copies-of-react-test.js b/src/renderers/__tests__/multiple-copies-of-react-test.js
index 0cd96adf0fd..9d4d30888ad 100644
--- a/src/renderers/__tests__/multiple-copies-of-react-test.js
+++ b/src/renderers/__tests__/multiple-copies-of-react-test.js
@@ -10,7 +10,6 @@
'use strict';
let React = require('react');
-var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
var ReactTestUtils = require('react-dom/test-utils');
class TextWithStringRef extends React.Component {
@@ -27,23 +26,12 @@ class TextWithStringRef extends React.Component {
describe('when different React version is used with string ref', () => {
it('throws the "Refs must have owner" warning', () => {
- if (ReactDOMFeatureFlags.useFiber) {
- expect(() => {
- ReactTestUtils.renderIntoDocument();
- }).toThrow(
- 'Element ref was specified as a string (foo) but no owner was set.' +
- ' You may have multiple copies of React loaded. (details: ' +
- 'https://fb.me/react-refs-must-have-owner).',
- );
- } else {
- expect(() => {
- ReactTestUtils.renderIntoDocument();
- }).toThrow(
- 'Only a ReactOwner can have refs. You might be adding a ref to a ' +
- "component that was not created inside a component's `render` " +
- 'method, or you have multiple copies of React loaded ' +
- '(details: https://fb.me/react-refs-must-have-owner)',
- );
- }
+ expect(() => {
+ ReactTestUtils.renderIntoDocument();
+ }).toThrow(
+ 'Element ref was specified as a string (foo) but no owner was set.' +
+ ' You may have multiple copies of React loaded. (details: ' +
+ 'https://fb.me/react-refs-must-have-owner).',
+ );
});
});
diff --git a/src/renderers/__tests__/refs-test.js b/src/renderers/__tests__/refs-test.js
index 424b9667e8d..314e5075ca1 100644
--- a/src/renderers/__tests__/refs-test.js
+++ b/src/renderers/__tests__/refs-test.js
@@ -10,7 +10,6 @@
'use strict';
var React = require('react');
-var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
var ReactTestUtils = require('react-dom/test-utils');
/**
@@ -348,40 +347,38 @@ describe('root level refs', () => {
expect(ref).toHaveBeenCalledTimes(2);
expect(ref.mock.calls[1][0]).toBe(null);
- if (ReactDOMFeatureFlags.useFiber) {
- // fragment
- inst = null;
- ref = jest.fn(value => (inst = value));
- var divInst = null;
- var ref2 = jest.fn(value => (divInst = value));
- result = ReactDOM.render(
- [, 5,
],
+ container,
+ );
- // first call should be `Comp`
- expect(ref).toHaveBeenCalledTimes(1);
- expect(ref.mock.calls[0][0]).toBeInstanceOf(Comp);
- expect(result).toBe(ref.mock.calls[0][0]);
+ // first call should be `Comp`
+ expect(ref).toHaveBeenCalledTimes(1);
+ expect(ref.mock.calls[0][0]).toBeInstanceOf(Comp);
+ expect(result).toBe(ref.mock.calls[0][0]);
- expect(ref2).toHaveBeenCalledTimes(1);
- expect(divInst).toBeInstanceOf(HTMLDivElement);
- expect(result).not.toBe(divInst);
+ expect(ref2).toHaveBeenCalledTimes(1);
+ expect(divInst).toBeInstanceOf(HTMLDivElement);
+ expect(result).not.toBe(divInst);
- ReactDOM.unmountComponentAtNode(container);
- expect(ref).toHaveBeenCalledTimes(2);
- expect(ref.mock.calls[1][0]).toBe(null);
- expect(ref2).toHaveBeenCalledTimes(2);
- expect(ref2.mock.calls[1][0]).toBe(null);
+ ReactDOM.unmountComponentAtNode(container);
+ expect(ref).toHaveBeenCalledTimes(2);
+ expect(ref.mock.calls[1][0]).toBe(null);
+ expect(ref2).toHaveBeenCalledTimes(2);
+ expect(ref2.mock.calls[1][0]).toBe(null);
- // null
- result = ReactDOM.render(null, container);
- expect(result).toBe(null);
+ // null
+ result = ReactDOM.render(null, container);
+ expect(result).toBe(null);
- // primitives
- result = ReactDOM.render(5, container);
- expect(result).toBeInstanceOf(Text);
- }
+ // primitives
+ result = ReactDOM.render(5, container);
+ expect(result).toBeInstanceOf(Text);
});
});
@@ -397,28 +394,6 @@ describe('creating element with ref in constructor', () => {
}
}
- var devErrorMessage =
- 'addComponentAsRefTo(...): Only a ReactOwner can have refs. You might ' +
- "be adding a ref to a component that was not created inside a component's " +
- '`render` method, or you have multiple copies of React loaded ' +
- '(details: https://fb.me/react-refs-must-have-owner).';
-
- var prodErrorMessage =
- 'Minified React error #119; visit ' +
- 'http://facebook.github.io/react/docs/error-decoder.html?invariant=119 for the full message ' +
- 'or use the non-minified dev environment for full errors and additional helpful warnings.';
-
- var fiberDevErrorMessage =
- 'Element ref was specified as a string (p) but no owner was ' +
- 'set. You may have multiple copies of React loaded. ' +
- '(details: https://fb.me/react-refs-must-have-owner).';
-
- var fiberProdErrorMessage =
- 'Minified React error #149; visit ' +
- 'http://facebook.github.io/react/docs/error-decoder.html?invariant=149&args[]=p ' +
- 'for the full message or use the non-minified dev environment for full errors and additional ' +
- 'helpful warnings.';
-
it('throws an error when __DEV__ = true', () => {
ReactTestUtils = require('react-dom/test-utils');
@@ -429,7 +404,9 @@ describe('creating element with ref in constructor', () => {
expect(function() {
ReactTestUtils.renderIntoDocument();
}).toThrowError(
- ReactDOMFeatureFlags.useFiber ? fiberDevErrorMessage : devErrorMessage,
+ 'Element ref was specified as a string (p) but no owner was ' +
+ 'set. You may have multiple copies of React loaded. ' +
+ '(details: https://fb.me/react-refs-must-have-owner).',
);
} finally {
__DEV__ = originalDev;
@@ -446,9 +423,10 @@ describe('creating element with ref in constructor', () => {
expect(function() {
ReactTestUtils.renderIntoDocument();
}).toThrowError(
- ReactDOMFeatureFlags.useFiber
- ? fiberProdErrorMessage
- : prodErrorMessage,
+ 'Minified React error #149; visit ' +
+ 'http://facebook.github.io/react/docs/error-decoder.html?invariant=149&args[]=p ' +
+ 'for the full message or use the non-minified dev environment for full errors and additional ' +
+ 'helpful warnings.',
);
} finally {
__DEV__ = originalDev;
diff --git a/src/renderers/dom/__tests__/ReactDOMProduction-test.js b/src/renderers/dom/__tests__/ReactDOMProduction-test.js
index 74470dc1442..570a59a7ebf 100644
--- a/src/renderers/dom/__tests__/ReactDOMProduction-test.js
+++ b/src/renderers/dom/__tests__/ReactDOMProduction-test.js
@@ -9,8 +9,6 @@
'use strict';
describe('ReactDOMProduction', () => {
- var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
-
var React;
var ReactDOM;
var ReactDOMServer;
@@ -195,7 +193,7 @@ describe('ReactDOMProduction', () => {
});
it('should throw with an error code in production', () => {
- const errorCode = ReactDOMFeatureFlags.useFiber ? 152 : 109;
+ const errorCode = 152;
expect(function() {
class Component extends React.Component {
render() {
@@ -235,57 +233,55 @@ describe('ReactDOMProduction', () => {
}
});
- if (ReactDOMFeatureFlags.useFiber) {
- // This test is originally from ReactDOMFiber-test but we replicate it here
- // to avoid production-only regressions because of host context differences
- // in dev and prod.
- it('should keep track of namespace across portals in production', () => {
- var svgEls, htmlEls;
- var expectSVG = {ref: el => svgEls.push(el)};
- var expectHTML = {ref: el => htmlEls.push(el)};
- var usePortal = function(tree) {
- return ReactDOM.createPortal(tree, document.createElement('div'));
- };
- var assertNamespacesMatch = function(tree) {
- var container = document.createElement('div');
- svgEls = [];
- htmlEls = [];
- ReactDOM.render(tree, container);
- svgEls.forEach(el => {
- expect(el.namespaceURI).toBe('http://www.w3.org/2000/svg');
- });
- htmlEls.forEach(el => {
- expect(el.namespaceURI).toBe('http://www.w3.org/1999/xhtml');
- });
- ReactDOM.unmountComponentAtNode(container);
- expect(container.innerHTML).toBe('');
- };
+ // This test is originally from ReactDOMFiber-test but we replicate it here
+ // to avoid production-only regressions because of host context differences
+ // in dev and prod.
+ it('should keep track of namespace across portals in production', () => {
+ var svgEls, htmlEls;
+ var expectSVG = {ref: el => svgEls.push(el)};
+ var expectHTML = {ref: el => htmlEls.push(el)};
+ var usePortal = function(tree) {
+ return ReactDOM.createPortal(tree, document.createElement('div'));
+ };
+ var assertNamespacesMatch = function(tree) {
+ var container = document.createElement('div');
+ svgEls = [];
+ htmlEls = [];
+ ReactDOM.render(tree, container);
+ svgEls.forEach(el => {
+ expect(el.namespaceURI).toBe('http://www.w3.org/2000/svg');
+ });
+ htmlEls.forEach(el => {
+ expect(el.namespaceURI).toBe('http://www.w3.org/1999/xhtml');
+ });
+ ReactDOM.unmountComponentAtNode(container);
+ expect(container.innerHTML).toBe('');
+ };
- assertNamespacesMatch(
-
-
+
+ ,
+ )}
+
+
+
+
+
+
,
+ );
+ });
});
diff --git a/src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js b/src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js
index 5e2f5f63c2f..b5424c268f7 100644
--- a/src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js
+++ b/src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js
@@ -11,7 +11,6 @@
var React = require('react');
var ReactDOM = require('react-dom');
-var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
var ReactTestUtils = require('react-dom/test-utils');
var PropTypes = require('prop-types');
@@ -74,1076 +73,1072 @@ describe('ReactDOMFiber', () => {
expect(called).toEqual(true);
});
- if (ReactDOMFeatureFlags.useFiber) {
- it('should render a component returning strings directly from render', () => {
- const Text = ({value}) => value;
+ it('should render a component returning strings directly from render', () => {
+ const Text = ({value}) => value;
- ReactDOM.render(, container);
- expect(container.textContent).toEqual('foo');
- });
+ ReactDOM.render(, container);
+ expect(container.textContent).toEqual('foo');
+ });
- it('should render a component returning numbers directly from render', () => {
- const Text = ({value}) => value;
+ it('should render a component returning numbers directly from render', () => {
+ const Text = ({value}) => value;
- ReactDOM.render(, container);
+ ReactDOM.render(, container);
- expect(container.textContent).toEqual('10');
- });
+ expect(container.textContent).toEqual('10');
+ });
- it('finds the DOM Text node of a string child', () => {
- class Text extends React.Component {
- render() {
- return this.props.value;
- }
+ it('finds the DOM Text node of a string child', () => {
+ class Text extends React.Component {
+ render() {
+ return this.props.value;
}
+ }
- let instance = null;
- ReactDOM.render(
- (instance = ref)} />,
- container,
- );
+ let instance = null;
+ ReactDOM.render(
+ (instance = ref)} />,
+ container,
+ );
- const textNode = ReactDOM.findDOMNode(instance);
- expect(textNode).toBe(container.firstChild);
- expect(textNode.nodeType).toBe(3);
- expect(textNode.nodeValue).toBe('foo');
- });
+ const textNode = ReactDOM.findDOMNode(instance);
+ expect(textNode).toBe(container.firstChild);
+ expect(textNode.nodeType).toBe(3);
+ expect(textNode.nodeValue).toBe('foo');
+ });
- it('finds the first child when a component returns a fragment', () => {
- class Fragment extends React.Component {
- render() {
- return [, ];
- }
+ it('finds the first child when a component returns a fragment', () => {
+ class Fragment extends React.Component {
+ render() {
+ return [, ];
}
+ }
- let instance = null;
- ReactDOM.render( (instance = ref)} />, container);
+ let instance = null;
+ ReactDOM.render( (instance = ref)} />, container);
- expect(container.childNodes.length).toBe(2);
+ expect(container.childNodes.length).toBe(2);
- const firstNode = ReactDOM.findDOMNode(instance);
- expect(firstNode).toBe(container.firstChild);
- expect(firstNode.tagName).toBe('DIV');
- });
+ const firstNode = ReactDOM.findDOMNode(instance);
+ expect(firstNode).toBe(container.firstChild);
+ expect(firstNode.tagName).toBe('DIV');
+ });
- it('finds the first child even when fragment is nested', () => {
- class Wrapper extends React.Component {
- render() {
- return this.props.children;
- }
+ it('finds the first child even when fragment is nested', () => {
+ class Wrapper extends React.Component {
+ render() {
+ return this.props.children;
}
+ }
- class Fragment extends React.Component {
- render() {
- return [, ];
- }
+ class Fragment extends React.Component {
+ render() {
+ return [, ];
}
+ }
- let instance = null;
- ReactDOM.render( (instance = ref)} />, container);
+ let instance = null;
+ ReactDOM.render( (instance = ref)} />, container);
- expect(container.childNodes.length).toBe(2);
+ expect(container.childNodes.length).toBe(2);
- const firstNode = ReactDOM.findDOMNode(instance);
- expect(firstNode).toBe(container.firstChild);
- expect(firstNode.tagName).toBe('DIV');
- });
+ const firstNode = ReactDOM.findDOMNode(instance);
+ expect(firstNode).toBe(container.firstChild);
+ expect(firstNode.tagName).toBe('DIV');
+ });
- it('finds the first child even when first child renders null', () => {
- class NullComponent extends React.Component {
- render() {
- return null;
- }
+ it('finds the first child even when first child renders null', () => {
+ class NullComponent extends React.Component {
+ render() {
+ return null;
}
+ }
- class Fragment extends React.Component {
- render() {
- return [, , ];
- }
+ class Fragment extends React.Component {
+ render() {
+ return [, , ];
}
+ }
- let instance = null;
- ReactDOM.render( (instance = ref)} />, container);
+ let instance = null;
+ ReactDOM.render( (instance = ref)} />, container);
- expect(container.childNodes.length).toBe(2);
+ expect(container.childNodes.length).toBe(2);
- const firstNode = ReactDOM.findDOMNode(instance);
- expect(firstNode).toBe(container.firstChild);
- expect(firstNode.tagName).toBe('DIV');
- });
- }
-
- if (ReactDOMFeatureFlags.useFiber) {
- var svgEls, htmlEls, mathEls;
- var expectSVG = {ref: el => svgEls.push(el)};
- var expectHTML = {ref: el => htmlEls.push(el)};
- var expectMath = {ref: el => mathEls.push(el)};
-
- var usePortal = function(tree) {
- return ReactDOM.createPortal(tree, document.createElement('div'));
- };
-
- var assertNamespacesMatch = function(tree) {
- container = document.createElement('div');
- svgEls = [];
- htmlEls = [];
- mathEls = [];
-
- ReactDOM.render(tree, container);
- svgEls.forEach(el => {
- expect(el.namespaceURI).toBe('http://www.w3.org/2000/svg');
- });
- htmlEls.forEach(el => {
- expect(el.namespaceURI).toBe('http://www.w3.org/1999/xhtml');
- });
- mathEls.forEach(el => {
- expect(el.namespaceURI).toBe('http://www.w3.org/1998/Math/MathML');
- });
-
- ReactDOM.unmountComponentAtNode(container);
- expect(container.innerHTML).toBe('');
- };
-
- it('should render one portal', () => {
- var portalContainer = document.createElement('div');
-
- ReactDOM.render(
-
,
+ container,
+ );
+
+ simulateMouseMove(null, firstTarget);
+ expect(ops).toEqual(['enter parent']);
+
+ ops = [];
+
+ simulateMouseMove(firstTarget, secondTarget);
+ expect(ops).toEqual([
+ // Parent did not invoke leave because we're still inside the portal.
+ 'enter portal',
+ ]);
+
+ ops = [];
+
+ simulateMouseMove(secondTarget, thirdTarget);
+ expect(ops).toEqual([
+ 'leave portal',
+ 'leave parent', // Only when we leave the portal does onMouseLeave fire.
+ ]);
+ });
- it('should warn for non-functional event listeners', () => {
- spyOn(console, 'error');
- class Example extends React.Component {
- render() {
- return ;
- }
+ it('should throw on bad createPortal argument', () => {
+ expect(() => {
+ ReactDOM.createPortal(
portal
, null);
+ }).toThrow('Target container is not a DOM element.');
+ expect(() => {
+ ReactDOM.createPortal(
portal
, document.createTextNode('hi'));
+ }).toThrow('Target container is not a DOM element.');
+ });
+
+ it('should warn for non-functional event listeners', () => {
+ spyOn(console, 'error');
+ class Example extends React.Component {
+ render() {
+ return ;
}
- ReactDOM.render(, container);
- expectDev(console.error.calls.count()).toBe(1);
- expectDev(
- normalizeCodeLocInfo(console.error.calls.argsFor(0)[0]),
- ).toContain(
- 'Expected `onClick` listener to be a function, instead got a value of `string` type.\n' +
- ' in div (at **)\n' +
- ' in Example (at **)',
- );
- });
+ }
+ ReactDOM.render(, container);
+ expectDev(console.error.calls.count()).toBe(1);
+ expectDev(
+ normalizeCodeLocInfo(console.error.calls.argsFor(0)[0]),
+ ).toContain(
+ 'Expected `onClick` listener to be a function, instead got a value of `string` type.\n' +
+ ' in div (at **)\n' +
+ ' in Example (at **)',
+ );
+ });
- it('should not update event handlers until commit', () => {
- let ops = [];
- const handlerA = () => ops.push('A');
- const handlerB = () => ops.push('B');
+ it('should not update event handlers until commit', () => {
+ let ops = [];
+ const handlerA = () => ops.push('A');
+ const handlerB = () => ops.push('B');
- class Example extends React.Component {
- state = {flip: false, count: 0};
- flip() {
- this.setState({flip: true, count: this.state.count + 1});
- }
- tick() {
- this.setState({count: this.state.count + 1});
- }
- render() {
- const useB = !this.props.forceA && this.state.flip;
- return ;
- }
+ class Example extends React.Component {
+ state = {flip: false, count: 0};
+ flip() {
+ this.setState({flip: true, count: this.state.count + 1});
}
-
- class Click extends React.Component {
- constructor() {
- super();
- click(node);
- }
- render() {
- return null;
- }
+ tick() {
+ this.setState({count: this.state.count + 1});
}
+ render() {
+ const useB = !this.props.forceA && this.state.flip;
+ return ;
+ }
+ }
- let inst;
- ReactDOM.render([ (inst = n)} />], container);
- const node = container.firstChild;
- expect(node.tagName).toEqual('DIV');
-
- function click(target) {
- var fakeNativeEvent = {};
- ReactTestUtils.simulateNativeEventOnNode(
- 'topClick',
- target,
- fakeNativeEvent,
- );
+ class Click extends React.Component {
+ constructor() {
+ super();
+ click(node);
}
+ render() {
+ return null;
+ }
+ }
- click(node);
+ let inst;
+ ReactDOM.render([ (inst = n)} />], container);
+ const node = container.firstChild;
+ expect(node.tagName).toEqual('DIV');
- expect(ops).toEqual(['A']);
- ops = [];
+ function click(target) {
+ var fakeNativeEvent = {};
+ ReactTestUtils.simulateNativeEventOnNode(
+ 'topClick',
+ target,
+ fakeNativeEvent,
+ );
+ }
- // Render with the other event handler.
- inst.flip();
+ click(node);
- click(node);
+ expect(ops).toEqual(['A']);
+ ops = [];
- expect(ops).toEqual(['B']);
- ops = [];
+ // Render with the other event handler.
+ inst.flip();
- // Rerender without changing any props.
- inst.tick();
+ click(node);
- click(node);
+ expect(ops).toEqual(['B']);
+ ops = [];
- expect(ops).toEqual(['B']);
- ops = [];
+ // Rerender without changing any props.
+ inst.tick();
- // Render a flip back to the A handler. The second component invokes the
- // click handler during render to simulate a click during an aborted
- // render. I use this hack because at current time we don't have a way to
- // test aborted ReactDOM renders.
- ReactDOM.render(
- [, ],
- container,
- );
+ click(node);
- // Because the new click handler has not yet committed, we should still
- // invoke B.
- expect(ops).toEqual(['B']);
- ops = [];
+ expect(ops).toEqual(['B']);
+ ops = [];
- // Any click that happens after commit, should invoke A.
- click(node);
- expect(ops).toEqual(['A']);
- });
+ // Render a flip back to the A handler. The second component invokes the
+ // click handler during render to simulate a click during an aborted
+ // render. I use this hack because at current time we don't have a way to
+ // test aborted ReactDOM renders.
+ ReactDOM.render(
+ [, ],
+ container,
+ );
- it('should not crash encountering low-priority tree', () => {
- ReactDOM.render(
-
-
-
,
- container,
- );
- });
+ // Because the new click handler has not yet committed, we should still
+ // invoke B.
+ expect(ops).toEqual(['B']);
+ ops = [];
- it('should not warn when rendering into an empty container', () => {
- spyOn(console, 'error');
- ReactDOM.render(
');
- expectDev(console.error.calls.count()).toBe(0);
- });
+ // Any click that happens after commit, should invoke A.
+ click(node);
+ expect(ops).toEqual(['A']);
+ });
- it('should warn when replacing a container which was manually updated outside of React', () => {
- spyOn(console, 'error');
- // when not messing with the DOM outside of React
- ReactDOM.render(
');
- // then we mess with the DOM before an update
- // we know this will error - that is expected right now
- // It's an error of type 'NotFoundError' with no message
- expect(() => {
- container.innerHTML = '
MEOW.
';
- ReactDOM.render(
baz
, container);
- }).toThrowError();
- expectDev(console.error.calls.count()).toBe(1);
- expectDev(console.error.calls.argsFor(0)[0]).toContain(
- 'render(...): ' +
- 'It looks like the React-rendered content of this container was ' +
- 'removed without using React. This is not supported and will ' +
- 'cause errors. Instead, call ReactDOM.unmountComponentAtNode ' +
- 'to empty a container.',
- );
- });
+ it('should not crash encountering low-priority tree', () => {
+ ReactDOM.render(
+
+
+
,
+ container,
+ );
+ });
- it('should warn when doing an update to a container manually updated outside of React', () => {
- spyOn(console, 'error');
- // when not messing with the DOM outside of React
- ReactDOM.render(
');
- // then we mess with the DOM before an update
- container.innerHTML = '
MEOW.
';
- ReactDOM.render(
baz
, container);
- // silently fails to update
- expectDev(console.error.calls.count()).toBe(1);
- expectDev(console.error.calls.argsFor(0)[0]).toContain(
- 'render(...): ' +
- 'It looks like the React-rendered content of this container was ' +
- 'removed without using React. This is not supported and will ' +
- 'cause errors. Instead, call ReactDOM.unmountComponentAtNode ' +
- 'to empty a container.',
- );
- });
+ it('should not warn when rendering into an empty container', () => {
+ spyOn(console, 'error');
+ ReactDOM.render(
');
+ expectDev(console.error.calls.count()).toBe(0);
+ });
- it('should warn when doing an update to a container manually cleared outside of React', () => {
- spyOn(console, 'error');
- // when not messing with the DOM outside of React
- ReactDOM.render(
');
- // then we mess with the DOM before an update
- container.innerHTML = '';
- ReactDOM.render(
baz
, container);
- // silently fails to update
- expectDev(console.error.calls.count()).toBe(1);
- expectDev(console.error.calls.argsFor(0)[0]).toContain(
- 'render(...): ' +
- 'It looks like the React-rendered content of this container was ' +
- 'removed without using React. This is not supported and will ' +
- 'cause errors. Instead, call ReactDOM.unmountComponentAtNode ' +
- 'to empty a container.',
- );
- });
+ it('should warn when replacing a container which was manually updated outside of React', () => {
+ spyOn(console, 'error');
+ // when not messing with the DOM outside of React
+ ReactDOM.render(
');
+ // then we mess with the DOM before an update
+ // we know this will error - that is expected right now
+ // It's an error of type 'NotFoundError' with no message
+ expect(() => {
+ container.innerHTML = '
MEOW.
';
+ ReactDOM.render(
baz
, container);
+ }).toThrowError();
+ expectDev(console.error.calls.count()).toBe(1);
+ expectDev(console.error.calls.argsFor(0)[0]).toContain(
+ 'render(...): ' +
+ 'It looks like the React-rendered content of this container was ' +
+ 'removed without using React. This is not supported and will ' +
+ 'cause errors. Instead, call ReactDOM.unmountComponentAtNode ' +
+ 'to empty a container.',
+ );
+ });
- it('should render a text component with a text DOM node on the same document as the container', () => {
- // 1. Create a new document through the use of iframe
- // 2. Set up the spy to make asserts when a text component
- // is rendered inside the iframe container
- var textContent = 'Hello world';
- var iframe = document.createElement('iframe');
- document.body.appendChild(iframe);
- var iframeDocument = iframe.contentDocument;
- iframeDocument.write(
- '',
- );
- iframeDocument.close();
- var iframeContainer = iframeDocument.body.firstChild;
+ it('should warn when doing an update to a container manually updated outside of React', () => {
+ spyOn(console, 'error');
+ // when not messing with the DOM outside of React
+ ReactDOM.render(
');
+ // then we mess with the DOM before an update
+ container.innerHTML = '
MEOW.
';
+ ReactDOM.render(
baz
, container);
+ // silently fails to update
+ expectDev(console.error.calls.count()).toBe(1);
+ expectDev(console.error.calls.argsFor(0)[0]).toContain(
+ 'render(...): ' +
+ 'It looks like the React-rendered content of this container was ' +
+ 'removed without using React. This is not supported and will ' +
+ 'cause errors. Instead, call ReactDOM.unmountComponentAtNode ' +
+ 'to empty a container.',
+ );
+ });
- var actualDocument;
- var textNode;
+ it('should warn when doing an update to a container manually cleared outside of React', () => {
+ spyOn(console, 'error');
+ // when not messing with the DOM outside of React
+ ReactDOM.render(
, container);
+ jest.runAllTimers();
- instance.setState({step: 1});
- expect(container.textContent).toEqual('0');
- jest.runAllTimers();
- expect(container.textContent).toEqual('1');
- });
+ instance.setState({step: 1});
+ expect(container.textContent).toEqual('0');
+ jest.runAllTimers();
+ expect(container.textContent).toEqual('1');
+ });
- it('flushSync batches sync updates and flushes them at the end of the batch', () => {
- let ops = [];
- let instance;
-
- class Component extends React.Component {
- state = {text: ''};
- push(val) {
- this.setState(state => ({text: state.text + val}));
- }
- componentDidUpdate() {
- ops.push(this.state.text);
- }
- render() {
- instance = this;
- return {this.state.text};
- }
+ it('flushSync batches sync updates and flushes them at the end of the batch', () => {
+ let ops = [];
+ let instance;
+
+ class Component extends React.Component {
+ state = {text: ''};
+ push(val) {
+ this.setState(state => ({text: state.text + val}));
+ }
+ componentDidUpdate() {
+ ops.push(this.state.text);
+ }
+ render() {
+ instance = this;
+ return {this.state.text};
}
+ }
- ReactDOM.render(, container);
+ ReactDOM.render(, container);
- instance.push('A');
- expect(ops).toEqual(['A']);
- expect(container.textContent).toEqual('A');
+ instance.push('A');
+ expect(ops).toEqual(['A']);
+ expect(container.textContent).toEqual('A');
- ReactDOM.flushSync(() => {
- instance.push('B');
- instance.push('C');
- // Not flushed yet
- expect(container.textContent).toEqual('A');
- expect(ops).toEqual(['A']);
- });
- expect(container.textContent).toEqual('ABC');
- expect(ops).toEqual(['A', 'ABC']);
- instance.push('D');
- expect(container.textContent).toEqual('ABCD');
- expect(ops).toEqual(['A', 'ABC', 'ABCD']);
+ ReactDOM.flushSync(() => {
+ instance.push('B');
+ instance.push('C');
+ // Not flushed yet
+ expect(container.textContent).toEqual('A');
+ expect(ops).toEqual(['A']);
});
+ expect(container.textContent).toEqual('ABC');
+ expect(ops).toEqual(['A', 'ABC']);
+ instance.push('D');
+ expect(container.textContent).toEqual('ABCD');
+ expect(ops).toEqual(['A', 'ABC', 'ABCD']);
+ });
+
+ it('flushSync flushes updates even if nested inside another flushSync', () => {
+ let ops = [];
+ let instance;
- it('flushSync flushes updates even if nested inside another flushSync', () => {
- let ops = [];
- let instance;
-
- class Component extends React.Component {
- state = {text: ''};
- push(val) {
- this.setState(state => ({text: state.text + val}));
- }
- componentDidUpdate() {
- ops.push(this.state.text);
- }
- render() {
- instance = this;
- return {this.state.text};
- }
+ class Component extends React.Component {
+ state = {text: ''};
+ push(val) {
+ this.setState(state => ({text: state.text + val}));
}
+ componentDidUpdate() {
+ ops.push(this.state.text);
+ }
+ render() {
+ instance = this;
+ return {this.state.text};
+ }
+ }
- ReactDOM.render(, container);
+ ReactDOM.render(, container);
- instance.push('A');
- expect(ops).toEqual(['A']);
+ instance.push('A');
+ expect(ops).toEqual(['A']);
+ expect(container.textContent).toEqual('A');
+
+ ReactDOM.flushSync(() => {
+ instance.push('B');
+ instance.push('C');
+ // Not flushed yet
expect(container.textContent).toEqual('A');
+ expect(ops).toEqual(['A']);
ReactDOM.flushSync(() => {
- instance.push('B');
- instance.push('C');
- // Not flushed yet
- expect(container.textContent).toEqual('A');
- expect(ops).toEqual(['A']);
-
- ReactDOM.flushSync(() => {
- instance.push('D');
- });
- // The nested flushSync caused everything to flush.
- expect(container.textContent).toEqual('ABCD');
- expect(ops).toEqual(['A', 'ABCD']);
+ instance.push('D');
});
+ // The nested flushSync caused everything to flush.
expect(container.textContent).toEqual('ABCD');
expect(ops).toEqual(['A', 'ABCD']);
});
+ expect(container.textContent).toEqual('ABCD');
+ expect(ops).toEqual(['A', 'ABCD']);
+ });
- it('flushSync throws if already performing work', () => {
- class Component extends React.Component {
- componentDidUpdate() {
- ReactDOM.flushSync(() => {});
- }
- render() {
- return null;
- }
+ it('flushSync throws if already performing work', () => {
+ class Component extends React.Component {
+ componentDidUpdate() {
+ ReactDOM.flushSync(() => {});
}
+ render() {
+ return null;
+ }
+ }
+
+ // Initial mount
+ ReactDOM.render(, container);
+ // Update
+ expect(() => ReactDOM.render(, container)).toThrow(
+ 'flushSync was called from inside a lifecycle method',
+ );
+ });
- // Initial mount
- ReactDOM.render(, container);
- // Update
- expect(() => ReactDOM.render(, container)).toThrow(
- 'flushSync was called from inside a lifecycle method',
- );
- });
+ it('flushSync flushes updates before end of the tick', () => {
+ let ops = [];
+ let instance;
- it('flushSync flushes updates before end of the tick', () => {
- let ops = [];
- let instance;
-
- class Component extends React.unstable_AsyncComponent {
- state = {text: ''};
- push(val) {
- this.setState(state => ({text: state.text + val}));
- }
- componentDidUpdate() {
- ops.push(this.state.text);
- }
- render() {
- instance = this;
- return {this.state.text};
- }
+ class Component extends React.unstable_AsyncComponent {
+ state = {text: ''};
+ push(val) {
+ this.setState(state => ({text: state.text + val}));
}
+ componentDidUpdate() {
+ ops.push(this.state.text);
+ }
+ render() {
+ instance = this;
+ return {this.state.text};
+ }
+ }
- ReactDOM.render(, container);
- jest.runAllTimers();
+ ReactDOM.render(, container);
+ jest.runAllTimers();
- // Updates are async by default
- instance.push('A');
- expect(ops).toEqual([]);
- expect(container.textContent).toEqual('');
+ // Updates are async by default
+ instance.push('A');
+ expect(ops).toEqual([]);
+ expect(container.textContent).toEqual('');
- ReactDOM.flushSync(() => {
- instance.push('B');
- instance.push('C');
- // Not flushed yet
- expect(container.textContent).toEqual('');
- expect(ops).toEqual([]);
- });
- // Only the active updates have flushed
- expect(container.textContent).toEqual('BC');
- expect(ops).toEqual(['BC']);
-
- instance.push('D');
- expect(container.textContent).toEqual('BC');
- expect(ops).toEqual(['BC']);
-
- // Flush the async updates
- jest.runAllTimers();
- expect(container.textContent).toEqual('BCAD');
- expect(ops).toEqual(['BC', 'BCAD']);
+ ReactDOM.flushSync(() => {
+ instance.push('B');
+ instance.push('C');
+ // Not flushed yet
+ expect(container.textContent).toEqual('');
+ expect(ops).toEqual([]);
});
+ // Only the active updates have flushed
+ expect(container.textContent).toEqual('BC');
+ expect(ops).toEqual(['BC']);
+
+ instance.push('D');
+ expect(container.textContent).toEqual('BC');
+ expect(ops).toEqual(['BC']);
+
+ // Flush the async updates
+ jest.runAllTimers();
+ expect(container.textContent).toEqual('BCAD');
+ expect(ops).toEqual(['BC', 'BCAD']);
});
- }
+ });
});
diff --git a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
index 19d4ae02956..8c8c9ea1e41 100644
--- a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
+++ b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
@@ -15,7 +15,6 @@ describe('ReactDOMComponent', () => {
var ReactDOM;
var ReactDOMServer;
var inputValueTracking;
- var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
function normalizeCodeLocInfo(str) {
return str && str.replace(/\(at .+?:\d+\)/g, '(at **)');
@@ -25,7 +24,6 @@ describe('ReactDOMComponent', () => {
jest.resetModules();
React = require('react');
ReactDOM = require('react-dom');
- ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
ReactDOMServer = require('react-dom/server');
ReactTestUtils = require('react-dom/test-utils');
// TODO: can we express this test with only public API?
@@ -940,9 +938,7 @@ describe('ReactDOMComponent', () => {
' is using uppercase HTML',
);
expectDev(console.error.calls.argsFor(3)[0]).toContain(
- ReactDOMFeatureFlags.useFiber
- ? 'The tag is unrecognized in this browser'
- : 'The tag is unrecognized in this browser',
+ 'The tag is unrecognized in this browser',
);
});
@@ -1323,36 +1319,6 @@ describe('ReactDOMComponent', () => {
});
describe('unmountComponent', () => {
- // Fiber does not have a clean-up phase for host components; relies on GC
- if (!ReactDOMFeatureFlags.useFiber) {
- it('should clean up input value tracking', () => {
- var container = document.createElement('div');
- var node = ReactDOM.render(
- ,
- container,
- );
- var tracker = inputValueTracking._getTrackerFromNode(node);
-
- spyOn(tracker, 'stopTracking');
-
- ReactDOM.unmountComponentAtNode(container);
-
- expect(tracker.stopTracking.calls.count()).toBe(1);
- });
-
- it('should clean up input textarea tracking', () => {
- var container = document.createElement('div');
- var node = ReactDOM.render(, container);
- var tracker = inputValueTracking._getTrackerFromNode(node);
-
- spyOn(tracker, 'stopTracking');
-
- ReactDOM.unmountComponentAtNode(container);
-
- expect(tracker.stopTracking.calls.count()).toBe(1);
- });
- }
-
it('unmounts children before unsetting DOM node info', () => {
class Inner extends React.Component {
render() {
@@ -1402,15 +1368,12 @@ describe('ReactDOMComponent', () => {
spyOn(console, 'error');
ReactTestUtils.renderIntoDocument(
);
- var addendum = ReactDOMFeatureFlags.useFiber
- ? '\n in tr (at **)' + '\n in div (at **)'
- : ' See div > tr.';
-
expectDev(console.error.calls.count()).toBe(1);
expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe(
'Warning: validateDOMNesting(...):
cannot appear as a child of ' +
'
.' +
- addendum,
+ '\n in tr (at **)' +
+ '\n in div (at **)',
);
});
@@ -1419,16 +1382,13 @@ describe('ReactDOMComponent', () => {
var p = document.createElement('p');
ReactDOM.render(, p);
- var addendum = ReactDOMFeatureFlags.useFiber
- ? // There is no outer `p` here because root container is not part of the stack.
- '\n in p (at **)' + '\n in span (at **)'
- : ' See p > ... > p.';
-
expectDev(console.error.calls.count()).toBe(1);
expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe(
'Warning: validateDOMNesting(...):
cannot appear as a descendant ' +
'of
.' +
- addendum,
+ // There is no outer `p` here because root container is not part of the stack.
+ '\n in p (at **)' +
+ '\n in span (at **)',
);
});
@@ -1450,39 +1410,31 @@ describe('ReactDOMComponent', () => {
ReactTestUtils.renderIntoDocument();
expectDev(console.error.calls.count()).toBe(3);
- var addendum1 = ReactDOMFeatureFlags.useFiber
- ? '\n in tr (at **)' +
- '\n in Row (at **)' +
- '\n in table (at **)' +
- '\n in Foo (at **)'
- : ' See Foo > table > Row > tr.';
expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe(
'Warning: validateDOMNesting(...):
cannot appear as a child of ' +
'
. Add a to your code to match the DOM tree generated ' +
'by the browser.' +
- addendum1,
+ '\n in tr (at **)' +
+ '\n in Row (at **)' +
+ '\n in table (at **)' +
+ '\n in Foo (at **)',
);
- var addendum2 = ReactDOMFeatureFlags.useFiber
- ? '\n in tr (at **)' +
- '\n in Row (at **)' +
- '\n in table (at **)' +
- '\n in Foo (at **)'
- : ' See Row > tr > #text.';
expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(1)[0])).toBe(
'Warning: validateDOMNesting(...): Text nodes cannot appear as a ' +
'child of
.' +
- addendum2,
+ '\n in tr (at **)' +
+ '\n in Row (at **)' +
+ '\n in table (at **)' +
+ '\n in Foo (at **)',
);
- var addendum3 = ReactDOMFeatureFlags.useFiber
- ? '\n in table (at **)' + '\n in Foo (at **)'
- : ' See Foo > table > #text.';
expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(2)[0])).toBe(
'Warning: validateDOMNesting(...): Whitespace text nodes cannot ' +
"appear as a child of
. Make sure you don't have any extra " +
'whitespace between tags on each line of your source code.' +
- addendum3,
+ '\n in table (at **)' +
+ '\n in Foo (at **)',
);
});
@@ -1518,13 +1470,11 @@ describe('ReactDOMComponent', () => {
expectDev(
normalizeCodeLocInfo(console.error.calls.argsFor(0)[0]),
).toContain(
- ReactDOMFeatureFlags.useFiber
- ? '\n in tr (at **)' +
- '\n in Row (at **)' +
- '\n in FancyRow (at **)' +
- '\n in table (at **)' +
- '\n in Viz1 (at **)'
- : 'See Viz1 > table > FancyRow > Row > tr.',
+ '\n in tr (at **)' +
+ '\n in Row (at **)' +
+ '\n in FancyRow (at **)' +
+ '\n in table (at **)' +
+ '\n in Viz1 (at **)',
);
function Viz2() {
@@ -1538,15 +1488,13 @@ describe('ReactDOMComponent', () => {
expectDev(
normalizeCodeLocInfo(console.error.calls.argsFor(1)[0]),
).toContain(
- ReactDOMFeatureFlags.useFiber
- ? '\n in tr (at **)' +
- '\n in Row (at **)' +
- '\n in FancyRow (at **)' +
- '\n in table (at **)' +
- '\n in Table (at **)' +
- '\n in FancyTable (at **)' +
- '\n in Viz2 (at **)'
- : 'See Viz2 > FancyTable > Table > table > FancyRow > Row > tr.',
+ '\n in tr (at **)' +
+ '\n in Row (at **)' +
+ '\n in FancyRow (at **)' +
+ '\n in table (at **)' +
+ '\n in Table (at **)' +
+ '\n in FancyTable (at **)' +
+ '\n in Viz2 (at **)',
);
ReactTestUtils.renderIntoDocument();
@@ -1554,14 +1502,12 @@ describe('ReactDOMComponent', () => {
expectDev(
normalizeCodeLocInfo(console.error.calls.argsFor(2)[0]),
).toContain(
- ReactDOMFeatureFlags.useFiber
- ? '\n in tr (at **)' +
- '\n in Row (at **)' +
- '\n in FancyRow (at **)' +
- '\n in table (at **)' +
- '\n in Table (at **)' +
- '\n in FancyTable (at **)'
- : 'See FancyTable > Table > table > FancyRow > Row > tr.',
+ '\n in tr (at **)' +
+ '\n in Row (at **)' +
+ '\n in FancyRow (at **)' +
+ '\n in table (at **)' +
+ '\n in Table (at **)' +
+ '\n in FancyTable (at **)',
);
ReactTestUtils.renderIntoDocument(
],
+ text2,
+ [[[null, ], false]],
+ ]);
+ let parent = e.parentNode;
+ expect(parent.childNodes[0].tagName).toBe('DIV');
+ expect(parent.childNodes[1].tagName).toBe('SPAN');
+ expect(parent.childNodes[2].tagName).toBe('P');
+ });
- // Empty string is special because client renders a node
- // but server returns empty HTML. So we compare parent text.
- expect((await render(
{''}
)).textContent).toBe('');
+ itRenders('an iterable', async render => {
+ const threeDivIterable = {
+ '@@iterator': function() {
+ var i = 0;
+ return {
+ next: function() {
+ if (i++ < 3) {
+ return {value: , done: false};
+ } else {
+ return {value: undefined, done: true};
+ }
+ },
+ };
+ },
+ };
+ let e = await render(threeDivIterable);
+ let parent = e.parentNode;
+ expect(parent.childNodes.length).toBe(3);
+ expect(parent.childNodes[0].tagName).toBe('DIV');
+ expect(parent.childNodes[1].tagName).toBe('DIV');
+ expect(parent.childNodes[2].tagName).toBe('DIV');
+ });
- expect(await render([])).toBe(null);
- expect(await render(false)).toBe(null);
- expect(await render(true)).toBe(null);
- expect(await render(undefined)).toBe(null);
- expect(await render([[[false]], undefined])).toBe(null);
- });
- }
+ itRenders('emptyish values', async render => {
+ let e = await render(0);
+ expect(e.nodeType).toBe(TEXT_NODE_TYPE);
+ expect(e.nodeValue).toMatch('0');
+
+ // Empty string is special because client renders a node
+ // but server returns empty HTML. So we compare parent text.
+ expect((await render(
{''}
)).textContent).toBe('');
+
+ expect(await render([])).toBe(null);
+ expect(await render(false)).toBe(null);
+ expect(await render(true)).toBe(null);
+ expect(await render(undefined)).toBe(null);
+ expect(await render([[[false]], undefined])).toBe(null);
+ });
});
describe('property to attribute mapping', function() {
@@ -999,23 +991,7 @@ describe('ReactDOMServerIntegration', () => {
}
function expectTextNode(node, text) {
- if (ReactDOMFeatureFlags.useFiber) {
- // with Fiber, a React text node is just a DOM text node.
- expectNode(node, TEXT_NODE_TYPE, text);
- } else {
- // with Stack, a React text node is a DOM text node surrounded by
- // react-text comment nodes.
- expectNode(node, COMMENT_NODE_TYPE, / react-text: [0-9]+ /);
- if (text.length > 0) {
- node = node.nextSibling;
- expectNode(node, TEXT_NODE_TYPE, text);
- }
- expectNode(node.nextSibling, COMMENT_NODE_TYPE, / \/react-text /);
- }
- }
-
- function expectEmptyNode(node) {
- expectNode(node, COMMENT_NODE_TYPE, / react-empty: [0-9]+ /);
+ expectNode(node, TEXT_NODE_TYPE, text);
}
describe('text children', function() {
@@ -1040,74 +1016,45 @@ describe('ReactDOMServerIntegration', () => {
itRenders('a div with multiple empty text children', async render => {
const e = await render(
{''}{''}{''}
);
- if (ReactDOMFeatureFlags.useFiber) {
- // with Fiber, there are just three separate text node children,
- // each of which is blank.
- if (render === serverRender || render === streamRender) {
- // For plain server markup result we should have no text nodes if
- // they're all empty.
- expect(e.childNodes.length).toBe(0);
- expect(e.textContent).toBe('');
- } else {
- expect(e.childNodes.length).toBe(3);
- expectTextNode(e.childNodes[0], '');
- expectTextNode(e.childNodes[1], '');
- expectTextNode(e.childNodes[2], '');
- }
+ if (render === serverRender || render === streamRender) {
+ // For plain server markup result we should have no text nodes if
+ // they're all empty.
+ expect(e.childNodes.length).toBe(0);
+ expect(e.textContent).toBe('');
} else {
- // with Stack, there are six react-text comment nodes.
- expect(e.childNodes.length).toBe(6);
+ expect(e.childNodes.length).toBe(3);
expectTextNode(e.childNodes[0], '');
+ expectTextNode(e.childNodes[1], '');
expectTextNode(e.childNodes[2], '');
- expectTextNode(e.childNodes[4], '');
}
});
itRenders('a div with multiple whitespace children', async render => {
const e = await render(
{' '}{' '}{' '}
);
- if (ReactDOMFeatureFlags.useFiber) {
- // with Fiber, there are normally just three text nodes
- if (
- render === serverRender ||
- render === clientRenderOnServerString ||
- render === streamRender
- ) {
- // For plain server markup result we have comments between.
- // If we're able to hydrate, they remain.
- expect(e.childNodes.length).toBe(5);
- expectTextNode(e.childNodes[0], ' ');
- expectTextNode(e.childNodes[2], ' ');
- expectTextNode(e.childNodes[4], ' ');
- } else {
- expect(e.childNodes.length).toBe(3);
- expectTextNode(e.childNodes[0], ' ');
- expectTextNode(e.childNodes[1], ' ');
- expectTextNode(e.childNodes[2], ' ');
- }
+ if (
+ render === serverRender ||
+ render === clientRenderOnServerString ||
+ render === streamRender
+ ) {
+ // For plain server markup result we have comments between.
+ // If we're able to hydrate, they remain.
+ expect(e.childNodes.length).toBe(5);
+ expectTextNode(e.childNodes[0], ' ');
+ expectTextNode(e.childNodes[2], ' ');
+ expectTextNode(e.childNodes[4], ' ');
} else {
- // with Stack, each of the text nodes is surrounded by react-text
- // comment nodes, making 9 nodes in total.
- expect(e.childNodes.length).toBe(9);
+ expect(e.childNodes.length).toBe(3);
expectTextNode(e.childNodes[0], ' ');
- expectTextNode(e.childNodes[3], ' ');
- expectTextNode(e.childNodes[6], ' ');
+ expectTextNode(e.childNodes[1], ' ');
+ expectTextNode(e.childNodes[2], ' ');
}
});
itRenders('a div with text sibling to a node', async render => {
const e = await render(
TextMore Text
);
let spanNode;
- if (ReactDOMFeatureFlags.useFiber) {
- // with Fiber, there are only two children, the "Text" text node and
- // the span element.
- expect(e.childNodes.length).toBe(2);
- spanNode = e.childNodes[1];
- } else {
- // with Stack, there are four children, a "Text" text node surrounded
- // by react-text comment nodes, and the span element.
- expect(e.childNodes.length).toBe(4);
- spanNode = e.childNodes[3];
- }
+ expect(e.childNodes.length).toBe(2);
+ spanNode = e.childNodes[1];
expectTextNode(e.childNodes[0], 'Text');
expect(spanNode.tagName).toBe('SPAN');
expect(spanNode.childNodes.length).toBe(1);
@@ -1130,72 +1077,44 @@ describe('ReactDOMServerIntegration', () => {
itRenders('a leading blank child with a text sibling', async render => {
const e = await render(
{''}foo
);
- if (ReactDOMFeatureFlags.useFiber) {
- // with Fiber, there are just two text nodes.
- if (render === serverRender || render === streamRender) {
- expect(e.childNodes.length).toBe(1);
- expectTextNode(e.childNodes[0], 'foo');
- } else {
- expect(e.childNodes.length).toBe(2);
- expectTextNode(e.childNodes[0], '');
- expectTextNode(e.childNodes[1], 'foo');
- }
+ if (render === serverRender || render === streamRender) {
+ expect(e.childNodes.length).toBe(1);
+ expectTextNode(e.childNodes[0], 'foo');
} else {
- // with Stack, there are five nodes: two react-text comment nodes
- // without any text between them, and the text node foo surrounded
- // by react-text comment nodes.
- expect(e.childNodes.length).toBe(5);
+ expect(e.childNodes.length).toBe(2);
expectTextNode(e.childNodes[0], '');
- expectTextNode(e.childNodes[2], 'foo');
+ expectTextNode(e.childNodes[1], 'foo');
}
});
itRenders('a trailing blank child with a text sibling', async render => {
const e = await render(
foo{''}
);
- if (ReactDOMFeatureFlags.useFiber) {
- // with Fiber, there are just two text nodes.
- if (render === serverRender || render === streamRender) {
- expect(e.childNodes.length).toBe(1);
- expectTextNode(e.childNodes[0], 'foo');
- } else {
- expect(e.childNodes.length).toBe(2);
- expectTextNode(e.childNodes[0], 'foo');
- expectTextNode(e.childNodes[1], '');
- }
+ // with Fiber, there are just two text nodes.
+ if (render === serverRender || render === streamRender) {
+ expect(e.childNodes.length).toBe(1);
+ expectTextNode(e.childNodes[0], 'foo');
} else {
- // with Stack, there are five nodes: the text node foo surrounded
- // by react-text comment nodes, and two react-text comment nodes
- // without any text between them.
- expect(e.childNodes.length).toBe(5);
+ expect(e.childNodes.length).toBe(2);
expectTextNode(e.childNodes[0], 'foo');
- expectTextNode(e.childNodes[3], '');
+ expectTextNode(e.childNodes[1], '');
}
});
itRenders('an element with two text children', async render => {
const e = await render(
{'foo'}{'bar'}
);
- if (ReactDOMFeatureFlags.useFiber) {
- // with Fiber, there are just two text nodes.
- if (
- render === serverRender ||
- render === clientRenderOnServerString ||
- render === streamRender
- ) {
- // In the server render output there's a comment between them.
- expect(e.childNodes.length).toBe(3);
- expectTextNode(e.childNodes[0], 'foo');
- expectTextNode(e.childNodes[2], 'bar');
- } else {
- expect(e.childNodes.length).toBe(2);
- expectTextNode(e.childNodes[0], 'foo');
- expectTextNode(e.childNodes[1], 'bar');
- }
+ if (
+ render === serverRender ||
+ render === clientRenderOnServerString ||
+ render === streamRender
+ ) {
+ // In the server render output there's a comment between them.
+ expect(e.childNodes.length).toBe(3);
+ expectTextNode(e.childNodes[0], 'foo');
+ expectTextNode(e.childNodes[2], 'bar');
} else {
- // with Stack, there are six nodes: two text nodes, each surrounded
- // by react-text comment nodes.
- expect(e.childNodes.length).toBe(6);
+ expect(e.childNodes.length).toBe(2);
expectTextNode(e.childNodes[0], 'foo');
- expectTextNode(e.childNodes[3], 'bar');
+ expectTextNode(e.childNodes[1], 'bar');
}
});
});
@@ -1214,28 +1133,20 @@ describe('ReactDOMServerIntegration', () => {
itRenders('an element with number and text children', async render => {
const e = await render(
{'foo'}{40}
);
- if (ReactDOMFeatureFlags.useFiber) {
- // with Fiber, there are just two text nodes.
- if (
- render === serverRender ||
- render === clientRenderOnServerString ||
- render === streamRender
- ) {
- // In the server markup there's a comment between.
- expect(e.childNodes.length).toBe(3);
- expectTextNode(e.childNodes[0], 'foo');
- expectTextNode(e.childNodes[2], '40');
- } else {
- expect(e.childNodes.length).toBe(2);
- expectTextNode(e.childNodes[0], 'foo');
- expectTextNode(e.childNodes[1], '40');
- }
+ // with Fiber, there are just two text nodes.
+ if (
+ render === serverRender ||
+ render === clientRenderOnServerString ||
+ render === streamRender
+ ) {
+ // In the server markup there's a comment between.
+ expect(e.childNodes.length).toBe(3);
+ expectTextNode(e.childNodes[0], 'foo');
+ expectTextNode(e.childNodes[2], '40');
} else {
- // with Stack, there are six nodes: two text nodes, each surrounded
- // by react-text comment nodes.
- expect(e.childNodes.length).toBe(6);
+ expect(e.childNodes.length).toBe(2);
expectTextNode(e.childNodes[0], 'foo');
- expectTextNode(e.childNodes[3], '40');
+ expectTextNode(e.childNodes[1], '40');
}
});
});
@@ -1259,54 +1170,25 @@ describe('ReactDOMServerIntegration', () => {
itRenders('a null component children as empty', async render => {
const NullComponent = () => null;
const e = await render(
);
- if (ReactDOMFeatureFlags.useFiber) {
- // with Fiber, an empty component results in no markup.
- expect(e.childNodes.length).toBe(0);
- } else {
- // with Stack, an empty component results in one react-empty comment
- // node.
- expect(e.childNodes.length).toBe(1);
- expectEmptyNode(e.firstChild);
- }
+ expect(e.childNodes.length).toBe(0);
});
itRenders('null children as blank', async render => {
const e = await render(
{null}foo
);
- if (ReactDOMFeatureFlags.useFiber) {
- // with Fiber, there is just one text node.
- expect(e.childNodes.length).toBe(1);
- expectTextNode(e.childNodes[0], 'foo');
- } else {
- // with Stack, there's a text node surronded by react-text comment nodes.
- expect(e.childNodes.length).toBe(3);
- expectTextNode(e.childNodes[0], 'foo');
- }
+ expect(e.childNodes.length).toBe(1);
+ expectTextNode(e.childNodes[0], 'foo');
});
itRenders('false children as blank', async render => {
const e = await render(
{false}foo
);
- if (ReactDOMFeatureFlags.useFiber) {
- // with Fiber, there is just one text node.
- expect(e.childNodes.length).toBe(1);
- expectTextNode(e.childNodes[0], 'foo');
- } else {
- // with Stack, there's a text node surronded by react-text comment nodes.
- expect(e.childNodes.length).toBe(3);
- expectTextNode(e.childNodes[0], 'foo');
- }
+ expect(e.childNodes.length).toBe(1);
+ expectTextNode(e.childNodes[0], 'foo');
});
itRenders('null and false children together as blank', async render => {
const e = await render(
{false}{null}foo{null}{false}
);
- if (ReactDOMFeatureFlags.useFiber) {
- // with Fiber, there is just one text node.
- expect(e.childNodes.length).toBe(1);
- expectTextNode(e.childNodes[0], 'foo');
- } else {
- // with Stack, there's a text node surronded by react-text comment nodes.
- expect(e.childNodes.length).toBe(3);
- expectTextNode(e.childNodes[0], 'foo');
- }
+ expect(e.childNodes.length).toBe(1);
+ expectTextNode(e.childNodes[0], 'foo');
});
itRenders('only null and false children as blank', async render => {
@@ -1522,21 +1404,10 @@ describe('ReactDOMServerIntegration', () => {
);
expect(e.id).toBe('parent');
let child1, child2, textNode;
- if (ReactDOMFeatureFlags.useFiber) {
- // with Fiber, there are three children: the child1 element, a
- // single space text node, and the child2 element.
- expect(e.childNodes.length).toBe(3);
- child1 = e.childNodes[0];
- textNode = e.childNodes[1];
- child2 = e.childNodes[2];
- } else {
- // with Stack, there are five children: the child1 element, a single
- // space surrounded by react-text comments, and the child2 element.
- expect(e.childNodes.length).toBe(5);
- child1 = e.childNodes[0];
- textNode = e.childNodes[1];
- child2 = e.childNodes[4];
- }
+ expect(e.childNodes.length).toBe(3);
+ child1 = e.childNodes[0];
+ textNode = e.childNodes[1];
+ child2 = e.childNodes[2];
expect(child1.id).toBe('child1');
expect(child1.childNodes.length).toBe(0);
expectTextNode(textNode, ' ');
@@ -1551,22 +1422,10 @@ describe('ReactDOMServerIntegration', () => {
// prettier-ignore
const e = await render(
); // eslint-disable-line no-multi-spaces
let textNode1, child, textNode2;
- if (ReactDOMFeatureFlags.useFiber) {
- // with Fiber, there are three children: a one-space text node, the
- // child element, and a two-space text node.
- expect(e.childNodes.length).toBe(3);
- textNode1 = e.childNodes[0];
- child = e.childNodes[1];
- textNode2 = e.childNodes[2];
- } else {
- // with Stack, there are 7 children: a one-space text node surrounded
- // by react-text comments, the child element, and a two-space text node
- // surrounded by react-text comments.
- expect(e.childNodes.length).toBe(7);
- textNode1 = e.childNodes[0];
- child = e.childNodes[3];
- textNode2 = e.childNodes[4];
- }
+ expect(e.childNodes.length).toBe(3);
+ textNode1 = e.childNodes[0];
+ child = e.childNodes[1];
+ textNode2 = e.childNodes[2];
expect(e.id).toBe('parent');
expectTextNode(textNode1, ' ');
expect(child.id).toBe('child');
@@ -1575,33 +1434,31 @@ describe('ReactDOMServerIntegration', () => {
},
);
- if (ReactDOMFeatureFlags.useFiber) {
- itRenders('a composite with multiple children', async render => {
- const Component = props => props.children;
- const e = await render(
- {['a', 'b', [undefined], [[false, 'c']]]},
- );
+ itRenders('a composite with multiple children', async render => {
+ const Component = props => props.children;
+ const e = await render(
+ {['a', 'b', [undefined], [[false, 'c']]]},
+ );
- let parent = e.parentNode;
- if (
- render === serverRender ||
- render === clientRenderOnServerString ||
- render === streamRender
- ) {
- // For plain server markup result we have comments between.
- // If we're able to hydrate, they remain.
- expect(parent.childNodes.length).toBe(5);
- expectTextNode(parent.childNodes[0], 'a');
- expectTextNode(parent.childNodes[2], 'b');
- expectTextNode(parent.childNodes[4], 'c');
- } else {
- expect(parent.childNodes.length).toBe(3);
- expectTextNode(parent.childNodes[0], 'a');
- expectTextNode(parent.childNodes[1], 'b');
- expectTextNode(parent.childNodes[2], 'c');
- }
- });
- }
+ let parent = e.parentNode;
+ if (
+ render === serverRender ||
+ render === clientRenderOnServerString ||
+ render === streamRender
+ ) {
+ // For plain server markup result we have comments between.
+ // If we're able to hydrate, they remain.
+ expect(parent.childNodes.length).toBe(5);
+ expectTextNode(parent.childNodes[0], 'a');
+ expectTextNode(parent.childNodes[2], 'b');
+ expectTextNode(parent.childNodes[4], 'c');
+ } else {
+ expect(parent.childNodes.length).toBe(3);
+ expectTextNode(parent.childNodes[0], 'a');
+ expectTextNode(parent.childNodes[1], 'b');
+ expectTextNode(parent.childNodes[2], 'c');
+ }
+ });
});
describe('escaping >, <, and &', function() {
@@ -1615,27 +1472,18 @@ describe('ReactDOMServerIntegration', () => {
const e = await render(
{'Text1"'}{'Text2"'}
,
);
- if (ReactDOMFeatureFlags.useFiber) {
- // with Fiber, there are just two text nodes.
- if (
- render === serverRender ||
- render === clientRenderOnServerString ||
- render === streamRender
- ) {
- expect(e.childNodes.length).toBe(3);
- expectTextNode(e.childNodes[0], 'Text1"');
- expectTextNode(e.childNodes[2], 'Text2"');
- } else {
- expect(e.childNodes.length).toBe(2);
- expectTextNode(e.childNodes[0], 'Text1"');
- expectTextNode(e.childNodes[1], 'Text2"');
- }
+ if (
+ render === serverRender ||
+ render === clientRenderOnServerString ||
+ render === streamRender
+ ) {
+ expect(e.childNodes.length).toBe(3);
+ expectTextNode(e.childNodes[0], 'Text1"');
+ expectTextNode(e.childNodes[2], 'Text2"');
} else {
- // with Stack there are six nodes: two text nodes each surrounded by
- // two react-text comment nodes.
- expect(e.childNodes.length).toBe(6);
+ expect(e.childNodes.length).toBe(2);
expectTextNode(e.childNodes[0], 'Text1"');
- expectTextNode(e.childNodes[3], 'Text2"');
+ expectTextNode(e.childNodes[1], 'Text2"');
}
});
});
@@ -1647,12 +1495,9 @@ describe('ReactDOMServerIntegration', () => {
const UndefinedComponent = () => undefined;
await render(, 1);
},
- ReactDOMFeatureFlags.useFiber
- ? 'UndefinedComponent(...): Nothing was returned from render. ' +
- 'This usually means a return statement is missing. Or, to ' +
- 'render nothing, return null.'
- : 'A valid React element (or null) must be returned. ' +
- 'You may have returned undefined, an array or some other invalid object.',
+ 'UndefinedComponent(...): Nothing was returned from render. ' +
+ 'This usually means a return statement is missing. Or, to ' +
+ 'render nothing, return null.',
);
itThrowsWhenRendering(
@@ -1665,12 +1510,9 @@ describe('ReactDOMServerIntegration', () => {
}
await render(, 1);
},
- ReactDOMFeatureFlags.useFiber
- ? 'UndefinedComponent(...): Nothing was returned from render. ' +
- 'This usually means a return statement is missing. Or, to ' +
- 'render nothing, return null.'
- : 'A valid React element (or null) must be returned. ' +
- 'You may have returned undefined, an array or some other invalid object.',
+ 'UndefinedComponent(...): Nothing was returned from render. ' +
+ 'This usually means a return statement is missing. Or, to ' +
+ 'render nothing, return null.',
);
itThrowsWhenRendering(
@@ -1679,12 +1521,9 @@ describe('ReactDOMServerIntegration', () => {
const ObjectComponent = () => ({x: 123});
await render(, 1);
},
- ReactDOMFeatureFlags.useFiber
- ? 'Objects are not valid as a React child (found: object with keys ' +
- '{x}). If you meant to render a collection of children, use ' +
- 'an array instead.'
- : 'A valid React element (or null) must be returned. ' +
- 'You may have returned undefined, an array or some other invalid object.',
+ 'Objects are not valid as a React child (found: object with keys ' +
+ '{x}). If you meant to render a collection of children, use ' +
+ 'an array instead.',
);
itThrowsWhenRendering(
@@ -1697,12 +1536,9 @@ describe('ReactDOMServerIntegration', () => {
}
await render(, 1);
},
- ReactDOMFeatureFlags.useFiber
- ? 'Objects are not valid as a React child (found: object with keys ' +
- '{x}). If you meant to render a collection of children, use ' +
- 'an array instead.'
- : 'A valid React element (or null) must be returned. ' +
- 'You may have returned undefined, an array or some other invalid object.',
+ 'Objects are not valid as a React child (found: object with keys ' +
+ '{x}). If you meant to render a collection of children, use ' +
+ 'an array instead.',
);
itThrowsWhenRendering(
@@ -1710,11 +1546,9 @@ describe('ReactDOMServerIntegration', () => {
async render => {
await render({x: 123});
},
- ReactDOMFeatureFlags.useFiber
- ? 'Objects are not valid as a React child (found: object with keys ' +
- '{x}). If you meant to render a collection of children, use ' +
- 'an array instead.'
- : 'Invalid component element.',
+ 'Objects are not valid as a React child (found: object with keys ' +
+ '{x}). If you meant to render a collection of children, use ' +
+ 'an array instead.',
);
});
});
@@ -2734,12 +2568,7 @@ describe('ReactDOMServerIntegration', () => {
));
it('can distinguish an empty component from an empty text component', () =>
- (ReactDOMFeatureFlags.useFiber
- ? expectMarkupMatch
- : expectMarkupMismatch)(
-
,
-
{''}
,
- ));
+ expectMarkupMatch(
,
{''}
));
});
// Markup Mismatches: misc
diff --git a/src/renderers/dom/shared/__tests__/ReactDOMTextComponent-test.js b/src/renderers/dom/shared/__tests__/ReactDOMTextComponent-test.js
index bd9e8417f48..9418c0a3e7a 100644
--- a/src/renderers/dom/shared/__tests__/ReactDOMTextComponent-test.js
+++ b/src/renderers/dom/shared/__tests__/ReactDOMTextComponent-test.js
@@ -12,7 +12,6 @@
var React;
var ReactDOM;
var ReactDOMServer;
-var ReactDOMFeatureFlags;
// In standard React, TextComponent keeps track of different Text templates
// using comments. However, in React Fiber, those comments are not outputted due
@@ -28,7 +27,6 @@ describe('ReactDOMTextComponent', () => {
React = require('react');
ReactDOM = require('react-dom');
ReactDOMServer = require('react-dom/server');
- ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
});
it('updates a mounted text component in place', () => {
@@ -117,11 +115,7 @@ describe('ReactDOMTextComponent', () => {
var reactEl =
;
el.innerHTML = ReactDOMServer.renderToString(reactEl);
- if (ReactDOMFeatureFlags.useFiber) {
- ReactDOM.hydrate(reactEl, el);
- } else {
- ReactDOM.render(reactEl, el);
- }
+ ReactDOM.hydrate(reactEl, el);
expect(el.textContent).toBe('');
});
diff --git a/src/renderers/dom/shared/__tests__/ReactMount-test.js b/src/renderers/dom/shared/__tests__/ReactMount-test.js
index ce77d8664ce..d895ad9897a 100644
--- a/src/renderers/dom/shared/__tests__/ReactMount-test.js
+++ b/src/renderers/dom/shared/__tests__/ReactMount-test.js
@@ -9,7 +9,6 @@
'use strict';
-const ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
const {COMMENT_NODE} = require('HTMLNodeType');
const invariant = require('invariant');
@@ -66,24 +65,22 @@ describe('ReactMount', () => {
});
});
- if (ReactDOMFeatureFlags.useFiber) {
- it('warns when given a factory', () => {
- spyOn(console, 'error');
- class Component extends React.Component {
- render() {
- return ;
- }
+ it('warns when given a factory', () => {
+ spyOn(console, 'error');
+ class Component extends React.Component {
+ render() {
+ return ;
}
+ }
- ReactTestUtils.renderIntoDocument(Component);
- expectDev(console.error.calls.count()).toBe(1);
- expectDev(console.error.calls.argsFor(0)[0]).toContain(
- 'Functions are not valid as a React child. ' +
- 'This may happen if you return a Component instead of from render. ' +
- 'Or maybe you meant to call this function rather than return it.',
- );
- });
- }
+ ReactTestUtils.renderIntoDocument(Component);
+ expectDev(console.error.calls.count()).toBe(1);
+ expectDev(console.error.calls.argsFor(0)[0]).toContain(
+ 'Functions are not valid as a React child. ' +
+ 'This may happen if you return a Component instead of from render. ' +
+ 'Or maybe you meant to call this function rather than return it.',
+ );
+ });
it('should render different components in same root', () => {
var container = document.createElement('container');
@@ -144,21 +141,11 @@ describe('ReactMount', () => {
container.innerHTML = ReactDOMServer.renderToString() + ' ';
spyOn(console, 'error');
- if (ReactDOMFeatureFlags.useFiber) {
- ReactDOM.hydrate(, container);
- } else {
- ReactDOM.render(, container);
- }
+ ReactDOM.hydrate(, container);
expectDev(console.error.calls.count()).toBe(1);
- if (ReactDOMFeatureFlags.useFiber) {
- expectDev(console.error.calls.argsFor(0)[0]).toContain(
- 'Did not expect server HTML to contain the text node " " in .',
- );
- } else {
- expectDev(console.error.calls.argsFor(0)[0]).toContain(
- 'Target node has markup rendered by React, but there are unrelated nodes as well.',
- );
- }
+ expectDev(console.error.calls.argsFor(0)[0]).toContain(
+ 'Did not expect server HTML to contain the text node " " in .',
+ );
});
it('should warn if mounting into right padded rendered markup', () => {
@@ -166,21 +153,11 @@ describe('ReactMount', () => {
container.innerHTML = ' ' + ReactDOMServer.renderToString();
spyOn(console, 'error');
- if (ReactDOMFeatureFlags.useFiber) {
- ReactDOM.hydrate(, container);
- } else {
- ReactDOM.render(, container);
- }
+ ReactDOM.hydrate(, container);
expectDev(console.error.calls.count()).toBe(1);
- if (ReactDOMFeatureFlags.useFiber) {
- expectDev(console.error.calls.argsFor(0)[0]).toContain(
- 'Did not expect server HTML to contain the text node " " in .',
- );
- } else {
- expectDev(console.error.calls.argsFor(0)[0]).toContain(
- 'Target node has markup rendered by React, but there are unrelated nodes as well.',
- );
- }
+ expectDev(console.error.calls.argsFor(0)[0]).toContain(
+ 'Did not expect server HTML to contain the text node " " in .',
+ );
});
it('should not warn if mounting into non-empty node', () => {
@@ -213,29 +190,15 @@ describe('ReactMount', () => {
div.innerHTML = markup;
spyOn(console, 'error');
- if (ReactDOMFeatureFlags.useFiber) {
- ReactDOM.hydrate(
-
This markup contains an nbsp entity: client text
,
- div,
- );
- } else {
- ReactDOM.render(
-
This markup contains an nbsp entity: client text
,
- div,
- );
- }
+ ReactDOM.hydrate(
+
This markup contains an nbsp entity: client text
,
+ div,
+ );
expectDev(console.error.calls.count()).toBe(1);
- if (ReactDOMFeatureFlags.useFiber) {
- expectDev(console.error.calls.argsFor(0)[0]).toContain(
- 'Server: "This markup contains an nbsp entity: server text" ' +
- 'Client: "This markup contains an nbsp entity: client text"',
- );
- } else {
- expectDev(console.error.calls.argsFor(0)[0]).toContain(
- ' (client) nbsp entity: client text\n' +
- ' (server) nbsp entity: server text',
- );
- }
+ expectDev(console.error.calls.argsFor(0)[0]).toContain(
+ 'Server: "This markup contains an nbsp entity: server text" ' +
+ 'Client: "This markup contains an nbsp entity: client text"',
+ );
});
if (WebComponents !== undefined) {
@@ -388,41 +351,39 @@ describe('ReactMount', () => {
expect(container2.textContent).toEqual('a!');
});
- if (ReactDOMFeatureFlags.useFiber) {
- describe('mount point is a comment node', () => {
- let containerDiv;
- let mountPoint;
+ describe('mount point is a comment node', () => {
+ let containerDiv;
+ let mountPoint;
- beforeEach(() => {
- containerDiv = document.createElement('div');
- containerDiv.innerHTML = 'AB';
- mountPoint = containerDiv.childNodes[1];
- invariant(mountPoint.nodeType === COMMENT_NODE, 'Expected comment');
- });
+ beforeEach(() => {
+ containerDiv = document.createElement('div');
+ containerDiv.innerHTML = 'AB';
+ mountPoint = containerDiv.childNodes[1];
+ invariant(mountPoint.nodeType === COMMENT_NODE, 'Expected comment');
+ });
- it('renders at a comment node', () => {
- function Char(props) {
- return props.children;
- }
- function list(chars) {
- return chars.split('').map(c => {c});
- }
-
- ReactDOM.render(list('aeiou'), mountPoint);
- expect(containerDiv.innerHTML).toBe(
- 'AaeiouB',
- );
+ it('renders at a comment node', () => {
+ function Char(props) {
+ return props.children;
+ }
+ function list(chars) {
+ return chars.split('').map(c => {c});
+ }
- ReactDOM.render(list('yea'), mountPoint);
- expect(containerDiv.innerHTML).toBe(
- 'AyeaB',
- );
+ ReactDOM.render(list('aeiou'), mountPoint);
+ expect(containerDiv.innerHTML).toBe(
+ 'AaeiouB',
+ );
- ReactDOM.render(list(''), mountPoint);
- expect(containerDiv.innerHTML).toBe(
- 'AB',
- );
- });
+ ReactDOM.render(list('yea'), mountPoint);
+ expect(containerDiv.innerHTML).toBe(
+ 'AyeaB',
+ );
+
+ ReactDOM.render(list(''), mountPoint);
+ expect(containerDiv.innerHTML).toBe(
+ 'AB',
+ );
});
- }
+ });
});
diff --git a/src/renderers/dom/shared/__tests__/ReactRenderDocument-test.js b/src/renderers/dom/shared/__tests__/ReactRenderDocument-test.js
index 87ba9eccf6f..a68ba409e8e 100644
--- a/src/renderers/dom/shared/__tests__/ReactRenderDocument-test.js
+++ b/src/renderers/dom/shared/__tests__/ReactRenderDocument-test.js
@@ -15,15 +15,6 @@ var ReactDOMServer;
var getTestDocument;
-var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
-
-var UNMOUNT_INVARIANT_MESSAGE =
- ' tried to unmount. ' +
- 'Because of cross-browser quirks it is impossible to unmount some ' +
- 'top-level components (eg , , and ) reliably and ' +
- 'efficiently. To fix this, have a single top-level component that ' +
- 'never unmounts render these elements.';
-
describe('rendering React components at document', () => {
beforeEach(() => {
jest.resetModules();
@@ -36,16 +27,12 @@ describe('rendering React components at document', () => {
describe('with old implicit hydration API', () => {
function expectDeprecationWarningWithFiber() {
- if (ReactDOMFeatureFlags.useFiber) {
- expectDev(console.warn.calls.count()).toBe(1);
- expectDev(console.warn.calls.argsFor(0)[0]).toContain(
- 'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' +
- 'will stop working in React v17. Replace the ReactDOM.render() call ' +
- 'with ReactDOM.hydrate() if you want React to attach to the server HTML.',
- );
- } else {
- expectDev(console.warn.calls.count()).toBe(0);
- }
+ expectDev(console.warn.calls.count()).toBe(1);
+ expectDev(console.warn.calls.argsFor(0)[0]).toContain(
+ 'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' +
+ 'will stop working in React v17. Replace the ReactDOM.render() call ' +
+ 'with ReactDOM.hydrate() if you want React to attach to the server HTML.',
+ );
}
it('should be able to adopt server markup', () => {
@@ -101,17 +88,9 @@ describe('rendering React components at document', () => {
ReactDOM.render(, testDocument);
expect(testDocument.body.innerHTML).toBe('Hello world');
- if (ReactDOMFeatureFlags.useFiber) {
- // In Fiber this actually works. It might not be a good idea though.
- ReactDOM.unmountComponentAtNode(testDocument);
- expect(testDocument.firstChild).toBe(null);
- } else {
- expect(function() {
- ReactDOM.unmountComponentAtNode(testDocument);
- }).toThrowError(UNMOUNT_INVARIANT_MESSAGE);
-
- expect(testDocument.body.innerHTML).toBe('Hello world');
- }
+ // In Fiber this actually works. It might not be a good idea though.
+ ReactDOM.unmountComponentAtNode(testDocument);
+ expect(testDocument.firstChild).toBe(null);
expectDeprecationWarningWithFiber();
});
@@ -152,23 +131,12 @@ describe('rendering React components at document', () => {
var testDocument = getTestDocument(markup);
ReactDOM.render(, testDocument);
-
expect(testDocument.body.innerHTML).toBe('Hello world');
- // Reactive update
- if (ReactDOMFeatureFlags.useFiber) {
- // This works but is probably a bad idea.
- ReactDOM.render(, testDocument);
-
- expect(testDocument.body.innerHTML).toBe('Goodbye world');
- } else {
- expect(function() {
- ReactDOM.render(, testDocument);
- }).toThrowError(UNMOUNT_INVARIANT_MESSAGE);
-
- expect(testDocument.body.innerHTML).toBe('Hello world');
- }
+ // This works but is probably a bad idea.
+ ReactDOM.render(, testDocument);
+ expect(testDocument.body.innerHTML).toBe('Goodbye world');
expectDeprecationWarningWithFiber();
});
@@ -231,38 +199,20 @@ describe('rendering React components at document', () => {
);
var testDocument = getTestDocument(markup);
- if (ReactDOMFeatureFlags.useFiber) {
- spyOn(console, 'warn');
- spyOn(console, 'error');
- ReactDOM.render(, testDocument);
- expect(testDocument.body.innerHTML).toBe('Hello world');
- expectDev(console.warn.calls.count()).toBe(1);
- expectDev(console.warn.calls.argsFor(0)[0]).toContain(
- 'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' +
- 'will stop working in React v17. Replace the ReactDOM.render() call ' +
- 'with ReactDOM.hydrate() if you want React to attach to the server HTML.',
- );
- expectDev(console.error.calls.count()).toBe(1);
- expectDev(console.error.calls.argsFor(0)[0]).toContain(
- 'Warning: Text content did not match.',
- );
- } else {
- expect(function() {
- // Notice the text is different!
- ReactDOM.render(, testDocument);
- }).toThrowError(
- "You're trying to render a component to the document using " +
- 'server rendering but the checksum was invalid. This usually ' +
- 'means you rendered a different component type or props on ' +
- 'the client from the one on the server, or your render() methods ' +
- 'are impure. React cannot handle this case due to cross-browser ' +
- 'quirks by rendering at the document root. You should look for ' +
- 'environment dependent code in your components and ensure ' +
- 'the props are the same client and server side:\n' +
- ' (client) dy data-reactid="4">Hello worldGoodbye world',
- );
- }
+ spyOn(console, 'warn');
+ spyOn(console, 'error');
+ ReactDOM.render(, testDocument);
+ expect(testDocument.body.innerHTML).toBe('Hello world');
+ expectDev(console.warn.calls.count()).toBe(1);
+ expectDev(console.warn.calls.argsFor(0)[0]).toContain(
+ 'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' +
+ 'will stop working in React v17. Replace the ReactDOM.render() call ' +
+ 'with ReactDOM.hydrate() if you want React to attach to the server HTML.',
+ );
+ expectDev(console.error.calls.count()).toBe(1);
+ expectDev(console.error.calls.argsFor(0)[0]).toContain(
+ 'Warning: Text content did not match.',
+ );
});
it('should throw on full document render w/ no markup', () => {
@@ -283,19 +233,8 @@ describe('rendering React components at document', () => {
}
}
- if (ReactDOMFeatureFlags.useFiber) {
- ReactDOM.render(, testDocument);
- expect(testDocument.body.innerHTML).toBe('Hello world');
- } else {
- expect(function() {
- ReactDOM.render(, testDocument);
- }).toThrowError(
- "You're trying to render a component to the document but you didn't " +
- "use server rendering. We can't do this without using server " +
- 'rendering due to cross-browser quirks. See ' +
- 'ReactDOMServer.renderToString() for server rendering.',
- );
- }
+ ReactDOM.render(, testDocument);
+ expect(testDocument.body.innerHTML).toBe('Hello world');
// We don't expect a warning about new hydration API here because
// we aren't sure if the user meant to hydrate or replace the document.
// We would see a warning if the document had React-rendered HTML in it.
@@ -323,221 +262,219 @@ describe('rendering React components at document', () => {
});
});
- if (ReactDOMFeatureFlags.useFiber) {
- describe('with new explicit hydration API', () => {
- it('should be able to adopt server markup', () => {
- class Root extends React.Component {
- render() {
- return (
-
-
- Hello World
-
-
- {'Hello ' + this.props.hello}
-
-
- );
- }
+ describe('with new explicit hydration API', () => {
+ it('should be able to adopt server markup', () => {
+ class Root extends React.Component {
+ render() {
+ return (
+
+
+ Hello World
+
+
+ {'Hello ' + this.props.hello}
+
+
+ );
}
+ }
+
+ var markup = ReactDOMServer.renderToString();
+ var testDocument = getTestDocument(markup);
+ var body = testDocument.body;
+
+ ReactDOM.hydrate(, testDocument);
+ expect(testDocument.body.innerHTML).toBe('Hello world');
+
+ ReactDOM.hydrate(, testDocument);
+ expect(testDocument.body.innerHTML).toBe('Hello moon');
+
+ expect(body === testDocument.body).toBe(true);
+ });
- var markup = ReactDOMServer.renderToString();
- var testDocument = getTestDocument(markup);
- var body = testDocument.body;
-
- ReactDOM.hydrate(, testDocument);
- expect(testDocument.body.innerHTML).toBe('Hello world');
-
- ReactDOM.hydrate(, testDocument);
- expect(testDocument.body.innerHTML).toBe('Hello moon');
-
- expect(body === testDocument.body).toBe(true);
- });
-
- it('should not be able to unmount component from document node', () => {
- class Root extends React.Component {
- render() {
- return (
-
-
- Hello World
-
-
- Hello world
-
-
- );
- }
+ it('should not be able to unmount component from document node', () => {
+ class Root extends React.Component {
+ render() {
+ return (
+
+
+ Hello World
+
+
+ Hello world
+
+
+ );
}
+ }
+
+ var markup = ReactDOMServer.renderToString();
+ var testDocument = getTestDocument(markup);
+ ReactDOM.hydrate(, testDocument);
+ expect(testDocument.body.innerHTML).toBe('Hello world');
+
+ // In Fiber this actually works. It might not be a good idea though.
+ ReactDOM.unmountComponentAtNode(testDocument);
+ expect(testDocument.firstChild).toBe(null);
+ });
- var markup = ReactDOMServer.renderToString();
- var testDocument = getTestDocument(markup);
- ReactDOM.hydrate(, testDocument);
- expect(testDocument.body.innerHTML).toBe('Hello world');
-
- // In Fiber this actually works. It might not be a good idea though.
- ReactDOM.unmountComponentAtNode(testDocument);
- expect(testDocument.firstChild).toBe(null);
- });
-
- it('should not be able to switch root constructors', () => {
- class Component extends React.Component {
- render() {
- return (
-
-
- Hello World
-
-
- Hello world
-
-
- );
- }
+ it('should not be able to switch root constructors', () => {
+ class Component extends React.Component {
+ render() {
+ return (
+
+
+ Hello World
+
+
+ Hello world
+
+
+ );
}
+ }
- class Component2 extends React.Component {
- render() {
- return (
-
-
- Hello World
-
-
- Goodbye world
-
-
- );
- }
+ class Component2 extends React.Component {
+ render() {
+ return (
+
+
+ Hello World
+
+
+ Goodbye world
+
+
+ );
}
+ }
+
+ var markup = ReactDOMServer.renderToString();
+ var testDocument = getTestDocument(markup);
+
+ ReactDOM.hydrate(, testDocument);
- var markup = ReactDOMServer.renderToString();
- var testDocument = getTestDocument(markup);
-
- ReactDOM.hydrate(, testDocument);
-
- expect(testDocument.body.innerHTML).toBe('Hello world');
-
- // This works but is probably a bad idea.
- ReactDOM.hydrate(, testDocument);
-
- expect(testDocument.body.innerHTML).toBe('Goodbye world');
- });
-
- it('should be able to mount into document', () => {
- class Component extends React.Component {
- render() {
- return (
-
-
- Hello World
-
-
- {this.props.text}
-
-
- );
- }
+ expect(testDocument.body.innerHTML).toBe('Hello world');
+
+ // This works but is probably a bad idea.
+ ReactDOM.hydrate(, testDocument);
+
+ expect(testDocument.body.innerHTML).toBe('Goodbye world');
+ });
+
+ it('should be able to mount into document', () => {
+ class Component extends React.Component {
+ render() {
+ return (
+
+
+ Hello World
+
+
+ {this.props.text}
+
+
+ );
}
+ }
+
+ var markup = ReactDOMServer.renderToString(
+ ,
+ );
+ var testDocument = getTestDocument(markup);
- var markup = ReactDOMServer.renderToString(
- ,
- );
- var testDocument = getTestDocument(markup);
-
- ReactDOM.hydrate(, testDocument);
-
- expect(testDocument.body.innerHTML).toBe('Hello world');
- });
-
- it('renders over an existing text child without throwing', () => {
- spyOn(console, 'error');
- const container = document.createElement('div');
- container.textContent = 'potato';
- ReactDOM.hydrate(
parsnip
, container);
- expect(container.textContent).toBe('parsnip');
- expectDev(console.error.calls.count()).toBe(1);
- expectDev(console.error.calls.argsFor(0)[0]).toContain(
- 'Did not expect server HTML to contain the text node "potato" in
.',
- );
- });
-
- it('should give helpful errors on state desync', () => {
- class Component extends React.Component {
- render() {
- return (
-
-
- Hello World
-
-
- {this.props.text}
-
-
- );
- }
+ ReactDOM.hydrate(, testDocument);
+
+ expect(testDocument.body.innerHTML).toBe('Hello world');
+ });
+
+ it('renders over an existing text child without throwing', () => {
+ spyOn(console, 'error');
+ const container = document.createElement('div');
+ container.textContent = 'potato';
+ ReactDOM.hydrate(
parsnip
, container);
+ expect(container.textContent).toBe('parsnip');
+ expectDev(console.error.calls.count()).toBe(1);
+ expectDev(console.error.calls.argsFor(0)[0]).toContain(
+ 'Did not expect server HTML to contain the text node "potato" in
.',
+ );
+ });
+
+ it('should give helpful errors on state desync', () => {
+ class Component extends React.Component {
+ render() {
+ return (
+
+
+ Hello World
+
+
+ {this.props.text}
+
+
+ );
}
+ }
+
+ var markup = ReactDOMServer.renderToString(
+ ,
+ );
+ var testDocument = getTestDocument(markup);
+
+ spyOn(console, 'error');
+ ReactDOM.hydrate(, testDocument);
+ expect(testDocument.body.innerHTML).toBe('Hello world');
+ expectDev(console.error.calls.count()).toBe(1);
+ expectDev(console.error.calls.argsFor(0)[0]).toContain(
+ 'Warning: Text content did not match.',
+ );
+ });
+
+ it('should render w/ no markup to full document', () => {
+ spyOn(console, 'error');
+ var testDocument = getTestDocument();
- var markup = ReactDOMServer.renderToString(
- ,
- );
- var testDocument = getTestDocument(markup);
-
- spyOn(console, 'error');
- ReactDOM.hydrate(, testDocument);
- expect(testDocument.body.innerHTML).toBe('Hello world');
- expectDev(console.error.calls.count()).toBe(1);
- expectDev(console.error.calls.argsFor(0)[0]).toContain(
- 'Warning: Text content did not match.',
- );
- });
-
- it('should render w/ no markup to full document', () => {
- spyOn(console, 'error');
- var testDocument = getTestDocument();
-
- class Component extends React.Component {
- render() {
- return (
-
-
- Hello World
-
-
- {this.props.text}
-
-
- );
- }
+ class Component extends React.Component {
+ render() {
+ return (
+
+
+ Hello World
+
+
+ {this.props.text}
+
+
+ );
}
+ }
- ReactDOM.hydrate(, testDocument);
- expect(testDocument.body.innerHTML).toBe('Hello world');
- expectDev(console.error.calls.count()).toBe(1);
- expectDev(console.error.calls.argsFor(0)[0]).toContain(
- // getTestDocument() has an extra that we didn't render.
- 'Did not expect server HTML to contain a in .',
- );
- });
-
- it('supports findDOMNode on full-page components', () => {
- var tree = (
-
-
- Hello World
-
-
- Hello world
-
-
- );
-
- var markup = ReactDOMServer.renderToString(tree);
- var testDocument = getTestDocument(markup);
- var component = ReactDOM.hydrate(tree, testDocument);
- expect(testDocument.body.innerHTML).toBe('Hello world');
- expect(ReactDOM.findDOMNode(component).tagName).toBe('HTML');
- });
+ ReactDOM.hydrate(, testDocument);
+ expect(testDocument.body.innerHTML).toBe('Hello world');
+ expectDev(console.error.calls.count()).toBe(1);
+ expectDev(console.error.calls.argsFor(0)[0]).toContain(
+ // getTestDocument() has an extra that we didn't render.
+ 'Did not expect server HTML to contain a in .',
+ );
});
- }
+
+ it('supports findDOMNode on full-page components', () => {
+ var tree = (
+
+
+ Hello World
+
+
+ Hello world
+
+
+ );
+
+ var markup = ReactDOMServer.renderToString(tree);
+ var testDocument = getTestDocument(markup);
+ var component = ReactDOM.hydrate(tree, testDocument);
+ expect(testDocument.body.innerHTML).toBe('Hello world');
+ expect(ReactDOM.findDOMNode(component).tagName).toBe('HTML');
+ });
+ });
});
diff --git a/src/renderers/dom/shared/__tests__/ReactServerRendering-test.js b/src/renderers/dom/shared/__tests__/ReactServerRendering-test.js
index 6504e01a158..632f7306c14 100644
--- a/src/renderers/dom/shared/__tests__/ReactServerRendering-test.js
+++ b/src/renderers/dom/shared/__tests__/ReactServerRendering-test.js
@@ -16,9 +16,6 @@ var ReactDOMServer;
var ReactTestUtils;
var PropTypes;
-var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
-
-var ID_ATTRIBUTE_NAME;
var ROOT_ATTRIBUTE_NAME;
describe('ReactDOMServer', () => {
@@ -34,7 +31,6 @@ describe('ReactDOMServer', () => {
ReactDOMServer = require('react-dom/server');
var DOMProperty = require('DOMProperty');
- ID_ATTRIBUTE_NAME = DOMProperty.ID_ATTRIBUTE_NAME;
ROOT_ATTRIBUTE_NAME = DOMProperty.ROOT_ATTRIBUTE_NAME;
});
@@ -72,11 +68,7 @@ describe('ReactDOMServer', () => {
}
var response = ReactDOMServer.renderToString();
- if (ReactDOMFeatureFlags.useFiber) {
- expect(response).toBe('');
- } else {
- expect(response).toBe('');
- }
+ expect(response).toBe('');
});
// TODO: Test that listeners are not registered onto any document/container.
@@ -103,10 +95,7 @@ describe('ReactDOMServer', () => {
'>' +
'' +
- (ReactDOMFeatureFlags.useFiber
- ? 'My name is child'
- : 'My name is ' +
- 'child') +
+ 'My name is child' +
'' +
'
',
),
@@ -165,14 +154,8 @@ describe('ReactDOMServer', () => {
'' +
- (ReactDOMFeatureFlags.useFiber
- ? 'Component name: TestComponent'
- : 'Component name: ' +
- 'TestComponent') +
+ 'Component name: TestComponent' +
'',
),
);
@@ -247,24 +230,14 @@ describe('ReactDOMServer', () => {
var instance = ReactDOM.render(, element);
expect(mountCount).toEqual(3);
- if (ReactDOMFeatureFlags.useFiber) {
- expectDev(console.warn.calls.count()).toBe(1);
- expectDev(console.warn.calls.argsFor(0)[0]).toContain(
- 'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' +
- 'will stop working in React v17. Replace the ReactDOM.render() call ' +
- 'with ReactDOM.hydrate() if you want React to attach to the server HTML.',
- );
- } else {
- expectDev(console.warn.calls.count()).toBe(0);
- }
+ expectDev(console.warn.calls.count()).toBe(1);
+ expectDev(console.warn.calls.argsFor(0)[0]).toContain(
+ 'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' +
+ 'will stop working in React v17. Replace the ReactDOM.render() call ' +
+ 'with ReactDOM.hydrate() if you want React to attach to the server HTML.',
+ );
console.warn.calls.reset();
-
- var expectedMarkup = lastMarkup;
- if (ReactDOMFeatureFlags.useFiber) {
- var reactComments = //g;
- expectedMarkup = expectedMarkup.replace(reactComments, '');
- }
- expect(element.innerHTML).toBe(expectedMarkup);
+ expect(element.innerHTML).toBe(lastMarkup);
// Ensure the events system works after mount into server markup
expect(numClicks).toEqual(0);
@@ -280,18 +253,9 @@ describe('ReactDOMServer', () => {
instance = ReactDOM.render(, element);
expect(mountCount).toEqual(4);
expectDev(console.error.calls.count()).toBe(1);
- if (ReactDOMFeatureFlags.useFiber) {
- expectDev(console.error.calls.argsFor(0)[0]).toContain(
- 'Text content did not match. Server: "x" Client: "y"',
- );
- } else {
- expectDev(console.error.calls.argsFor(0)[0]).toContain(
- '(client) -- react-text: 3 -->yx/g;
- expectedMarkup = expectedMarkup.replace(reactComments, '');
- }
- expect(element.innerHTML).toBe(expectedMarkup);
-
- // Ensure the events system works after mount into server markup
- expect(numClicks).toEqual(0);
- ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(instance.refs.span));
- expect(numClicks).toEqual(1);
-
- ReactDOM.unmountComponentAtNode(element);
- expect(element.innerHTML).toEqual('');
-
- // Now simulate a situation where the app is not idempotent. React should
- // warn but do the right thing.
- element.innerHTML = lastMarkup;
- instance = ReactDOM.hydrate(, element);
- expect(mountCount).toEqual(4);
- expectDev(console.error.calls.count()).toBe(1);
- expect(element.innerHTML.length > 0).toBe(true);
- expect(element.innerHTML).not.toEqual(lastMarkup);
-
- // Ensure the events system works after markup mismatch.
- expect(numClicks).toEqual(1);
- ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(instance.refs.span));
- expect(numClicks).toEqual(2);
- });
- }
+ var element = document.createElement('div');
+ ReactDOM.render(, element);
+
+ var lastMarkup = element.innerHTML;
+
+ // Exercise the update path. Markup should not change,
+ // but some lifecycle methods should be run again.
+ ReactDOM.render(, element);
+ expect(mountCount).toEqual(1);
+
+ // Unmount and remount. We should get another mount event and
+ // we should get different markup, as the IDs are unique each time.
+ ReactDOM.unmountComponentAtNode(element);
+ expect(element.innerHTML).toEqual('');
+ ReactDOM.render(, element);
+ expect(mountCount).toEqual(2);
+ expect(element.innerHTML).not.toEqual(lastMarkup);
+
+ // Now kill the node and render it on top of server-rendered markup, as if
+ // we used server rendering. We should mount again, but the markup should
+ // be unchanged. We will append a sentinel at the end of innerHTML to be
+ // sure that innerHTML was not changed.
+ ReactDOM.unmountComponentAtNode(element);
+ expect(element.innerHTML).toEqual('');
+
+ ExecutionEnvironment.canUseDOM = false;
+ lastMarkup = ReactDOMServer.renderToString();
+ ExecutionEnvironment.canUseDOM = true;
+ element.innerHTML = lastMarkup;
+
+ var instance = ReactDOM.hydrate(, element);
+ expect(mountCount).toEqual(3);
+ expect(element.innerHTML).toBe(lastMarkup);
+
+ // Ensure the events system works after mount into server markup
+ expect(numClicks).toEqual(0);
+ ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(instance.refs.span));
+ expect(numClicks).toEqual(1);
+
+ ReactDOM.unmountComponentAtNode(element);
+ expect(element.innerHTML).toEqual('');
+
+ // Now simulate a situation where the app is not idempotent. React should
+ // warn but do the right thing.
+ element.innerHTML = lastMarkup;
+ instance = ReactDOM.hydrate(, element);
+ expect(mountCount).toEqual(4);
+ expectDev(console.error.calls.count()).toBe(1);
+ expect(element.innerHTML.length > 0).toBe(true);
+ expect(element.innerHTML).not.toEqual(lastMarkup);
+
+ // Ensure the events system works after markup mismatch.
+ expect(numClicks).toEqual(1);
+ ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(instance.refs.span));
+ expect(numClicks).toEqual(2);
+ });
it('should throw with silly args', () => {
expect(
ReactDOMServer.renderToString.bind(ReactDOMServer, {x: 123}),
).toThrowError(
- ReactDOMFeatureFlags.useFiber
- ? 'Objects are not valid as a React child (found: object with keys {x})'
- : 'renderToString(): Invalid component element.',
+ 'Objects are not valid as a React child (found: object with keys {x})',
);
});
});
@@ -515,9 +469,7 @@ describe('ReactDOMServer', () => {
expect(
ReactDOMServer.renderToStaticMarkup.bind(ReactDOMServer, {x: 123}),
).toThrowError(
- ReactDOMFeatureFlags.useFiber
- ? 'Objects are not valid as a React child (found: object with keys {x})'
- : 'renderToStaticMarkup(): Invalid component element.',
+ 'Objects are not valid as a React child (found: object with keys {x})',
);
});
diff --git a/src/renderers/dom/shared/__tests__/ReactServerRenderingBrowser-test.js b/src/renderers/dom/shared/__tests__/ReactServerRenderingBrowser-test.js
index c1382e756cf..3dbd4b2a8aa 100644
--- a/src/renderers/dom/shared/__tests__/ReactServerRenderingBrowser-test.js
+++ b/src/renderers/dom/shared/__tests__/ReactServerRenderingBrowser-test.js
@@ -13,8 +13,6 @@ var React;
var ReactDOMServer;
var ReactDOMServerBrowser;
-var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
-
describe('ReactServerRenderingBrowser', () => {
beforeEach(() => {
jest.resetModules();
@@ -53,18 +51,16 @@ describe('ReactServerRenderingBrowser', () => {
);
});
- if (ReactDOMFeatureFlags.useFiber) {
- it('throws meaningfully for server-only APIs', () => {
- expect(() => ReactDOMServerBrowser.renderToNodeStream()).toThrow(
- 'ReactDOMServer.renderToNodeStream(): The streaming API is not available ' +
- 'in the browser. Use ReactDOMServer.renderToString() instead.',
- );
- expect(() =>
- ReactDOMServerBrowser.renderToStaticNodeStream(),
- ).toThrow(
- 'ReactDOMServer.renderToStaticNodeStream(): The streaming API is not available ' +
- 'in the browser. Use ReactDOMServer.renderToStaticMarkup() instead.',
- );
- });
- }
+ it('throws meaningfully for server-only APIs', () => {
+ expect(() => ReactDOMServerBrowser.renderToNodeStream()).toThrow(
+ 'ReactDOMServer.renderToNodeStream(): The streaming API is not available ' +
+ 'in the browser. Use ReactDOMServer.renderToString() instead.',
+ );
+ expect(() =>
+ ReactDOMServerBrowser.renderToStaticNodeStream(),
+ ).toThrow(
+ 'ReactDOMServer.renderToStaticNodeStream(): The streaming API is not available ' +
+ 'in the browser. Use ReactDOMServer.renderToStaticMarkup() instead.',
+ );
+ });
});
diff --git a/src/renderers/dom/shared/__tests__/renderSubtreeIntoContainer-test.js b/src/renderers/dom/shared/__tests__/renderSubtreeIntoContainer-test.js
index 74822fa314b..fec4602a729 100644
--- a/src/renderers/dom/shared/__tests__/renderSubtreeIntoContainer-test.js
+++ b/src/renderers/dom/shared/__tests__/renderSubtreeIntoContainer-test.js
@@ -12,7 +12,6 @@
var React = require('react');
var PropTypes = require('prop-types');
var ReactDOM = require('react-dom');
-var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
var ReactTestUtils = require('react-dom/test-utils');
var renderSubtreeIntoContainer = require('react-dom')
.unstable_renderSubtreeIntoContainer;
@@ -299,26 +298,24 @@ describe('renderSubtreeIntoContainer', () => {
expect(portal2.textContent).toBe('foo');
});
- if (ReactDOMFeatureFlags.useFiber) {
- it('fails gracefully when mixing React 15 and 16', () => {
- class C extends React.Component {
- render() {
- return ;
- }
- }
- const c = ReactDOM.render(, document.createElement('div'));
- // React 15 calls this:
- // https://github.com/facebook/react/blob/77b71fc3c4/src/renderers/dom/client/ReactMount.js#L478-L479
- expect(() => {
- c._reactInternalInstance._processChildContext({});
- }).toThrow(
- '_processChildContext is not available in React 16+. This likely ' +
- 'means you have multiple copies of React and are attempting to nest ' +
- 'a React 15 tree inside a React 16 tree using ' +
- "unstable_renderSubtreeIntoContainer, which isn't supported. Try to " +
- 'make sure you have only one copy of React (and ideally, switch to ' +
- 'ReactDOM.createPortal).',
- );
- });
- }
+ it('fails gracefully when mixing React 15 and 16', () => {
+ class C extends React.Component {
+ render() {
+ return ;
+ }
+ }
+ const c = ReactDOM.render(, document.createElement('div'));
+ // React 15 calls this:
+ // https://github.com/facebook/react/blob/77b71fc3c4/src/renderers/dom/client/ReactMount.js#L478-L479
+ expect(() => {
+ c._reactInternalInstance._processChildContext({});
+ }).toThrow(
+ '_processChildContext is not available in React 16+. This likely ' +
+ 'means you have multiple copies of React and are attempting to nest ' +
+ 'a React 15 tree inside a React 16 tree using ' +
+ "unstable_renderSubtreeIntoContainer, which isn't supported. Try to " +
+ 'make sure you have only one copy of React (and ideally, switch to ' +
+ 'ReactDOM.createPortal).',
+ );
+ });
});
diff --git a/src/renderers/dom/shared/wrappers/__tests__/ReactDOMInput-test.js b/src/renderers/dom/shared/wrappers/__tests__/ReactDOMInput-test.js
index c6c4f7e96b9..0e289c0d80f 100644
--- a/src/renderers/dom/shared/wrappers/__tests__/ReactDOMInput-test.js
+++ b/src/renderers/dom/shared/wrappers/__tests__/ReactDOMInput-test.js
@@ -15,7 +15,6 @@ describe('ReactDOMInput', () => {
var React;
var ReactDOM;
var ReactDOMServer;
- var ReactDOMFeatureFlags;
var ReactTestUtils;
var inputValueTracking;
@@ -35,7 +34,6 @@ describe('ReactDOMInput', () => {
React = require('react');
ReactDOM = require('react-dom');
ReactDOMServer = require('react-dom/server');
- ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
ReactTestUtils = require('react-dom/test-utils');
// TODO: can we express this test with only public API?
inputValueTracking = require('inputValueTracking');
@@ -1187,7 +1185,6 @@ describe('ReactDOMInput', () => {
,
);
expect(log).toEqual([
- ...(ReactDOMFeatureFlags.useFiber ? [] : ['set data-reactroot']),
'set type',
'set step',
'set min',
@@ -1251,9 +1248,6 @@ describe('ReactDOMInput', () => {
,
);
expect(log).toEqual([
- ...(ReactDOMFeatureFlags.useFiber
- ? []
- : ['node.setAttribute("data-reactroot", "")']),
'node.setAttribute("type", "date")',
'node.setAttribute("value", "1980-01-01")',
'node.value = ""',
diff --git a/src/renderers/dom/shared/wrappers/__tests__/ReactDOMOption-test.js b/src/renderers/dom/shared/wrappers/__tests__/ReactDOMOption-test.js
index 993427470f6..d8719ceba86 100644
--- a/src/renderers/dom/shared/wrappers/__tests__/ReactDOMOption-test.js
+++ b/src/renderers/dom/shared/wrappers/__tests__/ReactDOMOption-test.js
@@ -16,13 +16,11 @@ describe('ReactDOMOption', () => {
var React;
var ReactDOM;
- var ReactDOMFeatureFlags;
var ReactTestUtils;
beforeEach(() => {
React = require('react');
ReactDOM = require('react-dom');
- ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
ReactTestUtils = require('react-dom/test-utils');
});
@@ -45,11 +43,9 @@ describe('ReactDOMOption', () => {
expectDev(
normalizeCodeLocInfo(console.error.calls.argsFor(0)[0]),
).toContain(
- ReactDOMFeatureFlags.useFiber
- ? '