feat: adding stubbing for keep-alive (#1889)

Author: laddi-netapp

src/vnodeTransformers/stubComponentsTransformer.ts

@@ -4,6 +4,7 @@ import {
   TransitionGroup,
   BaseTransition,
   Teleport,
+  KeepAlive,
   h,
   defineComponent,
   VNodeTypes,
@@ -31,7 +32,7 @@ export type CustomCreateStub = (params: {
 
 interface StubOptions {
   name: string
-  type?: VNodeTypes | typeof Teleport
+  type?: VNodeTypes | typeof Teleport | typeof KeepAlive
   renderStubDefaultSlot?: boolean
 }
 
@@ -124,6 +125,17 @@ 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
+
+      return createStub({
+        name: 'keep-alive',
+        type,
+        renderStubDefaultSlot: true
+      })
+    }
+
     // stub transition by default via config.global.stubs
     if (
       (type === Transition || (type as any) === BaseTransition) &&

src/vnodeTransformers/util.ts

@@ -21,6 +21,7 @@ export type VTUVNodeTypeTransformer = (
 ) => VNodeTransformerInputComponentType
 
 const isTeleport = (type: any): boolean => type.__isTeleport
+const isKeepAlive = (type: any): boolean => type.__isKeepAlive
 
 export const createVNodeTransformer = ({
   transformers
@@ -41,9 +42,9 @@ export const createVNodeTransformer = ({
 
     const cachedTransformation = transformationCache.get(originalType)
     if (cachedTransformation) {
-      // https://github.com/vuejs/test-utils/issues/1829
-      // Teleport should return child nodes as a function
-      if (isTeleport(originalType)) {
+      // https://github.com/vuejs/test-utils/issues/1829 & https://github.com/vuejs/test-utils/issues/1888
+      // Teleport/KeepAlive should return child nodes as a function
+      if (isTeleport(originalType) || isKeepAlive(originalType)) {
         return [cachedTransformation, props, () => children, ...restVNodeArgs]
       }
       return [cachedTransformation, props, children, ...restVNodeArgs]
@@ -60,9 +61,9 @@ export const createVNodeTransformer = ({
       transformationCache.set(originalType, transformedType)
 
       registerStub({ source: originalType, stub: transformedType })
-      // https://github.com/vuejs/test-utils/issues/1829
-      // Teleport should return child nodes as a function
-      if (isTeleport(originalType)) {
+      // https://github.com/vuejs/test-utils/issues/1829 & https://github.com/vuejs/test-utils/issues/1888
+      // Teleport/KeepAlive should return child nodes as a function
+      if (isTeleport(originalType) || isKeepAlive(originalType)) {
         return [transformedType, props, () => children, ...restVNodeArgs]
       }
     }

tests/mountingOptions/global.stubs.spec.ts

@@ -553,6 +553,56 @@ describe('mounting options: stubs', () => {
     })
   })
 
+  describe('keep-alive', () => {
+    it('will omit the keep-alive tag by default', () => {
+      const Comp = {
+        template: `<keep-alive><div id="content" /></keep-alive>`
+      }
+      const wrapper = mount(Comp)
+
+      expect(wrapper.html()).toBe('<div id="content"></div>')
+    })
+
+    it('opts in to stubbing keep-alive ', () => {
+      const spy = vi.spyOn(console, 'warn')
+      const Comp = {
+        template: `<keep-alive><div id="content" /></keep-alive>`
+      }
+      const wrapper = mount(Comp, {
+        global: {
+          stubs: {
+            'keep-alive': 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>`
+      }
+      const wrapper = mount(Comp, {
+        shallow: true,
+        global: {
+          stubs: {
+            'keep-alive': false
+          }
+        }
+      })
+
+      expect(wrapper.html()).toBe('<div id="content"></div>')
+    })
+  })
+
   it('stubs component by key prior before name', () => {
     const MyComponent = defineComponent({
       name: 'MyComponent',