I am using Cypress to component test my Vue app. Following the code example at https://docs.cypress.io/guides/component-testing/vue/examples#Replicating-Plugins produces several errors, listed below:
Argument of type '(this: Context, component:
ComponentOptionsWithObjectProps<Readonly<ComponentPropsOptions<Data>>, unknown, {},
ComputedOptions, Record<string, Function>, ... 7 more ..., { ...; } | {}>, options?:
MountingOptions<...> | undefined) => Chainable<...>' is not assignable to parameter of type
'CommandFn<"mount">'.
Type 'Chainable<{ wrapper: VueWrapper<ComponentPublicInstance<{ [x: number]: unknown; } & {
readonly length?: number | Prop<unknown, unknown> | null | undefined; readonly concat?:
Prop<unknown, unknown> | { (...items: ConcatArray<string>[]): string[]; (...items: (string |
ConcatArray<...>)[]): string[]; } | null | undefin...' is not assignable to type 'void |
Chainable<{ wrapper:
VueWrapper<ComponentPublicInstance<ExtractPropTypes<Readonly<ComponentPropsOptions<Data>>>,
unknown, {}, ComputedOptions, ... 6 more ..., {}>>; component: ComponentPublicInstance<...>;
}>'.
Property 'global' does not exist on type '[options?: MountingOptions<{ [x: number]: unknown; }
& { readonly length?: number | Prop<unknown, unknown> | null | undefined; readonly concat?:
Prop<unknown, unknown> | { (...items: ConcatArray<string>[]): string[]; (...items: (string |
ConcatArray<...>)[]): string[]; } | null | undefined; ... 12 more ...; toLocale...'.
Cannot find name 'Vapp'.
No overload matches this call.
The last overload gave the following error.
I am using TypeScript. Can someone please provide me with a working code snippet. My code is as follows:
import { createPinia } from "pinia";
import i18n from "../../src/locales/i18n";
import { mount } from "cypress/vue";
import { h } from "vue";
declare global {
namespace Cypress {
interface Chainable {
mount: typeof mount;
}
}
}
Cypress.Commands.add("mount", (component, ...args) => {
args.global = args.global || {};
args.global.plugins = args.global.plugins || [];
args.global.plugins.push(createPinia());
args.global.plugins.push(i18n);
return mount(() => {
return h(Vapp, {}, component)
}, ...args);
});
Does anyone know how to fix this? And how would I call this mount function when used in tests?
For anyone finding this questing, the answer of user14131782 makes that your agrs won't we passed down through. I followed the Vue section of the Cypress docs on how to load Pinia stores, they have an error.
After reading the Vue section of API on the mount command I found the solution that also passes the args. So for any one ending up here, you can load your Pinia store in Cypress using this code, and it will also pass the args.
Cypress.Commands.add('mount', (component, options = {}) => {
// Setup options object
options.global = options.global || {}
options.global.stubs = options.global.stubs || {}
options.global.stubs['transition'] = false
options.global.components = options.global.components || {}
options.global.plugins = options.global.plugins || []
/* Add any global plugins */
options.global.plugins.push({
install(app) {
app.use(createPinia());
},
});
return mount(component, options)
})