How to correctly set up Cypress 10, Vue2, Vuetify, Composition API for component testing?

Question

The guide is quite confusing and obviously not correct when trying to set up Cypress 10 for component testing with Vue2 and Vuetify with composition API. There's lots of errors of unknown tags, things returned from setup() aren't accessible, spread operators where there shouldn't be, imports that don't work etc. What's the correct way to set things up so testing works?

Answer 1

You need to set up Vuetify as regular, to the global Vue object. Then in the mount you need to give the Vuetify object to the mount function so it can be found by the components. When using Composition API that also needs to be set up regularly to the global instance (unlike Vuetify it also works in the local instance, if you want).

Then mount the component inside a v-appso it should work properly and pass arugments around.

So component.ts file will include this:

import { mount } from 'cypress/vue2'
import Vuetify from 'vuetify'
import VueCompositionAPI from '@vue/composition-api';
import Vue from 'vue'
import { VApp } from 'vuetify/lib/components/VApp';

Vue.use(Vuetify);
Vue.use(VueCompositionAPI);

Cypress.Commands.add('mount', (component, args) => {
    args.vuetify = new Vuetify(yourVuetifyOptions);

    return mount({ render: (h) => h(VApp, [h(component, args)]) }, args);
})

When using the mount just do:

cy.mount(myComponent, { props: {someProp: 123 } });

If you need to set up plugins for the local Vue instance in the test they need to be set in args.extensions.plugins, the guide seems to mention globals but that is incorrect.

cy.mount(myComponent, { props: {someProp: 123 }, extensions: { plugins: [MyPlugin] } });

Note that I'm using args for both settings parameters for mount and also for the component, if needed those two can be separated. But there shouldn't be much clashing of properties and attributes so this works.

Also the props/attributes/etc for the component must be given as they're given to createElement, not mount (so props instead of propsData etc).