组件测试：cypress 与 vue、vite 和 vuetify

Question

我正在尝试为我的 vuejs 应用程序运行组件测试。我按照 cypress 配置向导配置组件测试配置了我的 cypress 服务器。

我想通过安装组件来运行基本测试：

import ProgressCircular from './ProgressCircular.vue'
describe('<ProgressCircular />', () => {
it('renders', () => {
cy.mount(ProgressCircular)
})

})

我遇到了这个错误：

[Vuetify] 找不到默认实例

我的 vuetify 配置：

import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import 'vuetify/lib/util/colors'

const vuetify = createVuetify({
  icons: {
    defaultSet: 'mdi',
    sets: {},
  },
})

export default vuetify

注意：

我的应用程序运行并成功构建。

我在用着：

vite 4、Vue 3、Vuetify 3、赛普拉斯 12.5.1

Answer 1

在 Vue 应用程序中，您需要注册插件和全局组件，以便您的应用程序能够使用它们，这在使用 Cypress 时也适用。

您的插件和全局组件可能会在“src/main.ts”或其他地方注册。对于 Vuetify 来说，这看起来像这样：

import vuetify from "@/plugins/vuetify";
import App from "@/App.vue";
const app = createApp(App);
// Use plugins
app.use(vuetify);

要将其添加到 cypress，您需要修改 mount 命令。在以下示例中，安装组件时会添加 vuetify 插件：

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(vuetify); //import vuetify from you vuetify config
  },
});

return mount(component, options);
});

进一步阅读 mount 命令：https://docs.cypress.io/api/commands/mount

我正在使用赛普拉斯 v12。默认情况下，mount 命令的设置位于 cypress/support/components.ts 中