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

【问题标题】：How to correctly set up Cypress 10, Vue2, Vuetify, Composition API for component testing?如何正确设置 Cypress 10、Vue2、Vuetify、Composition API 进行组件测试？
【发布时间】：2022-06-16 06:19:31
【问题描述】：

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

【问题讨论】：

标签： vuejs2 vuetify.js cypress vue-composition-api cypress-component-test-runner

【解决方案1】：

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

然后将组件安装在 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 等）。

【讨论】：