ShallowMount: What a type have a props?

[PatrykMaternicki]

I created help function to create mock component: It's look like this:

import { shallowMount } from '@vue/test-utils'
import { VNodeProps } from 'vue'

export const useComponentMock = <Props extends VNodeProps>(component: unknown) => {
  
  function setSlot(key: string, valueForSlot?: string) {
    let value = '<div>Test</div>'
  
    if(typeof valueForSlot === 'string') {
      value = valueForSlot
    }
  
    return {
      [key]: value,
    }
  }
  
  const createMockComponent = (
    props: Props,
    slotName?: string,
    valueForSlot?: string,
    ) => {
    const wrapper = shallowMount(component , {
      slots: {
        ...slotName && setSlot(slotName, valueForSlot),
      },
      props,
    })

    return wrapper
  }

  return {
    createMockComponent,
  }
}

Usage:
const { createMockComponent } = useMockComponent(YourComponent)

It works. But typescript show me error like:
"Type YourProps has no properties in common with type 'VNodeProps'.

Any idea how to resolve this problem or what a type should be here?

[cexbrayat]

Hi @PatrykMaternicki
It's hard to say like this.
Can you provide us a small repro online using https://stackblitz.com/github/vuejs/create-vue-templates/tree/main/typescript-vitest?file=src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts ?

It only takes a few minutes, and we'll be able to take a look

[PatrykMaternicki]

Hi. @cexbrayat Sure I do.

https://stackblitz.com/edit/github-vp1tpe?file=src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts

[cexbrayat]

Ok I understand better now. The test doesn't work, but I'll focus on the types.
You can use export const useComponentMock = <Props extends Record<string, any>>( and it should compile.

Note that by using this composable, you lose some type safety: the mount function of VTU is a bit clever and checks the actual types of the props of the component. But as you can see here, it is quite complicated to handle all use-cases if you want to do the same.

[PatrykMaternicki]

Yeah, I tried this method. It works. However, if I use Record some types has missing ergo Typescript doesn't show me any tips what object I can use in this function., but what you said before "its kinda quite complicated". Agreed. But I tried use this type from vue-runtime ,but typescript said to me - my props generic is not a type VNodeProps . So propably would be easier make copy&paste than create composable.

Thanks for help.