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.45cypress
: 12.4.0typescript
: 4.9.4