如何正确设置 Cypress 10、Vue2、Vuetify、Composition API 进行组件测试？

Question

当尝试使用 Vue2 和 Vuetify 使用组合 API 设置 Cypress 10 进行组件测试时，该指南非常令人困惑，并且显然不正确。有很多未知标签的错误，从setup()不可访问的返回的东西，不应该存在的传播运算符，不起作用的导入等等。设置以便测试有效的正确方法是什么？

Answer 1

您需要像常规一样将 Vuetify 设置为全局 Vue 对象。然后在挂载中您需要将 Vuetify 对象提供给mount，以便组件可以找到它。使用 Composition API 时，还需要定期设置全局实例（与 Vuetify 不同，如果需要，它也可以在本地实例中工作）。

然后将组件安装在 a 内v-app，以便它可以正常工作并传递参数。

所以component.ts文件将包含以下内容：

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);
})

使用时mount只需执行以下操作：

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

如果您需要在测试中为本地 Vue 实例设置插件args.extensions.plugins，则需要在 中设置它们，指南似乎提到了globals，但这是不正确的。

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

请注意，我正在使用组件args的设置参数mount和组件的设置参数，如果需要，可以将这两个参数分开。但属性和属性不应该有太多冲突，所以这是可行的。

此外，组件的 props/attributes/etc 必须按照给定的方式给出createElement，而不是mount（所以 props 而不是 propsData 等）。