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

Question

我正在使用 component testing in Cypress on Vue. My project components use the vuetify plugin。

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

import DebuggingTemporaryComponent from "./DebuggingTemporaryComponent";
import {mount} from "@cypress/vue";
import vuetify from '../../resources/js/vuetify'

it('mounts the component with vuetify', () => {
    
    mount(DebuggingTemporaryComponent,{vuetify,})

    cy.contains('Hello World') ✅

}

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

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

import {mount as cypressMount} from '@cypress/vue'

export function mount (component){
    return cypressMount(<v-app>component</v-app>, prepareComponent(props, options))
}

任何人都可以帮助我下一步该去哪里吗？

Answer 1

你得到一个错误，因为你正在尝试使用 JSX，它确实 possible with Vue 但你需要配置额外的构建插件。

使用 render function

可以在没有 JSX 的情况下实现相同的效果

import {mount} from "@cypress/vue";
import vuetify from '../../resources/js/vuetify'
import { VApp } from 'vuetify/lib/components'

function mountComponentWithVuetify(componentToMount, options = {}) 
{
  return mount({
    render(h) {
      return h(VApp, [h(componentToMount)])
    }
  },
  { 
    vuetify, 
    ...options,
  })
}

Answer 2

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

要测试的组件 - Button.vue

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

测试

import Button from "./Button";
import {mount} from "@cypress/vue";
import vuetify from '../plugins/vuetify'
import { VApp } from 'vuetify/lib/components'

const WrapperComp = {
  template: `
    <v-app>
      <Button />
    </v-app>
  `,
  components: {
    VApp,
    Button
  }
}

it('mounts the component with vuetify', () => {

  mount(WrapperComp, { vuetify })

  const lightRed = 'rgb(229, 115, 115)'
  cy.contains('button', 'Click Me')        // ✅
    .should('have.css', 'background-color', lightRed)  // fails if no <v-app> used above
})

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

How can I wrap a vue component during cypress component testing?

vuejs2

vuetify.js

cypress

cypress-component-test-runner