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.
Sebastian Markbåge committed
Dec 6, 2016 at 13:46 UTC
facce3d736e82d6efaf12f9301b5c487ca8fec5c
3 files changed
+15
-3
scripts/fiber/tests-failing.txt
-1
@@ -110,7 +110,6 @@ src/renderers/shared/shared/__tests__/ReactStatelessComponent-test.js
110
* should warn when using non-React functions in JSX
111
112
src/renderers/shared/shared/__tests__/ReactUpdates-test.js
113
-* should queue mount-ready handlers across different roots
113
* marks top-level updates
114
* throws in setState if the update callback is not a function
115
* throws in replaceState if the update callback is not a function
scripts/fiber/tests-passing.txt
+1
@@ -1451,6 +1451,7 @@ src/renderers/shared/shared/__tests__/ReactUpdates-test.js
1451
* should not reconcile children passed via props
1452
* should flow updates correctly
1453
* should share reconcile transaction across different roots
1454
+* should queue mount-ready handlers across different roots
1455
* should flush updates in the correct order
1456
* should flush updates in the correct order across roots
1457
* should queue nested updates
src/renderers/shared/shared/__tests__/ReactUpdates-test.js
+14
-2
@@ -544,6 +544,8 @@ describe('ReactUpdates', () => {
544
// componentDidUpdate handlers is called, B's DOM should already have been
545
// updated.
546
547
+ var bContainer = document.createElement('div');
548
+
549
var a;
550
var b;
551
@@ -558,7 +560,15 @@ describe('ReactUpdates', () => {
560
}
561
562
render() {
561
- return <div>A{this.state.x}</div>;
563
+ var portal = null;
564
+ // If we're using Fiber, we use Portals instead to achieve this.
565
+ if (ReactDOMFeatureFlags.useFiber) {
566
+ portal = ReactDOM.unstable_createPortal(
567
+ <B ref={n => b = n} />,
568
+ bContainer
569
+ );
570
+ }
571
+ return <div>A{this.state.x}{portal}</div>;
572
}
573
}
574
@@ -571,7 +581,9 @@ describe('ReactUpdates', () => {
581
}
582
583
a = ReactTestUtils.renderIntoDocument(<A />);
574
- b = ReactTestUtils.renderIntoDocument(<B />);
584
+ if (!ReactDOMFeatureFlags.useFiber) {
585
+ ReactDOM.render(<B ref={n => b = n} />, bContainer);
586
+ }
587
588
ReactDOM.unstable_batchedUpdates(function() {
589
a.setState({x: 1});