[ Vue ] TypeScript error on props when passed to mount

[jon-karlsen]

Setup based on this example produces the following error for each occurrence props being passed to mount:

Type '{ batchOpsConfig: __Config; }' is not assignable to type 'VNodeProps & { __v_isVNode?: undefined; [Symbol.iterator]?: undefined; } & Record<string, any> & { [x: number]: unknown; } & { readonly length?: number | Prop<unknown, unknown> | null | undefined; ... 22 more ...; toLocaleString?: string | undefined; } & AllowedComponentProps & ComponentCustomProps'.
  Type '{ batchOpsConfig: __Config; }' is not assignable to type '{ readonly length?: number | Prop<unknown, unknown> | null | undefined; readonly concat?: Prop<unknown, unknown> | { (...items: ConcatArray<string>[]): string[]; (...items: (string | ConcatArray<string>)[]): string[]; } | null | undefined; ... 21 more ...; toLocaleString?: string | undefined; }'.
    Types of property 'toString' are incompatible.
      Type '() => string' is not assignable to type 'string'.

// example.cy.ts
describe( '<HeaderLinkComponent />' , () => {

    it( 'renders' , () => {
        const displayText = 'TestLink'
            , linkPath    = '/test/path'

        cy.mount( HeaderLinkComponent 
                , { 
                    props : {
                        displayText 
                      , linkPath 
                    } 
                } 
            )

        cy.contains( displayText )

        cy.get( 'a' )
          .invoke( 'attr' , 'href' )
          .should( 'eq' , linkPath )
    } )

} )

While all relevant tests do work, and I can suppress the error using //@ts-ignore, I'd obviously prefer to type mount properly. I can't find any information on how to do so in the docs or any relevant issues to work off of. I've messed around a little with various types and combinations thereof, but it's not making me much the wiser--any ideas on how to go about fixing this?

// component.ts

type MountParams  = Parameters<typeof mount>
type OptionsParam = MountParams[ 1 ] 
                    & { router? : Router }


declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
    namespace Cypress {
        interface Chainable {
           /**
            *      Helper mount function for Vue Components
            * 
            *      @param component    Vue Component or JSX Element to mount
            *      @param options      Options passed to Vue Test Utils
            * 
            */
            mount( component : any , options? : OptionsParam ) : Chainable<any>
        }
    }
}


Cypress.Commands.add( 'mount' , ( component : any , options : OptionsParam = {} ) => {
    options.global         = options.global         || {}
    options.global.plugins = options.global.plugins || []
  
    if ( !options.router ) 
        options.router = createRouter( {
            routes  : routes
          , history : createMemoryHistory()
            } )

    options.global.plugins.push( {
        install( app ) {
            app.use( options.router as never )
            app.use( i18n )
            app.use( FloatingVue )
            app.use( Toast, toastOpt )
            }
        } )
  
    return mount( component , options )

    } )

Using:

• vue: 3.2.45
• cypress : 12.4.0