fix: allow to use KeepAlive or keep-alive in stubs (#1892)

* fix: allow to use KeepAlive or keep-alive in stubs

* refactor: use isTeleport/isKeepAlive utils in stubs

Author: cexbrayat

src/vnodeTransformers/stubComponentsTransformer.ts

@@ -1,4 +1,4 @@
-import type { VTUVNodeTypeTransformer } from './util'
+import { isKeepAlive, isTeleport, VTUVNodeTypeTransformer } from './util'
 import {
   Transition,
   TransitionGroup,
@@ -115,7 +115,7 @@ export function createStubComponentsTransformer({
 }: CreateStubComponentsTransformerConfig): VTUVNodeTypeTransformer {
   return function componentsTransformer(type, instance) {
     // stub teleport by default via config.global.stubs
-    if ((type as any) === Teleport && 'teleport' in stubs) {
+    if (isTeleport(type) && 'teleport' in stubs) {
       if (stubs.teleport === false) return type
 
       return createStub({
@@ -125,9 +125,10 @@ export function createStubComponentsTransformer({
       })
     }
 
-    // stub keep-alive by default via config.global.stubs
-    if ((type as any) === KeepAlive && 'keep-alive' in stubs) {
-      if (stubs['keep-alive'] === false) return type
+    // stub keep-alive/KeepAlive by default via config.global.stubs
+    if (isKeepAlive(type) && ('keep-alive' in stubs || 'KeepAlive' in stubs)) {
+      if ('keep-alive' in stubs && stubs['keep-alive'] === false) return type
+      if ('KeepAlive' in stubs && stubs['KeepAlive'] === false) return type
 
       return createStub({
         name: 'keep-alive',

src/vnodeTransformers/util.ts

@@ -20,8 +20,8 @@ export type VTUVNodeTypeTransformer = (
   instance: InstanceArgsType
 ) => VNodeTransformerInputComponentType
 
-const isTeleport = (type: any): boolean => type.__isTeleport
-const isKeepAlive = (type: any): boolean => type.__isKeepAlive
+export const isTeleport = (type: any): boolean => type.__isTeleport
+export const isKeepAlive = (type: any): boolean => type.__isKeepAlive
 
 export const createVNodeTransformer = ({
   transformers

tests/mountingOptions/global.stubs.spec.ts

@@ -563,7 +563,7 @@ describe('mounting options: stubs', () => {
       expect(wrapper.html()).toBe('<div id="content"></div>')
     })
 
-    it('opts in to stubbing keep-alive ', () => {
+    it('opts in to stubbing keep-alive with keep-alive: true', () => {
       const spy = vi.spyOn(console, 'warn')
       const Comp = {
         template: `<keep-alive><div id="content" /></keep-alive>`
@@ -586,6 +586,52 @@ describe('mounting options: stubs', () => {
       expect(spy).not.toHaveBeenCalled()
     })
 
+    it('opts in to stubbing KeepAlive with KeepAlive: true', () => {
+      const spy = vi.spyOn(console, 'warn')
+      const Comp = {
+        template: `<KeepAlive><div id="content" /></KeepAlive>`
+      }
+      const wrapper = mount(Comp, {
+        global: {
+          stubs: {
+            KeepAlive: true
+          }
+        }
+      })
+
+      expect(wrapper.html()).toBe(
+        '<keep-alive-stub>\n' +
+          '  <div id="content"></div>\n' +
+          '</keep-alive-stub>'
+      )
+      // Make sure that we don't have a warning when stubbing keep-alive
+      // https://github.com/vuejs/test-utils/issues/1888
+      expect(spy).not.toHaveBeenCalled()
+    })
+
+    it('opts in to stubbing keep-alive with KeepAlive: true', () => {
+      const spy = vi.spyOn(console, 'warn')
+      const Comp = {
+        template: `<keep-alive><div id="content" /></keep-alive>`
+      }
+      const wrapper = mount(Comp, {
+        global: {
+          stubs: {
+            KeepAlive: true
+          }
+        }
+      })
+
+      expect(wrapper.html()).toBe(
+        '<keep-alive-stub>\n' +
+          '  <div id="content"></div>\n' +
+          '</keep-alive-stub>'
+      )
+      // Make sure that we don't have a warning when stubbing keep-alive
+      // https://github.com/vuejs/test-utils/issues/1888
+      expect(spy).not.toHaveBeenCalled()
+    })
+
     it('does not stub keep-alive with shallow', () => {
       const Comp = {
         template: `<keep-alive><div id="content" /></keep-alive>`