@@ -1262,6 +1262,63 @@ describe('e2e: Transition', () => {
1262
1262
} ,
1263
1263
E2E_TIMEOUT ,
1264
1264
)
1265
+
1266
+ test (
1267
+ 'w/ KeepAlive + unmount innerChild' ,
1268
+ async ( ) => {
1269
+ const unmountSpy = vi . fn ( )
1270
+ await page ( ) . exposeFunction ( 'unmountSpy' , unmountSpy )
1271
+ await page ( ) . evaluate ( ( ) => {
1272
+ const { unmountSpy } = window as any
1273
+ const { createApp, ref, h, onUnmounted } = ( window as any ) . Vue
1274
+ createApp ( {
1275
+ template : `
1276
+ <div id="container">
1277
+ <transition mode="out-in">
1278
+ <KeepAlive :include="includeRef">
1279
+ <TrueBranch v-if="toggle"></TrueBranch>
1280
+ </KeepAlive>
1281
+ </transition>
1282
+ </div>
1283
+ <button id="toggleBtn" @click="click">button</button>
1284
+ ` ,
1285
+ components : {
1286
+ TrueBranch : {
1287
+ name : 'TrueBranch' ,
1288
+ setup ( ) {
1289
+ onUnmounted ( unmountSpy )
1290
+ const count = ref ( 0 )
1291
+ return ( ) => h ( 'div' , count . value )
1292
+ } ,
1293
+ } ,
1294
+ } ,
1295
+ setup : ( ) => {
1296
+ const includeRef = ref ( [ 'TrueBranch' ] )
1297
+ const toggle = ref ( true )
1298
+ const click = ( ) => {
1299
+ toggle . value = ! toggle . value
1300
+ if ( toggle . value ) {
1301
+ includeRef . value = [ 'TrueBranch' ]
1302
+ } else {
1303
+ includeRef . value = [ ]
1304
+ }
1305
+ }
1306
+ return { toggle, click, unmountSpy, includeRef }
1307
+ } ,
1308
+ } ) . mount ( '#app' )
1309
+ } )
1310
+
1311
+ await transitionFinish ( )
1312
+ expect ( await html ( '#container' ) ) . toBe ( '<div>0</div>' )
1313
+
1314
+ await click ( '#toggleBtn' )
1315
+
1316
+ await transitionFinish ( )
1317
+ expect ( await html ( '#container' ) ) . toBe ( '<!--v-if-->' )
1318
+ expect ( unmountSpy ) . toBeCalledTimes ( 1 )
1319
+ } ,
1320
+ E2E_TIMEOUT ,
1321
+ )
1265
1322
} )
1266
1323
1267
1324
describe ( 'transition with Suspense' , ( ) => {
0 commit comments