如何在 cypress 组件测试期间包装 vue 组件？

Question

我正在 Vue 上的 Cypress 中使用组件测试。我的项目组件使用vuetify 插件。

\n

目前，测试的组件使用 Vuetify 加载：

\n

import DebuggingTemporaryComponent from "./DebuggingTemporaryComponent";\nimport {mount} from "@cypress/vue";\nimport vuetify from \'../../resources/js/vuetify\'\n\nit(\'mounts the component with vuetify\', () => {\n    \n    mount(DebuggingTemporaryComponent,{vuetify,})\n\n    cy.contains(\'Hello World\') \xe2\x9c\x85\n\n}\n

\n

<v-app>但是，样式无法正常运行，因为 Vuetify 组件需要在页面上至少包装一次。在组件测试中，这种情况不会发生。

\n

我需要按照React 等效文档中的建议自定义包装器。然而，每当我尝试创建自己的函数来执行此操作时，我都会收到一条错误消息，指出不存在适当的 webpack 加载器。Vue 加载器已经存在并正在工作。

\n

import {mount as cypressMount} from \'@cypress/vue\'\n\nexport function mount (component){\n    return cypressMount(<v-app>component</v-app>, prepareComponent(props, options))\n}\n\n

\n

谁能帮助我下一步该做什么？

\n

Answer 1

您可以在测试中构造一个简单的包装器，例如

\n

要测试的组件 - Button.vue

\n

<template>\n  <v-btn color="red lighten-2" dark>\n    Click Me\n  </v-btn>\n</template>\n

\n

测试

\n

import Button from "./Button";\nimport {mount} from "@cypress/vue";\nimport vuetify from \'../plugins/vuetify\'\nimport { VApp } from \'vuetify/lib/components\'\n\nconst WrapperComp = {\n  template: `\n    <v-app>\n      <Button />\n    </v-app>\n  `,\n  components: {\n    VApp,\n    Button\n  }\n}\n\nit(\'mounts the component with vuetify\', () => {\n\n  mount(WrapperComp, { vuetify })\n\n  const lightRed = \'rgb(229, 115, 115)\'\n  cy.contains(\'button\', \'Click Me\')        // \xe2\x9c\x85\n    .should(\'have.css\', \'background-color\', lightRed)  // fails if no <v-app> used above\n})\n

\n