|
7 | 7 | * @flow |
8 | 8 | */ |
9 | 9 |
|
| 10 | +import semver from 'semver'; |
| 11 | + |
10 | 12 | import {getVersionedRenderImplementation} from './utils'; |
| 13 | +import {ReactVersion} from '../../../../ReactVersions'; |
| 14 | + |
| 15 | +const ReactVersionTestingAgainst = process.env.REACT_VERSION || ReactVersion; |
11 | 16 |
|
12 | 17 | describe('Store', () => { |
13 | 18 | let React; |
@@ -3143,8 +3148,9 @@ describe('Store', () => { |
3143 | 3148 | expect(store).toMatchInlineSnapshot(``); |
3144 | 3149 | }); |
3145 | 3150 |
|
3146 | | - // @reactVersion >= 17.0 |
3147 | | - it('should track suspended by in filtered fallback', async () => { |
| 3151 | + // Can't suspend the root in React 17. |
| 3152 | + // @reactVersion >= 18.0 |
| 3153 | + it('should track suspended-by in filtered fallback suspending the root', async () => { |
3148 | 3154 | function IgnoreMe({promise}) { |
3149 | 3155 | return readValue(promise); |
3150 | 3156 | } |
@@ -3196,6 +3202,91 @@ describe('Store', () => { |
3196 | 3202 | `); |
3197 | 3203 | }); |
3198 | 3204 |
|
| 3205 | + // @reactVersion >= 17.0 |
| 3206 | + it('should track suspended-by in filtered fallback', async () => { |
| 3207 | + function IgnoreMe({promise}) { |
| 3208 | + return readValue(promise); |
| 3209 | + } |
| 3210 | + |
| 3211 | + function Component({promise}) { |
| 3212 | + if (promise) { |
| 3213 | + return readValue(promise); |
| 3214 | + } |
| 3215 | + return null; |
| 3216 | + } |
| 3217 | + |
| 3218 | + await actAsync( |
| 3219 | + async () => |
| 3220 | + (store.componentFilters = [createDisplayNameFilter('^IgnoreMe', true)]), |
| 3221 | + ); |
| 3222 | + |
| 3223 | + let resolveFallback; |
| 3224 | + const fallbackPromise = new Promise(resolve => { |
| 3225 | + resolveFallback = resolve; |
| 3226 | + }); |
| 3227 | + let resolveContent; |
| 3228 | + const contentPromise = new Promise(resolve => { |
| 3229 | + resolveContent = resolve; |
| 3230 | + }); |
| 3231 | + |
| 3232 | + await actAsync(() => |
| 3233 | + render( |
| 3234 | + <React.Suspense |
| 3235 | + fallback={<Component key="root-fallback" />} |
| 3236 | + name="root"> |
| 3237 | + <React.Suspense |
| 3238 | + name="main" |
| 3239 | + fallback={<IgnoreMe promise={fallbackPromise} />}> |
| 3240 | + <Component promise={contentPromise} /> |
| 3241 | + </React.Suspense> |
| 3242 | + </React.Suspense>, |
| 3243 | + ), |
| 3244 | + ); |
| 3245 | + |
| 3246 | + if (semver.lt(ReactVersionTestingAgainst, '18.0.0')) { |
| 3247 | + // React 17 commits partial trees hidden which causes the "main" |
| 3248 | + // Suspense boundary to be included. |
| 3249 | + // React 18 and upwards excluded partial tree entirely. |
| 3250 | + expect(store).toMatchInlineSnapshot(` |
| 3251 | + [root] |
| 3252 | + ▾ <Suspense name="root"> |
| 3253 | + <Component key="root-fallback"> |
| 3254 | + [suspense-root] rects={null} |
| 3255 | + <Suspense name="root" rects={null}> |
| 3256 | + <Suspense name="main" rects={null}> |
| 3257 | + `); |
| 3258 | + } else { |
| 3259 | + expect(store).toMatchInlineSnapshot(` |
| 3260 | + [root] |
| 3261 | + ▾ <Suspense name="root"> |
| 3262 | + <Component key="root-fallback"> |
| 3263 | + [suspense-root] rects={null} |
| 3264 | + <Suspense name="root" rects={null}> |
| 3265 | + `); |
| 3266 | + } |
| 3267 | + |
| 3268 | + await actAsync(() => resolveFallback('loading')); |
| 3269 | + expect(store).toMatchInlineSnapshot(` |
| 3270 | + [root] |
| 3271 | + ▾ <Suspense name="root"> |
| 3272 | + <Suspense name="main"> |
| 3273 | + [suspense-root] rects={null} |
| 3274 | + <Suspense name="root" rects={null}> |
| 3275 | + <Suspense name="main" rects={null}> |
| 3276 | + `); |
| 3277 | + |
| 3278 | + await actAsync(() => resolveContent('content')); |
| 3279 | + expect(store).toMatchInlineSnapshot(` |
| 3280 | + [root] |
| 3281 | + ▾ <Suspense name="root"> |
| 3282 | + ▾ <Suspense name="main"> |
| 3283 | + <Component> |
| 3284 | + [suspense-root] rects={null} |
| 3285 | + <Suspense name="root" rects={null}> |
| 3286 | + <Suspense name="main" rects={null}> |
| 3287 | + `); |
| 3288 | + }); |
| 3289 | + |
3199 | 3290 | // @reactVersion >= 19 |
3200 | 3291 | it('should keep suspended boundaries in the Suspense tree but not hidden Activity', async () => { |
3201 | 3292 | const Activity = React.Activity || React.unstable_Activity; |
|
0 commit comments