1

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?

1 Answer 1

6

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).

Sign up to request clarification or add additional context in comments.

1 Comment

Probably obvious to a lot of people, but I spent way too many days trying to get rid of Cannot read properties of undefined (reading '_t') what I ended up doing was copying the above, import i18n from '../../src/lang/lang'; Cypress.Commands.add('mount', (component, options = {}) => { ... options.i18n = options.i18n || i18n ... })

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.