Move unstable_yield to main export (#13232)
The `yield` method isn't tied to any specific root. Putting this on the main export enables test components that are not within scope to yield even if they don't have access to the currently rendering root instance. This follows the pattern established by ReactNoop. Added a `clearYields` method, too, for reading values that were yielded out of band. This is also based on ReactNoop.
Andrew Clark committed
Jul 18, 2018 at 16:10 UTC
e4e58343e4d869adc9e3ad725dbaba5b9aff6d75
4 files changed
+50
-43
packages/react-test-renderer/src/ReactTestRenderer.js
+8
-5
@@ -466,14 +466,14 @@ const ReactTestRendererFiber = {
466
}
467
return TestRenderer.getPublicRootInstance(root);
468
},
469
+
470
unstable_flushAll: TestRendererScheduling.flushAll,
470
- unstable_flushSync(fn: Function) {
471
- return TestRendererScheduling.withCleanYields(() => {
472
- TestRenderer.flushSync(fn);
473
- });
471
+ unstable_flushSync<T>(fn: () => T): T {
472
+ TestRendererScheduling.clearYields();
473
+ return TestRenderer.flushSync(fn);
474
},
475
unstable_flushThrough: TestRendererScheduling.flushThrough,
476
- unstable_yield: TestRendererScheduling.yieldValue,
476
+ unstable_clearYields: TestRendererScheduling.clearYields,
477
};
478
479
Object.defineProperty(
@@ -504,6 +504,9 @@ const ReactTestRendererFiber = {
504
return entry;
505
},
506
507
+ unstable_yield: TestRendererScheduling.yieldValue,
508
+ unstable_clearYields: TestRendererScheduling.clearYields,
509
+
510
/* eslint-disable camelcase */
511
unstable_batchedUpdates: batchedUpdates,
512
/* eslint-enable camelcase */
packages/react-test-renderer/src/ReactTestRendererScheduling.js
+3
-3
@@ -112,8 +112,8 @@ export function yieldValue(value: mixed): void {
112
yieldedValues.push(value);
113
}
114
115
-export function withCleanYields(fn: Function) {
115
+export function clearYields(): Array<mixed> {
116
+ const values = yieldedValues;
117
yieldedValues = [];
117
- fn();
118
- return yieldedValues;
118
+ return values;
119
}
packages/react-test-renderer/src/__tests__/ReactTestRendererAsync-test.js
+6
-6
@@ -46,7 +46,7 @@ describe('ReactTestRendererAsync', () => {
46
47
it('flushAll returns array of yielded values', () => {
48
function Child(props) {
49
- renderer.unstable_yield(props.children);
49
+ ReactTestRenderer.unstable_yield(props.children);
50
return props.children;
51
}
52
function Parent(props) {
@@ -72,7 +72,7 @@ describe('ReactTestRendererAsync', () => {
72
73
it('flushThrough flushes until the expected values is yielded', () => {
74
function Child(props) {
75
- renderer.unstable_yield(props.children);
75
+ ReactTestRenderer.unstable_yield(props.children);
76
return props.children;
77
}
78
function Parent(props) {
@@ -103,7 +103,7 @@ describe('ReactTestRendererAsync', () => {
103
104
it('supports high priority interruptions', () => {
105
function Child(props) {
106
- renderer.unstable_yield(props.children);
106
+ ReactTestRenderer.unstable_yield(props.children);
107
return props.children;
108
}
109
@@ -143,7 +143,7 @@ describe('ReactTestRendererAsync', () => {
143
144
it('should error if flushThrough params dont match yielded values', () => {
145
const Yield = ({id}) => {
146
- renderer.unstable_yield(id);
146
+ ReactTestRenderer.unstable_yield(id);
147
return id;
148
};
149
@@ -165,7 +165,7 @@ describe('ReactTestRendererAsync', () => {
165
166
it('should error if flushAll params dont match yielded values', () => {
167
const Yield = ({id}) => {
168
- renderer.unstable_yield(id);
168
+ ReactTestRenderer.unstable_yield(id);
169
return id;
170
};
171
@@ -199,7 +199,7 @@ describe('ReactTestRendererAsync', () => {
199
200
it('should error if flushThrough yields the wrong number of values', () => {
201
const Yield = ({id}) => {
202
- renderer.unstable_yield(id);
202
+ ReactTestRenderer.unstable_yield(id);
203
return id;
204
};
205
packages/react/src/__tests__/ReactProfiler-test.internal.js
+33
-29
@@ -163,7 +163,7 @@ describe('Profiler', () => {
163
const callback = jest.fn();
164
165
const Yield = ({value}) => {
166
- renderer.unstable_yield(value);
166
+ ReactTestRenderer.unstable_yield(value);
167
return null;
168
};
169
@@ -514,7 +514,7 @@ describe('Profiler', () => {
514
515
const Yield = ({renderTime}) => {
516
advanceTimeBy(renderTime);
517
- renderer.unstable_yield('Yield:' + renderTime);
517
+ ReactTestRenderer.unstable_yield('Yield:' + renderTime);
518
return null;
519
};
520
@@ -550,7 +550,7 @@ describe('Profiler', () => {
550
551
const Yield = ({renderTime}) => {
552
advanceTimeBy(renderTime);
553
- renderer.unstable_yield('Yield:' + renderTime);
553
+ ReactTestRenderer.unstable_yield('Yield:' + renderTime);
554
return null;
555
};
556
@@ -602,7 +602,7 @@ describe('Profiler', () => {
602
603
const Yield = ({renderTime}) => {
604
advanceTimeBy(renderTime);
605
- renderer.unstable_yield('Yield:' + renderTime);
605
+ ReactTestRenderer.unstable_yield('Yield:' + renderTime);
606
return null;
607
};
608
@@ -627,15 +627,14 @@ describe('Profiler', () => {
627
628
// Interrupt with higher priority work.
629
// The interrupted work simulates an additional 5ms of time.
630
- expect(
631
- renderer.unstable_flushSync(() => {
632
- renderer.update(
633
- <React.unstable_Profiler id="test" onRender={callback}>
634
- <Yield renderTime={5} />
635
- </React.unstable_Profiler>,
636
- );
637
- }),
638
- ).toEqual(['Yield:5']);
630
+ renderer.unstable_flushSync(() => {
631
+ renderer.update(
632
+ <React.unstable_Profiler id="test" onRender={callback}>
633
+ <Yield renderTime={5} />
634
+ </React.unstable_Profiler>,
635
+ );
636
+ });
637
+ expect(ReactTestRenderer.unstable_clearYields()).toEqual(['Yield:5']);
638
639
// The initial work was thrown away in this case,
640
// So the actual and base times should only include the final rendered tree times.
@@ -658,7 +657,7 @@ describe('Profiler', () => {
657
658
const Yield = ({renderTime}) => {
659
advanceTimeBy(renderTime);
661
- renderer.unstable_yield('Yield:' + renderTime);
660
+ ReactTestRenderer.unstable_yield('Yield:' + renderTime);
661
return null;
662
};
663
@@ -714,15 +713,14 @@ describe('Profiler', () => {
713
714
// Interrupt with higher priority work.
715
// The interrupted work simulates an additional 11ms of time.
717
- expect(
718
- renderer.unstable_flushSync(() => {
719
- renderer.update(
720
- <React.unstable_Profiler id="test" onRender={callback}>
721
- <Yield renderTime={11} />
722
- </React.unstable_Profiler>,
723
- );
724
- }),
725
- ).toEqual(['Yield:11']);
716
+ renderer.unstable_flushSync(() => {
717
+ renderer.update(
718
+ <React.unstable_Profiler id="test" onRender={callback}>
719
+ <Yield renderTime={11} />
720
+ </React.unstable_Profiler>,
721
+ );
722
+ });
723
+ expect(ReactTestRenderer.unstable_clearYields()).toEqual(['Yield:11']);
724
725
// The actual time should include only the most recent render,
726
// Because this lets us avoid a lot of commit phase reset complexity.
@@ -744,7 +742,7 @@ describe('Profiler', () => {
742
743
const Yield = ({renderTime}) => {
744
advanceTimeBy(renderTime);
747
- renderer.unstable_yield('Yield:' + renderTime);
745
+ ReactTestRenderer.unstable_yield('Yield:' + renderTime);
746
return null;
747
};
748
@@ -754,7 +752,9 @@ describe('Profiler', () => {
752
render() {
753
first = this;
754
advanceTimeBy(this.state.renderTime);
757
- renderer.unstable_yield('FirstComponent:' + this.state.renderTime);
755
+ ReactTestRenderer.unstable_yield(
756
+ 'FirstComponent:' + this.state.renderTime,
757
+ );
758
return <Yield renderTime={4} />;
759
}
760
}
@@ -764,7 +764,9 @@ describe('Profiler', () => {
764
render() {
765
second = this;
766
advanceTimeBy(this.state.renderTime);
767
- renderer.unstable_yield('SecondComponent:' + this.state.renderTime);
767
+ ReactTestRenderer.unstable_yield(
768
+ 'SecondComponent:' + this.state.renderTime,
769
+ );
770
return <Yield renderTime={7} />;
771
}
772
}
@@ -812,9 +814,11 @@ describe('Profiler', () => {
814
815
// Interrupt with higher priority work.
816
// This simulates a total of 37ms of actual render time.
815
- expect(
816
- renderer.unstable_flushSync(() => second.setState({renderTime: 30})),
817
- ).toEqual(['SecondComponent:30', 'Yield:7']);
817
+ renderer.unstable_flushSync(() => second.setState({renderTime: 30}));
818
+ expect(ReactTestRenderer.unstable_clearYields()).toEqual([
819
+ 'SecondComponent:30',
820
+ 'Yield:7',
821
+ ]);
822
823
// The actual time should include only the most recent render (37ms),
824
// Because this lets us avoid a lot of commit phase reset complexity.