Run persistent tests in more configurations in CI (#21880)
I noticed that `enableSuspenseLayoutEffectSemantics` is not fully implemented in persistent mode. I believe this was an oversight because we don't have a CI job that runs tests in persistent mode and with experimental flags enabled. This adds additional test configurations to the CI job so we don't miss stuff like this again. It doesn't fix the failing tests — I'll address that separately.
Andrew Clark committed
Jul 14, 2021 at 11:40 UTC
81346764bb62dc3fb04ccbf7f507cd390a249840
4 files changed
+27
.circleci/config.yml
+1
@@ -456,6 +456,7 @@ workflows:
456
457
# TODO: Test more persistent configurations?
458
- '-r=stable --env=development --persistent'
459
+ - '-r=experimental --env=development --persistent'
460
- yarn_build_combined:
461
requires:
462
- setup
packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
+2
@@ -220,6 +220,7 @@ describe('ReactOffscreen', () => {
220
221
// @gate experimental || www
222
// @gate enableSuspenseLayoutEffectSemantics
223
+ // @gate !persistent
224
it('mounts/unmounts layout effects when visibility changes (starting visible)', async () => {
225
function Child({text}) {
226
useLayoutEffect(() => {
@@ -270,6 +271,7 @@ describe('ReactOffscreen', () => {
271
272
// @gate experimental || www
273
// @gate enableSuspenseLayoutEffectSemantics
274
+ // @gate !persistent
275
it('mounts/unmounts layout effects when visibility changes (starting hidden)', async () => {
276
function Child({text}) {
277
useLayoutEffect(() => {
packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
+22
@@ -17,6 +17,8 @@ let caches;
17
let seededCache;
18
let ErrorBoundary;
19
20
+// TODO: These tests don't pass in persistent mode yet. Need to implement.
21
+
22
describe('ReactSuspenseEffectsSemantics', () => {
23
beforeEach(() => {
24
jest.resetModules();
@@ -565,6 +567,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
567
568
// @gate enableSuspenseLayoutEffectSemantics
569
// @gate enableCache
570
+ // @gate !persistent
571
it('should be destroyed and recreated for function components', async () => {
572
function App({children = null}) {
573
Scheduler.unstable_yieldValue('App render');
@@ -694,6 +697,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
697
698
// @gate enableSuspenseLayoutEffectSemantics
699
// @gate enableCache
700
+ // @gate !persistent
701
it('should be destroyed and recreated for class components', async () => {
702
class ClassText extends React.Component {
703
componentDidMount() {
@@ -839,6 +843,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
843
844
// @gate enableSuspenseLayoutEffectSemantics
845
// @gate enableCache
846
+ // @gate !persistent
847
it('should be destroyed and recreated when nested below host components', async () => {
848
function App({children = null}) {
849
Scheduler.unstable_yieldValue('App render');
@@ -949,6 +954,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
954
955
// @gate enableSuspenseLayoutEffectSemantics
956
// @gate enableCache
957
+ // @gate !persistent
958
it('should be destroyed and recreated even if there is a bailout because of memoization', async () => {
959
const MemoizedText = React.memo(Text, () => true);
960
@@ -1065,6 +1071,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
1071
1072
// @gate enableSuspenseLayoutEffectSemantics
1073
// @gate enableCache
1074
+ // @gate !persistent
1075
it('should respect nested suspense boundaries', async () => {
1076
function App({innerChildren = null, outerChildren = null}) {
1077
return (
@@ -1288,6 +1295,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
1295
1296
// @gate enableSuspenseLayoutEffectSemantics
1297
// @gate enableCache
1298
+ // @gate !persistent
1299
it('should show nested host nodes if multiple boundaries resolve at the same time', async () => {
1300
function App({innerChildren = null, outerChildren = null}) {
1301
return (
@@ -1398,6 +1406,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
1406
1407
// @gate enableSuspenseLayoutEffectSemantics
1408
// @gate enableCache
1409
+ // @gate !persistent
1410
it('should be cleaned up inside of a fallback that suspends', async () => {
1411
function App({fallbackChildren = null, outerChildren = null}) {
1412
return (
@@ -1541,6 +1550,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
1550
1551
// @gate enableSuspenseLayoutEffectSemantics
1552
// @gate enableCache
1553
+ // @gate !persistent
1554
it('should be cleaned up inside of a fallback that suspends (alternate)', async () => {
1555
function App({fallbackChildren = null, outerChildren = null}) {
1556
return (
@@ -1661,6 +1671,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
1671
1672
// @gate enableSuspenseLayoutEffectSemantics
1673
// @gate enableCache
1674
+ // @gate !persistent
1675
it('should be cleaned up deeper inside of a subtree that suspends', async () => {
1676
function ConditionalSuspense({shouldSuspend}) {
1677
if (shouldSuspend) {
@@ -1744,6 +1755,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
1755
describe('that throw errors', () => {
1756
// @gate enableSuspenseLayoutEffectSemantics
1757
// @gate enableCache
1758
+ // @gate !persistent
1759
it('are properly handled for componentDidMount', async () => {
1760
let componentDidMountShouldThrow = false;
1761
@@ -1883,6 +1895,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
1895
1896
// @gate enableSuspenseLayoutEffectSemantics
1897
// @gate enableCache
1898
+ // @gate !persistent
1899
it('are properly handled for componentWillUnmount', async () => {
1900
class ThrowsInWillUnmount extends React.Component {
1901
componentDidMount() {
@@ -1996,6 +2009,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
2009
2010
// @gate enableSuspenseLayoutEffectSemantics
2011
// @gate enableCache
2012
+ // @gate !persistent
2013
// @gate replayFailedUnitOfWorkWithInvokeGuardedCallback
2014
it('are properly handled for layout effect creation', async () => {
2015
let useLayoutEffectShouldThrow = false;
@@ -2136,6 +2150,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
2150
2151
// @gate enableSuspenseLayoutEffectSemantics
2152
// @gate enableCache
2153
+ // @gate !persistent
2154
// @gate replayFailedUnitOfWorkWithInvokeGuardedCallback
2155
it('are properly handled for layout effect descruction', async () => {
2156
function ThrowsInLayoutEffectDestroy() {
@@ -2248,6 +2263,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
2263
2264
// @gate enableSuspenseLayoutEffectSemantics
2265
// @gate enableCache
2266
+ // @gate !persistent
2267
it('should be only destroy layout effects once if a tree suspends in multiple places', async () => {
2268
class ClassText extends React.Component {
2269
componentDidMount() {
@@ -2387,6 +2403,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
2403
2404
// @gate enableSuspenseLayoutEffectSemantics
2405
// @gate enableCache
2406
+ // @gate !persistent
2407
it('should be only destroy layout effects once if a component suspends multiple times', async () => {
2408
class ClassText extends React.Component {
2409
componentDidMount() {
@@ -2671,6 +2688,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
2688
2689
// @gate enableSuspenseLayoutEffectSemantics
2690
// @gate enableCache
2691
+ // @gate !persistent
2692
it('should be cleared and reset for host components', async () => {
2693
function App({children}) {
2694
Scheduler.unstable_yieldValue(`App render`);
@@ -2768,6 +2786,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
2786
2787
// @gate enableSuspenseLayoutEffectSemantics
2788
// @gate enableCache
2789
+ // @gate !persistent
2790
it('should be cleared and reset for class components', async () => {
2791
class ClassComponent extends React.Component {
2792
render() {
@@ -2869,6 +2888,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
2888
2889
// @gate enableSuspenseLayoutEffectSemantics
2890
// @gate enableCache
2891
+ // @gate !persistent
2892
it('should be cleared and reset for function components with useImperativeHandle', async () => {
2893
const FunctionComponent = React.forwardRef((props, ref) => {
2894
Scheduler.unstable_yieldValue('FunctionComponent render');
@@ -2974,6 +2994,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
2994
2995
// @gate enableSuspenseLayoutEffectSemantics
2996
// @gate enableCache
2997
+ // @gate !persistent
2998
it('should not reset for user-managed values', async () => {
2999
function RefChecker({forwardedRef}) {
3000
Scheduler.unstable_yieldValue(`RefChecker render`);
@@ -3072,6 +3093,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
3093
describe('that throw errors', () => {
3094
// @gate enableSuspenseLayoutEffectSemantics
3095
// @gate enableCache
3096
+ // @gate !persistent
3097
// @gate replayFailedUnitOfWorkWithInvokeGuardedCallback
3098
it('are properly handled in ref callbacks', async () => {
3099
let useRefCallbackShouldThrow = false;
scripts/jest/TestFlags.js
+2
@@ -42,6 +42,8 @@ const environmentFlags = {
42
// Similarly, should stable imply "classic"?
43
stable: !__EXPERIMENTAL__,
44
45
+ persistent: global.__PERSISTENT__ === true,
46
+
47
// Use this for tests that are known to be broken.
48
FIXME: false,
49