Use Portals to test batching across roots (#8508)

This doesn't work by default in Fiber, you have to opt-in with a Portal to
get the explicit ordering guarantees.
This commit is contained in:
Sebastian Markbåge
2016-12-06 13:46:36 -08:00
committed by GitHub
parent 48c7bbd980
commit facce3d736
3 changed files with 15 additions and 3 deletions
-1
View File
@@ -110,7 +110,6 @@ src/renderers/shared/shared/__tests__/ReactStatelessComponent-test.js
* should warn when using non-React functions in JSX
src/renderers/shared/shared/__tests__/ReactUpdates-test.js
* should queue mount-ready handlers across different roots
* marks top-level updates
* throws in setState if the update callback is not a function
* throws in replaceState if the update callback is not a function
+1
View File
@@ -1451,6 +1451,7 @@ src/renderers/shared/shared/__tests__/ReactUpdates-test.js
* should not reconcile children passed via props
* should flow updates correctly
* should share reconcile transaction across different roots
* should queue mount-ready handlers across different roots
* should flush updates in the correct order
* should flush updates in the correct order across roots
* should queue nested updates
@@ -544,6 +544,8 @@ describe('ReactUpdates', () => {
// componentDidUpdate handlers is called, B's DOM should already have been
// updated.
var bContainer = document.createElement('div');
var a;
var b;
@@ -558,7 +560,15 @@ describe('ReactUpdates', () => {
}
render() {
return <div>A{this.state.x}</div>;
var portal = null;
// If we're using Fiber, we use Portals instead to achieve this.
if (ReactDOMFeatureFlags.useFiber) {
portal = ReactDOM.unstable_createPortal(
<B ref={n => b = n} />,
bContainer
);
}
return <div>A{this.state.x}{portal}</div>;
}
}
@@ -571,7 +581,9 @@ describe('ReactUpdates', () => {
}
a = ReactTestUtils.renderIntoDocument(<A />);
b = ReactTestUtils.renderIntoDocument(<B />);
if (!ReactDOMFeatureFlags.useFiber) {
ReactDOM.render(<B ref={n => b = n} />, bContainer);
}
ReactDOM.unstable_batchedUpdates(function() {
a.setState({x: 1});